/* ═══════════════════════════════════════════════════════
   JEFNA AI CHECKOUT PRO v4.4.1 — Premium Design System
   5 languages • GPS • AI Chatbot • Celebration Flow
   Designer-grade UI with glassmorphism & micro-animations
═══════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  --jefna-primary:      #00c875;
  --jefna-primary-dark: #009f5c;
  --jefna-primary-light:#e0fff0;
  --jefna-accent:       #00e5a0;
  --jefna-blue:         #3b82f6;
  --jefna-blue-dark:    #1d4ed8;
  --jefna-dark:         #0a0f1e;
  --jefna-surface:      #ffffff;
  --jefna-surface-2:    #f8fafc;
  --jefna-surface-3:    #f1f5f9;
  --jefna-border:       #e2e8f0;
  --jefna-border-light: #f0f4f8;
  --jefna-text:         #0f172a;
  --jefna-text-2:       #334155;
  --jefna-muted:        #64748b;
  --jefna-danger:       #ef4444;
  --jefna-warn:         #f59e0b;

  --jefna-gradient:     linear-gradient(135deg,#00c875 0%,#00a86b 50%,#009f5c 100%);
  --jefna-gradient-v:   linear-gradient(180deg,#00c875,#009f5c);
  --jefna-gradient-r:   linear-gradient(135deg,#009f5c,#00c875);

  --jefna-shadow-xs:    0 1px 2px rgba(0,0,0,.05);
  --jefna-shadow-sm:    0 2px 8px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --jefna-shadow-md:    0 4px 20px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.06);
  --jefna-shadow-lg:    0 12px 40px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.08);
  --jefna-shadow-xl:    0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.1);
  --jefna-glow:         0 0 0 3px rgba(0,200,117,.22);
  --jefna-glow-blue:    0 0 0 3px rgba(59,130,246,.22);
  --jefna-glow-green:   0 0 0 6px rgba(0,200,117,.16);

  --jefna-r-xs:  6px;
  --jefna-r-sm:  10px;
  --jefna-r-md:  16px;
  --jefna-r-lg:  22px;
  --jefna-r-xl:  30px;
  --jefna-r-2xl: 40px;

  --jefna-tr:    all .22s cubic-bezier(.4,0,.2,1);
  --jefna-tr-lg: all .38s cubic-bezier(.34,1.2,.64,1);
}

/* ── Reset ── */
.jefna-checkout-wrapper *,
.jefna-ai-overlay *,
.jefna-gps-block * { box-sizing: border-box; margin: 0; padding: 0; }


/* ════════════════════════════════════════════════
   LANGUAGE SWITCHER
════════════════════════════════════════════════ */
.jefna-lang-switcher {
  position: relative; display: inline-flex; align-items: center;
  margin-bottom: 18px; z-index: 50;
}
.jefna-lang-current {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; background: var(--jefna-surface);
  border: 1.5px solid var(--jefna-border); border-radius: 40px;
  cursor: pointer; font-size: 13px; font-weight: 700;
  color: var(--jefna-text); transition: var(--jefna-tr);
  font-family: inherit; box-shadow: var(--jefna-shadow-sm);
  min-width: 130px; justify-content: space-between;
}
.jefna-lang-current:hover {
  border-color: var(--jefna-primary); background: var(--jefna-primary-light);
  box-shadow: var(--jefna-glow), var(--jefna-shadow-sm);
}
.jefna-lang-switcher.open .jefna-lang-current { border-color: var(--jefna-primary); box-shadow: var(--jefna-glow); }
.jefna-lang-flag  { font-size: 18px; line-height: 1; }
.jefna-lang-name  { font-size: 13px; font-weight: 700; flex: 1; text-align: start; }
.jefna-lang-caret { flex-shrink: 0; transition: transform .2s; color: var(--jefna-muted); }
.jefna-lang-switcher.open .jefna-lang-caret { transform: rotate(180deg); }

.jefna-lang-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 170px;
  background: var(--jefna-surface); border: 1.5px solid var(--jefna-border);
  border-radius: var(--jefna-r-md); box-shadow: var(--jefna-shadow-lg);
  list-style: none; padding: 6px 0;
  opacity: 0; transform: translateY(-6px) scale(.97);
  pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 200; overflow: hidden;
}
.jefna-lang-switcher.open .jefna-lang-dropdown {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
}
[dir="rtl"] .jefna-lang-dropdown { left: auto; right: 0; }
.jefna-lang-dropdown li a {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  font-size: 13px; font-weight: 600; color: var(--jefna-text);
  text-decoration: none; transition: background .15s;
}
.jefna-lang-dropdown li a:hover { background: var(--jefna-surface-2); }
.jefna-lang-dropdown li.active a {
  color: var(--jefna-primary); background: var(--jefna-primary-light); font-weight: 800;
}


/* ════════════════════════════════════════════════
   WOOCOMMERCE FIELD REDESIGN
════════════════════════════════════════════════ */
.woocommerce-billing-fields input[type="text"],
.woocommerce-billing-fields input[type="tel"],
.woocommerce-billing-fields input[type="email"],
.woocommerce-billing-fields input[type="number"],
.woocommerce-billing-fields select,
.woocommerce-billing-fields textarea {
  height: 52px !important; border: 1.5px solid var(--jefna-border) !important;
  border-radius: var(--jefna-r-md) !important; padding: 0 18px !important;
  font-size: 15px !important; color: var(--jefna-text) !important;
  background: var(--jefna-surface) !important; transition: var(--jefna-tr) !important;
  outline: none !important; box-shadow: var(--jefna-shadow-xs) !important;
  font-family: inherit !important; width: 100% !important; display: block !important;
}
.woocommerce-billing-fields input:focus,
.woocommerce-billing-fields select:focus,
.woocommerce-billing-fields textarea:focus {
  border-color: var(--jefna-primary) !important;
  box-shadow: var(--jefna-glow), var(--jefna-shadow-xs) !important;
  background: #f8fffc !important;
}
.woocommerce-billing-fields label {
  font-size: 12.5px !important; font-weight: 700 !important;
  color: var(--jefna-text-2) !important; margin-bottom: 7px !important; display: block !important;
  letter-spacing: .2px !important;
}
.woocommerce-billing-fields .form-row { margin-bottom: 18px !important; }
.woocommerce-billing-fields select { appearance: auto !important; -webkit-appearance: auto !important; cursor: pointer !important; }
.jefna-gps-readonly input {
  background: linear-gradient(135deg,#f0fff9,#e6fdf2) !important;
  border-color: var(--jefna-primary) !important; color: var(--jefna-primary-dark) !important;
  font-weight: 600 !important; font-size: 13px !important; cursor: default !important;
}
.jefna-hidden-field { display: none !important; }


/* ════════════════════════════════════════════════
   AI TRIGGER BUTTON  — Premium pulsing CTA
════════════════════════════════════════════════ */
.jefna-checkout-wrapper { margin-bottom: 28px; }
.jefna-ai-trigger-wrap  { margin-bottom: 20px; }

.jefna-ai-trigger {
  position: relative; width: 100%; padding: 0 22px; height: 68px;
  background: var(--jefna-gradient);
  color: #fff; border: none; border-radius: var(--jefna-r-xl);
  font-size: 16px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  box-shadow: 0 10px 32px rgba(0,200,117,.38), 0 2px 8px rgba(0,200,117,.18);
  transition: var(--jefna-tr); letter-spacing: .2px; font-family: inherit; overflow: hidden;
}
/* Shimmer effect */
.jefna-ai-trigger::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-100%); animation: jefnaTriggerShimmer 3s ease-in-out infinite 1s;
}
@keyframes jefnaTriggerShimmer {
  0%,100% { transform: translateX(-100%); }
  50%     { transform: translateX(100%); }
}
.jefna-ai-trigger:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(0,200,117,.50), 0 4px 12px rgba(0,200,117,.24);
}
.jefna-ai-trigger:active { transform: translateY(-1px) scale(.99); }

