/* MGS SimpleBooking SyncroBox
 * Wrapper styles for the embedded SimpleBooking widget.
 *
 * The widget's baseline look comes from the Styles object passed to
 * SBSyncroBox() (Manrope + brand navy/teal/white, see mgs_sb_build_styles).
 * This file retheme's the booking bar (#sb-container) to match the Figma
 * design (node 8004-17612): a transparent horizontal bar with a thin frame,
 * field underlines, and an icon-only magnifier search button.
 *
 * LIGHT vs DARK (two ink states):
 *   - DARK is the DEFAULT — the bar sits on a solid/white header (inner
 *     pages, e.g. /hotel/, and the home header once scrolled to its solid
 *     state). Text/icons/lines are #343A40, like the menu items.
 *   - LIGHT applies ONLY in the hero overlay state: the home header before
 *     scroll (.mgs-header-home WITHOUT .mgs-header-home--solid), where the
 *     bar floats over the dark hero image. Text/icons/lines are #F4F7FA.
 *   The swap is driven by the --sb-ink / --sb-line2 custom properties plus
 *   a light/dark variant of the calendar & magnifier SVGs.
 *
 * SPECIFICITY (critical): SimpleBooking injects its custom-color rules at
 * runtime as  #sb-container .sb-custom-* { ... !important }  — single-class
 * specificity, added AFTER our stylesheet, so a naive #sb-container .x rule
 * loses the tie on source order. #sb-container is ALSO our .mgs-sb-container
 * element, so every override here is prefixed  #sb-container.mgs-sb-container
 * = one class MORE than SB's rule → it wins regardless of source order.
 *
 * Scope is intentional: the popup [mgs_sb_container_popup] uses #sb-container-popup
 * and is untouched, keeping the light navy/teal theme from the Styles API.
 */

:root {
    --mgs-sb-light: #F4F7FA;
    --mgs-sb-dark:  #1C2541;                  /* popover text (navy) */
    --mgs-sb-line:  #F4F7FA;                  /* frame + underlines, light state */
    --mgs-sb-solid: #343A40;                 /* solid-header ink, = menu item color */
    --mgs-sb-solid-line: rgba(52, 58, 64, 0.55);
}

.mgs-sb-container {
    width: 100%;
}

/* --- ink state: dark by default, light only in the hero overlay -------- */
#sb-container.mgs-sb-container {
    --sb-ink:  var(--mgs-sb-solid);
    --sb-line2: var(--mgs-sb-solid-line);
}
.mgs-header-home:not(.mgs-header-home--solid) #sb-container.mgs-sb-container {
    --sb-ink:  var(--mgs-sb-light);
    --sb-line2: var(--mgs-sb-line);
}

/* === transparent shell, no per-field boxes ===================== */
#sb-container.mgs-sb-container .sb,
#sb-container.mgs-sb-container .sb-custom-bg-color,
#sb-container.mgs-sb-container .sb__form-field-input,
#sb-container.mgs-sb-container .sb-custom-field-bg-color {
    background-color: transparent !important;
}
#sb-container.mgs-sb-container .sb {
    box-shadow: none !important;
}
#sb-container.mgs-sb-container .sb__form-field-input.sb-custom-box-shadow-color {
    box-shadow: none !important;
    border-color: transparent !important;
}
#sb-container.mgs-sb-container .sb__form-field-input.sb-custom-box-shadow-color::before {
    display: none !important;
}

/* === bar ink (text) follows --sb-ink ========================== */
#sb-container.mgs-sb-container .sb,
#sb-container.mgs-sb-container .sb-custom-color,
#sb-container.mgs-sb-container .sb__form-field-input,
#sb-container.mgs-sb-container .sb__form-field-input *,
#sb-container.mgs-sb-container .sb__footer-link,
#sb-container.mgs-sb-container .sb-custom-link-color {
    color: var(--sb-ink) !important;
}

/* Figma drops the verbose prefix labels ("Data Arrivo:", "Persone:")
   and the standalone property field. */
