/* YouCan Master — تصميم فورم COD (منقول من فورم يوكان). كل شيء مُنطاق تحت #vbx-form-root. */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

#vbx-form-root { --primary-color: #0f172a; }
#vbx-form-root, #vbx-form-root * { box-sizing: border-box; }
#vbx-form-root { font-family: 'Tajawal', 'Cairo', sans-serif; direction: rtl; }

/* عرض كامل أسفل المنتج مهما كان تخطيط القالب (float/flex/grid) — لا ينضغط في عمود */
.vbx-form-root, #vbx-form-root {
  clear: both; float: none; width: 100%;
  flex: 0 0 100%; grid-column: 1 / -1;
  box-sizing: border-box; margin: 24px 0;
}

/* 📝 حاوية الفورم */
#vbx-form-root .vbx-box {
  border: 3px solid var(--primary-color);
  border-radius: 16px;
  background-color: #f8fafc;
  padding: 22px 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  direction: rtl;
  max-width: 560px;
  margin: 18px auto;
}

/* 🛍️ صندوق سعر المنتج */
#vbx-form-root .vb-product-price-box-pro {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid var(--primary-color);
  border-radius: 12px; padding: 14px 18px; margin: 0 0 18px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
#vbx-form-root .vb-price-right-side { display: flex; align-items: center; gap: 12px; }
#vbx-form-root .vb-price-prod-img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 1.5px solid #e2e8f0; }
#vbx-form-root .vb-price-prod-name { font-weight: 800; font-size: 1rem; color: #0f172a; }
#vbx-form-root .vb-price-sale-value { font-size: 1.5rem; font-weight: 900; color: var(--primary-color); white-space: nowrap; }

/* 🏷️ العنوان */
#vbx-form-root .vb-form-title-container { text-align: center; margin-bottom: 20px; }
#vbx-form-root .vb-form-main-title { font-weight: 900; font-size: 1.35rem; color: #0f172a; margin-bottom: 4px; }
#vbx-form-root .vb-form-sub-title { font-weight: 600; font-size: 0.92rem; color: #475569; }

/* 🧾 الحقول */
#vbx-form-root .vb-field-wrapper-custom { margin-bottom: 14px; width: 100%; }
#vbx-form-root .vb-field-label-custom { display: block; font-weight: 700; font-size: 0.92rem; color: #0f172a; margin-bottom: 5px; text-align: right; }
#vbx-form-root .vb-field-label-custom .required-star { color: #ef4444; margin-right: 2px; }
#vbx-form-root .vb-input-box-with-icon {
  display: flex; flex-direction: row-reverse;
  border: 1.8px solid #94a3b8; border-radius: 10px; overflow: hidden;
  background-color: #ffffff; height: 48px;
}
#vbx-form-root .vb-input-box-with-icon:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(15,23,42,0.1); }
#vbx-form-root .vb-input-box-with-icon.invalid-input { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
#vbx-form-root .vb-icon-box-right {
  background-color: #f1f5f9; min-width: 46px; display: flex; align-items: center; justify-content: center;
  border-left: 1.5px solid #cbd5e1; color: #334155; font-size: 1.1rem;
}
#vbx-form-root .vb-input-box-with-icon input,
#vbx-form-root .vb-input-box-with-icon select {
  flex: 1; border: none; height: 100%; padding: 0 12px; font-size: 0.95rem; font-weight: 600;
  color: #0f172a; background: transparent; outline: none; font-family: inherit; width: 100%;
}
#vbx-form-root .vb-phone-error-msg { color: #ef4444; font-size: 0.85rem; font-weight: 700; margin-top: 6px; display: none; }
#vbx-form-root .vb-phone-error-msg.show { display: block; }

