/* Menevo welcome-tour — Driver.js overrides (R4 Batch 2.4c)
   Scoped via popoverClass="menevo-tour-popover" so we don't leak styling
   into anything else that might use Driver.js. Loaded only on the three
   pages that host the cross-page onboarding tour (dashboard,
   travel-planner, travel-planner-detail). */

:root {
    /* R4 Batch 2.4d Issue 3: Driver.js default + the 0.85 we'd shipped in
       2.4c both painted the page nearly black. Onboarding best practice
       is "lightly obscured" — the user should still see where they are
       and what surrounds the spotlight. 0.5 is the sweet spot we tested. */
    --tour-overlay-bg: rgba(0, 0, 0, 0.5);
    --tour-highlight-padding: 6px;
    --tour-popover-radius: 12px;
    --tour-accent: #F9CD2D;
    --tour-bg: #FDF3D7;
    --tour-text: #003E54;
}

/* Overlay: darker than the Driver.js default so the spotlight cut-out
   reads as the only lit thing on the page. */
.driver-overlay {
    background-color: var(--tour-overlay-bg) !important;
}

/* R4 Batch 2.4d Issue 4: body-level fade applied during cross-page
   navigation inside the tour (step 4 submit → step 5 detail). The
   class is set by welcome-tour.js while a tour is active so this
   transition is dormant for non-tour traffic. */
body.tour-active {
    transition: opacity 200ms ease-out;
}

/* R4 Batch 2.4d Issue 5: the destination autocomplete dropdown in
   /travel-planner sits at z-index 200, which lands BELOW the Driver.js
   overlay (~100000). At step 3 of the tour the user types a country
   name, the dropdown opens, and it's invisible — covered by the
   overlay. Lift the relevant popups well above the overlay while a
   tour is active. The selectors cover the destination autocomplete
   (tcr-dropdown), and defensively anything that follows the
   "autocomplete"/"tag-suggestion" naming so future autocompletes
   don't regress. */
body.tour-active .tcr-dropdown,
body.tour-active [class*="autocomplete-dropdown"],
body.tour-active [class*="tag-suggestion"] {
    z-index: 100003 !important;
}

/* The active element ("spotlight target"): kept above the overlay
   stacking context so its own colors show through, with a yellow
   outline as the visual cue. F1 from Matteo's screenshot — the
   Batch 2.4b behaviour had the target rendered semi-dark; here it's
   "lifted" above the overlay. */
.driver-active-element {
    position: relative;
    z-index: 10001;
    outline: 3px solid var(--tour-accent);
    outline-offset: var(--tour-highlight-padding);
    border-radius: 8px;
    /* hard reset stray box-shadow that Driver.js might set elsewhere */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0);
}

/* R4 Batch 2.4d Issue 6a: the sidebar is position:fixed at left:0 in
   /travel-planner-detail. A standard outline with positive offset gets
   clipped on its left edge by the viewport — only ~3 of 4 sides of
   the highlight rectangle are visible. Switch to an inset shadow on
   the sidebar specifically so the highlight is drawn INSIDE the box
   and survives any viewport edge. Other targets keep the outline. */
.driver-active-element[data-tour-target="sidebar"] {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--tour-accent);
}

/* Tool mini-steps: the highlighted control is a rail item (hard against
   the fixed sidebar's left edge) or a bottom-nav tab (against the bottom
   edge). A positive-offset outline clips there; use an inset ring instead
   so all four sides survive the viewport edge. */
.driver-active-element.sidebar-item,
.driver-active-element.tp-bottom-tab {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--tour-accent);
}

/* Subtle pulse only on action-required steps (1 and 4) so the user
   notices a click is expected. We add the `tour-step-action` class on
   the popover from JS for these steps; the pulse animates the body's
   .driver-active-element while that popover is in the DOM. */
body:has(.menevo-tour-popover.tour-step-action) .driver-active-element {
    animation: tour-pulse 2s ease-in-out infinite;
}

@keyframes tour-pulse {
    0%, 100% { outline-color: var(--tour-accent); }
    50%      { outline-color: rgba(249, 205, 45, 0.5); }
}

