/*
 * Custom overrides — Bluefish Vacations
 * Loaded last so these rules win over all theme and plugin styles.
 */

.review__details h3 {
    margin-bottom: 20px !important;
}
 .swiper-pagination.slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal{
    position: relative;
    margin-top: 20px
}
.slider__btn.swiper-button-next, .slider__btn.swiper-button-prev{
    padding: 0!important;
}
.review__btn svg {
    width: 24px;
    height: 24px;
}
header.article-header h1.h1 {
    padding-bottom: 30px;
    text-align: center;
}

/* Footer fixes */
.site-footer h3 {
    font-weight: 700 !important;
}
.site-footer address a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
section.footer-column form button.field__arrow {
    width: inherit;
}
.swiper-pagination.review__pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal
 {
    position: relative;
}

/* ══════════════════════════════════════════════════════════════
   PRIMARY NAVIGATION — MULTI-LEVEL MENU SUPPORT
   ══════════════════════════════════════════════════════════════

   Root causes fixed:
   1. depth:0  in wp_nav_menu() now renders child items (was depth:1)
   2. BF_Nav_Walker now outputs start_lvl / end_lvl wrappers
   3. Toggle buttons added for mobile submenu expand/collapse
   4. Hamburger breakpoint extended to 1024px (was 860px)

   All new nav CSS lives here (custom.css loads last — wins cascade).
   ══════════════════════════════════════════════════════════════ */

/* ── Toggle button (hidden on desktop, shown on mobile) ──────── */
.primary-nav__toggle {
    display: none; /* shown only inside mobile media query below */
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-blue);
    padding: 0 8px;
    line-height: 1;
    flex-shrink: 0;
}
.primary-nav__toggle svg {
    display: block;
    transition: transform 200ms ease;
    pointer-events: none;
}
.primary-nav__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ── Desktop dropdown (> 1024px) ─────────────────────────────── */
@media (min-width: 1025px) {

    /* Each top-level li with children is the dropdown anchor */
    .primary-nav__list > li.menu-item-has-children {
        position: relative;
    }

    /* Dropdown panel */
    .primary-nav__list > li.menu-item-has-children > .primary-nav__sub {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        min-width: 220px;
        list-style: none;
        margin: 0;
        padding: 8px 0;
        background: var(--color-white);
        border: 1px solid rgba(23, 99, 175, 0.14);
        border-radius: 6px;
        box-shadow: 0 8px 24px rgba(13, 40, 72, 0.12);
        z-index: 200;
        /* Hidden state */
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
        white-space: nowrap;
    }

    /* Reveal on hover or keyboard focus-within */
    .primary-nav__list > li.menu-item-has-children:hover > .primary-nav__sub,
    .primary-nav__list > li.menu-item-has-children:focus-within > .primary-nav__sub {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Edge-of-viewport fix — the last menu item is the rightmost item
       in the nav, so its dropdown extends past the right edge of the
       viewport on narrower laptops (was cutting off "About" → Our Story
       / Leadership Team / Gives Back / etc.). Flip the last item's
       dropdown to align to the right edge of its parent so it opens
       leftward instead.
       Client feedback 2026-06-12.                                     */
    .primary-nav__list > li.menu-item-has-children:last-child > .primary-nav__sub {
        left: auto !important;
        right: 0 !important;
    }

    /* Sub-link styling */
    .primary-nav__sub li {
        list-style: none;
    }
    .primary-nav__link--sub {
        display: block;
        padding: 9px 18px;
        color: var(--color-navy);
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        transition: background 120ms ease, color 120ms ease;
    }
    .primary-nav__link--sub:hover {
        background: rgba(23, 99, 175, 0.06);
        color: var(--color-blue);
    }
    .primary-nav__link--sub.current {
        color: var(--color-blue);
        font-weight: 600;
    }
}

/* ── Extend hamburger to 1024px (bluefish.css has 860px) ─────── */
@media (min-width: 861px) and (max-width: 1024px) {
    .nav-toggle {
        display: inline-flex !important;
    }
    .primary-nav {
        display: none;
    }
    /* Icon states — mirrors the 860px block in bluefish.css */
    .nav-toggle[data-toggle="false"] .icon-bars,
    .nav-toggle[data-toggle="true"]  .icon-cross {
        display: block;
    }
    .nav-toggle .icon-cross,
    .nav-toggle[data-toggle="true"]  .icon-bars,
    .nav-toggle[data-toggle="false"] .icon-cross {
        display: none;
    }
    .primary-nav[data-open="true"] {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 9;
        padding: 20px 0;
        background: var(--color-white);
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    }
    .primary-nav__list {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
        padding: 14px 0 0;
    }
    .primary-nav__link {
        display: block;
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }
}

/* ── Mobile submenu (≤ 1024px) ───────────────────────────────── */
@media (max-width: 1024px) {

    /* Show toggle button next to parent link */
    .primary-nav__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: calc(var(--gutter) - 12px);
    }

    /* Parent li: flex row so link + toggle sit side-by-side */
    .primary-nav__list li.menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .primary-nav__list li.menu-item-has-children > .primary-nav__link {
        flex: 1;
    }
    .primary-nav__list li.menu-item-has-children > .primary-nav__toggle {
        flex-shrink: 0;
    }
    /* Sub-menu spans full row below the link + toggle */
    .primary-nav__list li.menu-item-has-children > .primary-nav__sub {
        flex-basis: 100%;
    }

    /* Sub-menu: hidden by default, revealed by JS toggling .is-open */
    .primary-nav__sub {
        display: none;
        list-style: none;
        margin: 0;
        padding: 4px 0 8px calc(var(--gutter) + 8px);
        background: rgba(23, 99, 175, 0.04);
    }
    .primary-nav__sub.is-open {
        display: block;
    }

    /* Sub-links */
    .primary-nav__link--sub {
        display: block;
        padding: 8px var(--gutter);
        color: var(--color-blue);
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
    }
    .primary-nav__link--sub:hover {
        background: rgba(23, 99, 175, 0.06);
    }
    .primary-nav__link--sub.current {
        font-weight: 600;
    }
}

