/* ============================================================
   Onboarding guided demo — isolated full-screen overlay.
   Self-contained: own Google map + synthetic pins/popups/tooltips.
   Mirrors the React onboarding prototype.
   ============================================================ */

/* Confined to the route content area (below the real dashboard header),
   so the demo runs inside the real app shell, not a separate window.
   `top` is set at runtime to the live header height. */
#sd-demo-overlay {
    position: fixed;
    top: 56px; left: 0; right: 0; bottom: 0;
    z-index: 9000;
    background: #E8E8E4;
    font-family: 'sd-avenir', 'Nunito', system-ui, sans-serif;
    overflow: hidden;
}
#sd-demo-map { position: absolute; inset: 0; }

/* keep the Orders/Routes side panels usable above the demo overlay */
body.sd-demo-active .sd-map-side-panels { z-index: 100002; }

/* keep core app chrome visible/usable above the demo overlay (z-index 9000).
   The navbar is z-index:300 (its own stacking context), so the admin dropdown
   that holds #multi-acc-list-container is otherwise trapped under the overlay.
   #chat-app-container is static by default — give it a stacking context so its
   floating button (and #apps-card) sit above the demo too. */
body.sd-demo-active .main-top-nav { z-index: 100002; }
body.sd-demo-active #apps-card { z-index: 100002; }
body.sd-demo-active #chat-app-container { position: relative; z-index: 100002; }

/* ── Map pins (AdvancedMarkerElement content) ────────────── */
.sd-demo-pin { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.sd-demo-pin-name {
    font-weight: 600; font-size: 10px; color: #525252; background: #FFFFFF;
    padding: 1px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); margin-bottom: 3px; white-space: nowrap;
}
.sd-demo-pin-core { position: relative; display: flex; align-items: center; justify-content: center; }
.sd-demo-order-circle {
    position: relative; z-index: 1;
    width: 34px; height: 34px; border-radius: 50%;
    background: #EA580C; color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background 0.3s, box-shadow 0.3s;
}
.sd-demo-order-circle.is-ontheway { background: #008062; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.sd-demo-order-circle.is-delivered { background: #737373; box-shadow: 0 0 0 2px #737373, 0 2px 4px rgba(0,0,0,0.15); }

/* glow rings on the demo order pin (step 1) — radar pulse matching reference onboardGlow */
.sd-demo-glow {
    position: absolute; left: 50%; top: 50%;
    width: 34px; height: 34px; border-radius: 50%;
    background: #E8590C; pointer-events: none; opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    animation: sdOnboardGlow 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.sd-demo-glow:nth-child(2) { animation-delay: 1.67s; }
.sd-demo-glow:nth-child(3) { animation-delay: 3.34s; }
@keyframes sdOnboardGlow {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
    10%  { opacity: 0.38; }
    100% { transform: translate(-50%, -50%) scale(3.8); opacity: 0; }
}

.sd-demo-driver-pin {
    width: 28px; height: 28px; border-radius: 50%;
    background: #262626; color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 10px; line-height: 1;
    border: 2.5px solid #008062; box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
}
.sd-demo-driver-pin.is-busy { border-color: #FFFFFF; }
.sd-demo-driver-wrap { position: relative; display: flex; align-items: center; justify-content: center; }

/* ── Driver marker click popup (mirrors reference DriverPopup) ─ */
.sd-demo-driver-popup {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    z-index: 30; display: flex; flex-direction: column; align-items: center; cursor: default;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.12)) drop-shadow(0 2px 8px rgba(0,0,0,0.06));
    animation: sdDemoFade 0.25s ease both;
    font-family: 'sd-avenir', 'Nunito', system-ui, sans-serif;
}
.sd-demo-dp-card { width: 292px; background: #FFFFFF; border-radius: 14px; overflow: hidden; }
.sd-demo-dp-head { display: flex; align-items: flex-start; padding: 16px 16px 0; gap: 14px; }
.sd-demo-dp-id { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.sd-demo-dp-av {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background-size: cover; background-position: center; border: 2px solid #FFFFFF;
}
.sd-demo-dp-meta { display: flex; flex-direction: column; min-width: 0; }
.sd-demo-dp-name { font-weight: 700; font-size: 15px; line-height: 1.4; color: #0A0A0A; }
.sd-demo-dp-status { font-weight: 350; font-size: 14px; line-height: 1.4; color: #525252; }
.sd-demo-dp-status.is-late { color: #D92D20; }
.sd-demo-dp-chat {
    width: 36px; height: 36px; box-sizing: border-box; flex-shrink: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid #E8E8E4; border-radius: 8px; cursor: pointer;
}
.sd-demo-dp-chat .material-symbols-outlined {
    font-size: 20px !important; color: #525252;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
.sd-demo-dp-orders-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: none; border: none; cursor: pointer;
}
.sd-demo-dp-orders-label { font-weight: 500; font-size: 14px; color: #737373; }
.sd-demo-dp-chevron { font-size: 20px !important; color: #A3A3A3; }
.sd-demo-dp-orders { padding: 0 16px 16px; }
.sd-demo-dp-caret {
    width: 0; height: 0; line-height: 0;
    border-left: 10px solid transparent; border-right: 10px solid transparent;
    border-top: 7px solid #FFFFFF;
}

.sd-demo-store-pin {
    width: 30px; height: 30px; border-radius: 8px; background: #008062;
    border: 2.5px solid #FFFFFF; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
}
.sd-demo-store-pin .material-symbols-outlined { font-size: 16px !important; color: #FFFFFF; }

/* ── Coaching tooltip (dark) ─────────────────────────────── */
.sd-demo-tooltip {
    position: absolute; z-index: 30; width: 300px;
    background: #111827; border-radius: 12px; padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    animation: sdDemoFade 0.3s ease both;
    font-family: 'sd-avenir', 'Nunito', system-ui, sans-serif;
}
@keyframes sdDemoPop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
/* fade-only — used by elements that rely on a translate(-50%) centering transform,
   which a scale animation would otherwise clobber */
@keyframes sdDemoFade { from { opacity: 0; } to { opacity: 1; } }
.sd-demo-tooltip.has-arrow::before {
    content: ''; position: absolute; left: -8px; top: 50%;
    width: 16px; height: 16px; background: #111827;
    transform: translateY(-50%) rotate(45deg); border-radius: 1px;
}
.sd-demo-tooltip.caret-down::after {
    content: ''; position: absolute; left: 50%; bottom: -6px;
    width: 14px; height: 14px; background: #111827;
    transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.sd-demo-tooltip-title { font-weight: 700; font-size: 18px; color: #FFFFFF; margin-bottom: 6px; line-height: 1.4; }
.sd-demo-tooltip-body { font-weight: 400; font-size: 15px; color: #D4D4D4; line-height: 1.4; }
.sd-demo-tooltip-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.sd-demo-tooltip-step { font-weight: 400; font-size: 14px; color: rgba(255,255,255,0.45); }
.sd-demo-btn {
    background: #008062; border: none; border-radius: 8px; cursor: pointer;
    padding: 8px 14px; font-weight: 500; font-size: 14px; color: #FFFFFF; font-family: inherit;
}
.sd-demo-btn:hover { background: #006B52; }
.sd-demo-skip {
    background: none; border: none; cursor: pointer; padding: 0;
    font-weight: 500; font-size: 13px; color: rgba(255,255,255,0.4); font-family: inherit;
}

/* ── Order popup (step 2) ────────────────────────────────── */
/* bare positioning wrapper anchored above the order pin; the inner .new-popover
   (shared with the real map popup) provides all the visual styling + typography */
#sd-demo-order-popup {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    z-index: 25; width: 320px;
    animation: sdDemoFade 0.25s ease both;
}
/* green glow on the demo Assign-driver button (layers on top of .np-btn-primary) */
.sd-demo-assign-btn { animation: sdDemoAssignPulse 1.5s ease-in-out infinite; }
@keyframes sdDemoAssignPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 128, 98, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 128, 98, 0); }
}

/* ── Assign-driver modal ─────────────────────────────────── */
#sd-demo-assign-modal {
    position: absolute; inset: 0; z-index: 40;
    background: rgba(10,10,10,0.35); display: flex; align-items: center; justify-content: center;
}
.sd-demo-assign-card {
    width: 460px; max-height: 80vh; background: #FFFFFF; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    animation: sdDemoPop 0.3s ease both;
}
.sd-demo-assign-head { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; }
.sd-demo-assign-title { font-weight: 700; font-size: 17px; color: #0A0A0A; }
.sd-demo-assign-search {
    display: block; box-sizing: border-box; width: calc(100% - 44px);
    margin: 0 22px 12px; padding: 10px 14px;
    background: #F4F4F5; border: none; border-radius: 8px; outline: none;
    font-family: inherit; font-size: 13px; color: #0A0A0A;
}
.sd-demo-assign-search::placeholder { color: #A3A3A3; }
.sd-demo-assign-section { padding: 8px 22px 4px; font-weight: 600; font-size: 12px; color: #A3A3A3; }
.sd-demo-driver-row {
    margin: 0 14px; padding: 10px 12px; border-radius: 10px; display: flex; align-items: center; gap: 12px;
    cursor: pointer; border: 1.5px solid transparent;
}
.sd-demo-driver-row:hover { background: rgba(0,128,98,0.05); }
.sd-demo-driver-row.is-selected { background: rgba(0,128,98,0.08); border-color: #008062; }
.sd-demo-driver-row.is-pulse { border-color: #6AEBBE; animation: sdDemoBtnPulse 1.8s ease-in-out infinite; }
@keyframes sdDemoBtnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,128,98,0.0); } 50% { box-shadow: 0 0 0 4px rgba(0,128,98,0.12); } }
.sd-demo-driver-av { width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; }
.sd-demo-driver-info { flex: 1; }
.sd-demo-driver-name { font-weight: 600; font-size: 14px; color: #0A0A0A; }
.sd-demo-driver-status { font-weight: 400; font-size: 12px; color: #737373; }
.sd-demo-driver-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D4D4D4; flex-shrink: 0; }
.sd-demo-driver-row.is-selected .sd-demo-driver-radio { border-color: #008062; background: #008062 radial-gradient(#fff 22%, transparent 26%); }
.sd-demo-assign-foot { padding: 16px 22px; display: flex; gap: 12px; border-top: 1px solid #F4F4F5; }
.sd-demo-assign-cancel { flex: 1; height: 42px; background: #FFFFFF; border: 1px solid #E8E8E4; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: #525252; font-family: inherit; }
.sd-demo-assign-confirm { flex: 1; height: 42px; background: #008062; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: #FFFFFF; font-family: inherit; }
.sd-demo-assign-confirm:disabled { background: #D4D4D4; cursor: default; }

/* ── Centered modals (intro / all-set) ───────────────────── */
.sd-demo-modal-backdrop {
    position: fixed; inset: 0; z-index: 100003; /* above the raised navbar (100002) — full screen */
    background: rgba(10,10,10,0.5);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
}
.sd-demo-modal {
    width: 460px; background: #FFFFFF; border-radius: 22px; padding: 40px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.25); text-align: center; position: relative;
    animation: sdDemoPop 0.4s cubic-bezier(0.34,1.15,0.64,1) both;
}
.sd-demo-modal-close {
    position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
    border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sd-demo-modal-close .material-symbols-outlined { font-size: 22px !important; color: #A3A3A3; }
.sd-demo-modal-title { font-weight: 800; font-size: 24px; color: #0A0A0A; margin: 16px 0 10px; }
.sd-demo-modal-sub { font-weight: 400; font-size: 15px; color: #737373; line-height: 1.5; }
.sd-demo-modal-cta {
    width: 100%; height: 48px; margin-top: 28px; background: #008062; border: none; border-radius: 12px;
    cursor: pointer; font-weight: 600; font-size: 15px; color: #FFFFFF; font-family: inherit;
}
.sd-demo-modal-cta:hover { background: #006B52; }
.sd-demo-modal-skip { margin-top: 14px; background: none; border: none; cursor: pointer; font-weight: 500; font-size: 14px; color: #A3A3A3; font-family: inherit; }

/* feature rows (all-set) + check */
.sd-demo-check { width: 56px; height: 56px; border-radius: 50%; background: rgba(1,173,133,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.sd-demo-check .material-symbols-outlined { font-size: 32px !important; color: #01AD85; }
.sd-demo-feats { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.sd-demo-feat { display: flex; align-items: center; gap: 14px; }
.sd-demo-feat-ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(0,128,98,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sd-demo-feat-ic .material-symbols-outlined { font-size: 20px !important; color: #008062; }
.sd-demo-feat-label { font-weight: 500; font-size: 15px; color: #404040; }

/* ── Tracking card (step 4) ──────────────────────────────── */
/* anchored above the driver pin (rendered as marker content) — follows the driver */
#sd-demo-track-card {
    position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%);
    z-index: 30; width: 300px;
    background: #111827; border-radius: 14px; padding: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    animation: sdDemoFade 0.3s ease both;
}
#sd-demo-track-card::after {
    content: ''; position: absolute; left: 50%; bottom: -6px;
    width: 14px; height: 14px; background: #111827;
    transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.sd-demo-track-head { display: flex; align-items: center; justify-content: space-between; }
.sd-demo-track-status { font-weight: 800; font-size: 17px; color: #FFFFFF; }
.sd-demo-track-eta { font-weight: 700; font-size: 13px; color: #FFFFFF; background: rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 20px; }
.sd-demo-track-arrival { font-weight: 400; font-size: 13px; color: #9CA3AF; margin-top: 4px; }
/* 4-dash status line (ref: tracking page green-line/grey-line) */
.sd-demo-track-bar { display: flex; gap: 6px; margin: 14px 0; }
.sd-demo-track-seg { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15); transition: background 0.3s; }
.sd-demo-track-seg.is-filled { background: #008062; }
.sd-demo-track-seg.is-active { animation: sdDemoSegPulse 1.4s ease-in-out infinite; }
@keyframes sdDemoSegPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.sd-demo-track-driver { display: flex; align-items: center; justify-content: space-between; }
.sd-demo-track-driver-info { display: flex; align-items: center; gap: 10px; }
.sd-demo-track-av { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; }
.sd-demo-track-name { font-weight: 600; font-size: 14px; color: #FFFFFF; }
.sd-demo-track-sub { font-weight: 400; font-size: 12px; color: #9CA3AF; }

/* ============================================================
   Dark mode ([data-theme="dark"]) — light surfaces only.
   (Tooltips, track card use a dark callout in both themes; the
   order popup reuses the theme-aware .new-popover.)
   ============================================================ */
[data-theme="dark"] .sd-demo-assign-card { background: var(--common-background); }
[data-theme="dark"] .sd-demo-assign-title { color: var(--sd-neutral-900); }
[data-theme="dark"] .sd-demo-assign-search { background: var(--card-background); color: var(--sd-neutral-900); }
[data-theme="dark"] .sd-demo-assign-section { color: var(--sd-neutral-500); }
[data-theme="dark"] .sd-demo-driver-name { color: var(--sd-neutral-900); }
[data-theme="dark"] .sd-demo-driver-status { color: var(--sd-neutral-500); }
[data-theme="dark"] .sd-demo-driver-radio { border-color: var(--sd-neutral-400); }
[data-theme="dark"] .sd-demo-assign-foot { border-top-color: var(--sd-neutral-300); }
[data-theme="dark"] .sd-demo-assign-cancel { background: var(--common-background); border-color: var(--sd-neutral-300); color: var(--sd-neutral-700); }

[data-theme="dark"] .sd-demo-modal { background: var(--common-background); }
[data-theme="dark"] .sd-demo-modal-title { color: var(--sd-neutral-900); }
[data-theme="dark"] .sd-demo-modal-sub { color: var(--sd-neutral-500); }
[data-theme="dark"] .sd-demo-modal-close .material-symbols-outlined { color: var(--sd-neutral-500); }
[data-theme="dark"] .sd-demo-feat-label { color: var(--sd-neutral-700); }

/* driver click popup */
[data-theme="dark"] .sd-demo-dp-card { background: var(--card-background); }
[data-theme="dark"] .sd-demo-dp-caret { border-top-color: var(--card-background); }
[data-theme="dark"] .sd-demo-dp-av { border-color: var(--card-background); }
[data-theme="dark"] .sd-demo-dp-name { color: var(--sd-neutral-900); }
[data-theme="dark"] .sd-demo-dp-status { color: var(--sd-neutral-500); }
[data-theme="dark"] .sd-demo-dp-chat { border-color: var(--sd-neutral-300); }
[data-theme="dark"] .sd-demo-dp-chat .material-symbols-outlined { color: var(--sd-neutral-500); }
[data-theme="dark"] .sd-demo-dp-orders-label { color: var(--sd-neutral-500); }

[data-theme="dark"] #sd-demo-overlay { background: #1A1A1A; }