.jefna-ai-trigger-icon {
  width: 42px; height: 42px; background: rgba(255,255,255,.22); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.35); backdrop-filter: blur(4px);
}
.jefna-ai-trigger-text  { flex: 1; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.15); }
.jefna-ai-trigger-badge {
  background: rgba(255,255,255,.25); padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; border: 1.5px solid rgba(255,255,255,.3);
}
.jefna-ai-trigger-sub {
  text-align: center; font-size: 12px; color: var(--jefna-muted); margin-top: 10px; font-weight: 500;
}
.jefna-divider {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  color: var(--jefna-muted); font-size: 11px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
.jefna-divider::before, .jefna-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--jefna-border), transparent);
}


/* ════════════════════════════════════════════════
   GPS BLOCK — Premium Card Design
════════════════════════════════════════════════ */
.jefna-gps-block {
  background: var(--jefna-surface); border: 1.5px solid var(--jefna-border);
  border-radius: var(--jefna-r-lg); padding: 0; margin-bottom: 24px;
  box-shadow: var(--jefna-shadow-sm); transition: box-shadow .25s, border-color .25s;
  /* FIX-22: Use overflow:clip instead of overflow:hidden.
     overflow:clip clips non-positioned content (preserving border-radius visual)
     but does NOT clip absolutely-positioned children, so the map search-results
     dropdown can appear below the search bar without being hidden behind the block. */
  overflow: clip;
  /* Fallback for browsers that don't support overflow:clip (rare, pre-2021 engines) */
  overflow: hidden;
  overflow: clip;
}
.jefna-gps-block:hover {
  border-color: rgba(0,200,117,.35);
  box-shadow: 0 6px 24px rgba(0,200,117,.1), var(--jefna-shadow-sm);
}

/* Premium gradient header strip */
.jefna-gps-header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0fdf8 0%, #e8faf2 100%);
  border-bottom: 1.5px solid rgba(0,200,117,.12);
}
.jefna-gps-icon-wrap {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--jefna-r-sm);
  background: var(--jefna-gradient); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,200,117,.35); color: #fff;
}
.jefna-gps-icon-wrap svg { color: #fff !important; stroke: #fff !important; }
.jefna-gps-header-text { flex: 1; }
.jefna-gps-header-text strong { display: block; font-size: 14px; font-weight: 800; color: var(--jefna-text); letter-spacing: .1px; }
.jefna-gps-header-text span   { font-size: 12px; color: var(--jefna-muted); margin-top: 3px; display: block; line-height: 1.4; }

/* GPS action buttons */
.jefna-gps-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 16px 20px 14px;
}
@media (max-width: 460px) { .jefna-gps-actions { grid-template-columns: 1fr; } }

.jefna-gps-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 16px; border: 1.5px solid transparent;
  border-radius: var(--jefna-r-md); font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: var(--jefna-tr); font-family: inherit; line-height: 1;
}
.jefna-gps-auto {
  background: var(--jefna-gradient); color: #fff;
  box-shadow: 0 4px 16px rgba(0,200,117,.32);
}
.jefna-gps-auto:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,200,117,.46); }
.jefna-gps-auto:active { transform: translateY(0); }

.jefna-gps-pin {
  background: var(--jefna-surface-2); color: var(--jefna-text-2);
  border-color: var(--jefna-border);
}
.jefna-gps-pin:hover {
  background: var(--jefna-primary-light); border-color: var(--jefna-primary);
  color: var(--jefna-primary-dark); transform: translateY(-2px);
  box-shadow: var(--jefna-shadow-sm);
}
.jefna-gps-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Status badge */
.jefna-gps-status-wrap {
  /* FIX-22: Ensure status badge has clear separation from the map container below it.
     position:relative + z-index keep it above the map's top edge on slow slideDown. */
  margin: 0 20px 10px; padding: 10px 16px; border-radius: var(--jefna-r-sm);
  display: flex; align-items: center; gap: 10px; position: relative; z-index: 2;
  font-size: 13px; font-weight: 600; animation: jefnaFadeUp .3s ease;
}