/* ── Property detail: force two-column grid above 900px ──────── */
@media (min-width: 901px) {
    .property-layout {
        display: grid !important;
        grid-template-columns: 1fr 360px !important;
        gap: 32px !important;
    }
    .book-box {
        position: sticky !important;
        top: 18px !important;
    }
}

/* ── Property gallery: prevent grid-item inflation ───────────── */
/*
 * Root cause of the 33M-pixel-wide article bug:
 * CSS Grid items have min-width:auto by default, which lets them grow
 * to fit their content. When Swiper initialises and temporarily sets
 * slides to a large natural-flow width, the grid item (#unit-data)
 * expands to contain them, locking the inflated width permanently.
 *
 * Fix:
 *   min-width: 0  — forces the grid track to honour its 1fr limit
 *   overflow: hidden — stops Swiper content escaping the cell boundary
 *   before the layout settles (does NOT clip position:fixed lightbox)
 */
#unit-data {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Also constrain the gallery containers so Swiper measures a sane width */
.property-media,
#property-gallery-main,
#property-gallery-thumbs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   PROPERTY TABS — override VRP themeCSS (css.css) conflicts
   Root cause: VRP css.css has unscoped
       button { width:100%; color:#fff; height:2.5rem;
                text-transform:uppercase; letter-spacing:.1rem; }
       button:hover { background-color:#551b4f; }
   These load AFTER bluefish-vrp.css and collapse every .tab button
   to full-width, wrong colour, UPPERCASE text, and purple hover.
   The [role="tablist"] div also needs display:flex — our .tabs
   CSS applies flex to the wrapper, not the tablist child.
   ══════════════════════════════════════════════════════════════ */

/* Make the tablist itself the flex row */
[role="tablist"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: flex-end !important;
}

/* Restore each tab to inline, auto-width, correct colours */
[role="tablist"] button.tab {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    color: var(--color-blue) !important;
    background-color: var(--color-white) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.5 !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    border-bottom-width: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 10px 14px !important;
    font: inherit !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: color 150ms ease, background 150ms ease !important;
}

/* Hover: subtle tint (no purple) */
[role="tablist"] button.tab:hover,
[role="tablist"] button.tab:focus {
    background-color: rgba(226, 219, 203, 0.45) !important;
    color: var(--color-navy) !important;
}

/* Active / selected tab */
[role="tablist"] button.tab[aria-selected="true"],
[role="tablist"] button.tab.active {
    background-color: var(--color-sand) !important;
    border-color: transparent !important;
    border-radius: 6px !important;
    color: var(--color-navy) !important;
}

/* Keep active background on hover */
[role="tablist"] button.tab[aria-selected="true"]:hover {
    background-color: var(--color-sand) !important;
}

/* ══════════════════════════════════════════════════════════════
   RATES TABLE
   Root cause: .rates-table has no CSS anywhere in our stylesheets.
   ══════════════════════════════════════════════════════════════ */
.rates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 8px;
}
.rates-table th,
.rates-table td {
    padding: 8px 14px;
    border: 1px solid var(--color-gray-100);
    text-align: left;
    vertical-align: middle;
}
.rates-table thead th {
    background: var(--color-navy);
    color: var(--color-white);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.rates-table tbody tr:nth-child(even) {
    background: var(--color-cream);
}
.rates-table tbody tr:hover {
    background: var(--color-sand);
}

/* ══════════════════════════════════════════════════════════════
   STAR RATING FORM (review submission)
   Root cause: VRP css.css overrides .rating span with
       float:right; right:80% !important
   which breaks our flex-direction:row-reverse star layout.
   ══════════════════════════════════════════════════════════════ */
.panel .rating {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 4px !important;
    float: none !important;
    position: static !important;
    margin-left: 0 !important;
}
.panel .rating span {
    float: none !important;
    right: auto !important;
    position: static !important;
    padding-left: 0 !important;
    display: inline-block !important;
}

/* Review "Leave a Review" button: undo purple hover from VRP */
#abe-review-activator {
    width: auto !important;
}
#abe-review-activator:hover,
#abe-review-activator:focus {
    background-color: var(--color-cream) !important;
    color: var(--color-blue) !important;
    border-color: transparent !important;
}

