/* ===========================
   FastCOD – Light Mode (v9+UI)
   =========================== */

/* Theme variables */
:root{
  --fastcod-bg: #ffffff;          /* خلفية الدروار */
  --fastcod-surface: #fafafa;     /* خلفية خفيفة لمحتوى الخطوات */
  --fastcod-card: #ffffff;        /* بطاقات (الثقة/العروض) */
  --fastcod-border: #1557db;      /* حدود فاتحة */
  --fastcod-text: #111827;        /* نص أساسي */
  --fastcod-muted: #6b7280;       /* نص ثانوي */

  --fastcod-primary: #2563EB;     /* أزرق افتراضي */
  --fastcod-primary-hover: #1d4ed8;

  --fastcod-gray: #f3f4f6;        /* لزر الإلغاء */
  --fastcod-gray-border: #d1d5db;

  --fastcod-success: #22C55E;     /* أخضر – للزر الأساسي */
  --fastcod-shadow: 0 10px 30px rgba(0,0,0,.08);
  --fastcod-radius: 16px;
  --fastcod-radius-sm: 10px;
  --fastcod-gap: 14px;
}

body.fastcod-direct #fastcod-step0,
body.fastcod-direct #fastcod-step1,
body.fastcod-direct #fastcod-step2,
body.fastcod-direct .fastcod-stepper,
body.fastcod-direct .fastcod-timeline-intro{ display:none !important; }

body.fastcod-direct #fastcod-step3{ display:block !important; }


/* خط داخل الدروار فقط */
.fastcod-drawer{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* عربي / RTL فقط داخل الدراور */
html[lang^="ar"] .fastcod-drawer,
body[dir="rtl"] .fastcod-drawer{
  font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  direction: rtl;
  text-align: right;
}

/* ===== Cancel Screen Spacing & Layout ===== */
#fastcod-step-cancel .fastcod-step-title{
  margin: 18px 0 16px;
  text-align: start;
}

/* حاوية العروض */
.fastcod-offers{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.fastcod-actions.cancel-under-start .fastcod-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  padding:12px 18px;
  font-size:16px;
  font-weight:600;
  color:#111;
  background:#F3F4F6;
  text-decoration: none;
}

.fastcod-link{
  text-indent:0!important;
  width:auto!important;
  height:auto!important;
  overflow:visible!important;
  color:inherit!important;
}

/* زر العرض (بطاقة العرض) */
.fastcod-offer-btn{
  display: block;
  width: 100%;
  border: 1px solid #e7e8ec;
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.03);
  text-decoration: none !important;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

.fastcod-offer-btn:hover{
  transform: translateY(-1px);
  border-color: #dfe1e6;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* العنوان داخل زر العرض */
.fastcod-offer-btn > span{
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
}

/* النص الفرعي */
.fastcod-offer-btn > small{
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #6b7280;
}

/* زر واتساب */
.fastcod-ask-wa{
  display: block !important;
  width: min(420px, 92%);
  margin: 16px auto 10px;
  text-align: center;
  border-radius: 14px;
  padding: 14px 16px;
}

/* زر إغلاق شاشة الإلغاء */
.fastcod-close.fastcod-close-cancel{
  display: block;
  margin: 8px auto 6px;
  background: transparent;
  border: 0;
  color: #374151;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  padding: 8px 12px;
}

.fastcod-close.fastcod-close-cancel:hover{
  color: #111827;
}

/* RTL عروض */
.fastcod-drawer[dir="rtl"] .fastcod-offer-btn > span,
.fastcod-drawer[dir="rtl"] .fastcod-offer-btn > small{
  text-align: right;
}

/* Backdrop */
.fastcod-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(1px);
  z-index: 2147483645;
}

/* Drawer */
.fastcod-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width: 430px;
  max-width: 92vw;
  display:none;
  z-index:2147483646;
  background: var(--fastcod-bg);
  color: var(--fastcod-text);
  box-shadow: var(--fastcod-shadow);
  border-left: 1px solid var(--fastcod-border);
}

/* Header */
.fastcod-header{
  position: sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 16px 18px;
  background: #fff;
  border-bottom: 1px solid var(--fastcod-border);
}

.fastcod-title{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  color: var(--fastcod-text);
}