/* ── Wilaya conflict warning (FIX-22) ── */
.jefna-gps-wilaya-warn {
  margin: 0 20px 12px; padding: 10px 14px;
  background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: var(--jefna-r-sm);
  color: #92400e; font-size: 13px; font-weight: 600; line-height: 1.5;
  animation: jefnaFadeUp .25s ease;
}
.jefna-gps-wilaya-update-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 7px 14px; background: var(--jefna-gradient); color: #fff;
  border: none; border-radius: 30px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: var(--jefna-tr);
  box-shadow: 0 3px 10px rgba(0,200,117,.3);
}
.jefna-gps-wilaya-update-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,200,117,.45); }
.jefna-gps-status-wrap.ok      { background: #dcfce7; color: #15803d; border: 1.5px solid #bbf7d0; }
.jefna-gps-status-wrap.err     { background: #fef2f2; color: #dc2626; border: 1.5px solid #fecaca; }
.jefna-gps-status-wrap.loading { background: #eff6ff; color: #1d4ed8; border: 1.5px solid #bfdbfe; }
.jefna-gps-status-icon { font-size: 17px; flex-shrink: 0; }


/* ════════════════════════════════════════════════
   MAP — Premium Interactive Design
════════════════════════════════════════════════ */

/* Search bar */
.jefna-map-search-wrap {
  position: relative; padding: 12px 14px 10px;
  background: var(--jefna-surface);
  border-bottom: 1px solid var(--jefna-border-light);
}
.jefna-map-search-input {
  width: 100%; height: 48px; border: 2px solid var(--jefna-border);
  border-radius: var(--jefna-r-lg); padding: 0 16px 0 48px;
  font-size: 14px; color: var(--jefna-text); background: var(--jefna-surface-2);
  outline: none; font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.jefna-map-search-input:focus {
  border-color: var(--jefna-primary); background: #fff;
  box-shadow: var(--jefna-glow);
}
.jefna-map-search-input::placeholder { color: var(--jefna-muted); font-size: 13px; }
[dir="rtl"] .jefna-map-search-input { padding: 0 48px 0 16px; }
.jefna-map-search-icon {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  color: var(--jefna-muted); pointer-events: none;
}
[dir="rtl"] .jefna-map-search-icon { left: auto; right: 26px; }

/* Search results */
.jefna-map-search-results {
  position: absolute; top: calc(100% + 4px); left: 14px; right: 14px;
  background: var(--jefna-surface); border: 1.5px solid var(--jefna-border);
  border-radius: var(--jefna-r-md); box-shadow: var(--jefna-shadow-xl);
  z-index: 10000; max-height: 280px; overflow-y: auto; display: none;
}
.jefna-map-search-results.open { display: block; animation: jefnaDropIn .16s ease; }
@keyframes jefnaDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.jefna-search-result-item {
  padding: 12px 16px; font-size: 13px; color: var(--jefna-text);
  cursor: pointer; border-bottom: 1px solid var(--jefna-border-light);
  transition: background .12s; display: flex; align-items: flex-start;
  gap: 12px; line-height: 1.45;
}
.jefna-search-result-item:last-child { border-bottom: none; }
.jefna-search-result-item:hover { background: var(--jefna-primary-light); }
.jefna-search-result-item:hover .jefna-result-text { color: var(--jefna-primary-dark); font-weight: 600; }
.jefna-result-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; line-height: 1; }
.jefna-result-text { flex: 1; word-break: break-word; }
.jefna-search-loading { padding: 16px; text-align: center; color: var(--jefna-primary); font-size: 13px; font-weight: 600; }
.jefna-search-empty   { padding: 16px; text-align: center; color: var(--jefna-muted); font-size: 13px; }

/* Map outer container */
.jefna-map-container {
  border-radius: 0 0 var(--jefna-r-lg) var(--jefna-r-lg);
  overflow: hidden; position: relative;
  animation: jefnaFadeUp .35s ease; background: #e8f4f0;
}

/* Leaflet map element */
.jefna-map-leaflet {
  height: 340px; width: 100%; z-index: 1; display: block;
  background: linear-gradient(160deg,#e0f7ea 0%,#c8f0da 100%);
}
@media (min-width: 500px) { .jefna-map-leaflet { height: 380px; } }
@media (min-width: 768px) { .jefna-map-leaflet { height: 420px; } }
@media (min-width: 1024px){ .jefna-map-leaflet { height: 460px; } }

/* Leaflet z-index fixes */
.jefna-map-container .leaflet-pane    { z-index: 200 !important; }
.jefna-map-container .leaflet-control { z-index: 500 !important; }
.jefna-map-container .leaflet-top,
.jefna-map-container .leaflet-bottom  { z-index: 500 !important; }

/* ── Map overlay layers ── */
.jefna-map-pin-overlay {
  position: absolute; inset: 0; z-index: 600; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}

/* Crosshair — always visible ring + lines */
.jefna-map-pin-overlay::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(0,200,117,.5);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
}
.jefna-map-pin-overlay::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  background: var(--jefna-primary); border: 2.5px solid #fff;
  border-radius: 50%; box-shadow: 0 2px 8px rgba(0,200,117,.6);
}

/* Instruction banner
   FIX-28: was top:14px which placed the banner over the search bar because
   .jefna-map-pin-overlay uses inset:0 (covers the whole map container including
   the search bar at the top). Set to 84px = ~70px search bar height + 14px gap. */
.jefna-map-pin-instruction {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  background: rgba(10,15,30,.84); backdrop-filter: blur(12px);
  color: #fff; padding: 9px 20px; border-radius: 30px;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 7px;
  opacity: 0; transition: opacity .3s;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  max-width: calc(100% - 28px); text-align: center; line-height: 1.4;
  border: 1px solid rgba(255,255,255,.12);
}
.jefna-map-pin-instruction.show { opacity: 1; }

/* Mic button transient network-error tooltip (FIX-29) */
.jefna-mic-network-err {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  background: rgba(10,15,30,.88); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  padding: 7px 12px; border-radius: 10px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  animation: jefnaFadeUp .2s ease;
  z-index: 9999;
}
.jefna-ai-input-row { position: relative; }

/* Animated drop pin */
.jefna-center-pin {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, calc(-100% - 2px));
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transition: opacity .3s; pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.32));
}
.jefna-center-pin.show { opacity: 1; }
.jefna-pin-dot {
  width: 36px; height: 36px; background: var(--jefna-gradient);
  border: 3.5px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 6px 20px rgba(0,200,117,.65);
  animation: jefnaPinFloat 1.6s ease-in-out infinite;
}
@keyframes jefnaPinFloat {
  0%,100% { transform: rotate(-45deg) translateY(0); }
  50%     { transform: rotate(-45deg) translateY(-7px); }
}
.jefna-pin-shadow {
  width: 16px; height: 5px; background: rgba(0,0,0,.18);
  border-radius: 50%; margin-top: 4px;
  animation: jefnaShadowScale 1.6s ease-in-out infinite;
}
@keyframes jefnaShadowScale {
  0%,100% { transform: scaleX(1); opacity: .35; }
  50%     { transform: scaleX(.65); opacity: .15; }
}

/* ── Map bottom controls bar ── */
.jefna-map-controls {
  padding: 12px 16px; background: var(--jefna-surface);
  border-top: 1px solid var(--jefna-border-light);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 56px;
}
.jefna-map-address-preview {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--jefna-text-2); min-width: 0; overflow: hidden;
  font-weight: 500;
}
.jefna-map-address-preview svg { flex-shrink: 0; color: var(--jefna-primary); }
.jefna-map-address-preview #jefnaAddressText {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.jefna-confirm-pin-btn {
  display: flex; align-items: center; gap: 8px; padding: 10px 20px;
  background: var(--jefna-gradient);
  color: #fff; border: none; border-radius: 30px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  transition: var(--jefna-tr); white-space: nowrap; font-family: inherit;
  box-shadow: 0 4px 16px rgba(0,200,117,.36);
}
.jefna-confirm-pin-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0,200,117,.5);
}