/*advance search filters*/
.bf-advanced-filters table td + td {
    text-align: left;
}
/*form update*/
#vrpinquire .abe-column {
    padding-bottom: 10px;
}
.inquiry-form-wrapper {
    z-index: 999999 !important;
}
#bookingform{
    box-shadow: none!important;
    border: none!important;
    padding: 0!important;
    max-width: 100% !important;
    margin: 0!important;
}
.book-form input:not([type="hidden"]):not([type="submit"]):not([type="radio"]), .book-form select {
    width: 100%;
    max-width: 100% !important;
    padding: 10px !important;
}
#bookingform .abe-column input,
#bookingform .abe-column select {
    margin-bottom: 5px;
}
.book-form {
    box-shadow: none;
    padding: 0;
}

/* ── Book Now sidebar: "Get Rates" button ─────────────────────
   #checkbutton is input[type="button"] — the VRP availability
   check CTA. The old theme floats it right with teal background.
   Override to match the blue pill primary design.
   ──────────────────────────────────────────────────────────── */
#checkbutton {
    display: block !important;
    float: none !important;
    width: 100% !important;
    background: var(--color-blue) !important;
    color: var(--color-white) !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    padding: 12px 22px !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    height: auto !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    text-align: center !important;
    margin-top: 8px !important;
    transition: background 150ms ease !important;
    box-sizing: border-box !important;
}
#checkbutton:hover,
#checkbutton:focus {
    background: var(--color-navy) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
    outline: 0 !important;
}

/* (Removed 2026-06-09) — was hiding the inline Book Now next to Get Rates
   with display:none !important. That was the WRONG one to hide: VRP's
   .abe-detailed-quote is the hidden modal; the .abe-column.no-margin one
   is the visible CTA we want to reveal after a successful Get Rates. */

/* ── Book Now sidebar: label refinements ──────────────────────
   VRP css.css has an unscoped  label { font-weight:700 }  that
   loads after bluefish-vrp.css and bolds all form labels.
   Beat it here with !important (custom.css loads last).
   ──────────────────────────────────────────────────────────── */
.book-form label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-muted) !important;
    margin-bottom: 4px !important;
    display: block !important;
    letter-spacing: 0.01em !important;
}

/* Inputs / selects inside the booking form: rounded corners */
.book-form input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="radio"]),
.book-form select {
    border-radius: 8px !important;
    border: 1px solid rgba(13, 40, 72, 0.18) !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    color: var(--color-text) !important;
    background: var(--color-white) !important;
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}

/* Placeholder text: muted blue, matches design */
.book-form input::placeholder {
    color: rgba(23, 99, 175, 0.45) !important;
}

