/* ============================================================
   ivs-fab — mobile floating controls + the mobile header fold
   (<=767px, every page on the app layout)

   Ali's concept (Aug 2026): on phones the green phone strip and
   its hamburger fold into two floating buttons - phone bottom-
   left, quick menu bottom-right. This file owns the whole
   treatment: collapsing the strip, re-anchoring the mobile
   language switcher beside SHARE, quieting the SHARE pill, and
   re-fitting the header offsets that the 48px strip used to
   occupy. Markup: partials/ivs-fab.blade.php (included from
   layouts/app.blade.php). Behavior: js/components/ivs-fab.js.

   Everything is fenced inside max-width:767px - measured 6 Aug
   2026: at 768px the strip becomes a horizontal text menu and
   the hamburgers/share are hidden, so tablet and desktop keep
   the classic header untouched.
   ============================================================ */

.ivs-fab { display: none; }

@media (max-width: 767px) {

    /* ---- 1. The phone strip folds away ----
       Collapsed (height 0 + clip), NOT display:none: the mobile
       language switcher inside it is position:absolute against the
       FIXED HEADER (its containing block), so the clip cannot touch
       it and it lives on. The strip's nav links also stay in the
       document for crawlers. */
    .topbarstrip {
        height: 0;
        min-height: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        background: transparent;
    }

    /* The language switcher (multi-language pages only) re-seats in
       the main header row, just left of the SHARE glyph - ivs-fab.js
       moves the node there, because absolute positioning cannot track
       SHARE (the row is flex space-between, so it drifts with the
       viewport width). In flow, the navbar's own flex centring does
       the rest. Compact: at 320px the row is 200px logo + switcher +
       share + hamburger with nothing to spare. */
    header.fixed-top .mobile-lang-switcher,
    header.fixed-top .mobile-lang-switcher.dropdown {
        position: static;
        transform: none;
    }
    header.fixed-top .mobile-lang-switcher .dropdown-toggle {
        padding: 4px 5px !important; /* theirs is !important too; specificity wins */
    }
    header.fixed-top .mobile-lang-switcher .mobile-flag-icon {
        width: 22px;
        height: auto;
    }
    /* The flag caret was drawn white for the green strip - on the
       ivory header it turns olive. */
    header.fixed-top .mobile-lang-switcher .dropdown-toggle::after {
        border-top-color: var(--v5-olive-700, #4a5e2f);
    }
    /* Bootstrap opens the menu from the toggle's LEFT edge, which
       would run past the right screen edge here - anchor it right. */
    header.fixed-top .mobile-lang-switcher .dropdown-menu {
        left: auto;
        right: 0;
    }

    /* The language menu itself: style.css paints .custom-dropdown as
       an olive block with white text (all !important) - on the ivory
       header that reads heavy. White card + olive text instead, same
       voice as the floating panels. Scoped to the mobile switcher;
       the desktop topbar dropdown is untouched. */
    header.fixed-top .mobile-lang-switcher .dropdown-menu.custom-dropdown {
        background-color: #fff !important;
        border: 1px solid var(--v5-line, #e4e0d5) !important;
        border-radius: 3px !important;
        box-shadow: 0 14px 34px rgba(32, 31, 29, .22) !important;
        padding: 4px 0 !important;
    }
    header.fixed-top .mobile-lang-switcher .dropdown-menu.custom-dropdown .dropdown-item {
        background-color: transparent !important;
        color: var(--v5-olive-700, #4a5e2f) !important;
    }
    header.fixed-top .mobile-lang-switcher .dropdown-menu.custom-dropdown .dropdown-item:hover,
    header.fixed-top .mobile-lang-switcher .dropdown-menu.custom-dropdown .dropdown-item:focus,
    header.fixed-top .mobile-lang-switcher .dropdown-menu.custom-dropdown .dropdown-item:active {
        background-color: var(--v5-parchment, #f2efe8) !important;
        color: var(--v5-olive-900, #33421f) !important;
    }

    /* Hamburger: same engraved ring as SHARE. */
    .opennav {
        position: relative;
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent;
        border: 1.2px solid var(--v5-olive-300, #a9b58f);
        border-radius: 50%;
        line-height: 0;
        transition: background var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease),
                    border-color var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
    }
    .opennav:hover,
    .opennav:active {
        background: var(--v5-parchment, #f2efe8);
        border-color: var(--v5-olive-700, #4a5e2f);
    }
    /* FA's .fa rule carries transform:translate(0,0), which makes the
       0x0 <i> the containing block for its ::before - so stretch the
       <i> over the whole ring first, then centre the glyph in it. */
    .opennav .fa-bars {
        font-size: 0;
        position: absolute;
        inset: 0;
    }
    .opennav .fa-bars::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 17px;
        height: 17px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5e2f' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5'/%3E%3C/svg%3E") center/contain no-repeat;
    }
}

/* With the switcher in the row, logo + switcher + share + hamburger
   is wider than a small phone (measured: wraps at 375, fits at 390).
   Multi-language pages give the logo a little back so the row stays
   one line. Non-i18n pages (no switcher) keep the full logo. */
@media (max-width: 389px) {
    header.fixed-top:has(.mobile-lang-switcher) .navbar-brand img {
        width: 172px;
        height: auto;
    }
}
@media (max-width: 360px) {
    header.fixed-top:has(.mobile-lang-switcher) .navbar-brand img {
        width: 150px;
        height: auto;
    }
}

@media (max-width: 767px) {

    /* ---- 2. SHARE + HAMBURGER: the "Cincin Ukir" pair ----
       (Option B, boss's pick 6 Aug 2026.) Each hairline glyph
       (stroke 1.5) sits inside a thin olive-300 ring, like an
       engraved button. The FA glyphs are hidden (font-size:0) and
       the ::before paints the SVG, centred with inset+margin:auto
       so it survives responsive.css's display:block !important.
       Tap behavior untouched on both. */
    .mobShare .fa-share-alt.btn,
    .mobShare .fa-share-alt.btn:hover,
    .mobShare .fa-share-alt.btn:focus,
    .mobShare .fa-share-alt.btn:active {
        font-size: 0;
        position: relative;
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent;
        border: 1.2px solid var(--v5-olive-300, #a9b58f);
        border-radius: 50%;
        box-shadow: none;
        color: var(--v5-olive-700, #4a5e2f);
        transition: background var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease),
                    border-color var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
    }
    .mobShare .fa-share-alt.btn:hover,
    .mobShare .fa-share-alt.btn:active {
        background: var(--v5-parchment, #f2efe8);
        border-color: var(--v5-olive-700, #4a5e2f);
    }
    .mobShare .fa-share-alt.btn::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 17px;
        height: 17px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5e2f' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='17.5' cy='5.5' r='2.4'/%3E%3Ccircle cx='6.5' cy='12' r='2.4'/%3E%3Cpath d='M8.9 10.9l6.2-3.9M8.9 13.1l6.2 3.9'/%3E%3Ccircle cx='17.5' cy='18.5' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    /* ---- 3. Header offsets re-fit ----
       The fixed header lost the 48px strip (measured: 119px -> 71px
       at 390px). Every class that cleared the old header clears the
       new one with the same visual gap. Pages whose heroes carry
       their own offset are patched in their own page CSS
       (featured-tours.css, destinations-v5.css). */
    .map-section  { margin-top: 74px; }   /* homepage banner (was 123px) */
    .bannerSlider { margin-top: 75px; }   /* legacy banner wrapper (was 123px) */
    .homebanner   { margin-top: 75px; }   /* layouts/slider pages (was 123px) */
    .breadcome    { margin-top: 82px; }   /* breadcrumb pages 576-767 (was 130px) */

    /* ---- 4. The two floating buttons ---- */
    .ivs-fab {
        display: block;
        position: fixed;
        /* --ivs-fab-clear lifts both buttons above page-level fixed
           bottom bars (e.g. the tour V5 action bar, see below). */
        bottom: calc(var(--ivs-fab-clear, 0px) + 18px + env(safe-area-inset-bottom, 0px));
        /* Under the header stack (1030): the sidenav and the search
           modal still cover these when open. Above page content. */
        z-index: 1025;
    }
    .ivs-fab--call { left: 16px; }
    .ivs-fab--menu { right: 16px; }

    /* Tour V5's action bar is a fixed ink box flush to the bottom
       edge; the buttons step up over it. */
    body:has(.tv5-actionbar-shell) { --ivs-fab-clear: 56px; }

    .ivs-fab-btn {
        position: relative;
        /* Same size as the banner search circle (measured 42px @390). */
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%; /* round like the map pins / search circle family */
        background: var(--v5-olive-700, #4a5e2f);
        color: var(--v5-ivory, #faf9f6);
        cursor: pointer;
        /* "Cincin Ukir" (option B): a hairline ivory rim engraved just
           inside the edge, echoing the ringed header icons above. */
        box-shadow: inset 0 0 0 1px rgba(250, 249, 246, .55),
                    inset 0 0 0 4px var(--v5-olive-700, #4a5e2f),
                    0 5px 14px rgba(32, 31, 29, .3);
        transition: background var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease),
                    box-shadow var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
    }
    .ivs-fab-btn:active,
    .ivs-fab.is-open .ivs-fab-btn {
        background: var(--v5-olive-900, #33421f);
        box-shadow: inset 0 0 0 1px rgba(250, 249, 246, .55),
                    inset 0 0 0 4px var(--v5-olive-900, #33421f),
                    0 5px 14px rgba(32, 31, 29, .35);
    }

    /* Icon swap: the resting glyph rotates out, the X rotates in.
       Hairline SVGs (stroke 1.5) - inline in the partial - so the
       four controls share one stroke voice with the header pair. */
    .ivs-fab-ico {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease),
                    opacity var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
    }
    .ivs-fab-ico svg {
        width: 18px;
        height: 18px;
        display: block;
    }
    .ivs-fab-ico--close { opacity: 0; transform: rotate(-90deg); }
    .ivs-fab.is-open .ivs-fab-ico { opacity: 0; transform: rotate(90deg); }
    .ivs-fab.is-open .ivs-fab-ico--close { opacity: 1; transform: rotate(0deg); }

    /* ---- 5. The panels ----
       Grow gently outward from their button: scaled down at the
       bottom corner, then released. visibility keeps them out of
       the tab order while closed. */
    .ivs-fab-panel {
        position: absolute;
        bottom: 52px;
        width: max-content;
        max-width: min(280px, calc(100vw - 32px));
        background: #fff;
        border: 1px solid var(--v5-line, #e4e0d5);
        border-radius: 3px; /* button-family radius (rule-wajib/tombol.md) */
        box-shadow: 0 14px 34px rgba(32, 31, 29, .22);
        padding: 6px 0;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px) scale(.9);
        transition: transform var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease),
                    opacity var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease),
                    visibility 0s linear var(--ivs-anim-micro, 300ms);
    }
    .ivs-fab--call .ivs-fab-panel { left: 0; transform-origin: bottom left; }
    .ivs-fab--menu .ivs-fab-panel { right: 0; transform-origin: bottom right; }
    .ivs-fab.is-open .ivs-fab-panel {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: transform var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease),
                    opacity var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, ease);
    }

    /* ---- 6. Rows ---- */
    .ivs-fab-item {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px; /* touch target */
        padding: 7px 15px;
        font-family: var(--v5-font-label, sans-serif);
        font-size: .8rem;
        font-weight: 500;
        color: var(--v5-ink, #201f1d);
        text-decoration: none;
    }
    .ivs-fab-item + .ivs-fab-item { border-top: 1px solid var(--v5-line, #e4e0d5); }
    .ivs-fab-item:hover,
    .ivs-fab-item:focus {
        color: var(--v5-olive-700, #4a5e2f);
        text-decoration: none;
    }
    .ivs-fab-item i {
        flex: 0 0 auto;
        width: 18px;
        text-align: center;
        font-size: 14px;
        color: var(--v5-olive-700, #4a5e2f);
    }
    /* Phone rows carry the same hairline handset as the button. */
    .ivs-fab-item-ico {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        color: var(--v5-olive-700, #4a5e2f);
    }

    /* Phone rows: small label line over a dialable number. */
    .ivs-fab-item-text small {
        display: block;
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--v5-stone, #5b574d);
    }
    .ivs-fab-item-text strong {
        font-family: var(--v5-font-body, serif);
        font-size: .95rem;
        font-weight: 600;
        color: var(--v5-olive-700, #4a5e2f);
    }

    /* Customizable Tour keeps its amber brand voice (legal on a
       button face with ink text, same pairing as the header one). */
    .ivs-fab-item--cstour {
        margin: 7px 10px 5px;
        padding: 9px 14px;
        min-height: 40px;
        border-radius: 3px;
        background: var(--v5-amber, #fcb913);
        justify-content: center;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        font-size: .7rem;
    }
    .ivs-fab-item--cstour i { color: var(--v5-ink, #201f1d); }
    .ivs-fab-item--cstour:hover,
    .ivs-fab-item--cstour:focus { color: var(--v5-ink, #201f1d); filter: brightness(1.05); }
}

/* Breadcrumb pages <=575px: responsive.css sets 120px there, not the
   130px base. After this block so it wins the 82px rule above. */
@media (max-width: 575px) {
    .breadcome { margin-top: 72px; }
}

/* NO prefers-reduced-motion guard here - the boss's explicit call
   (6 Aug 2026, same family as the content slideshows in rule-wajib/
   animasi-motion.md): the open/close motion is the control's feedback
   and always runs, on every device. Do not "fix" this. */

/* ============================================================
   Tablet band 768-1199px — pre-existing clipping fix.
   The topbar wraps to two lines here, so the fixed header runs
   156-164px tall while the legacy offsets assume 123px: the top
   of every banner (including the homepage title) slid behind
   the header. ivs-fab.js publishes the real height as
   --ivs-header-h; +4px keeps the usual breathing room. Desktop
   >=1200 already clears (topbar back to one 38px line) and is
   left untouched.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
    .map-section,
    .bannerSlider,
    .homebanner,
    .destination-hero--atlas {
        margin-top: calc(var(--ivs-header-h, 123px) + 4px);
    }
    .breadcome {
        margin-top: calc(var(--ivs-header-h, 123px) + 4px);
    }
}