/* ============================================================
   DESTINITO — PWA CHROME
   Top bar + bottom navigation, per Guideline V4 §4.
   See /design/pwa-styling-guide.

   Loaded after theme-destinito-bridge.css. Legacy .iig-* class
   names are kept because JS binds to them (mobileUserBtn,
   moreMenuBtn, .iig-bottom-nav-item …); the new dn-* classes carry
   the brand styling and are scoped tightly enough to win over the
   old rules in theme-destinito.css without !important.

   Mobile only in practice: .iig-mobile-header is display:none
   above 768px and .iig-bottom-nav is display:block only below it.
   Top-bar rules are additionally scoped under .iig-mobile-header
   so the desktop header (same .iig-header-actions class) is
   untouched.
   ============================================================ */

/* ------------------------------------------------------------
   Lucide icon base — 24px grid, 2px stroke, currentColor.
   One family, no raster, inherits theme colour. (§6)
   ------------------------------------------------------------ */
.dn-ico {
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Solid glyphs (loyalty star) — filled, no stroke. */
.dn-ico--solid {
    fill: currentColor;
    stroke: none;
}

/* ============================================================
   TOP BAR (§4)
   Navy. D-icon + island selector pill, then exactly four slots:
   Account · Search · Loyalty · Menu.
   ============================================================ */

.iig-mobile-header .iig-header-actions {
    gap: 10px;
}

/* Island selector pill: 1px navy-700 hairline, white text. */
.iig-mobile-header .iig-island-selector {
    background: transparent;
    border: 1px solid var(--navy-700);
    border-radius: var(--radius-pill);
    color: var(--white);
    padding: 5px 10px;
    gap: 6px;
}

.iig-mobile-header .iig-island-selector:hover,
.iig-mobile-header .iig-island-selector:active {
    background: var(--navy-700);
}

.iig-mobile-header .iig-island-selector .dn-ico {
    width: 15px;
    height: 15px;
}

/* ---- Ghost circles --------------------------------------------
   30px visual circle per §4, transparent until pressed. The ::after
   expands the touch target to 44px without growing the circle, so
   the row stays visually light but stays thumb-safe. */
.iig-mobile-header .dn-tb-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dur-fast) var(--ease-out);
}

.iig-mobile-header .dn-tb-btn::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
}

.iig-mobile-header .dn-tb-btn .dn-ico {
    width: 18px;
    height: 18px;
}

.iig-mobile-header .dn-tb-btn:hover,
.iig-mobile-header .dn-tb-btn:active,
.iig-mobile-header .dn-tb-btn.active {
    background: var(--navy-700);
    color: var(--white);
}

.iig-mobile-header .dn-tb-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Account: beats `.iig-user-btn { background: var(--iig-accent) }`
   in theme-destinito.css — the account slot is NOT orange (§4). */
.iig-mobile-header .iig-header-actions .iig-user-btn.dn-tb-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--white);
}

.iig-mobile-header .iig-header-actions .iig-user-btn.dn-tb-btn:hover,
.iig-mobile-header .iig-header-actions .iig-user-btn.dn-tb-btn:active,
.iig-mobile-header .iig-header-actions .iig-user-btn.dn-tb-btn.active {
    background: var(--navy-700);
}

/* ---- Loyalty: the ONE orange element in the top bar (§4) -------
   White glyph on orange, per operator decision. Note this is a solid
   mark on a saturated fill rather than text, so the ~2.3:1 white-on-
   orange ratio is not held to the 4.5:1 text rule; the button also
   carries a title and aria-label. */
.iig-mobile-header .dn-tb-btn--loyalty {
    background: var(--orange);
    color: var(--white);
}

.iig-mobile-header .dn-tb-btn--loyalty:hover {
    background: var(--orange-hover);
    color: var(--white);
}

.iig-mobile-header .dn-tb-btn--loyalty:active {
    background: var(--orange);
    color: var(--white);
}

/* Stroked stamp needs the same optical size as the other ghost glyphs;
   the previous 16px was sized for a solid star, which reads larger. */
.iig-mobile-header .dn-tb-btn--loyalty .dn-ico {
    width: 18px;
    height: 18px;
}

/* ============================================================
   BOTTOM NAV (§4)
   Explore · Dining · Ask · Beaches · More
   White bar, navy-100 hairline, no black shadow, labels always on.
   ============================================================ */

.iig-bottom-nav {
    background: var(--white);
    border-top: 1px solid var(--navy-100);
    box-shadow: none;
    padding-top: 6px;
}

.iig-bottom-nav .iig-bottom-nav-items {
    justify-content: space-around;
    padding: 0 2px;
}

.iig-bottom-nav .iig-bottom-nav-item {
    min-width: 44px;
    min-height: 44px;
    gap: 3px;
    padding: 2px 4px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--navy-400);
    background: none;
    border: 0;
    transition: color var(--dur-fast) var(--ease-out);
}

.iig-bottom-nav .iig-bottom-nav-item .dn-ico {
    width: 24px;
    height: 24px;
}

/* Labels are never hidden — no icon-only state at any width. (§4) */
.iig-bottom-nav .iig-bottom-nav-item > span {
    display: block;
}

.iig-bottom-nav .iig-bottom-nav-item:hover,
.iig-bottom-nav .iig-bottom-nav-item.active {
    color: var(--navy);
}

.iig-bottom-nav .iig-bottom-nav-item.active {
    font-weight: 700;
}

.iig-bottom-nav .iig-bottom-nav-item:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

/* ---- Fifth slot: audience-aware --------------------------------
   Trip (wallet) for visitors, Rewards (line star) for residents.
   Both variants ship in the markup; the visible one is selected by the
   body.visitor-category-* class that _VisitorTypePopup applies — on
   selection change and again on every load from the stored value. That
   makes the swap instant with no reload, and stable across sessions
   without this component persisting anything itself.

   Default (no class yet, e.g. first visit before the popup resolves)
   falls to the visitor variant, matching the brief's default. */
.iig-bottom-nav .dn-slot-resident {
    display: none;
}

body.visitor-category-resident .iig-bottom-nav .dn-slot-visitor {
    display: none;
}

body.visitor-category-resident .iig-bottom-nav .dn-slot-resident {
    display: flex;
}

/* ---- Ask: the concierge, centre slot ---------------------------
   52px orange circle raised 24px above the bar. Only orange in the
   chrome besides the loyalty dot. Shadow is navy-based, per brief. */
.iig-bottom-nav .dn-ask {
    justify-content: flex-start;
}

.iig-bottom-nav .dn-ask .dn-ask-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -24px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(0, 51, 102, .15);
    transition: background var(--dur-fast) var(--ease-out);
}

.iig-bottom-nav .dn-ask:hover .dn-ask-circle {
    background: var(--orange-hover);
}

.iig-bottom-nav .dn-ask:active .dn-ask-circle {
    background: var(--orange);
}

/* Ask keeps its label like every other slot, in the brand orange. */
.iig-bottom-nav .dn-ask .dn-ask-label,
.iig-bottom-nav .dn-ask:hover .dn-ask-label,
.iig-bottom-nav .dn-ask.active .dn-ask-label {
    margin-top: 4px;
    color: var(--orange);
    font-weight: 700;
}

/* ------------------------------------------------------------
   The concierge FAB is redundant on the destination home page at any
   width: the hero carries an ask bar, and on mobile the bottom nav
   carries the Ask slot. Two floating orange concierge entry points on
   one screen is what §4 rules out.

   Scoped to the home page via body.iig-home so the FAB still appears on
   every other page, where nothing else offers the concierge.
   !important is needed because several pages re-declare .ai-chat-fab in
   page-level <style> blocks, which would otherwise out-cascade this
   linked sheet.
   ------------------------------------------------------------ */
body.iig-home .ai-chat-fab {
    display: none !important;
}

/* Elsewhere, the FAB still gives way to the bottom-nav Ask slot on mobile. */
@media (max-width: 768px) {
    .ai-chat-fab {
        display: none !important;
    }
}