.book-box .book-box__actions .btn{
    min-width: 140px!important;
}
.book-box .book-box__actions span.abe-favorite.btn.btn--ghost {
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   BOOK NOW SIDEBAR — final design match
   Aligns .book-box / VRP form / action buttons to the reference.
   All plugin functionality (.abe-* hooks) is preserved.
   ══════════════════════════════════════════════════════════════ */

/* Sidebar card */
.book-box {
    border: inherit !important;
    box-shadow: none !important;
    padding: 0px;
}

.book-box .book-form{
    background: var(--color-white) !important;
    border: 1px solid rgba(13, 40, 72, 0.15) !important;
    border-radius: 10px !important;
    padding: 24px !important;
    box-shadow: 0 2px 12px rgba(13, 40, 72, 0.07) !important;
}

/* "Book Now" heading */
.book-box__title {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    color: var(--color-blue) !important;
    margin: 0 0 18px !important;
}
span.abe-inquiry.btn.btn--ghost, span.abe-print.btn.btn--ghost {
    margin-right: 0px !important;
}
/* Form wrapper — no extra box-shadow, clean padding */
.book-form {
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* ── VRP form layout ──────────────────────────────────────────
   Each .abe-row is a form row; .abe-row.flex-switch is 2-column.
   Labels above, inputs below — matches the design's .field layout. */
.book-form .abe-row {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}
.book-form .abe-row.flex-switch {
    grid-template-columns: 1fr 1fr !important;
}
.book-form .abe-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Labels — small, muted, no bold */
.book-form label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(13, 40, 72, 0.6) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Inputs and selects — full width, rounded, consistent height */
.book-form input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="radio"]),
.book-form select {
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid rgba(13, 40, 72, 0.2) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font: inherit !important;
    font-size: 14px !important;
    color: var(--color-text) !important;
    background: var(--color-white) !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
}
.book-form input::placeholder {
    color: rgba(23, 99, 175, 0.4) !important;
}
/* Restore chevron on selects */
.book-form select {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMUw1IDVMOSAxIiBzdHJva2U9IiMxNzYzQUYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px !important;
    padding-right: 32px !important;
}

/* Hide VRP internals that clutter the sidebar */
.book-form form > h2 { display: none !important; }
#loadingicons         { display: flex; justify-content: center; padding: 4px 0; }
.abe-quote-info       { min-height: 0; }
#abe-quote-activator  { display: none !important; } /* "Detailed Quote" — not in design */

/* "Get Rates" primary CTA */
#checkbutton {
    display: block !important;
    width: 100% !important;
    background: var(--color-blue) !important;
    color: var(--color-white) !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    padding: 13px 22px !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    height: auto !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    text-align: center !important;
    margin-top: 16px !important;
    transition: background 150ms ease !important;
    float: none !important;
    box-sizing: border-box !important;
}
#checkbutton:hover { background: var(--color-navy) !important; }

/* Inline "Book Now" submit (#booklink) — visibility is controlled by
   vrp/js/vrp.unit.js (hide on load via jQuery.hide(); fadeIn after a
   successful Get-Rates AJAX response). DO NOT set `display` here, or it
   will block JS-controlled show/hide. Just style appearance.            */
.book-form .abe-column.no-margin input[type="submit"]#booklink,
.book-form .abe-column.no-margin input[type="submit"] {
    width: 100% !important;
    background: var(--color-blue) !important;
    color: var(--color-white) !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    padding: 13px 22px !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    height: auto !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    text-align: center !important;
    margin-top: 10px !important;
    transition: background 150ms ease !important;
    float: none !important;
    box-sizing: border-box !important;
}
.book-form .abe-column.no-margin input[type="submit"]:hover {
    background: var(--color-navy) !important;
}