/* ════════════════════════════════════════════════
   CHAT MINI-MAP — Glassmorphism Design
════════════════════════════════════════════════ */
.jefna-chat-map-wrap {
  padding: 14px !important; max-width: 100% !important;
  background: var(--jefna-surface-2) !important;
  border-radius: var(--jefna-r-md) !important;
  border: 1.5px solid var(--jefna-border) !important;
  margin-top: 4px !important;
}
.jefna-chat-map-label {
  font-size: 12px; color: var(--jefna-muted); margin-bottom: 10px;
  font-weight: 600; line-height: 1.5; display: flex; align-items: center; gap: 6px;
}
/* ── Chat map panel (outside #jefnaAiMessages, flex child of #jefnaAiModal) ── */
.jefna-chat-map-panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--jefna-surface);
  border-top: 1.5px solid var(--jefna-border-light);
  padding: 10px 12px 12px;
  z-index: 5;
  overflow: visible;
}
.jefna-chat-map-panel-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--jefna-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.jefna-chat-map-panel .jefna-chat-map-outer {
  /* FIX-MAP-1: Reduced from 320px → 220px so confirm button is always visible */
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: var(--jefna-r-md);
  border: 2px solid rgba(0,200,117,.4);
  box-shadow: 0 4px 16px rgba(0,200,117,.15);
  touch-action: none !important;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.jefna-chat-map-panel .jefna-chat-map-leaflet {
  width: 100%;
  height: 100% !important;
  display: block;
  touch-action: none !important;
  cursor: grab;
}
.jefna-chat-map-panel .jefna-chat-map-leaflet:active { cursor: grabbing; }
.jefna-chat-map-panel .leaflet-container,
.jefna-chat-map-panel .leaflet-pane,
.jefna-chat-map-panel .leaflet-map-pane {
  touch-action: none !important;
}
/* Mapbox GL inside the panel */
.jefna-chat-map-panel .mapboxgl-map {
  width: 100%;
  height: 100% !important;
  touch-action: none !important;
}
.jefna-chat-map-panel .mapboxgl-canvas { cursor: grab !important; }
.jefna-chat-map-panel .mapboxgl-canvas:active { cursor: grabbing !important; }
/* Panel button row — always visible, never clipped */
.jefna-chat-map-panel .jefna-map-btn-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
  overflow: visible;
}
.jefna-chat-map-panel .jefna-map-btn-row .jefna-gps-btn {
  flex: 1 1 auto;
  font-size: 12px;
  padding: 8px 10px;
  white-space: nowrap;
}
/* FIX-MAP-2: When map panel is open, messages shrink but confirm btn stays visible */
.jefna-map-picker-open #jefnaAiMessages {
  min-height: 60px;
  max-height: 80px;
  overflow-y: auto;
}
@media (max-width: 480px) {
  .jefna-chat-map-panel .jefna-chat-map-outer {
    /* FIX-MAP-1 mobile: Reduced from clamp(240px,34dvh,330px) → clamp(160px,22dvh,200px) */
    height: clamp(160px, 22dvh, 200px);
  }
  .jefna-chat-map-panel .jefna-map-btn-row {
    flex-direction: column;
  }
  .jefna-chat-map-panel .jefna-map-btn-row .jefna-gps-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ── External checkout map (outside chatbot) — unchanged ── */
.jefna-chat-map-outer {
  position: relative; border-radius: var(--jefna-r-md); overflow: hidden;
  border: 2px solid rgba(0,200,117,.4); margin-bottom: 10px;
  box-shadow: 0 6px 24px rgba(0,200,117,.18), inset 0 0 0 1px rgba(255,255,255,.5);
  background: linear-gradient(160deg,#e0f7ea,#c8f0da);
  touch-action: none;
}
.jefna-chat-map-leaflet {
  width: 100%; height: 240px; display: block;
  background: linear-gradient(160deg,#e0f7ea,#c8f0da);
  cursor: grab;
}
.jefna-chat-map-leaflet:active { cursor: grabbing; }
@media (min-width: 380px) { .jefna-chat-map-leaflet { height: 260px; } }
@media (min-width: 480px) { .jefna-chat-map-leaflet { height: 290px; } }

/* Leaflet z-index inside chat map */
.jefna-chat-map-outer .leaflet-pane    { z-index: 200 !important; }
.jefna-chat-map-outer .leaflet-control { z-index: 500 !important; }
.jefna-chat-map-outer .leaflet-top,
.jefna-chat-map-outer .leaflet-bottom  { z-index: 500 !important; }

/* Crosshair overlay on chat mini-map */
.jefna-chat-crosshair {
  position: absolute; inset: 0; z-index: 500;
  pointer-events: none;
}
/* Outer ring */
.jefna-chat-crosshair::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(0,200,117,.55);
  border-radius: 50%;
}
/* Inner dot */
.jefna-chat-crosshair::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: var(--jefna-primary); border: 2.5px solid #fff;
  border-radius: 50%; box-shadow: 0 2px 8px rgba(0,200,117,.6);
}
.jefna-chat-cross-v {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5px; height: 32px; background: rgba(0,0,0,.28); border-radius: 1px;
}
.jefna-chat-cross-h {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 1.5px; background: rgba(0,0,0,.28); border-radius: 1px;
}
.jefna-chat-cross-dot { display: none; } /* handled by ::after */

/* FIX-BTN-VISIBLE: previously `width: 100% !important` here forced this
   button onto its own line inside `.jefna-map-btn-row` (a `display:flex`
   row meant to hold all 3 buttons side by side). That pushed the cancel
   button below it too, turning a 1-line row into 3 stacked rows — tall
   enough to get clipped by `.jefna-ai-modal`'s `overflow: hidden`, since
   the chat modal only scrolls #jefnaAiMessages, not the whole column.
   Result: the green "✅ تأكيد الموقع" button was rendered off-screen /
   invisible on normal desktop widths. Removed the forced full width so
   this button behaves like its siblings (flex: 1 1 auto from
   .jefna-map-btn-row .jefna-gps-btn) and the row stays on one line.
   Mobile (<=480px) still stacks buttons via its own dedicated rule below. */
.jefna-chat-confirm-btn {
  justify-content: center !important;
  font-size: 13.5px !important; padding: 13px 18px !important;
  border-radius: var(--jefna-r-md) !important;
}


/* ════════════════════════════════════════════════
   MyCred notice
════════════════════════════════════════════════ */
.jefna-mycred-notice {
  background: linear-gradient(135deg,#fffbeb,#fef9e7);
  border: 1.5px solid #fcd34d; border-radius: var(--jefna-r-sm);
  padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; color: #92400e; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}


/* ════════════════════════════════════════════════
   CLOSE CONFIRMATION DIALOG
════════════════════════════════════════════════ */
.jefna-close-confirm {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(10,15,30,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
  animation: jefnaOverlayIn .18s ease;
}
.jefna-close-confirm-box {
  background: var(--jefna-surface); border-radius: var(--jefna-r-xl);
  padding: 28px 24px 22px; width: calc(100% - 40px); max-width: 340px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.14);
  text-align: center;
  animation: jefnaModalIn .28s cubic-bezier(.34,1.3,.64,1);
}
.jefna-close-confirm-icon {
  font-size: 44px; display: block; margin-bottom: 12px;
  animation: jefnaConfettiPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.jefna-close-confirm-title {
  font-size: 17px; font-weight: 900; color: var(--jefna-text);
  margin-bottom: 8px; line-height: 1.35; letter-spacing: -.1px;
}
.jefna-close-confirm-sub {
  font-size: 13px; color: var(--jefna-muted); line-height: 1.6;
  margin-bottom: 20px; display: block;
}
.jefna-close-confirm-sub strong { color: var(--jefna-primary); font-weight: 800; }
.jefna-close-confirm-actions {
  display: flex; gap: 10px; flex-direction: column;
}
.jefna-confirm-exit-btn {
  width: 100%; padding: 14px 20px; border: none; border-radius: var(--jefna-r-md);
  background: var(--jefna-gradient); color: #fff;
  font-size: 14.5px; font-weight: 800; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 20px rgba(0,200,117,.38); transition: var(--jefna-tr);
}
.jefna-confirm-exit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,200,117,.52); }
.jefna-confirm-stay-btn {
  width: 100%; padding: 13px 20px;
  border: 2px solid var(--jefna-border); border-radius: var(--jefna-r-md);
  background: var(--jefna-surface-2); color: var(--jefna-text-2);
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: var(--jefna-tr);
}
.jefna-confirm-stay-btn:hover {
  border-color: var(--jefna-primary); color: var(--jefna-primary);
  background: var(--jefna-primary-light);
}
.jefna-close-confirm-save-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 14px; font-size: 11px; color: var(--jefna-muted); font-weight: 600;
}
.jefna-close-confirm-save-note::before {
  content: '💾'; font-size: 13px;
}


/* ════════════════════════════════════════════════
   AI MODAL OVERLAY
════════════════════════════════════════════════ */
.jefna-ai-overlay {
  position: fixed; inset: 0; background: rgba(10,15,30,.6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  z-index: 999998; display: none; align-items: flex-end; justify-content: center;
}
.jefna-ai-overlay.open { display: flex; animation: jefnaOverlayIn .24s ease; }
@keyframes jefnaOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 600px) {
  .jefna-ai-overlay { align-items: center; padding: 24px; }
  .jefna-ai-modal   { border-radius: var(--jefna-r-xl) !important; max-height: 88vh !important; }
}

.jefna-ai-modal {
  background: var(--jefna-surface); width: 100%; max-width: 520px; max-height: 92vh;
  border-radius: var(--jefna-r-xl) var(--jefna-r-xl) 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  animation: jefnaModalIn .36s cubic-bezier(.34,1.3,.64,1);
  box-shadow: 0 -8px 60px rgba(0,0,0,.22), 0 -2px 16px rgba(0,0,0,.1);
  will-change: transform;
  /* Fix Bug 3: create an isolated stacking context so Leaflet map panes
     (which Leaflet positions with high z-index) cannot escape the modal
     and overlap other page elements outside the chatbot. */
  isolation: isolate;
}
@keyframes jefnaModalIn {
  from { transform: translateY(80px); opacity: .3; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Header ── */
.jefna-ai-header {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #00c875 0%, #00a86b 40%, #008f5c 100%);
  padding: 18px 20px; display: flex; align-items: center; gap: 14px; flex-shrink: 0;
}
/* Mesh background pattern */
.jefna-ai-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.12) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.08) 0%, transparent 50%);
  pointer-events: none;
}
/* Decorative circle */
.jefna-ai-header::after {
  content: '';
  position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,.06); border-radius: 50%;
  pointer-events: none;
}

