/* Fenix spotlight tour (2026-09-12) — built by fenix-tour.js. The ring's huge box-shadow IS the dim:
   everything but the highlighted step darkens, and the transparent dim div eats clicks so the page
   stays put. Desktop: the card floats beside the ring. Phone: the card is a bottom sheet and the JS
   scrolls the ring into the space above it. Appearance follows the company theme; the legacy values are standalone fallbacks. */
.fx-tour { position: fixed; inset: 0; z-index: 9100; --fx-tour-bg: var(--fenix-color-surface, #faf6ec); --fx-tour-ink: var(--fenix-color-text, #0a3829); --fx-tour-muted: var(--fenix-color-text-muted, #5f6a64); --fx-tour-accent: var(--fenix-color-primary, #0f4b3a); --fx-tour-gold: var(--fenix-color-accent, #c49a3b); }
.fx-tour__dim { position: absolute; inset: 0; }
/* The link and action rows are optional per step; their display rules must not beat the hidden attribute. */
.fx-tour [hidden] { display: none !important; }
.fx-tour__ring { position: fixed; border-radius: var(--fenix-radius-card, 14px); pointer-events: none; box-shadow: 0 0 0 9999px rgba(10, 20, 16, 0.55), 0 0 0 2px var(--fx-tour-gold); transition: top .25s, left .25s, width .25s, height .25s; }
.fx-tour__card { position: fixed; box-sizing: border-box; width: 340px; max-width: calc(100% - 32px); background: var(--fx-tour-bg); color: var(--fx-tour-ink); border-radius: var(--fenix-radius-card, 14px); padding: 20px 22px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); font-family: var(--fenix-font-body, 'Inter'), system-ui, sans-serif; }
.fx-tour__close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--fx-tour-muted); cursor: pointer; padding: 4px 8px; }
.fx-tour__count { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-tour-gold); }
.fx-tour__title { margin: 0 0 8px; font-family: var(--fenix-font-heading, 'Fraunces'), Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--fx-tour-ink); }
.fx-tour__body { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--fx-tour-ink); }
.fx-tour__link { display: inline-block; margin: -6px 0 16px; font-size: 14px; font-weight: 600; color: var(--fx-tour-accent); text-decoration: underline; text-underline-offset: 3px; }
.fx-tour__action { display: block; width: 100%; box-sizing: border-box; margin: 0 0 14px; font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--fenix-radius-btn, 8px); padding: 11px 16px; cursor: pointer; background: none; border: 1px solid var(--fx-tour-accent); color: var(--fx-tour-accent); }
.fx-tour__action:hover { background: var(--fenix-color-primary-light, rgba(15, 75, 58, 0.06)); }
.fx-tour__foot { display: flex; align-items: center; gap: 8px; }
.fx-tour__dots { display: flex; gap: 6px; margin-right: auto; }
.fx-tour__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fenix-color-border, rgba(10, 56, 41, 0.2)); }
.fx-tour__dot.is-on { background: var(--fx-tour-accent); }
.fx-tour__back, .fx-tour__next { font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--fenix-radius-btn, 8px); padding: 10px 16px; cursor: pointer; }
.fx-tour__back { background: none; border: 1px solid var(--fenix-color-border, rgba(10, 56, 41, 0.25)); color: var(--fx-tour-ink); }
.fx-tour__back:disabled { opacity: .35; cursor: default; }
.fx-tour__next { background: var(--fx-tour-accent); border: 1px solid var(--fx-tour-accent); color: var(--fenix-btn-text, #fff); }
.fx-tour__next:hover { filter: brightness(0.92); }
.fx-tour button:focus-visible, .fx-tour a:focus-visible { outline: 2px solid var(--fx-tour-gold); outline-offset: 2px; }
/* An informational step (center: true): no ring, the dim div carries the darkening instead. */
.fx-tour--center .fx-tour__ring { display: none; }
.fx-tour--center .fx-tour__dim { background: rgba(10, 20, 16, 0.55); }
/* The first-visit welcome card must not land on top of the tour; it shows once the tour ends. */
.fx-tour-on .fenix-welcome { display: none !important; }
@media (max-width: 767px) {
    .fx-tour__card { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none; border-radius: var(--fenix-radius-card, 16px) var(--fenix-radius-card, 16px) 0 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); }
    .fx-tour__ring { border-radius: var(--fenix-radius-card, 12px); }
}
@media (prefers-reduced-motion: reduce) {
    .fx-tour__ring { transition: none; }
}

/* The "New here? See how ordering works" link that tour() in indigo-pages.js drops above step 1 of
   the Indigo buy panel. Indigo-specific, but it lives here so the whole feature is one pair of files. */
.ind-tour-link { align-self: flex-start; margin: 0 0 14px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 1.4; color: var(--fenix-color-text-muted, #6b736e); cursor: pointer; text-align: left; }
.ind-tour-link span { color: var(--fenix-color-text, #0a3829); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }