/* =============================================================================
   © Aqua Global Solutions Ltd. 2026
   aquila-tour.css - Shared step-through tour engine styles.
   Included globally via _Layout.cshtml. The tooltip and highlight ring HTML
   also live in _Layout.cshtml. Page-specific welcome / replay overlays use
   inline styles and are not defined here.
   ============================================================================= */

/* ── Blocking backdrop - shown while tour is active ─────────────────────── */
/* Transparent so the spotlight shadow from #tour-highlight does the dimming. */
#tour-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9500;
    display: none;
}

/* ── Highlight ring ─────────────────────────────────────────────────────── */
#tour-highlight {
    animation: tour-pulse 1.4s infinite;
    /* Sits above the backdrop; the large box-shadow dims the rest of the page. */
    z-index: 10000 !important;
}

/* ── Tooltip ────────────────────────────────────────────────────────────── */
#tour-tooltip {
    /* One above highlight so it is always readable. */
    z-index: 10001 !important;
}

/* ── Pulse animation ────────────────────────────────────────────────────── */
/* Dimming is handled by the backdrop's backdrop-filter + clip-path hole.   */
@keyframes tour-pulse {
    0%, 100% { border-color: #76c2bf; box-shadow: none; }
    50%       { border-color: #5aadaa; box-shadow: 0 0 0 6px rgba(118, 194, 191, 0.25); }
}

/* ── Interaction hint bar ───────────────────────────────────────────────── */
#tour-interaction-hint {
    margin: 0 14px 8px;
    padding: 6px 10px;
    background: #f0f9f8;
    border-left: 3px solid #76c2bf;
    border-radius: 0 4px 4px 0;
    font-size: 11px;
    color: #3a7876;
    line-height: 1.4;
}

/* ── Dark-mode overrides ────────────────────────────────────────────────── */
/* The tooltip and overlay cards are built with inline styles, so !important
   is required to win over them. */
[data-theme="dark"] #tour-tooltip {
    background: #2a2a28 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] #tour-tooltip #tour-tooltip-title,
[data-theme="dark"] #tour-tooltip #tour-tooltip-text {
    color: #f0ede8 !important;
}

[data-theme="dark"] #tour-interaction-hint {
    background: #1e3433 !important;
    color: #76c2bf !important;
}

[data-theme="dark"] #tour-tooltip > div:last-child {
    background: #222220 !important;
    border-top-color: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] #tour-welcome-card,
[data-theme="dark"] #tour-replay-overlay > div {
    background: #2a2a28 !important;
    color: #f0ede8 !important;
}