#sb-container.mgs-sb-container .sb__form-field-label,
#sb-container.mgs-sb-container .sb__property {
    display: none !important;
}

/* === single row: square frame, fields inset, button flush right ===
   All fields share one fixed height and are centered, so every day
   number, "ADULTI", icon and underline lands on the same baseline
   (SB gives the groups uneven heights, so align-items:stretch alone
   leaves guests + button ~8px low). */
#sb-container.mgs-sb-container .sb__form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    border: 1px solid var(--sb-line2);
    border-radius: 0;                         /* Figma: square corners */
    overflow: visible;
    padding-left: 16px;                       /* Figma Frame 2 left inset */
}
#sb-container.mgs-sb-container .sb__dates {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;                                /* Figma Frame 1 field gap */
}
#sb-container.mgs-sb-container .sb__guests-rooms {
    display: flex;
    align-items: center;
    margin: 0 0 0 12px !important;            /* SB adds margin-top:16px → reset */
}
#sb-container.mgs-sb-container .sb__form-field {
    display: flex;
    align-items: center;
    height: 46px;
}
#sb-container.mgs-sb-container .sb__form-field-input {
    display: flex;
    align-items: center;
    gap: 12px;                                /* Figma Frame 132 gap */
    height: 46px;
    box-sizing: border-box;
    padding: 0 16px !important;
}

/* Figma: month/year over weekday (two stacked lines) */
#sb-container.mgs-sb-container .sb__form-field-date-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Figma "Line 76": a horizontal underline beneath each field's content,
   inset to the content width (not vertical dividers). */
#sb-container.mgs-sb-container .sb__dates .sb__form-field-input,
#sb-container.mgs-sb-container .sb__guests-rooms .sb__form-field-input {
    position: relative;
}
#sb-container.mgs-sb-container .sb__dates .sb__form-field-input::after,
#sb-container.mgs-sb-container .sb__guests-rooms .sb__form-field-input::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 8px;
    height: 1px;
    background: var(--sb-line2);
}

/* Figma omits the footer entirely (promo code + manage booking links) */
#sb-container.mgs-sb-container .sb__footer {
    display: none !important;
}

/* === typography (Figma): big day number + tiny month/weekday === */
#sb-container.mgs-sb-container .sb__form-field-date-number {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
#sb-container.mgs-sb-container .sb__form-field-month-year,
#sb-container.mgs-sb-container .sb__form-field-weekday,
#sb-container.mgs-sb-container .sb__form-field-guests {
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: .2px;
    white-space: nowrap;                      /* "GIUGNO 2026" stays on one line */
}

/* Figma guests field shows just the count + "ADULTI" — hide the rooms
   sub-line and the dropdown chevron to match. */
#sb-container.mgs-sb-container .sb__form-field-rooms,
#sb-container.mgs-sb-container .sb__guests-rooms .sb__form-field-icon {
    display: none !important;
}

/* === icons ===================================================== */
/* bar icons (any remaining SB glyphs) follow --sb-ink */
#sb-container.mgs-sb-container .sb-custom-icon-color,
#sb-container.mgs-sb-container .sb-custom-icon-color * {
    fill: var(--sb-ink) !important;
    color: var(--sb-ink) !important;
}
/* date fields: replace SB's glyph with the exact Figma calendar.
   Default = dark stroke; the hero overlay swaps in the light variant. */
#sb-container.mgs-sb-container .sb__form-field--checkin .sb__form-field-icon svg,
#sb-container.mgs-sb-container .sb__form-field--checkout .sb__form-field-icon svg {
    display: none !important;
}
#sb-container.mgs-sb-container .sb__form-field--checkin .sb__form-field-icon,
#sb-container.mgs-sb-container .sb__form-field--checkout .sb__form-field-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7.5%206V1M17.5%206V1M21.5%2017V21.5H3.5V18.5M21.363%208.5H3.352M0.5%2018.25V18.5H18.4L18.55%2018.25L18.784%2017.759C20.5722%2014.0007%2021.5%209.89102%2021.5%205.729V3.5H3.5V5.628C3.50004%209.82218%202.55784%2013.9628%200.743%2017.744L0.5%2018.25Z%27%20stroke%3D%27%23343A40%27%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