.fastcod-close{
  background: transparent;
  border: none;
  color: var(--fastcod-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity:.65;
  transition: transform .18s ease, opacity .18s ease;
}
.fastcod-close:hover{ transform: scale(1.05); opacity:1; }

/* Body */
.fastcod-body{
  padding: 18px;
  height: calc(100vh - 60px);
  overflow: auto;
  display:flex;
  flex-direction:column;
  gap: var(--fastcod-gap);
  background: var(--fastcod-bg);
}

/* نصوص عامة داخل الدروار */
.fastcod-body p{
  text-align:left;
  font-weight:500;
  font-size:14px;
  margin:0 0 10px;
  color: var(--fastcod-text);
}
.fastcod-body label{
  text-align:left;
  font-size:14px;
}

[dir="rtl"] .fastcod-body p,
[dir="rtl"] .fastcod-body label{
  text-align:right;
}

/* Steps container (1–3 كنموذج بسيط بدون كروت كبيرة) */
#fastcod-step1,
#fastcod-step2,
#fastcod-step3{
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 10px;
}

/* Fields – نموذج بسيط */
.fastcod-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  background: transparent;
  border-radius:12px;
  padding:0;
  margin-bottom:14px;
}

.fastcod-field label{
  font-size:13px;
  font-weight:600;
  color: var(--fastcod-text);
  margin:0 0 4px;
}

.fastcod-field input,
.fastcod-field textarea{
  width:100%;
  color: var(--fastcod-text);
  background:#f9fafb;
  border:1px solid #d1d5db;
  padding:11px 12px;
  border-radius:var(--fastcod-radius-sm);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.fastcod-field textarea{
  min-height:70px;
  resize:vertical;
}

.fastcod-field input:focus,
.fastcod-field textarea:focus{
  border-color:#111827;
  background:#fff;
  box-shadow:0 0 0 3px rgba(15,23,42,.08);
}

/* Actions & Buttons base */
.fastcod-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.fastcod-button,
.fastcod-next,
.fastcod-complete,
.fastcod-lang,
.fastcod-ask-wa,
.fastcod-cancel{
  border: none;
  cursor: pointer;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: var(--fastcod-radius);
  font-weight: 600;
  letter-spacing: .2px;
  transition:
    transform .12s ease,
    opacity .16s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

/* Primary buttons (افتراضي – نخصص لاحقاً) */
.fastcod-next,
.fastcod-complete,
.fastcod-button{
  background: var(--fastcod-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(37,99,235,.18);
}

/* Cancel button */
.fastcod-cancel{
  background: var(--fastcod-gray) !important;
  color: #111 !important;
  border: 1px solid var(--fastcod-gray-border) !important;
}
.fastcod-cancel:hover{ filter: brightness(.98); }

/* WhatsApp CTA (أخضر) */
.fastcod-ask-wa{
  background: var(--fastcod-success);
  color:#fff;
}
.fastcod-ask-wa:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Status text */
.fastcod-status{
  font-size: 13px;
  color: var(--fastcod-muted);
  padding: 8px 0 0;
}

/* ============ Step 0 (لغة/مقدمة) ============ */
#fastcod-step0.fastcod-step0-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  justify-content:center;
  height: calc(100vh - 120px);
}

.fastcod-lang-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  max-width: 320px;
}

#fastcod-step0 .fastcod-lang{
  width: 100%;
  font-size: 16px;
  padding: 14px;
  background: #111;
  color:#fff;
}
#fastcod-step0 .fastcod-lang.fastcod-lang-fr{ background:#1f2937; }

/* كرت الثقة */
.fastcod-trust{
  background:#fff;
  border:1px solid #e5e7eb;
  padding:14px 16px;
  border-radius:16px;
  color:#111827;
  box-shadow:0 3px 10px rgba(0,0,0,.04);
}
.fastcod-trust-title{
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}
.fastcod-trust-title::before{ content: "🔒 "; }
.fastcod-trust-line{
  color:#6b7280;
  font-size:14px;
  margin-top:4px;
}

/* ===== زر بدء عملية الطلب (أخضر + Pulse) ===== */
#fastcod-step0 .fastcod-actions{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

#fastcod-step0 .fastcod-start{
  display:block;
  width: min(480px, 92%);
  min-width: 280px;
  padding: 18px 20px;
  font-size: 17px;
  white-space: normal;
  text-align: center;

  border: none;
  border-radius: 20px;
  font-weight: 800;
  cursor: pointer;

  background: var(--fastcod-success) !important; /* أخضر */
  color:#fff !important;
  box-shadow:0 8px 20px rgba(22,163,74,.45);
  animation: fastcod-pulse 1.4s ease-in-out infinite;
}