.jefna-ai-avatar {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.2), 0 0 0 4px rgba(255,255,255,.1);
  position: relative; z-index: 1;
  backdrop-filter: blur(8px);
}
.jefna-ai-avatar svg { color: #fff !important; }
.jefna-ai-avatar svg *[fill]:not([fill="none"]) { fill: #fff !important; }
.jefna-ai-avatar svg *[stroke]:not([stroke="none"]) { stroke: #fff !important; }

.jefna-ai-title { flex: 1; min-width: 0; position: relative; z-index: 1; }
.jefna-ai-title strong { display: block; color: #fff !important; font-size: 18px; font-weight: 900; letter-spacing: -.2px; }
.jefna-ai-model-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.2); color: rgba(255,255,255,.95);
  font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 20px;
  letter-spacing: 1px; margin: 3px 0; border: 1px solid rgba(255,255,255,.25);
}
.jefna-ai-subtitle { display: block; color: rgba(255,255,255,.88) !important; font-size: 12px; margin-top: 2px; }
.jefna-ai-status-dot {
  display: inline-block; width: 7px; height: 7px; background: #7aff9e;
  border-radius: 50%; margin-inline-end: 5px;
  animation: jefnaDotBlink 2.4s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(122,255,158,.7);
}
@keyframes jefnaDotBlink {
  0%,100% { opacity: 1; } 50% { opacity: .4; }
}

.jefna-ai-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }

.jefna-ai-close, .jefna-ai-clear, .jefna-ai-btn-icon {
  background: rgba(255,255,255,.18) !important; border: 1.5px solid rgba(255,255,255,.3) !important;
  color: #fff !important; width: 40px !important; height: 40px !important;
  border-radius: 12px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .18s, transform .15s !important; flex-shrink: 0 !important; padding: 0 !important;
  backdrop-filter: blur(4px) !important;
}
.jefna-ai-close:hover, .jefna-ai-clear:hover, .jefna-ai-btn-icon:hover {
  background: rgba(255,255,255,.32) !important; transform: scale(1.1) !important;
}
.jefna-ai-close svg, .jefna-ai-clear svg, .jefna-ai-btn-icon svg {
  stroke: #fff !important; fill: none !important; color: #fff !important;
  width: 18px !important; height: 18px !important; display: block !important; flex-shrink: 0 !important;
}

/* ── Progress bar ── */
.jefna-ai-progress {
  padding: 12px 18px 10px; flex-shrink: 0;
  background: linear-gradient(180deg, #f8fffe, #f0fbf7);
  border-bottom: 1px solid rgba(0,200,117,.1);
}
.jefna-ai-progress-track {
  height: 4px; background: #d1fae5; border-radius: 99px; margin-bottom: 12px; overflow: hidden;
}
.jefna-ai-progress-bar {
  height: 100%; background: var(--jefna-gradient);
  border-radius: 99px; transition: width .55s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(0,200,117,.5);
}
.jefna-ai-progress-steps { display: flex; justify-content: space-between; gap: 2px; }
.jefna-progress-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 5px; opacity: .28; transition: opacity .3s;
}
.jefna-progress-step.active { opacity: 1; }
.jefna-progress-step.done   { opacity: .65; }
.jefna-progress-dot {
  width: 9px; height: 9px; background: #c7e5d8; border-radius: 50%;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.jefna-progress-step.active .jefna-progress-dot {
  background: var(--jefna-primary); transform: scale(1.5);
  box-shadow: 0 0 8px rgba(0,200,117,.6);
}
.jefna-progress-step.done .jefna-progress-dot { background: var(--jefna-primary-dark); }
.jefna-progress-step span {
  font-size: 9px; font-weight: 700; color: var(--jefna-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Messages area ── */
.jefna-ai-messages {
  flex: 1; overflow-y: auto; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--jefna-surface-2); scroll-behavior: smooth;
}
.jefna-ai-messages::-webkit-scrollbar { width: 4px; }
.jefna-ai-messages::-webkit-scrollbar-thumb { background: var(--jefna-border); border-radius: 4px; }
.jefna-ai-messages::-webkit-scrollbar-track { background: transparent; }

/* Message bubbles */
.jefna-ai-msg {
  max-width: 86%; padding: 12px 16px; font-size: 14px;
  line-height: 1.7; animation: jefnaFadeUp .3s ease; word-break: break-word;
  position: relative;
}
@keyframes jefnaFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jefna-ai-msg.bot {
  background: var(--jefna-surface);
  border-radius: 4px var(--jefna-r-md) var(--jefna-r-md) var(--jefna-r-md);
  box-shadow: var(--jefna-shadow-sm); align-self: flex-start;
  color: var(--jefna-text); border: 1px solid var(--jefna-border-light);
}
.jefna-ai-msg.user {
  background: var(--jefna-gradient);
  color: #fff; border-radius: var(--jefna-r-md) var(--jefna-r-md) 4px var(--jefna-r-md);
  align-self: flex-end;
  box-shadow: 0 4px 16px rgba(0,200,117,.32), 0 2px 6px rgba(0,200,117,.18);
}
.jefna-ai-msg.typing {
  background: var(--jefna-surface); border-radius: 4px var(--jefna-r-md) var(--jefna-r-md) var(--jefna-r-md);
  align-self: flex-start; box-shadow: var(--jefna-shadow-sm);
  padding: 14px 18px; border: 1px solid var(--jefna-border-light);
}
.jefna-typing-name { display: block; font-size: 11px; font-weight: 800; color: var(--jefna-primary); margin-bottom: 8px; }
.jefna-typing-dots { display: flex; gap: 6px; align-items: center; }
.jefna-typing-dots span {
  width: 9px; height: 9px; background: var(--jefna-primary); border-radius: 50%;
  animation: jefnaDotBounce 1.4s ease-in-out infinite; opacity: .35;
}
.jefna-typing-dots span:nth-child(2) { animation-delay: .2s; }
.jefna-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes jefnaDotBounce {
  0%,60%,100% { transform: translateY(0); opacity: .35; }
  30%          { transform: translateY(-8px); opacity: 1; }
}

/* Message copy button */
.jefna-msg-copy {
  display: none; position: absolute; top: 7px; right: 7px;
  background: rgba(0,0,0,.06); border: none; border-radius: var(--jefna-r-xs);
  width: 28px; height: 28px; cursor: pointer;
  align-items: center; justify-content: center;
  color: var(--jefna-muted); transition: background .15s;
}
.jefna-ai-msg.bot:hover .jefna-msg-copy { display: flex; }
.jefna-msg-copy:hover { background: rgba(0,0,0,.14); }
.jefna-msg-time {
  display: block; font-size: 10px; color: var(--jefna-muted); margin-top: 5px;
  text-align: end; opacity: .65; letter-spacing: .2px;
}
.jefna-ai-msg.user .jefna-msg-time { color: rgba(255,255,255,.7); }

/* ── Quick reply chips ── */
.jefna-quick-replies {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px;
  background: var(--jefna-surface-2); flex-shrink: 0;
}
.jefna-quick-chip {
  padding: 8px 16px; border: 1.5px solid var(--jefna-primary);
  border-radius: 22px; font-size: 12.5px; font-weight: 700; color: var(--jefna-primary);
  background: var(--jefna-surface); cursor: pointer; transition: var(--jefna-tr);
  font-family: inherit;
}
.jefna-quick-chip:hover { background: var(--jefna-primary); color: #fff; transform: translateY(-1px); }

/* ── GPS/Map buttons inside chat ── */
.jefna-chat-gps-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 12px 20px;
  background: var(--jefna-gradient); color: #fff !important; border: none;
  border-radius: var(--jefna-r-lg); font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: var(--jefna-tr);
  box-shadow: 0 4px 16px rgba(0,200,117,.32); animation: jefnaFadeUp .3s ease;
}
.jefna-chat-gps-btn svg { stroke: #fff !important; fill: none !important; width: 16px !important; height: 16px !important; flex-shrink: 0; }
.jefna-chat-gps-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,200,117,.5); }

.jefna-chat-map-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 12px 20px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff !important; border: none; border-radius: var(--jefna-r-lg);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: var(--jefna-tr); box-shadow: 0 4px 16px rgba(59,130,246,.32);
  animation: jefnaFadeUp .35s ease;
}
.jefna-chat-map-btn svg { stroke: #fff !important; fill: none !important; width: 16px !important; height: 16px !important; flex-shrink: 0; }
.jefna-chat-map-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,130,246,.5); }