/* Popover Menevo styling */
.driver-popover.menevo-tour-popover {
    background: var(--tour-bg);
    color: var(--tour-text);
    border-radius: var(--tour-popover-radius);
    box-shadow: 0 12px 40px rgba(0, 62, 84, 0.3);
    font-family: var(--font, 'Avenir Next', sans-serif);
    padding: 20px 22px;
    max-width: 340px;
}

.driver-popover.menevo-tour-popover .driver-popover-title {
    color: var(--tour-text);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    margin: 0 0 6px 0;
}

.driver-popover.menevo-tour-popover .driver-popover-description {
    color: var(--tour-text);
    font-size: 0.92rem;
    line-height: 1.5;
    opacity: 0.92;
}

.driver-popover.menevo-tour-popover .driver-popover-progress-text {
    color: var(--tour-text);
    opacity: 0.65;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* 3-segment progress bar (Part 1 / 2 / 3) injected at the top of every
   popover by welcome-tour.js (onPopoverRender → injectProgressBar). Replaces
   the old "Step X di N" text. Done parts are solid navy, the current part is
   the yellow accent, upcoming parts are faint. */
.driver-popover.menevo-tour-popover .menevo-tour-progress {
    display: flex;
    gap: 6px;
    margin: 0 0 14px 0;
}
.driver-popover.menevo-tour-popover .menevo-tour-progress-seg {
    flex: 1 1 0;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 62, 84, 0.16);
    transition: background 0.2s ease;
}
.driver-popover.menevo-tour-popover .menevo-tour-progress-seg.is-done {
    background: var(--tour-text);
}
.driver-popover.menevo-tour-popover .menevo-tour-progress-seg.is-active {
    background: var(--tour-accent);
}

.driver-popover.menevo-tour-popover .driver-popover-footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.driver-popover.menevo-tour-popover .driver-popover-navigation-btns {
    display: flex;
    gap: 8px;
}

/* Primary CTA — dark filled (more "Notion" than the previous yellow
   block, plays better next to the yellow spotlight ring). */