/* ── Action buttons below the form ───────────────────────────── */
.book-box__actions {
    display: grid !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

/* All action buttons: equal height, centered, consistent style */
.book-box__actions .btn--ghost {
    justify-content: center !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    gap: 8px !important;
}
.book-box__actions .btn--ghost svg path {
    fill: var(--color-blue);
}
/* ══════════════════════════════════════════════════════════════
   NEWSLETTER — Sendinblue [sibwp_form id=1] styling
   The shortcode outputs .sib_signup_form with <p> wrappers.
   We override plugin defaults to match our pill-inline design.
   Plugin AJAX functionality is fully preserved.
   ══════════════════════════════════════════════════════════════ */

.newsletter .sib_signup_form {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.newsletter .sib_signup_form p {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 0 !important;
}
/* Submit <p> — fixed width, spaced from inputs */
.newsletter .sib_signup_form p:last-of-type {
    flex: 0 0 auto !important;
    margin-left: 14px !important;
}
/* Hide labels — design uses placeholders only */
.newsletter .sib_signup_form label {
    display: none !important;
}
.newsletter .sib_signup_form .sib_loader {
    display: none !important;
}
/* Text / email inputs */
.newsletter .sib_signup_form input[type="text"],
.newsletter .sib_signup_form input[type="email"] {
    display: block !important;
    width: 100% !important;
    min-height: 46px !important;
    border: 1px solid rgba(13, 40, 72, 0.12) !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font: inherit !important;
    font-size: 15px !important;
    color: var(--color-text) !important;
    background: var(--color-white) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
.newsletter .sib_signup_form input[type="text"]::placeholder,
.newsletter .sib_signup_form input[type="email"]::placeholder {
    color: rgba(23, 99, 175, 0.6) !important;
}
/* First input — left pill end */
.newsletter .sib_signup_form p:first-of-type input[type="text"],
.newsletter .sib_signup_form p:first-of-type input[type="email"] {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
}
/* Second input — right pill end, no left border (joins first) */
.newsletter .sib_signup_form p:nth-of-type(2) input[type="text"],
.newsletter .sib_signup_form p:nth-of-type(2) input[type="email"] {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
    border-left-width: 0 !important;
}
/* Submit button — matches .btn.btn--pill.btn--primary */
.newsletter .sib_signup_form input[type="submit"],
.newsletter .sib_signup_form .sib-default-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px !important;
    min-height: 46px !important;
    padding: 10px 22px !important;
    background: var(--color-blue) !important;
    color: var(--color-white) !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.5 !important;
}
.newsletter .sib_signup_form input[type="submit"]:hover,
.newsletter .sib_signup_form .sib-default-btn:hover {
    background: var(--color-navy) !important;
    color: var(--color-white) !important;
}
/* Success / error messages */
.newsletter .sib_signup_result_text { margin-top: 12px; font-size: 14px; }
.newsletter .sib_signup_success { color: #2d7d3a; }
.newsletter .sib_signup_error   { color: #c0392b; }
/* Mobile: stack vertically */
@media screen and (max-width: 640px) {
    .newsletter .sib_signup_form { flex-direction: column !important; gap: 10px !important; }
    .newsletter .sib_signup_form p,
    .newsletter .sib_signup_form p:last-of-type { flex: 1 1 100% !important; width: 100% !important; margin-left: 0 !important; }
    .newsletter .sib_signup_form input[type="text"],
    .newsletter .sib_signup_form input[type="email"],
    .newsletter .sib_signup_form p:first-of-type input,
    .newsletter .sib_signup_form p:nth-of-type(2) input { border-radius: var(--radius-pill) !important; border-left-width: 1px !important; width: 100% !important; }
    .newsletter .sib_signup_form input[type="submit"],
    .newsletter .sib_signup_form .sib-default-btn { width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════
   NEWSLETTER — Sendinblue form CORRECTED selectors
   Actual output wraps inputs in div.sib_signup_box_inside_1,
   NOT in <p> tags. Previous rules were targeting the wrong DOM.
   ══════════════════════════════════════════════════════════════ */

/* Flex row on the inner wrapper (holds the real inputs + button) */
.newsletter .sib_signup_box_inside_1 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
}

/* Message div — hidden when empty, full-row when shown */
.newsletter .sib_signup_box_inside_1 .sib_msg_disp {
    display: none !important;
}
.newsletter .sib_signup_box_inside_1 .sib_msg_disp:not(:empty) {
    display: block !important;
    order: -1 !important;
    flex-basis: 100% !important;
    margin-bottom: 8px !important;
}

/* Text / email inputs — grow to fill available space */
.newsletter .sib_signup_box_inside_1 input[type="text"],
.newsletter .sib_signup_box_inside_1 input[type="email"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    border: 1px solid rgba(13, 40, 72, 0.12) !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font: inherit !important;
    font-size: 15px !important;
    color: var(--color-text) !important;
    background: var(--color-white) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    outline: none !important;
}
.newsletter .sib_signup_box_inside_1 input::placeholder {
    color: rgba(23, 99, 175, 0.55) !important;
}

/* First input (NAME) — left pill cap */
.newsletter .sib_signup_box_inside_1 input[type="text"] {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
}

/* Email input — right pill cap, no left border (joins NAME input) */
.newsletter .sib_signup_box_inside_1 input[type="email"] {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
    border-left-width: 0 !important;
}

/* Submit button — pill primary, fixed width, spaced from inputs */
.newsletter .sib_signup_box_inside_1 input[type="submit"],
.newsletter .sib-default-btn {
    flex: 0 0 auto !important;
    margin-left: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px !important;
    min-height: 46px !important;
    height: auto !important;
    padding: 10px 22px !important;
    background: var(--color-blue) !important;
    color: var(--color-white) !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}
.newsletter .sib_signup_box_inside_1 input[type="submit"]:hover {
    background: var(--color-navy) !important;
    color: var(--color-white) !important;
}

/* Mobile ≤640px: stack vertically */
@media screen and (max-width: 640px) {
    .newsletter .sib_signup_box_inside_1 {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .newsletter .sib_signup_box_inside_1 input[type="text"],
    .newsletter .sib_signup_box_inside_1 input[type="email"],
    .newsletter .sib_signup_box_inside_1 input[type="submit"],
    .newsletter .sib-default-btn {
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        border-radius: var(--radius-pill) !important;
        border-left-width: 1px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   NEWSLETTER — FINAL FIX (overrides all previous newsletter CSS)

   Root cause: sib_msg_disp has style="/*display:none*/" — a CSS
   comment inside the style attribute, so it is NOT hidden. It was
   sitting as an unseen block before the inputs, collapsing them.

   Fix:
   1. Reset form to block (not flex — was causing nested flex issues)
   2. Use flex + explicit order on sib_signup_box_inside_1 so
      sib_msg_disp is pushed after the inputs via order:100
   3. Inputs use flex:1 with order:1, button uses order:2 + margin
   ══════════════════════════════════════════════════════════════ */

/* 1. Form: plain block so it fills the grid column naturally */
.newsletter .sib_signup_form {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Inner wrapper: flex row with wrap enabled */
.newsletter .sib_signup_box_inside_1 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Push message div to end so it wraps below the form row */
.newsletter .sib_signup_box_inside_1 .sib_msg_disp {
    order: 100 !important;
    flex: 0 0 100% !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
    color: var(--color-text) !important;
}

/* 4. Inputs grow to share the available width equally */
.newsletter .sib_signup_box_inside_1 input[type="text"],
.newsletter .sib_signup_box_inside_1 input[type="email"] {
    order: 1 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    border: 1px solid rgba(13, 40, 72, 0.12) !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font: inherit !important;
    font-size: 15px !important;
    color: var(--color-text) !important;
    background: var(--color-white) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: block !important;
    width: auto !important;
}
.newsletter .sib_signup_box_inside_1 input::placeholder {
    color: rgba(23, 99, 175, 0.55) !important;
}
/* NAME field — left pill cap */
.newsletter .sib_signup_box_inside_1 input[type="text"] {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
}
/* Email field — right pill cap, no left border (joins NAME) */
.newsletter .sib_signup_box_inside_1 input[type="email"] {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
    border-left: none !important;
}

/* 5. Submit button — blue pill, fixed size, spaced right of inputs */
.newsletter .sib_signup_box_inside_1 input[type="submit"],
.newsletter .sib-default-btn {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px !important;
    height: 46px !important;
    padding: 10px 22px !important;
    background: var(--color-blue) !important;
    color: var(--color-white) !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    width: auto !important;
}
.newsletter .sib_signup_box_inside_1 input[type="submit"]:hover {
    background: var(--color-navy) !important;
    color: var(--color-white) !important;
}

/* Mobile ≤ 640px: single column stack */
@media screen and (max-width: 640px) {
    .newsletter .sib_signup_box_inside_1 {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .newsletter .sib_signup_box_inside_1 input[type="text"],
    .newsletter .sib_signup_box_inside_1 input[type="email"],
    .newsletter .sib_signup_box_inside_1 input[type="submit"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        border-left: 1px solid rgba(13, 40, 72, 0.12) !important;
        border-radius: var(--radius-pill) !important;
    }
}