/* ════════════════════════════════════════════════
   COMPLETE ORDER BUTTON — Celebration UI
════════════════════════════════════════════════ */
.jefna-complete-wrap {
  padding: 4px 16px 12px;
  animation: jefnaFadeUp .45s cubic-bezier(.22,1,.36,1) both;
  background: var(--jefna-surface);
  border-top: 1px solid var(--jefna-border-light);
}

.jefna-complete-inner {
  position: relative; overflow: hidden; text-align: center;
  padding: 18px 16px 14px;
  background: linear-gradient(135deg,#f0fff9 0%,#e8ffef 50%,#f0fff9 100%);
  border: 2px solid rgba(0,200,117,.3);
  border-radius: var(--jefna-r-lg);
  box-shadow: 0 4px 24px rgba(0,200,117,.14), inset 0 0 0 1px rgba(255,255,255,.8);
}
/* Radial glow in top right */
.jefna-complete-inner::before {
  content: '';
  position: absolute; top: -20px; right: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(0,200,117,.2) 0%, transparent 70%);
  pointer-events: none;
}

.jefna-complete-confetti {
  font-size: 32px; display: block; margin-bottom: 8px;
  animation: jefnaConfettiPop .65s cubic-bezier(.34,1.56,.64,1) both .2s;
}
@keyframes jefnaConfettiPop {
  from { transform: scale(0) rotate(-25deg); opacity: 0; }
  to   { transform: scale(1) rotate(5deg); opacity: 1; }
}