/* === search button: icon-only magnifier square (Figma) =========
   Default = dark stroke; the hero overlay swaps in the light variant. */
#sb-container.mgs-sb-container .sb__btn--verify {
    width: 60px !important;
    min-width: 60px !important;
    flex: 0 0 auto;
    align-self: stretch;
    height: auto !important;             /* stretch full bar height (SB sets a fixed height) */
    margin: 0 !important;                /* SB adds margins → reset so the magnifier centres */
    font-size: 0 !important;             /* hide "Verifica Disponibilità" */
    color: transparent !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2721%27%20height%3D%2720%27%20viewBox%3D%270%200%2021%2020%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M8.2562%2015.8834C12.5398%2015.8834%2016.0124%2012.4397%2016.0124%208.19172C16.0124%203.9437%2012.5398%200.5%208.2562%200.5C3.97257%200.5%200.5%203.9437%200.5%208.19172C0.5%2012.4397%203.97257%2015.8834%208.2562%2015.8834Z%27%20stroke%3D%27%23343A40%27%2F%3E%3Cpath%20d%3D%27M15.1865%2014.4849L20.2436%2019.4999%27%20stroke%3D%27%23343A40%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 21px 20px !important;
    border: 0 !important;
    border-left: 1px solid var(--sb-line2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background-color .2s ease;
}
#sb-container.mgs-sb-container .sb__btn--verify:hover {
    background-color: rgba(52, 58, 64, 0.08) !important;
}

/* --- hero overlay: light variants of the SVG icons + hover -------------- */
.mgs-header-home:not(.mgs-header-home--solid) #sb-container.mgs-sb-container .sb__form-field--checkin .sb__form-field-icon,
.mgs-header-home:not(.mgs-header-home--solid) #sb-container.mgs-sb-container .sb__form-field--checkout .sb__form-field-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7.5%206V1M17.5%206V1M21.5%2017V21.5H3.5V18.5M21.363%208.5H3.352M0.5%2018.25V18.5H18.4L18.55%2018.25L18.784%2017.759C20.5722%2014.0007%2021.5%209.89102%2021.5%205.729V3.5H3.5V5.628C3.50004%209.82218%202.55784%2013.9628%200.743%2017.744L0.5%2018.25Z%27%20stroke%3D%27%23F4F7FA%27%2F%3E%3C%2Fsvg%3E") !important;
}
.mgs-header-home:not(.mgs-header-home--solid) #sb-container.mgs-sb-container .sb__btn--verify {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2721%27%20height%3D%2720%27%20viewBox%3D%270%200%2021%2020%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M8.2562%2015.8834C12.5398%2015.8834%2016.0124%2012.4397%2016.0124%208.19172C16.0124%203.9437%2012.5398%200.5%208.2562%200.5C3.97257%200.5%200.5%203.9437%200.5%208.19172C0.5%2012.4397%203.97257%2015.8834%208.2562%2015.8834Z%27%20stroke%3D%27%23F4F7FA%27%2F%3E%3Cpath%20d%3D%27M15.1865%2014.4849L20.2436%2019.4999%27%20stroke%3D%27%23F4F7FA%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") !important;
}
.mgs-header-home:not(.mgs-header-home--solid) #sb-container.mgs-sb-container .sb__btn--verify:hover {
    background-color: rgba(244, 247, 250, 0.12) !important;
}

/* === popovers (calendar / guests panel) stay light & readable === */
#sb-container.mgs-sb-container .sb__calendar,
#sb-container.mgs-sb-container .sb__calendar *,
#sb-container.mgs-sb-container .sb__guests,
#sb-container.mgs-sb-container .sb__guests *,
#sb-container.mgs-sb-container .sb__footer-promo,
#sb-container.mgs-sb-container .sb__footer-promo * {
    color: var(--mgs-sb-dark) !important;
}

/* guests dropdown: SB sizes it to the (now narrow) trigger field → too
   cramped. Give it a usable width. */