#fastcod-step0 .fastcod-start:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

/* زر إلغاء تحت زر البداية */
.cancel-under-start{ margin-top:8px; }
.fastcod-link{
  background:transparent!important;
  border:none;
  color:#6b7280!important;
  text-decoration:underline;
  padding:8px 10px;
  font-size:14px;
}
.fastcod-link:hover{ color:#111827!important; }

/* Pulse animation */
@keyframes fastcod-pulse{
  0%{
    box-shadow:0 0 0 0 rgba(22,163,74,.45);
    transform:translateY(0);
  }
  70%{
    box-shadow:0 0 0 16px rgba(22,163,74,0);
    transform:translateY(-1px);
  }
  100%{
    box-shadow:0 0 0 0 rgba(22,163,74,0);
    transform:translateY(0);
  }
}

/* ============ Step 1/2 alignment (ما زالت موجودة للـ flow القديم) ============ */
#fastcod-step1 .fastcod-actions,
#fastcod-step2 .fastcod-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

#fastcod-step1 .fastcod-actions .fastcod-next,
#fastcod-step1 .fastcod-actions .fastcod-cancel,
#fastcod-step2 .fastcod-actions .fastcod-complete,
#fastcod-step2 .fastcod-actions .fastcod-cancel{
  width: 70%;
  max-width: 360px;
}

/* Cancel في Step1 كـ نص */
#fastcod-step1 .fastcod-cancel{
  background:transparent!important;
  border:none;
  color:#6b7280!important;
  text-decoration:none;
  padding:6px 10px;
  font-size:14px;
}
#fastcod-step1 .fastcod-cancel:hover{
  color:#111827!important;
}

/* Step2 back button */
#fastcod-step2 .fastcod-back{
  background:transparent!important;
  border:1px dashed #d1d5db;
  color:#374151!important;
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
}

/* Address field smaller */
#fastcod-step2 textarea[name="address"]{
  min-height: 60px !important;
  max-height: 80px;
}

/* ============ Step 3 – زر إنهاء الطلب ============ */
#fastcod-step3 .fastcod-actions{
  display:flex;
  justify-content:center;
}

#fastcod-step3 .fastcod-complete{
  width:82%;
  max-width:440px;
  padding:16px 18px;
  font-size:18px;
  border-radius:18px;
  font-weight:800;
  background: var(--fastcod-success) !important;
  color:#fff !important;
  border:none;
  box-shadow:0 6px 16px rgba(22,163,74,.35);
}

/* Loader داخل زر إنهاء الطلب عند is-busy */
.fastcod-complete.is-busy{
  position:relative;
  color:transparent !important;
}

.fastcod-complete.is-busy::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  border-top-color:transparent;
  transform:translate(-50%,-50%);
  animation: fastcod-spin .6s linear infinite;
}

@keyframes fastcod-spin{
  to{ transform: translate(-50%,-50%) rotate(360deg); }
}

/* ============ Timeline (Stepper) ============ */
.fastcod-stepper{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin:6px 0 18px;
}

.fastcod-timeline-intro{
  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;
  color: #555;
  font-weight: 500;
}

.fastcod-stepper span{
  position:relative;
  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
  background:#eef2ff;
  color:#4f46e5;
  border:2px solid #dbe3ff;
}
.fastcod-stepper span.is-active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
  box-shadow:0 6px 14px rgba(37,99,235,.22);
}
.fastcod-stepper span.is-done{
  background:#22c55e;
  border-color:#22c55e;
  color:#fff;
}
.fastcod-stepper span:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  left:100%;
  transform:translateY(-50%);
  width:36px;
  height:2px;
  background:#e5e7eb;
}
.fastcod-stepper span.is-done:not(:last-child)::after{
  background:#22c55e;
}

/* ============ Cancel panel (Offers) – نسخة مبسطة ============ */
.fastcod-offers{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.fastcod-cancel-text{
  text-align: center;
  font-size:14px;
  color: var(--fastcod-muted);
}

/* RTL لزر العرض */
#fastcod-drawer[dir="rtl"] .fastcod-offer-btn{
  text-align:right;
}

