/* ═══════════════════════════════════════════════════════════════════════════
   tour.css — Styles for the Driver.js guided tour (see tour.js).

   Kept entirely separate from styles.css by design: every rule needed to
   remove the tour lives in this one file, so deleting it (plus tour.js and
   the <!-- TOUR --> blocks in index.html) fully reverts the change.
   ═══════════════════════════════════════════════════════════════════════════ */

/* #region "Take the tour" button (map control column) */

/* Lives as a static child of #bar-right, alongside MapLibre's own
   zoom/geolocate controls — those are moved into #bar-right at runtime
   (script.js, inside map.on('load')) and get appended *after* this static
   button, so `order` forces this one to render last (below them) in the
   #bar-right flex column regardless of that DOM append order. */
#tour-btn {
    order: 999;
}

#tour-btn::part(base) {
    width: 29px;
    height: 29px;
    min-height: unset;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ctrl-bg);
    border: var(--ctrl-border);
    border-radius: var(--ctrl-radius);
    box-shadow: var(--ctrl-shadow);
    color: var(--text-secondary);
}

#tour-btn::part(base):hover {
    background: #f5f5f5;
}

/* #endregion */

/* #region Driver.js overlay + popover */

/* Driver.js's own CSS already sets the popover's z-index extremely high
   (1e9), but the overlay SVG only gets 10000 inline — raise both here
   (the overlay needs !important to beat that inline style) so the tour
   reliably sits above MapLibre's controls and Web Awesome's hoisted
   (position: fixed, appended to <body>) dropdown listboxes. */
.driver-overlay {
    z-index: 2147483000 !important;
}

.driver-popover.audit-tour-popover {
    z-index: 2147483001 !important;
    font-family: 'Barlow', sans-serif;
    border-radius: 6px;
    max-width: 320px;
}

.driver-popover.audit-tour-popover .driver-popover-title {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.driver-popover.audit-tour-popover .driver-popover-description {
    color: var(--primary-grey);
    font-size: 12.5px;
    line-height: 1.45;
}

.driver-popover.audit-tour-popover .driver-popover-progress-text {
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    color: var(--text-secondary);
}

.driver-popover.audit-tour-popover .driver-popover-footer-btn {
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    border-radius: 4px;
}

/* "Next" — black filled button */
.driver-popover.audit-tour-popover .driver-popover-next-btn {
    background: #000;
    color: #fff;
    border-color: #000;
    font-weight: 500;
    text-shadow: none;
}

.driver-popover.audit-tour-popover .driver-popover-next-btn:hover {
    background: #222;
    border-color: #222;
}

/* "Back" — plain text, no fill/border */
.driver-popover.audit-tour-popover .driver-popover-prev-btn {
    background: transparent;
    color: var(--primary-grey);
    border-color: transparent;
    text-shadow: none;
}

.driver-popover.audit-tour-popover .driver-popover-prev-btn:hover {
    background: transparent;
    color: var(--primary-blue);
    text-decoration: underline;
}

.driver-popover.audit-tour-popover .driver-popover-close-btn {
    color: var(--text-secondary);
}

.driver-popover.audit-tour-popover .driver-popover-close-btn:hover {
    color: var(--primary-grey);
}

/* #endregion */