/* 🚚 بطاقة التوصيل */
#vbx-form-root .vb-delivery-card-box { border: 1.5px solid #cbd5e1; border-radius: 12px; padding: 16px; background-color: #ffffff; margin: 16px 0; }
#vbx-form-root .vb-delivery-card-title { font-weight: 800; font-size: 1rem; color: #0f172a; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
#vbx-form-root .vb-radio-option-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 6px; }
#vbx-form-root .vb-radio-option-row.active { background-color: #f1f5f9; }
#vbx-form-root .vb-radio-option-row[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
#vbx-form-root .vb-radio-right-group { display: flex; align-items: center; gap: 10px; }
#vbx-form-root .vb-custom-radio-circle { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #64748b; display: flex; align-items: center; justify-content: center; }
#vbx-form-root .vb-radio-option-row.active .vb-custom-radio-circle { border-color: var(--primary-color); }
#vbx-form-root .vb-radio-option-row.active .vb-custom-radio-circle::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: var(--primary-color); }
#vbx-form-root .vb-radio-label-text { font-weight: 700; font-size: 0.92rem; color: #0f172a; }
#vbx-form-root .vb-radio-price-text { font-weight: 800; font-size: 0.95rem; }

/* 🔢 الكمية */
#vbx-form-root .vb-qty-box { border: 1.5px solid #cbd5e1; border-radius: 12px; padding: 12px 16px; background: #fff; margin: 16px 0; display: flex; align-items: center; justify-content: space-between; }
#vbx-form-root .vb-qty-box .vb-qty-lbl { font-weight: 800; font-size: 0.95rem; color: #0f172a; }
#vbx-form-root .vb-qty-ctrl { display: flex; align-items: center; gap: 0; border: 1.5px solid #cbd5e1; border-radius: 10px; overflow: hidden; }
#vbx-form-root .vb-qty-ctrl button { width: 40px; height: 40px; border: none; background: #f1f5f9; color: #0f172a; font-size: 1.3rem; font-weight: 900; cursor: pointer; line-height: 1; }
#vbx-form-root .vb-qty-ctrl button:hover { background: #e2e8f0; }
#vbx-form-root .vb-qty-ctrl input { width: 48px; height: 40px; border: none; text-align: center; font-size: 1rem; font-weight: 800; color: #0f172a; background: #fff; outline: none; -moz-appearance: textfield; }
#vbx-form-root .vb-qty-ctrl input::-webkit-outer-spin-button,
#vbx-form-root .vb-qty-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 🔝 عناصر أعلى الفورم (شارة/خطوات/ندرة/عدّاد) */
#vbx-form-root .vbf-topwrap { margin-bottom: 6px; }
#vbx-form-root .vbf-badge { display: inline-block; background: #ef4444; color: #fff; font-size: 0.82rem; font-weight: 800; padding: 5px 14px; border-radius: 12px; margin-bottom: 10px; }
#vbx-form-root .vbf-badge-c { text-align: center; }
#vbx-form-root .vbf-steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
#vbx-form-root .vbf-steps .st { flex: 1; text-align: center; font-size: 0.72rem; font-weight: 800; color: #94a3b8; }
#vbx-form-root .vbf-steps .st .n { width: 26px; height: 26px; border-radius: 50%; background: #e2e8f0; color: #64748b; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; }
#vbx-form-root .vbf-steps .st.act { color: var(--primary-color); }
#vbx-form-root .vbf-steps .st.act .n { background: var(--primary-color); color: #fff; }
#vbx-form-root .vbf-scarcity2 { margin-bottom: 12px; }
#vbx-form-root .vbf-scar-top { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 0.84rem; color: #b91c1c; margin-bottom: 6px; }
#vbx-form-root .vbf-scar-cnt { color: #dc2626; }
#vbx-form-root .vbf-scar-bar { height: 9px; background: #fee2e2; border-radius: 20px; overflow: hidden; }
#vbx-form-root .vbf-scar-fill { height: 100%; background: linear-gradient(90deg,#f97316,#ef4444); border-radius: 20px; animation: vbf-scar-pulse 2s infinite; }
@keyframes vbf-scar-pulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } }
#vbx-form-root .vbf-timer2 { background: linear-gradient(135deg,#111827,#1f2937); border-radius: 14px; padding: 12px; margin-bottom: 12px; text-align: center; }
#vbx-form-root .vbf-timer-lbl { color: #e5e7eb; font-weight: 700; font-size: 0.82rem; margin-bottom: 8px; }
#vbx-form-root .vbf-timer-boxes { display: flex; align-items: center; justify-content: center; gap: 5px; direction: ltr; }
#vbx-form-root .vbf-seg { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 5px 4px; min-width: 46px; }
#vbx-form-root .vbf-seg-n { color: #fff; font-weight: 900; font-size: 1.15rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
#vbx-form-root .vbf-seg-l { color: #9ca3af; font-size: 0.62rem; font-weight: 700; margin-top: 2px; }
#vbx-form-root .vbf-sep { color: #6b7280; font-weight: 900; font-size: 1.1rem; align-self: flex-start; margin-top: 5px; }