.driver-popover.menevo-tour-popover .driver-popover-next-btn,
.driver-popover.menevo-tour-popover .driver-popover-prev-btn {
    background: var(--tour-text) !important;
    color: var(--tour-bg) !important;
    border: 1.5px solid var(--tour-text) !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-shadow: none !important;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.driver-popover.menevo-tour-popover .driver-popover-next-btn:hover,
.driver-popover.menevo-tour-popover .driver-popover-prev-btn:hover {
    background: #002433 !important;
    border-color: #002433 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 36, 51, 0.25);
}

/* Skip = text link, not a button. Brief: "prominent ma non aggressivo". */
.driver-popover.menevo-tour-popover .driver-popover-close-btn {
    background: transparent !important;
    color: var(--tour-text) !important;
    border: none !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    text-decoration: underline;
    cursor: pointer !important;
    padding: 6px 4px !important;
    opacity: 0.7;
}
.driver-popover.menevo-tour-popover .driver-popover-close-btn:hover {
    opacity: 1;
}

/* Arrow recolouring to match the popover background. */
.driver-popover.menevo-tour-popover .driver-popover-arrow-side-left   { border-left-color:   var(--tour-bg) !important; }
.driver-popover.menevo-tour-popover .driver-popover-arrow-side-right  { border-right-color:  var(--tour-bg) !important; }
.driver-popover.menevo-tour-popover .driver-popover-arrow-side-top    { border-top-color:    var(--tour-bg) !important; }
.driver-popover.menevo-tour-popover .driver-popover-arrow-side-bottom { border-bottom-color: var(--tour-bg) !important; }

/* ─── RESPONSIVE ───────────────────────────────────────────────────
   The tour must work across mobile / tablet / desktop. Driver.js
   positions the popover relative to the target by default; on small
   viewports we override that and pin it to the bottom of the screen
   as a sheet so it never overflows or covers the spotlight. */

/* Mobile (≤768px): bottom-sheet, full-width, arrow hidden, lighter
   highlight (the outline + offset can crop on narrow targets). */
@media (max-width: 768px) {
    .driver-popover.menevo-tour-popover {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
        border-radius: 16px 16px 0 0;
        padding: 22px 18px 26px;
        box-shadow: 0 -8px 28px rgba(0, 62, 84, 0.25);
        /* Guard against tall popovers on small screens (long descriptions). */
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Tool mini-steps & chat FAB: their targets sit at the BOTTOM of the
       mobile viewport (bottom-nav tabs / chat FAB). Flip the sheet to the
       TOP so it never covers the highlighted target. */
    .driver-popover.menevo-tour-popover.tour-step-tool {
        top: 0 !important;
        bottom: auto !important;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 8px 28px rgba(0, 62, 84, 0.25);
    }

    .driver-popover.menevo-tour-popover .driver-popover-arrow {
        display: none !important;
    }

    /* Buttons wrap gracefully rather than overflowing a narrow sheet. */
    .driver-popover.menevo-tour-popover .driver-popover-footer {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .driver-popover.menevo-tour-popover .menevo-tour-progress {
        margin-bottom: 12px;
    }

    .driver-active-element {
        outline-width: 2px;
        outline-offset: 4px;
    }
}

/* Tablet (769–1023px): keep the popover floating but cap the width. */
@media (min-width: 769px) and (max-width: 1023px) {
    .driver-popover.menevo-tour-popover {
        max-width: 320px;
    }
}

/* ── Feedback round: explicit Skip button, clearer spotlight, hidden × ── */
/* Replace the tiny × corner icon with an explicit "Salta tour" text button
   at the BOTTOM of the popover, so it never collides with the progress bar. */
.driver-popover.menevo-tour-popover .driver-popover-close-btn { display: none !important; }
/* Single-step-at-a-time tour → no "Previous" button. */
.driver-popover.menevo-tour-popover .driver-popover-prev-btn { display: none !important; }

/* Tool mini-steps: the sidebar is position:fixed (its own stacking context), so
   Driver.js's z-index lift on the active rail item can't escape it and the tab
   stayed dimmed UNDER the overlay. Lift the whole rail above the overlay while a
   tool step is active → the highlighted tab (and the tool names) read at full
   brightness. The Driver.js popover sits above this, so it's still on top. */
body.tour-tools .sidebar.tp-sidebar,
body.tour-tools [data-tour-target="sidebar"] {
    z-index: 10001 !important;
}

/* Chat FAB (step 12) is position:fixed — the generic .driver-active-element
   position:relative would move it AND drop it below the overlay (it looked
   dark). Keep it fixed and lift it above the overlay so it reads bright. */
.driver-active-element.tp-chat-fab {
    position: fixed !important;
    z-index: 10001 !important;
}
/* Invite / collab button (step 13) lives inside the fixed header (its own
   stacking context), so its lift can't escape → raise the whole header above
   the overlay while it holds the highlighted target. */
body.tour-active .fixed-header.tp-header:has(.driver-active-element) {
    z-index: 10001 !important;
}
/* MOBILE tool steps: the tabs live in the fixed bottom-nav (NOT the sidebar,
   which is display:none on mobile) — lift that container above the overlay. */
body.tour-tools .bottom-nav.tp-bottom-nav,
body.tour-tools #bottomNav {
    z-index: 10001 !important;
}
/* Invite/collab button sits inside the collaborators chip — that intermediate
   span can form its own stacking context, so lift it too when it holds the
   highlighted target. */
body.tour-active .tp-chip--collab:has(.driver-active-element) {
    position: relative;
    z-index: 10001 !important;
}
.driver-popover.menevo-tour-popover .driver-popover-footer {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.driver-popover.menevo-tour-popover .menevo-tour-skip {
    order: -1;                 /* left side of the footer */
    margin-right: auto;        /* keep "Avanti" pushed to the right */
    background: none;
    border: none;
    color: #5a6b73;
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 6px 4px;
}
.driver-popover.menevo-tour-popover .menevo-tour-skip:hover { color: #003E54; }

/* Clearer focus: a bold yellow ring + glow around the highlighted target,
   which itself stays at full/normal brightness (Driver.js cuts it out of the
   dimmed overlay). */
.driver-active-element {
    outline: 3px solid #F9CD2D !important;
    outline-offset: 3px !important;
    border-radius: 12px !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 4px rgba(249, 205, 45, 0.40), 0 0 22px 4px rgba(249, 205, 45, 0.30) !important;
}

/* Stronger separation for the popover itself (esp. the element-less final
   step, where the dimmed backdrop now sits behind a clearly-lifted card). */
.driver-popover.menevo-tour-popover {
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38) !important;
}