.flag-icon-small,
.topbar-flag-icon {
    border-radius: 2px;
    vertical-align: middle;
}
.logonav ul li,
.topsidenav ul li,
footer ul {
    list-style: none;
}
.topbarstrip {
    /* V5 olive-700: the site frame's green, one family with the page
       content. The old kelly #00a652 lives on only in legacy page bodies
       until each gets its V5 pass. */
    background: #4a5e2f;
    border-bottom: 0;
    color: #fff;
    padding: 0;
    box-shadow: 0 1px 11px #ccc;
}
.topbarstrip ul li {
    font-size: 13px;
    float: left;
    padding: 7px 13px;
}
.topbarstrip ul li:first-child {
    padding-left: 0;
}
.topbarstrip a,
.topstripmenu nav.navbar li.cstour a:hover {
    color: #fff !important;
}
.topstripmenu nav.navbar {
    float: right;
}
.topstripmenu nav.navbar,
.topstripmenu nav.navbar li,
header nav .navbar-brand {
    padding: 0;
}
.btnround a,
.homebanner .carousel-caption a {
    background: #00a652;
    padding: 12px 45px;
    display: inline-block;
}
.topstripmenu nav.navbar li a {
    padding: 7px 13px !important;
    color: #fff;
}
.topstripmenu nav.navbar li a:hover {
    color: #fef193 !important;
}
.topstripmenu nav.navbar li.cstour a {
    background: #fcb913;
    text-transform: uppercase;
    color: #000 !important;
    padding: 7px 20px !important;
}
.topbar-lang-dropdown {
    position: relative;
    display: inline-block;
    margin-left: -20px;
}
@media (min-width: 768px) {
    .topbar-lang-dropdown {
        display: inline-block !important;
    }
}
.topbar-lang-dropdown .dropdown-toggle {
    padding: 7px 8px !important;
    display: inline-block;
}
.topbar-lang-dropdown .dropdown-toggle::after {
    vertical-align: middle;
    margin-left: 4px;
}
.topbar-flag-icon {
    width: 24px;
    height: 18px;
    display: inline-block;
    cursor: pointer;
    margin-top: 0;
}
.flag-icon-small {
    width: 20px;
    height: 15px;
    margin-right: 8px;
}
.homebanner,
footer,
footer ul a {
    position: relative;
}
.darkheader {
    background: #fff;
    border-bottom: 1px solid #eee;
}
.btnround a {
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    text-align: center;
}
.simplebtn a {
    color: #111;
    font-size: 14px;
}
footer p,
footer ul a {
    color: #9e9e9e;
}
.logonav ul li a:hover,
.opennav:hover,
.simplebtn a:hover,
.topsidenav ul li a:hover {
    color: #4a5e2f;
}
header nav.headernav {
    padding: 5px 10px;
    background: #fff;
}
.logonav {
    opacity: 1;
    padding: 0;
    margin: 0 0 0 3%;
}
.logonav ul,
.megamenu > li > ul,
footer ul {
    padding: 0;
    margin: 0;
}
.logonav ul li {
    padding: 0;
    margin: 0;
    float: left;
}
.logonav ul li a {
    padding: 5px 8px;
    margin: 0;
    display: block;
    font-size: 14px;
    color: #999;
}
.mobicon,
.opennav {
    display: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--v5-ink, #201f1d);
    border: 1px solid var(--v5-olive-500, #6b8051);
    padding: 5px 7px 3px;
    background: var(--v5-olive-300, #a9b58f);
    border-radius: 3px; /* button family radius (rule-wajib/tombol.md) */
    font-weight: 400;
}
.mobicon {
    color: #000 !important;
}
.topsidenav .closebtn {
    position: absolute;
    top: 11px;
    right: 11px;
    font-size: 24px;
    color: red;
    display: none;
    z-index: 9;
}
.topsidenav .closebtn:hover {
    color: #4a5e2f;
}
.topsidenav ul {
    margin: 0;
    padding: 0;
}
.topsidenav ul > li > a {
    padding: 28px 12px;
    font-size: 14px;
    position: relative;
    color: #000;
    display: block;
    transition: 0.3s;
    white-space: nowrap;
}
.bdr1px {
    border-bottom: 1px solid #eee;
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    margin-left: 0;
}
.topsidenav ul li:hover .dropdown-menu {
    display: block;
}
.topsidenav ul > li.searchbox > a {
    padding: 28px 10px !important;
}
.topsidenav ul > li.searchbox .dropdown-toggle::after {
    content: none;
}
.topsidenav ul > li.searchbox .dropdown-menu {
    left: -150px;
    top: 75%;
    width: 200px;
    padding: 10px !important;
}
.topsidenav ul > li.searchbox .dropdown-menu input {
    width: 100%;
    border: 1px solid #ccc;
    padding: 2px 5px;
    font-size: 13px;
}
.dropdown-menu {
    border-radius: 0;
    margin-top: -7px !important;
    padding: 20px !important;
}
.megamenu {
    padding: 20px 0;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.megamenu .dropdown-header,
.megamenu .dropdown-header a {
    color: var(--v5-olive-700, #4a5e2f); /* was bootstrap blue #428bca; olive 4 Aug 2026 */
    font-size: 18px;
    font-weight: 700;
}
.megamenu > li > ul > li {
    list-style: none;
    display: block;
    float: inherit;
}
.megamenu > li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.428571429;
    color: #999;
    white-space: normal;
}
.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}
.megamenu > li > ul > li > a::before {
    content: "\00BB";
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 2px;
    text-decoration: none;
}
.homebanner {
    height: 601px;
    margin-top: 123px;
}
.layer-overlay::before {
    background: rgb(255 255 255 / 75%);
    content: " ";
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.innerbanner.layer-overlay::before {
    background: rgb(255 255 255 / 90%);
}
.homebanner .carousel-item img {
    max-height: 601px;
}
.homebanner .carousel-caption {
    right: inherit;
    bottom: inherit;
    left: 8%;
    text-align: left;
    top: 27%;
}
.homebanner .carousel-caption h3 {
    font-size: 56px;
    font-weight: 800;
}
.homebanner .carousel-caption p {
    font-size: 18px;
    color: #fff;
    font-weight: 400;
}
.homebanner .carousel-caption a {
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    margin-top: 5px;
}
.homebanner .carousel-control-next,
.homebanner .carousel-control-prev {
    width: 4%;
}
.homebanner .carousel-caption a:hover {
    background: #111;
}
footer {
    background: #131313;
    color: #fff;
    padding: 90px 0 0;
}
footer h4 {
    font-size: 22px;
    margin: 0 0 25px;
    padding: 0;
    font-weight: 600;
}
footer ul li {
    padding: 5px 0;
    display: flex;
    align-items: center;
}
footer ul li:first-child {
    padding-top: 0;
}
footer ul a {
    transition: 0.3s;
    font-size: 15px;
}
footer a:hover {
    color: #d4def0;
}
footer .copyright {
    color: #9e9e9e;
    border-top: 1px solid #2d2d2d;
    margin-top: 50px;
}
footer .social-links {
    margin-top: 30px;
}
.phonebox h5,
.phonebox p {
    margin: 0;
    font-weight: 600;
}
footer .social-links a {
    font-size: 20px;
    display: inline-block;
    color: #fff;
    padding: 0;
    margin-right: 10px;
    transition: 0.3s;
}
footer .social-links a:hover {
    color: #d3d3d3;
    text-decoration: none;
}
.phonebox {
    margin: 15px 0 0;
}
.phonebox h5 {
    font-size: 18px;
    color: #fff;
}
.phonebox p {
    padding: 0;
    font-size: 14px;
    color: #d3d3d3;
}
.back-to-top {
    position: absolute;
    left: calc(50% - 20px);
    top: -18px;
    z-index: 999;
    cursor: pointer;
}
.back-to-top i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #131313;
    color: #fff;
    transition: 0.4s;
}
.imgfullw img {
    width: 100%;
}
.mobile-lang-switcher,
.mobile-lang-switcher.dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}
@media (min-width: 768px) {
    .mobile-lang-switcher,
    .mobile-lang-switcher.dropdown {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
}
@media (max-width: 767px) {
    .mobile-lang-switcher,
    .mobile-lang-switcher.dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
        position: absolute;
        right: 55px;
        top: 8px;
        z-index: 20;
    }
    .mobile-lang-switcher .dropdown-toggle {
        padding: 5px 8px !important;
        display: inline-block;
        background: 0 0;
        border: none;
    }
    .mobile-lang-switcher .dropdown-toggle::after {
        display: inline-block !important;
        margin-left: 6px;
        vertical-align: middle;
        content: "";
        border-top: 0.3em solid #fff;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }
    .mobile-flag-icon {
        width: 24px !important;
        height: 18px !important;
        border-radius: 2px;
        display: inline-block;
        cursor: pointer;
    }
    .mobile-lang-switcher .dropdown-menu.custom-dropdown {
        position: absolute !important;
        top: 38px !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        min-width: 150px;
        padding: 8px 0 !important;
        margin: 0;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }
    .mobile-lang-switcher .dropdown-menu.custom-dropdown .dropdown-item {
        padding: 8px 15px !important;
        font-size: 14px;
        color: #333;
        display: flex;
        align-items: center;
    }
    .mobile-lang-switcher .dropdown-menu.custom-dropdown .dropdown-item:hover {
        background-color: #f8f9fa;
        color: #4a5e2f;
    }
    .mobile-lang-switcher .flag-icon-small {
        width: 20px !important;
        height: 15px !important;
        margin-right: 10px;
        border-radius: 2px;
    }
    .topbar-lang-dropdown {
        display: none !important;
    }
}

/* ============================================================
   Header typography
   The pages below the header were rebuilt onto Playfair/Lora,
   so the bar above them was the last thing still in Roboto.
   The header is shared by every page, hence these rules live
   here rather than in a per-page stylesheet, and the faces are
   loaded in layouts/app.blade.php for the same reason.

   Typeface only: no wording, no heading levels, no colours,
   no sizes, no spacing, no layout.
   ============================================================ */

/* Green strip: phone numbers and the small link row. */
.topbarstrip,
.topbarstrip ul li,
.topbarstrip a,
.topstripmenu nav.navbar li a {
    font-family: 'Lora', Georgia, serif;
}

/* Main nav row (Home, Destinations, Holidays in Villas ...). The wrapper
   is named as well as the links, so any stray text node in the bar
   inherits the same face instead of falling back to Roboto. */
.logonav,
.logonav ul li,
.logonav ul li a {
    font-family: 'Lora', Georgia, serif;
}

/* Megamenu column heads (Northern Italy, Islands of Italy ...).
   These are the only headings in the header, so they take the
   display face the page headings use. */
.megamenu .dropdown-header,
.megamenu .dropdown-header a {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Megamenu links under each column head. */
.megamenu > li > ul > li > a {
    font-family: 'Lora', Georgia, serif;
}

/* Language switcher items, so the dropdown matches the bar it hangs from. */
.dropdown-menu.custom-dropdown .dropdown-item {
    font-family: 'Lora', Georgia, serif;
}

/* ---- Language switcher clearance -------------------------
   The flag sits close to the first link because Lora sets wider
   than the Roboto this row was spaced for. A few pixels back to
   the left is all it needs.

   Capping the nav width instead was tried and reverted: it made
   the link row reflow wide enough to push the Customizable Tour
   button out past the container. */
.topbar-lang-dropdown {
    margin-left: -36px;
}

/* The toggle box runs well past the flag on both sides: padding
   either side plus the caret. Trimming that slack is what buys
   the clearance, rather than moving the flag further and running
   it into the phone numbers instead. */
.topbar-lang-dropdown .dropdown-toggle {
    padding-left: 2px !important;
    padding-right: 0 !important;
}

.topbar-lang-dropdown .dropdown-toggle::after {
    margin-left: 2px;
}

/* Below 1200 the strip is tight enough that the same pull would
   push the flag into the phone numbers instead, so it eases back
   to roughly what it was. */
@media (max-width: 1199px) {
    .topbar-lang-dropdown {
        margin-left: -22px;
    }
}

/* ============================================================
   Footer typography
   Same treatment as the header above, and site-wide for the
   same reason. Typeface only.

   Note the selectors avoid <i>: the social row and the back-to
   -top chevron are FontAwesome glyphs, and naming them here
   would swap the icons for letters.
   ============================================================ */

/* Column heads: "Quick Links" and the "Direct In Italy / Toll Free /
   WhatsApp / Email" labels. The only headings the footer has. */
footer h4,
footer h5 {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Body of the footer: phone numbers, link columns, copyright line. */
footer p,
footer ul li,
footer ul a,
footer .copyright,
footer .copyright a {
    font-family: 'Lora', Georgia, serif;
}

/* Newsletter block: heading, field and button. The placeholder needs
   naming separately in some browsers, hence the pseudo-element. */
footer .form-control,
footer .showbtn {
    font-family: 'Lora', Georgia, serif;
}

footer .form-control::placeholder {
    font-family: 'Lora', Georgia, serif;
}

/* ============================================================
   Header motion
   The header was the last part of the site that still moved
   like a stock template: menus cut in on one frame, links
   changed colour with no transition at all.

   The motion here is set to read like print rather than like
   software. A rule drawn under a word, a panel unfolding, ink
   settling into place. Everything is easing, opacity and
   transform only, so nothing reflows and no layout, colour,
   size, spacing or wording changes.

   Site-wide, like the typography above it, because the header
   is the same element on every page.
   ============================================================ */

/* ---- Timing ----------------------------------------------
   One easing curve for the whole header so the parts feel
   related: a firm start that settles rather than bounces. */
:root {
    --hdr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- 1. Nav links: a rule drawn under the word ------------
   The colour change on hover already exists and is untouched.
   This adds the underline the header never had, drawn from
   the left the way a pen would. */
.logonav ul li > a,
.topsidenav ul > li > a {
    position: relative;
    transition: color 0.28s var(--hdr-ease);
}

.logonav ul li > a::after,
.topsidenav ul > li > a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 20px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.34s var(--hdr-ease);
    pointer-events: none;
}

.logonav ul li > a:hover::after,
.logonav ul li > a:focus-visible::after,
.topsidenav ul > li:hover > a::after,
.topsidenav ul > li > a:focus-visible::after {
    transform: scaleX(1);
}

/* The search icon is a glyph, not a word, so it takes no rule. */
.topsidenav ul > li.searchbox > a::after {
    content: none;
}

/* Mobile nav (≤991px, where .opennav takes over): rows shrink to ~30-40px,
   so the underline pinned at bottom:20px lands ON the text — and tap has no
   hover anyway. Kill the gesture there (mirrors the reduced-motion guard). */
@media (max-width: 991px) {
    .logonav ul li > a::after,
    .topsidenav ul > li > a::after {
        display: none;
    }
}

/* ---- 2. The megamenu: a page unfolding --------------------
   The panel is opened by `display:block` on hover, which
   cannot be transitioned, so the reveal is an animation. It
   restarts on its own every time the panel is shown, which is
   the behaviour wanted here.

   The panel wipes down from beneath the bar, and its columns
   settle a beat later, left to right, like columns of type
   being set. */
/* The panel itself only moves; its opacity is deliberately left
   alone. Fading a panel this size promotes it to its own
   composited layer, and on Chromium the banner sitting behind
   the header then bleeds straight through the white background.
   The columns inside carry the reveal instead, which reads the
   same and keeps the panel opaque at every frame. */
@keyframes hdrPanelUnfold {
    from { transform: translateY(-8px); }
    to   { transform: translateY(0); }
}

@keyframes hdrColumnSettle {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.topsidenav ul li:hover > .dropdown-menu {
    animation: hdrPanelUnfold 0.42s var(--hdr-ease);
    transform-origin: top center;
}

/* `backwards`, never `both`: the delay below needs the column to
   start invisible, but the moment the run finishes the element
   must fall back to the stylesheet rather than keep a value the
   animation is holding. A stranded `opacity:0` here would mean
   unreadable nav links, so the resting state is left alone. */
.topsidenav ul li:hover > .megamenu > li {
    animation: hdrColumnSettle 0.26s var(--hdr-ease) backwards;
}

/* Each column a beat behind the one to its left. The steps are
   deliberately tiny: this is a menu someone is trying to get
   through, so the last column has to be fully readable inside
   about a third of a second, stagger included. */
.topsidenav ul li:hover > .megamenu > li:nth-child(1) { animation-delay: 0.02s; }
.topsidenav ul li:hover > .megamenu > li:nth-child(2) { animation-delay: 0.04s; }
.topsidenav ul li:hover > .megamenu > li:nth-child(3) { animation-delay: 0.06s; }
.topsidenav ul li:hover > .megamenu > li:nth-child(4) { animation-delay: 0.08s; }
.topsidenav ul li:hover > .megamenu > li:nth-child(5) { animation-delay: 0.10s; }
.topsidenav ul li:hover > .megamenu > li:nth-child(6) { animation-delay: 0.12s; }

/* ---- 3. Megamenu links: the marker leads ------------------
   Every link already carries a `»` marker. On hover it steps
   forward and the label follows it, so the eye is pulled
   along the row rather than just recoloured. */
.megamenu > li > ul > li > a,
.dropdown-menu .dropdown-item,
.ddmenu .nav-link {
    transition: color 0.24s var(--hdr-ease),
                transform 0.24s var(--hdr-ease);
}

.megamenu > li > ul > li > a::before {
    transition: transform 0.24s var(--hdr-ease),
                opacity 0.24s var(--hdr-ease);
    opacity: 0.55;
}

.megamenu > li > ul > li > a:hover,
.megamenu > li > ul > li > a:focus-visible,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus-visible,
.ddmenu .nav-link:hover {
    transform: translateX(3px);
}

.megamenu > li > ul > li > a:hover::before,
.megamenu > li > ul > li > a:focus-visible::before {
    transform: translateX(2px);
    opacity: 1;
}

/* The rule under a megamenu link.
   ─────────────────────────────────────────────────────────
   The nav-row rule above is positioned at bottom:20px, which is
   right for a link 80px tall with 28px of padding. A megamenu link
   is 26px tall with 3px of padding, so the same 20px put the rule
   6px from the TOP, straight through the words. Measured, not
   guessed.

   Two fixes here: the rule sits just under the text, and the link
   is made inline-block so the rule spans the word rather than the
   whole column. */
.megamenu > li > ul > li > a {
    display: inline-block;
}

.megamenu > li > ul > li > a::after {
    left: 20px;
    right: 0;
    bottom: 1px;
    /* Olive rather than currentColor: the link itself is grey, and a
       grey rule reads as a rendering fault rather than a highlight. */
    background: var(--v5-olive-700, #4a5e2f);
    transition: transform 0.38s var(--hdr-ease);
}

/* The column heads are not links and take no rule. */
.megamenu .dropdown-header::after {
    content: none;
}

/* On a touch screen there is no hover, so the rule only ever appears
   as a line flashing under whatever was just tapped, which reads as a
   fault rather than a highlight. The colour change is enough there. */
@media (max-width: 991px) {
    .megamenu > li > ul > li > a {
        display: block;
    }

    .megamenu > li > ul > li > a::after {
        content: none;
    }
}

/* ---- 4. Top strip links ----------------------------------
   The green bar already lifts to a pale yellow on hover. The
   transition is what was missing. */
.topstripmenu nav.navbar li a {
    transition: color 0.26s var(--hdr-ease),
                background-color 0.26s var(--hdr-ease);
}

/* ---- 5. The Customizable Tour pill ------------------------
   The one warm block in an otherwise green bar, so it earns a
   little more: a slow highlight that crosses the face once on
   hover, the way light moves over gold leaf. It sits behind
   the label and never touches the type. */
.topstripmenu nav.navbar li.cstour a {
    position: relative;
    overflow: hidden;
    transition: filter 0.3s var(--hdr-ease);
}

.topstripmenu nav.navbar li.cstour a > * {
    position: relative;
    z-index: 1;
}

.topstripmenu nav.navbar li.cstour a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.5) 50%,
                rgba(255, 255, 255, 0) 100%);
    transform: translateX(0) skewX(-18deg);
    pointer-events: none;
    z-index: 0;
}

.topstripmenu nav.navbar li.cstour a:hover,
.topstripmenu nav.navbar li.cstour a:focus-visible {
    filter: brightness(1.06);
}

.topstripmenu nav.navbar li.cstour a:hover::before,
.topstripmenu nav.navbar li.cstour a:focus-visible::before {
    animation: hdrGildSweep 0.85s var(--hdr-ease);
}

/* Driven by transform rather than `left` so the sweep composites
   instead of forcing layout on every frame. */
@keyframes hdrGildSweep {
    to { transform: translateX(390%) skewX(-18deg); }
}

/* ---- 6. The logo -----------------------------------------
   A wordmark, not a button. It gets the smallest possible
   acknowledgement of the cursor and nothing more. */
header nav .navbar-brand img {
    transition: opacity 0.3s var(--hdr-ease);
}

header nav .navbar-brand:hover img {
    opacity: 0.86;
}

/* ---- 7. The search glyph ---------------------------------- */
.topsidenav ul > li.searchbox > a i {
    display: inline-block;
    transition: transform 0.3s var(--hdr-ease),
                color 0.3s var(--hdr-ease);
}

.topsidenav ul > li.searchbox > a:hover i,
.topsidenav ul > li.searchbox > a:focus-visible i {
    transform: scale(1.12);
}

/* ---- Reduced motion --------------------------------------
   Everything above is decoration on top of state changes that
   already work without it, so it can all be switched off with
   nothing lost. */
@media (prefers-reduced-motion: reduce) {
    .logonav ul li > a,
    .logonav ul li > a::after,
    .topsidenav ul > li > a,
    .topsidenav ul > li > a::after,
    .topsidenav ul li:hover > .dropdown-menu,
    .topsidenav ul li:hover > .megamenu > li,
    .megamenu > li > ul > li > a,
    .megamenu > li > ul > li > a::before,
    .dropdown-menu .dropdown-item,
    .ddmenu .nav-link,
    .topstripmenu nav.navbar li a,
    .topstripmenu nav.navbar li.cstour a,
    .topstripmenu nav.navbar li.cstour a::before,
    header nav .navbar-brand img,
    .topsidenav ul > li.searchbox > a i {
        animation: none !important;
        transition: none !important;
    }

    .logonav ul li > a::after,
    .topsidenav ul > li > a::after {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Brand override: bootstrap's .btn-success (green #28a745) → olive.
   Loaded after bootstrap.css, selectors copied 1:1 so every state wins by
   source order. Covers the header SHARE button (.mobShare) and every other
   public .btn-success (enquiry forms, sidebars, thankyou, transportation…).
   Added 4 Aug 2026 — final palette (olive primary) per Jesse's sign-off.
   ───────────────────────────────────────────────────────────────────────── */
.btn-success {
  color: #fff;
  background-color: var(--v5-olive-700, #4a5e2f);
  border-color: var(--v5-olive-700, #4a5e2f);
}

.btn-success:hover {
  color: #fff;
  background-color: var(--v5-olive-900, #33421f);
  border-color: var(--v5-olive-900, #33421f);
}

.btn-success:focus, .btn-success.focus {
  color: #fff;
  background-color: var(--v5-olive-900, #33421f);
  border-color: var(--v5-olive-900, #33421f);
  box-shadow: 0 0 0 0.2rem rgba(74, 94, 47, 0.4);
}

.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: var(--v5-olive-700, #4a5e2f);
  border-color: var(--v5-olive-700, #4a5e2f);
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: var(--v5-olive-900, #33421f);
  border-color: var(--v5-olive-900, #33421f);
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(74, 94, 47, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile sidenav submenu (≤991px): touch has no hover, so :hover-driven
   panels stick open on Android after a tap. The inline script in
   header.blade.php toggles .ivs-sub-open instead; these rules hand control
   to that class. Source order matters: the open rule must come last.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .topsidenav ul li:hover .dropdown-menu {
        display: none;
    }
    .topsidenav ul li.ivs-sub-open > .dropdown-menu {
        display: block;
    }
}