:root{
  --qof-bg: #fff;
  --qof-accent: #ff8c3b;     /* لون الإطار والزر الثابت */
  --qof-btn-bg: #6c5ce7;     /* لون زر اطلب الآن داخل الفورم */
  --qof-btn-mobile-bg: var(--qof-btn-bg);
}

/* بطاقة الفورم */
.qof-card{
  background: var(--qof-bg);
  border: 2px solid rgb(255 140 59 / 22%);
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.qof-card-title{
  background: var(--qof-accent);
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 14px;
}

/* شبكة الحقول */
.qof-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.qof-field label{
  font-size: 13px;
  color: #444;
  display:block;
  margin-bottom: 6px;
}
.qof-field input[type="text"],
.qof-field input[type="tel"],
.qof-field select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e2e7;
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: box-shadow .2s, border-color .2s;
}
.qof-field input:focus,
.qof-field select:focus{
  border-color: #c5c5ff;
  box-shadow: 0 0 0 3px rgba(108,92,231,.12);
}

/* سواش/تشيب للون/الحجم */
.qof-swatches, .qof-options{ display:flex; flex-wrap: wrap; gap:8px; }
.qof-swatch, .qof-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid #e5e5ea; border-radius:999px; cursor:pointer;
}
.qof-swatch input, .qof-chip input{ display:none; }
.qof-swatch input:checked + span,
.qof-chip input:checked + span,
.qof-chip input:checked ~ *{
  font-weight:700;
}

/* زر اطلب الآن (كبسولة) */
.floating-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--qof-btn-bg);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 9999px;
  box-shadow: 0 18px 40px rgba(108,92,231,.22);
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s;
  text-decoration: none; /* حتى لو كانت <a> داخل المودال */
}
.floating-btn:hover{ transform: translateY(-1px); }
.floating-btn:active{ transform: translateY(0); box-shadow:none; }

/* سطر الزر + الكمية */
.qof-action-row{ margin-top: 8px; }
.qof-qty{
  display:inline-flex; align-items:center; gap:8px;
}
.qof-qty-input{
  width: 52px; height: 38px;
  border: 1px solid #ddd; border-radius: 12px;
  text-align: center; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.qof-qty-btn{
  width: 38px; height: 38px;
  border: 1px solid #ddd; border-radius: 12px;
  background:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 18px; line-height: 1;
}
.qof-qty-btn:hover{ background:#fafafa; }

/* ملخص الطلب */
.qof-summary{
  margin-top: 12px; border-top:1px solid #eee; padding-top: 10px;
  background: #faf9ff; border-radius: 12px; padding: 10px 12px;
}
.qof-summary .qof-line{
  display:flex; align-items:center; justify-content:space-between;
  font-size: 14px; padding: 6px 0; color:#333;
}
.qof-summary .qof-line.total{ font-weight: 800; }

/* ===== اهتزاز زر الطلب ===== */
@keyframes qof-wiggle {
  0%, 100% { transform: translateY(0) rotate(0); }
  15% { transform: translateY(-1px) rotate(-0.6deg); }
  30% { transform: translateY(1px) rotate(0.6deg); }
  45% { transform: translateY(-1px) rotate(-0.6deg); }
  60% { transform: translateY(1px) rotate(0.6deg); }
  75% { transform: translateY(-1px) rotate(-0.4deg); }
}
.floating-btn.is-shaking { animation: qof-wiggle 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .floating-btn.is-shaking { animation: none !important; }
}

/* ===== شريط CTA ثابت أسفل الصفحة ===== */
.qof-sticky-bar {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: min(680px, calc(100% - 24px));
  z-index: 9999; display: none;
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}
.qof-sticky-bar.show { display: block; }
.qof-sticky-bar .floating-btn.sticky{
  width: 100%;
  border-radius: 9999px;
  background: var(--qof-accent, #ff8c3b);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

/* ===== نافذة النجاح (Modal) ===== */
body.qof-modal-open { overflow: hidden; }
.qof-modal-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index: 10000;
  padding: 16px;
}
.qof-modal{
  width: min(760px, 100%);
  background: #fff; color:#222;
  border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.25);
  padding: 18px 18px 16px;
  text-align: center;
}
.qof-modal-head h3{
  font-size: 28px; margin: 6px 0 8px; font-weight:800;
}
.qof-badge{
  display:inline-block; background: var(--qof-accent,#ff8c3b); color:#fff;
  padding: 6px 12px; border-radius: 8px; font-weight:700;
}
.qof-modal-body{
  margin: 14px 0 10px; text-align: center; line-height: 1.9; color:#333;
}
.qof-modal-actions{ margin-top: 12px; }
.qof-modal .floating-btn.modal-ok{
  background: var(--qof-accent,#ff8c3b);
  font-weight:800;
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 640px){
  .qof-grid{ grid-template-columns: 1fr; }
  .floating-btn{ background: var(--qof-btn-mobile-bg, var(--qof-btn-bg)); }
  .qof-qty-btn{ width:44px; height:44px; }
  .qof-qty-input{ height:44px; font-size:16px; }
}
.qof-swatches{display:flex;flex-wrap:wrap;gap:10px}
.qof-swatch{display:inline-flex;align-items:center;cursor:pointer}
.qof-swatch input{display:none}
.qof-swatch .swatch-dot{
  width:22px;height:22px;border-radius:999px;
  border:1px solid rgba(0,0,0,.2)
}
.qof-swatch input:checked + .swatch-dot{
  outline:3px solid rgba(0,0,0,.15);outline-offset:2px
}
/* نخفي الكتابة */
.qof-swatch .swatch-name{display:none}
.qof-swatches{display:flex;gap:10px;flex-wrap:wrap}
.qof-swatch{cursor:pointer;display:inline-flex;align-items:center}
.qof-swatch input{display:none}

.swatch-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.2);
}

.qof-swatch input:checked + .swatch-dot{
  outline:3px solid rgba(0,0,0,.15);
  outline-offset:2px;
}

/* نخفي الكتابة */
.swatch-name{display:none}
/* اخفاء أي نص داخل سواتش الألوان نهائياً */
.qof-swatches .qof-swatch .swatch-name{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

/* إذا كان القالب يطبّق على كل span داخل السواتش */
.qof-swatches .qof-swatch span:not(.swatch-dot){
  display:none !important;
}
.qof-swatches .swatch-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.2);
  background: var(--qof-swatch) !important;
}