.jefna-complete-hint {
  font-size: 11.5px !important; color: var(--jefna-muted) !important;
  margin-bottom: 14px !important; line-height: 1.5 !important;
}
.jefna-complete-btn {
  display: inline-flex !important; align-items: center !important; gap: 12px !important;
  width: 100% !important; padding: 17px 26px !important;
  background: var(--jefna-gradient) !important;
  color: #fff !important; border: none !important; border-radius: var(--jefna-r-md) !important;
  font-size: 16px !important; font-weight: 900 !important; cursor: pointer !important;
  justify-content: center !important;
  box-shadow: 0 8px 28px rgba(0,200,117,.46), 0 2px 8px rgba(0,200,117,.2) !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
  font-family: inherit !important; letter-spacing: .2px !important;
  position: relative !important; overflow: hidden !important;
}
.jefna-complete-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform .7s ease;
}
.jefna-complete-btn:hover::before { transform: translateX(100%); }
.jefna-complete-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 40px rgba(0,200,117,.58), 0 4px 12px rgba(0,200,117,.28) !important;
}
.jefna-complete-btn:active { transform: translateY(0) !important; }
.jefna-complete-btn:disabled { opacity: .7 !important; cursor: not-allowed !important; transform: none !important; }
.jefna-complete-btn-icon { font-size: 22px !important; flex-shrink: 0 !important; }
.jefna-complete-btn-text { line-height: 1.25 !important; }

.jefna-complete-btn-pulse {
  animation: jefnaCompletePulse 1.4s ease-in-out 3 !important;
}
@keyframes jefnaCompletePulse {
  0%,100% { box-shadow: 0 8px 28px rgba(0,200,117,.46) !important; }
  50%     { box-shadow: 0 8px 28px rgba(0,200,117,.46), 0 0 0 12px rgba(0,200,117,.18) !important; }
}

/* GPS warning inside complete block */
.jefna-gps-warning {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  margin-top: 12px !important; padding: 12px 14px !important;
  background: #fffbeb !important; border: 1.5px solid #fcd34d !important;
  border-radius: var(--jefna-r-sm) !important;
  font-size: 13px !important; color: #92400e !important;
  text-align: start !important; line-height: 1.5 !important;
}
.jefna-warning-shake { animation: jefnaWarningShake .42s ease !important; }
@keyframes jefnaWarningShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-7px); }
  60%     { transform: translateX(7px); }
  80%     { transform: translateX(-3px); }
}


/* ════════════════════════════════════════════════
   INPUT AREA
════════════════════════════════════════════════ */
.jefna-ai-input-area {
  padding: 12px 16px 16px !important; background: var(--jefna-surface) !important;
  border-top: 1.5px solid var(--jefna-border-light) !important;
  display: flex !important; gap: 10px !important; align-items: flex-end !important;
  flex-shrink: 0 !important;
}
.jefna-ai-input {
  flex: 1; min-width: 0;
  border: 2px solid var(--jefna-border) !important; border-radius: var(--jefna-r-md) !important;
  padding: 10px 16px !important; font-size: 14px !important; resize: none !important;
  overflow-y: hidden !important; min-height: 48px !important; max-height: 130px !important;
  outline: none !important; font-family: inherit !important; color: var(--jefna-text) !important;
  background: var(--jefna-surface-2) !important; line-height: 1.55 !important;
  display: block !important; transition: border-color .2s, box-shadow .2s, background .2s !important;
}
.jefna-ai-input:focus {
  border-color: var(--jefna-primary) !important;
  background: #fff !important; box-shadow: var(--jefna-glow) !important;
}

/* SEND button */
.jefna-ai-send {
  width: 52px !important; height: 52px !important; min-width: 52px !important;
  min-height: 52px !important; max-width: 52px !important; max-height: 52px !important;
  border: none !important; border-radius: 16px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important;
  background: var(--jefna-gradient) !important;
  box-shadow: 0 6px 20px rgba(0,200,117,.44) !important;
  transition: var(--jefna-tr) !important; font-family: inherit !important;
}
.jefna-ai-send svg {
  width: 22px !important; height: 22px !important; stroke: #fff !important;
  fill: none !important; color: #fff !important; display: block !important;
  flex-shrink: 0 !important; stroke-width: 2.5 !important;
}
.jefna-ai-send:hover  { transform: scale(1.1) rotate(-5deg) !important; box-shadow: 0 10px 28px rgba(0,200,117,.58) !important; }
.jefna-ai-send:active { transform: scale(.9) !important; }
.jefna-ai-send:disabled { opacity: .4 !important; cursor: not-allowed !important; transform: none !important; }

/* MIC button */
.jefna-ai-mic {
  width: 52px !important; height: 52px !important; min-width: 52px !important;
  min-height: 52px !important; max-width: 52px !important; max-height: 52px !important;
  border: 2px solid var(--jefna-border) !important; border-radius: 16px !important;
  cursor: pointer !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; background: var(--jefna-surface-2) !important;
  box-shadow: var(--jefna-shadow-xs) !important; transition: var(--jefna-tr) !important;
  font-family: inherit !important;
}
.jefna-ai-mic svg {
  width: 22px !important; height: 22px !important; stroke: var(--jefna-muted) !important;
  fill: none !important; display: block !important; flex-shrink: 0 !important; stroke-width: 2.2 !important;
}
.jefna-ai-mic:hover {
  background: var(--jefna-primary-light) !important; border-color: var(--jefna-primary) !important;
  box-shadow: var(--jefna-glow) !important;
}
.jefna-ai-mic:hover svg { stroke: var(--jefna-primary) !important; }
.jefna-ai-mic.recording {
  background: var(--jefna-danger) !important; border-color: var(--jefna-danger) !important;
  animation: jefnaMicPulse 1s ease-in-out infinite !important;
}
.jefna-ai-mic.recording svg { stroke: #fff !important; }
@keyframes jefnaMicPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45) !important; }
  50%     { box-shadow: 0 0 0 14px rgba(239,68,68,0) !important; }
}


/* ════════════════════════════════════════════════
   DOKAN VENDOR PANEL
════════════════════════════════════════════════ */
.jefna-vpanel {
  background: var(--jefna-primary-light); border: 1.5px solid rgba(0,200,117,.3);
  border-radius: var(--jefna-r-md); padding: 18px; margin-top: 16px;
}
.jefna-vpanel-head h3 { font-size: 15px; font-weight: 800; color: var(--jefna-text); margin: 0 0 10px; }
.jefna-vpanel-body p  { font-size: 13px; color: var(--jefna-text-2); margin: 5px 0; line-height: 1.5; }


/* ════════════════════════════════════════════════
   UTILITIES & ANIMATIONS
════════════════════════════════════════════════ */
.jefna-spin { animation: jefnaRotate 1s linear infinite; display: inline-block; }
@keyframes jefnaRotate { to { transform: rotate(360deg); } }