/* 🔔 إشعار مبيعات عائم */
.vbf-salespop { position: fixed; bottom: 18px; right: 18px; z-index: 99997; background: #fff; border: 1px solid #e5e7eb; border-right: 4px solid #16a34a; border-radius: 12px; padding: 11px 15px; font-size: 0.82rem; font-weight: 700; color: #0f172a; box-shadow: 0 8px 24px rgba(0,0,0,0.14); direction: rtl; max-width: 80%; transform: translateY(120%); opacity: 0; transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); font-family: 'Tajawal','Cairo',sans-serif; }
.vbf-salespop.show { transform: translateY(0); opacity: 1; }
.vbf-salespop b { color: #16a34a; }

/* 📝 حقل الملاحظات */
#vbx-form-root .vb-notes-box { border: 1.8px solid #94a3b8; border-radius: 10px; background: #fff; overflow: hidden; }
#vbx-form-root .vb-notes-box:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(15,23,42,0.1); }
#vbx-form-root .vb-notes-box textarea { width: 100%; border: none; outline: none; resize: vertical; min-height: 70px; padding: 10px 12px; font-family: inherit; font-size: 0.95rem; font-weight: 600; color: #0f172a; background: transparent; }

/* ✅ قائمة المزايا */
#vbx-form-root .vbf-feats { background: linear-gradient(180deg,#f8fbff,#f1f6ff); border: 1px solid #e3ebf7; border-radius: 14px; padding: 13px 15px; margin: 14px 0; box-shadow: 0 2px 10px rgba(24,80,180,.05); }
#vbx-form-root .vbf-feats .r { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 700; color: #0f172a; padding: 7px 0; border-bottom: 1px solid #eaf0fa; }
#vbx-form-root .vbf-feats .r:last-child { border-bottom: none; }
#vbx-form-root .vbf-feats .r .ic { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: #e6f7ee; border-radius: 8px; font-size: 0.95rem; }
#vbx-form-root .vbf-feats .r .tx { flex: 1; line-height: 1.4; }

/* 🎟️ الكوبون */
#vbx-form-root .vb-coup-box { margin: 0 0 14px; }
#vbx-form-root .vb-coup-row { display: flex; gap: 8px; }
#vbx-form-root .vb-coup-row input { flex: 1; height: 46px; border: 1.8px solid #94a3b8; border-radius: 10px; padding: 0 12px; font-size: 0.95rem; font-weight: 600; font-family: inherit; outline: none; }
#vbx-form-root .vb-coup-row button { height: 46px; padding: 0 18px; border: none; border-radius: 10px; background: var(--primary-color); color: #fff; font-weight: 800; cursor: pointer; }
#vbx-form-root .vb-cmsg { font-size: 0.85rem; font-weight: 700; margin-top: 6px; }
#vbx-form-root .vb-cmsg.ok { color: #16a34a; }
#vbx-form-root .vb-cmsg.bad { color: #ef4444; }

/* 🧮 ملخّص الطلب */
#vbx-form-root .vb-order-summary-box-v3 { background-color: #ffffff; border: 1.5px solid #cbd5e1; border-radius: 14px; padding: 16px; margin-bottom: 18px; }
#vbx-form-root .vb-summary-line-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.95rem; color: #334155; font-weight: 700; }
#vbx-form-root .vb-summary-line-row.total-final { border-top: 1.5px solid #cbd5e1; padding-top: 12px; margin-top: 12px; margin-bottom: 0; font-size: 1.25rem; font-weight: 900; color: #0f172a; }

/* 🛍️ زر التأكيد */
#vbx-form-root .vbx-submit {
  position: relative; overflow: hidden; width: 100%; height: 54px;
  background-color: var(--primary-color); color: #ffffff; border-radius: 12px; border: none;
  font-size: 1.25rem; font-weight: 900; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 15px rgba(15,23,42,0.25);
  animation: vbx-btn-shake 3.2s infinite ease-in-out;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#vbx-form-root .vbx-submit:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 8px 25px rgba(15,23,42,0.38); }
#vbx-form-root .vbx-submit:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(50%); animation: none; }
@keyframes vbx-btn-shake {
  0%,100% { transform: translateX(0); } 3% { transform: translateX(-5px); } 6% { transform: translateX(5px); }
  9% { transform: translateX(-4px); } 12% { transform: translateX(4px); } 15% { transform: translateX(-2px); }
  18% { transform: translateX(2px); } 21%,99% { transform: translateX(0); }
}

/* ✅ نتيجة/تنبيه */
#vbx-form-root .vbx-result { margin-top: 14px; border-radius: 12px; text-align: center; }
#vbx-form-root .vbx-result.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 12px; font-weight: 800; }
#vbx-form-root .vbx-ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 12px; padding: 16px; font-weight: 800; line-height: 1.7; }
#vbx-form-root .vbx-wa { display: inline-block; margin-top: 12px; background: #25d366; color: #fff; padding: 11px 22px; border-radius: 10px; font-weight: 800; text-decoration: none; }

/* 📱 شريط طلب عائم (جوال فقط) */
#vbx-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99990;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: #ffffff; border-top: 1px solid #e2e8f0; box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); direction: rtl;
  font-family: 'Tajawal', 'Cairo', sans-serif;
}
#vbx-sticky-bar .vb-sb-total { display: flex; flex-direction: column; line-height: 1.15; }
#vbx-sticky-bar .vb-sb-total small { color: #64748b; font-size: 0.72rem; font-weight: 700; }
#vbx-sticky-bar .vb-sb-total b { color: #0f172a; font-size: 1.15rem; font-weight: 900; }
#vbx-sticky-bar button {
  flex: 1; max-width: 60%; height: 48px; border: none; border-radius: 12px;
  background: var(--primary-color, #0f172a); color: #fff; font-size: 1.1rem; font-weight: 900; cursor: pointer;
  font-family: inherit;
}
@media (max-width: 768px) { #vbx-sticky-bar.show { display: flex; } }

/* حقلان في سطر (من «حقول الفورم» في البوابة).
   محدّد بنفس قوّة قاعدة العرض الكامل (#vbx-form-root …) وأكثر، وإلّا تغلبه فيبقى الحقل بعرض كامل. */
#vbx-form-root .vbx-box .vb-field-wrapper-custom.vb-half{display:inline-block !important;width:calc(50% - 6px) !important;vertical-align:top;box-sizing:border-box}
#vbx-form-root .vbx-box .vb-field-wrapper-custom.vb-half-l{margin-inline-end:12px}
@media (max-width:340px){#vbx-form-root .vbx-box .vb-field-wrapper-custom.vb-half{display:block !important;width:100% !important}#vbx-form-root .vbx-box .vb-field-wrapper-custom.vb-half-l{margin-inline-end:0}}