#sb-container.mgs-sb-container .sb__guests {
    width: 280px !important;
    min-width: 280px !important;
}

/* buttons inside the panel keep their solid fill → white label, not the
   dark text the rule above would otherwise force (navy-on-navy = invisible). */
#sb-container.mgs-sb-container .sb__guests .sb__btn,
#sb-container.mgs-sb-container .sb__guests .sb__btn * {
    color: #ffffff !important;
}

/* popover icons (+/- steppers, calendar arrows) are dark on the white
   panel — overrides the bar's --sb-ink icon rule. */
#sb-container.mgs-sb-container .sb__guests .sb-custom-icon-color,
#sb-container.mgs-sb-container .sb__guests .sb-custom-icon-color *,
#sb-container.mgs-sb-container .sb__calendar .sb-custom-icon-color,
#sb-container.mgs-sb-container .sb__calendar .sb-custom-icon-color * {
    fill: var(--mgs-sb-dark) !important;
    color: var(--mgs-sb-dark) !important;
}

/* smooth ink swap, matching the header's 280ms transition */
#sb-container.mgs-sb-container .sb__form,
#sb-container.mgs-sb-container .sb__form * {
    transition: color .28s ease, border-color .28s ease, fill .28s ease;
}

/* ======================================================================
   POPUP variant — [mgs_sb_container_popup] / #sb-container-popup
   ----------------------------------------------------------------------
   Used in Elementor as a FIXED bottom bar, visible only tablet→mobile.
   Retheme to Figma node 7837-53351: a single bordered box around the two
   date fields + the guests field, and a SEPARATE bordered magnifier box.
   Ink is fixed navy (#1C2541) on the popup's white bg — no light/dark
   state. Unlike the desktop bar there is NO per-field calendar icon, only
   the trailing magnifier.

   Same specificity trick as the desktop bar: #sb-container-popup is also
   .mgs-sb-container, so #sb-container-popup.mgs-sb-container (id + 2 classes)
   beats SB's runtime  #sb-container-popup .sb-custom-* (id + 1 class).
   ====================================================================== */