.jefna-field-filled { animation: jefnaFieldFlash .7s ease !important; }
@keyframes jefnaFieldFlash {
  0%,100% { background: inherit !important; }
  40%     { background: #ecfdf5 !important; box-shadow: 0 0 0 3px rgba(0,200,117,.3) !important; }
}


/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .jefna-ai-trigger     { height: 60px; font-size: 14.5px; border-radius: var(--jefna-r-lg); }
  .jefna-ai-trigger-badge { display: none; }
  .jefna-ai-modal       { max-height: 96vh; max-height: calc(100dvh - env(safe-area-inset-bottom, 0px)); }
  .jefna-progress-step span { display: none; }
  .jefna-ai-send, .jefna-ai-mic { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; }
  .jefna-complete-btn { font-size: 14.5px !important; padding: 15px 18px !important; }
  .jefna-gps-header { padding: 14px 16px; }
  .jefna-gps-actions { padding: 14px 16px 12px; }
}
@media (max-width: 360px) {
  .jefna-ai-trigger-icon { display: none; }
  .jefna-ai-trigger { gap: 8px; }
}


/* ════════════════════════════════════════════════
   VENDOR PANEL — Dokan order detail (frontend) v4.5
════════════════════════════════════════════════ */
.jefna-vpanel{background:#fff;border:2px solid #d1fae5;border-radius:18px;overflow:hidden;margin:16px 0;font-family:inherit;box-shadow:0 4px 20px rgba(0,168,85,.12)}
.jefna-vpanel-head{background:linear-gradient(135deg,#00bf63 0%,#00a040 100%);padding:15px 20px;display:flex;align-items:center;gap:10px}
.jefna-vpanel-head h3{margin:0;color:#fff;font-size:17px;font-weight:800;flex:1;letter-spacing:.2px}
.jefna-vpanel-body{padding:16px;display:flex;flex-direction:column;gap:14px}

/* ── Info cards ── */
.jefna-info-section{background:#f6fffb;border:1.5px solid #d1fae5;border-radius:14px;padding:14px 16px}
.jefna-info-section-title{font-size:11px;font-weight:800;color:#059669;margin-bottom:10px;text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:5px}
.jefna-info-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;font-size:14px;color:#1a1a1a;flex-wrap:wrap}
.jefna-info-row strong{min-width:75px;flex-shrink:0;color:#444;font-weight:600;font-size:13px}
.jefna-info-row:last-child{margin-bottom:0}

/* ── Shared button base ── */
.jefna-phone-actions a,
.jefna-btn-copy,
.jefna-btn-send-wa,
.jefna-btn-send-msg{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:11px 18px;border-radius:12px;font-size:14px;font-weight:700;
    text-decoration:none !important;cursor:pointer;border:none;line-height:1;
    transition:filter .15s,transform .1s;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    white-space:nowrap;
}
.jefna-phone-actions a:hover,.jefna-btn-copy:hover,.jefna-btn-send-wa:hover,.jefna-btn-send-msg:hover{filter:brightness(1.08);transform:translateY(-1px)}
.jefna-phone-actions a:active,.jefna-btn-copy:active,.jefna-btn-send-wa:active,.jefna-btn-send-msg:active{filter:brightness(.93);transform:translateY(0)}

/* ── Button row ── */
.jefna-phone-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* ── Button colours ── */
.jefna-btn-call{background:#2563eb;color:#fff !important}
.jefna-btn-wa  {background:#25d366;color:#fff !important}
.jefna-btn-copy{background:#64748b;color:#fff !important}
.jefna-btn-send-wa {background:#25d366;color:#fff !important}
.jefna-btn-send-msg{background:#0055e5;color:#fff !important}

/* ── Send strip ── */
.jefna-send-actions{
    display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;
    padding:13px 15px;
    background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);
    border:2px solid #6ee7b7;border-radius:14px;
}
.jefna-send-label{font-size:12px;font-weight:800;color:#065f46;width:100%;margin-bottom:4px;letter-spacing:.3px}

/* ── Map ── */
.jefna-map-wrap{position:relative;border-radius:14px;overflow:hidden;border:1.5px solid #d1fae5;margin-top:8px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.jefna-map-wrap iframe{width:100%;height:240px;border:none;display:block}
.jefna-map-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:5px 10px;text-align:center}
.jefna-map-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.jefna-map-actions a{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:700;text-decoration:none !important;transition:filter .15s}
.jefna-map-actions a:hover{filter:brightness(1.08)}
.jefna-btn-maps{background:#00bf63;color:#fff !important}
.jefna-btn-waze{background:#33ccff;color:#111 !important}

/* ── Note ── */
.jefna-note-box{background:#fffbeb;border:1.5px solid #fde68a;border-radius:12px;padding:13px 16px;font-size:13px;color:#78350f;line-height:1.7}

/* ══ TABLET ≤768px ══ */
@media(max-width:768px){
    .jefna-vpanel{border-radius:14px;margin:10px 0;box-shadow:0 2px 12px rgba(0,168,85,.10)}
    .jefna-vpanel-head{padding:13px 15px}
    .jefna-vpanel-head h3{font-size:16px}
    .jefna-vpanel-body{padding:13px;gap:11px}
    .jefna-info-section{padding:12px 13px;border-radius:12px}
    .jefna-info-row{font-size:13px}
    .jefna-phone-actions a,.jefna-btn-copy,.jefna-btn-send-wa,.jefna-btn-send-msg{
        font-size:14px;padding:12px 15px;flex:1;min-width:0;border-radius:11px}
    .jefna-send-actions{padding:12px 13px}
    .jefna-map-wrap iframe{height:210px}
    .jefna-map-actions a{flex:1;justify-content:center;padding:11px}
}

/* ══ MOBILE ≤480px ══ */
@media(max-width:480px){
    .jefna-vpanel{border-radius:12px;margin:8px 0}
    .jefna-vpanel-head{padding:12px 13px}
    .jefna-vpanel-head h3{font-size:15px}
    .jefna-vpanel-body{padding:11px;gap:10px}
    .jefna-info-section{padding:11px 12px;border-radius:11px}
    .jefna-info-row{font-size:13px;gap:7px}
    .jefna-info-row strong{min-width:60px}
    /* أزرار الاتصال — صفان */
    .jefna-phone-actions{flex-wrap:wrap;gap:8px}
    .jefna-phone-actions a,.jefna-btn-copy{
        flex:1;min-width:calc(50% - 4px);
        font-size:14px;padding:13px 8px;border-radius:11px;justify-content:center}
    /* شريط الإرسال — عمودي */
    .jefna-send-actions{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
    .jefna-send-label{text-align:center;font-size:13px}
    .jefna-btn-send-wa,.jefna-btn-send-msg{
        width:100%;justify-content:center;font-size:15px;padding:14px;border-radius:12px}
    .jefna-map-wrap iframe{height:190px}
    .jefna-map-actions a{flex:1;justify-content:center;padding:11px;font-size:14px}
    .jefna-note-box{padding:11px 12px;font-size:13px}
}