/* Mobile */
@media (max-width: 420px){
  .fastcod-drawer{ width: 100vw; border-left: none; }
  .fastcod-actions{ gap:8px; }
  #fastcod-step1 .fastcod-actions .fastcod-next,
  #fastcod-step1 .fastcod-actions .fastcod-cancel,
  #fastcod-step2 .fastcod-actions .fastcod-complete,
  #fastcod-step2 .fastcod-actions .fastcod-cancel{
    width: 90%;
  }
}

/* ===== تمركز زر FastCOD على صفحة المنتج ===== */
.single-product .fastcod-button,
.product .fastcod-button{
  display: block;
  width: min(90%, 520px);
  margin: 16px auto;
  text-align: center;
  position: relative;
  padding: 14px 56px;
  border-radius: 18px;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(37,99,235,.18);
}

/* أيقونة عربة قبل نص الزر */
.fastcod-button::before{
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 18px;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
    <path d='M7 18a2 2 0 1 0 .001 3.999A2 2 0 0 0 7 18zm10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 18zM6.3 6l.25 1.5h11.74a1 1 0 0 1 .97 1.243l-1.2 4.5a2 2 0 0 1-1.93 1.457H8.28l-.26 1H19v2H7a1 1 0 0 1-.96-1.276l1.05-4.024L5.38 4H3V2h3a1 1 0 0 1 .97.757L7.3 6z'/>\
  </svg>");
}

/* دعم RTL للأيقونة */
html[dir="rtl"] .fastcod-button::before,
body[dir="rtl"] .fastcod-button::before{
  right: 18px;
  left: auto;
}

/* أيقونات صغيرة داخل حقول النموذج */
.fastcod-field{
  position: relative; /* حتى تتموضع الأيقونة داخل الحقل */
}

.fastcod-field .icon{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:#9ca3af;
  pointer-events:none;
}

/* padding إضافي لليسار بسبب الأيقونة */
.fastcod-field input{
  padding-left: 38px;
}

/* في RTL ننقل الأيقونة والـ padding إلى اليمين */
[dir="rtl"] .fastcod-field .icon{
  right:10px;
  left:auto;
}
[dir="rtl"] .fastcod-field input{
  padding-right:38px;
  padding-left:12px;
}


/* ===== Typography & Spacing tweaks ===== */
#fastcod-step1-title{
  font-size: 18px;            /* أكبر قليلًا */
  font-weight: 800;
  line-height: 1.35;
  margin: -20px 0 8px;
  color: var(--fastcod-text); text-align: center; padding:20px
}
#fastcod-timeline-intro{      /* سنعرض فيه الهاشتاغ */
  margin-top: 2px;
  font-size: 14px;
  color: #6b7280;
  text-align: start;
}

/* تباعد مريح بين الحقول */
.fastcod-field{ margin-bottom: 14px; }

/* Placeholder أهدأ */
.fastcod-field input::placeholder,
.fastcod-field textarea::placeholder{ color:#9aa3af; }

/* زر الإنهاء أكثر بروزًا قليلًا */
.fastcod-complete{
  font-size: 18px;
  font-weight: 800;
  padding: 16px 18px;
  box-shadow: 0 14px 34px rgba(16,185,129,.18); /* ظل أخضر خفيف */
  border-radius: 20px;
}

/* ===== Valid state (✅) للحقول ===== */
.fastcod-field input{
  padding-right: 44px; /* مساحة للأيقونة في LTR */
  position: relative;
}

/* RTL دعم */
.fastcod-drawer[dir="rtl"] .fastcod-field input{
  padding-right: 12px;
  padding-left: 44px;
}

/* إطار + وهج عند الصح */
.fastcod-field input.is-valid{
  border-color: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12) !important;
}

/* أيقونة ✅ كخلفية للحقل عند الصح */
.fastcod-field input.is-valid{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: right 12px center; /* LTR */
}
.fastcod-drawer[dir="rtl"] .fastcod-field input.is-valid{
  background-position: left 12px center;  /* RTL */
}


/* ===== Reassurance banner ===== */
.fastcod-reassure {
  background: linear-gradient(145deg, #f9fafb, #f1f5f9);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: all .3s ease; margin-top:-30px
}

.fastcod-reassure:hover {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.fastcod-reassure .item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #111827;
  font-weight: 500;
}

.fastcod-reassure .item .icon {
  font-size: 18px;
}

.fastcod-reassure .item.hashtag {
  color: #9d261b;
  font-weight: 600;
}