@media (max-width: 1024px) {

    #sb-container-popup.mgs-sb-container {
        --sb-ink:  var(--mgs-sb-dark);                 /* #1C2541 */
        --sb-line2: var(--mgs-sb-dark);
        --mgs-sb-pp-uline: rgba(28, 37, 65, 0.25);     /* field underline */
        width: 100%;
        background-color: #fff;
    }

    /* === white bar, transparent per-field boxes ==================== */
    /* The bar itself is solid white (the Elementor container is transparent);
       only the individual field inputs stay transparent so the white shows. */
    #sb-container-popup.mgs-sb-container .sb,
    #sb-container-popup.mgs-sb-container .sb-custom-bg-color {
        background-color: #fff !important;
        padding: 0;
    }
    #sb-container-popup.mgs-sb-container .sb__form-field-input,
    #sb-container-popup.mgs-sb-container .sb-custom-field-bg-color {
        background-color: transparent !important;
    }
    #sb-container-popup.mgs-sb-container .sb {
        box-shadow: none !important;
    }
    #sb-container-popup.mgs-sb-container .sb,
    #sb-container-popup.mgs-sb-container .sb__form,
    #sb-container-popup.mgs-sb-container .sb__form * {
        box-sizing: border-box;
    }
    /* .sb is the outer row: [fields box .sb__form] + [magnifier].
       The verify button is a SIBLING of .sb__form (not inside it), so the row
       lives on .sb. Grid keeps the magnifier inside the container width. */
    #sb-container-popup.mgs-sb-container .sb {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        width: 100% !important;
        max-width: 100% !important;
    }
    #sb-container-popup.mgs-sb-container .sb__form-field-input.sb-custom-box-shadow-color {
        box-shadow: none !important;
        border-color: transparent !important;
    }
    #sb-container-popup.mgs-sb-container .sb__form-field-input.sb-custom-box-shadow-color::before {
        display: none !important;
    }

    /* === bar ink (text) follows --sb-ink ========================== */
    #sb-container-popup.mgs-sb-container .sb,
    #sb-container-popup.mgs-sb-container .sb-custom-color,
    #sb-container-popup.mgs-sb-container .sb__form-field-input,
    #sb-container-popup.mgs-sb-container .sb__form-field-input *,
    #sb-container-popup.mgs-sb-container .sb__footer-link,
    #sb-container-popup.mgs-sb-container .sb-custom-link-color {
        color: var(--sb-ink) !important;
    }

    /* Figma drops the verbose prefix labels and the standalone property field. */
    #sb-container-popup.mgs-sb-container .sb__form-field-label,
    #sb-container-popup.mgs-sb-container .sb__property {
        display: none !important;
    }

    /* === one bordered box = 3-col grid [date | date | guests] ========
       .sb__form is the bordered frame and a 3-column grid. The two date
       fields live one level deeper (inside .sb__dates), so .sb__dates is
       display:contents → its two .sb__form-field promote to direct grid
       cells, sitting next to .sb__guests-rooms. (.sb__property is hidden.)
       The verify button is a sibling of .sb__form — its own box on .sb. */
    #sb-container-popup.mgs-sb-container .sb__form {
        display: grid;
        grid-template-columns: 2fr auto 60px;
        align-items: stretch;
        grid-column: 1;
        min-width: 0;
        border: 1px solid var(--sb-line2);
        border-radius: 0;
        overflow: visible;
        padding: 0;
    }
    
    #sb-container-popup.mgs-sb-container .sb__guests-rooms {
        display: flex;
        align-items: center;
        min-width: 0;
        margin: 0 !important;                          /* SB adds margin-top:16px → reset */
        border: 0;
    }
    #sb-container-popup.mgs-sb-container .sb__form-field {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 60px;
    }
    #sb-container-popup.mgs-sb-container .sb__form-field-input {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 60px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 9px !important;
    }

    /* Figma: month/year over weekday (two stacked lines) */
    #sb-container-popup.mgs-sb-container .sb__form-field-date-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Figma "Line 76": horizontal underline beneath each field's content. */
    #sb-container-popup.mgs-sb-container .sb__dates .sb__form-field-input,
    #sb-container-popup.mgs-sb-container .sb__guests-rooms .sb__form-field-input {
        position: relative;
    }
    #sb-container-popup.mgs-sb-container .sb__dates .sb__form-field-input::after,
    #sb-container-popup.mgs-sb-container .sb__guests-rooms .sb__form-field-input::after {
        content: "";
        position: absolute;
        left: 9px;
        right: 9px;
        bottom: 10px;
        height: 1px;
        background: var(--mgs-sb-dark);
    }

    /* Figma omits the footer entirely (promo code + manage booking links) */
    #sb-container-popup.mgs-sb-container .sb__footer {
        display: none !important;
    }

    /* === typography (Figma): big day number + tiny month/weekday === */
    /* Explicit navy on the value spans too — the light-pink base theme would
       otherwise tint the day number a pale colour, invisible on white. */
    #sb-container-popup.mgs-sb-container .sb__form-field-date-number {
        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        font-family: 'Manrope', sans-serif;
        color: var(--sb-ink) !important;
        margin-right: 0;
    }
    #sb-container-popup.mgs-sb-container .sb__form-field-month-year,
    #sb-container-popup.mgs-sb-container .sb__form-field-weekday,
    #sb-container-popup.mgs-sb-container .sb__form-field-guests {
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
        font-family: 'Manrope', sans-serif;
        letter-spacing: .2px;
        white-space: nowrap;
        color: var(--sb-ink) !important;
    }
    #sb-container-popup.mgs-sb-container .sb__form-field-guests {
        text-transform: uppercase;
    }

    /* Guests field shows just "N ADULTI" — hide rooms sub-line + chevron. */
    #sb-container-popup.mgs-sb-container .sb__form-field-rooms,
    #sb-container-popup.mgs-sb-container .sb__guests-rooms .sb__form-field-icon {
        display: none !important;
    }

    /* === icons ===================================================== */
    /* No per-field calendar glyph in the popup (Figma) — hide it. */
    #sb-container-popup.mgs-sb-container .sb__form-field--checkin .sb__form-field-icon,
    #sb-container-popup.mgs-sb-container .sb__form-field--checkout .sb__form-field-icon {
        display: none !important;
    }
    /* any remaining SB bar glyphs follow --sb-ink */
    #sb-container-popup.mgs-sb-container .sb-custom-icon-color,
    #sb-container-popup.mgs-sb-container .sb-custom-icon-color * {
        fill: var(--sb-ink) !important;
        color: var(--sb-ink) !important;
    }

    /* === search button: separate icon-only magnifier box (navy) ==== */
    #sb-container-popup.mgs-sb-container .sb__btn--verify {
        align-self: stretch;
        height: auto !important;
        margin: 0 !important;                          /* gap comes from .sb gap */
        font-size: 0 !important;
        color: transparent !important;
        background-color: transparent !important;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2721%27%20height%3D%2720%27%20viewBox%3D%270%200%2021%2020%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M8.2562%2015.8834C12.5398%2015.8834%2016.0124%2012.4397%2016.0124%208.19172C16.0124%203.9437%2012.5398%200.5%208.2562%200.5C3.97257%200.5%200.5%203.9437%200.5%208.19172C0.5%2012.4397%203.97257%2015.8834%208.2562%2015.8834Z%27%20stroke%3D%27%231C2541%27%2F%3E%3Cpath%20d%3D%27M15.1865%2014.4849L20.2436%2019.4999%27%20stroke%3D%27%231C2541%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 21px 20px !important;
        border: none;
        border-left: 1px solid var(--sb-line2) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: background-color .2s ease;
    }
    #sb-container-popup.mgs-sb-container .sb__btn--verify:hover {
        background-color: rgba(28, 37, 65, 0.08) !important;
    }

    /* === popovers (calendar / guests panel) ========================
       Keep them light & readable (same as desktop)… */
    #sb-container-popup.mgs-sb-container .sb__calendar,
    #sb-container-popup.mgs-sb-container .sb__calendar *,
    #sb-container-popup.mgs-sb-container .sb__guests,
    #sb-container-popup.mgs-sb-container .sb__guests *,
    #sb-container-popup.mgs-sb-container .sb__footer-promo,
    #sb-container-popup.mgs-sb-container .sb__footer-promo * {
        color: var(--mgs-sb-dark) !important;
    }
    #sb-container-popup.mgs-sb-container .sb__guests .sb__btn,
    #sb-container-popup.mgs-sb-container .sb__guests .sb__btn * {
        color: #ffffff !important;
    }
    #sb-container-popup.mgs-sb-container .sb__guests .sb-custom-icon-color,
    #sb-container-popup.mgs-sb-container .sb__guests .sb-custom-icon-color *,
    #sb-container-popup.mgs-sb-container .sb__calendar .sb-custom-icon-color,
    #sb-container-popup.mgs-sb-container .sb__calendar .sb-custom-icon-color * {
        fill: var(--mgs-sb-dark) !important;
        color: var(--mgs-sb-dark) !important;
    }

    /* …and pin them ABOVE the fixed bottom bar so the short Elementor
       container can't clip them. Geometry comes from syncrobox-popup.js
       (CSS vars on <html>); the defaults apply if the JS hasn't run yet. */
    #sb-container-popup.mgs-sb-container .sb__calendar,
    #sb-container-popup.mgs-sb-container .sb__guests {
        position: fixed !important;
        left:  var(--mgs-sb-pp-left, 0px) !important;
        width: var(--mgs-sb-pp-width, 100vw) !important;
        bottom: var(--mgs-sb-pp-bottom, 96px) !important;
        top: auto !important;
        max-height: calc(100dvh - var(--mgs-sb-pp-bottom, 96px) - 12px) !important;
        overflow-y: auto !important;
        z-index: 2147483000 !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18) !important;
    }
}