/* ============================================================================
   Holiday Booking - Low Briery skin
   ----------------------------------------------------------------------------
   Skins the portable `holiday-booking` plugin to the Low Briery Booking Journey
   design. The plugin renders standard elements (buttons, cards, forms, grid) as
   plain Bootstrap 5, so those already inherit cc_theme and match the rest of the
   site with no work here. This file only sets the plugin's booking-specific
   `--hbk-*` tokens, plus one small class override the tokens do not cover.

   Everything is scoped under `.hbk` so it cannot leak into the theme. Enqueued
   AFTER the plugin's `holiday-booking` stylesheet (see
   includes/functions/holiday-booking-skin.php) so these values win.

   Colours are bound to Bootstrap's runtime custom properties (--bs-*), which are
   generated from includes/config/colours-config.php via the theme build. That is
   deliberate: the booking journey tracks the brand palette automatically and no
   brand hex is hardcoded here (the house-style single-source-of-truth rule). The
   heading face is the theme's display font (Bebas Neue), so prices and the
   calendar title read as headings; body copy inherits Lato from the theme.
   ============================================================================ */

.hbk {
    /* Surfaces & text - inherit the theme's light surface and warm ink. */
    --hbk-color-surface:      var(--bs-body-bg);        /* cards, calendar */
    --hbk-color-text:         var(--bs-body-color);     /* ink */
    --hbk-color-muted:        var(--bs-secondary-color); /* notes, captions */
    --hbk-color-border:       var(--bs-border-color);   /* hairlines */
    --hbk-color-on-primary:   var(--bs-white);
    --hbk-color-chip-bg:      #f1eee8;                  /* warm-stone feature pills */
    --hbk-color-chip-fg:      #3a5658;                  /* deep-teal chip ink + icon */

    /* Brand hues - moss (secondary) is the design's accent/success colour and
       drives the eyebrows, the "what's included" ticks, the confirmation tick,
       and the calendar's available-night wash. */
    --hbk-color-accent:       var(--bs-secondary);
    --hbk-color-available:    var(--bs-secondary);
    --hbk-color-unavailable:  var(--bs-tertiary-color); /* faded booked-night text */

    /* Prices are ink display figures in the design (not a coloured highlight),
       set in the heading face. */
    --hbk-color-price:        var(--bs-body-color);
    --hbk-font-heading:       "Bebas Neue", sans-serif;

    /* Checkout "secure" band: a dark teal derived from the brand primary so the
       handoff reads as an unmistakable, on-brand shift. */
    --hbk-color-surface-dark: color-mix(in srgb, var(--bs-primary), #000 55%);

    /* Bebas is condensed, so give the cost-card price a touch more presence. */
    --hbk-font-size-lg:       1.75rem;

    /* Pale teal wash behind small icon tiles (design --surface-tint), derived
       from the primary so it tracks the palette. */
    --hbk-color-tint:         color-mix(in srgb, var(--bs-primary), #fff 90%);

    /* The design's two elevations. --shadow-md matches the cost card's existing
       float; --shadow-sm is the flatter lift the next-steps cards sit on. */
    --hbk-shadow-sm:          0 1px 4px rgba(35, 48, 49, 0.08);
    --hbk-shadow-md:          0 6px 20px rgba(35, 48, 49, 0.10);
}

/* Eyebrow / category labels: moss, bold and wide-tracked, matching the design.
   The plugin renders these muted; a token cannot recolour them, so this is the
   one class override the skin needs. */
.hbk-eyebrow {
    color: var(--bs-secondary);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   Design fidelity.
   The teal heading colour and the flat / rounded / soft-shadow card treatment
   now come from the theme itself (typography.scss, the $card-* Bootstrap vars,
   and blocks-global.scss) applied site-wide, so they are not set here. What
   remains below is booking-specific.
   -------------------------------------------------------------------------- */

/* Calendar month nav: 34px square, subtle border, teal chevron (design navBtn) —
   replaces the Bootstrap outline buttons with text arrows. */
.hbk-calendar .head .hbk-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid var(--border-strong, #cddbdb);
    border-radius: 8px;
    background: #fff;
    color: var(--bs-primary, #5b7f81);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.hbk-calendar .head .hbk-cal-nav:hover,
.hbk-calendar .head .hbk-cal-nav:focus-visible {
    background: var(--surface-tint, #eff2f2);
    border-color: var(--bs-primary, #5b7f81);
}
.hbk-calendar .head .hbk-cal-nav .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
}

/* "Your dates" strip toggle: label the affordance by panel state so collapsing
   an open calendar via the same control isn't a surprise. */
.hbk-dates-change::after {
    content: "Change dates";
}
.hbk-dates[open] .hbk-dates-change::after {
    content: "Close";
}

/* Breadcrumb above the gallery (design): Accommodation > {name}. */
.hbk-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0 1rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #494949);
}
.hbk-breadcrumb a {
    color: var(--bs-secondary-color, #494949);
    text-decoration: none;
}
.hbk-breadcrumb a:hover {
    color: var(--bs-primary, #5b7f81);
    text-decoration: underline;
}
.hbk-breadcrumb .material-symbols-outlined {
    font-size: 1rem;
}
.hbk-breadcrumb-current {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* The cost card is the one deliberately "floating" panel (design --shadow-md). */
.hbk-costcard {
    box-shadow: 0 6px 20px rgba(35, 48, 49, 0.10);
}
.hbk-costcard .card-body {
    padding: 24px;
}

/* Sidebar rhythm. This card was the tightest thing on the page — the reassurance
   line sat flush against the Book button with a 0px gap, and every row ran into
   the next. Spacing below is the design's booking card. Set per element rather
   than with a blanket `.card-body > *`, which would out-specify the single-class
   rules further down (notably the "Or call" row) and flatten them. */
.hbk-costcard .hbk-price {
    /* The design separates the price from the dates/CTA stack with a hairline. */
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bs-border-color, #d9d9d9);
}
.hbk-costcard .hbk-note {
    margin-bottom: 0;
}
/* Only rendered once a stay is chosen, so it needs its own gap to the note. */
.hbk-costcard .hbk-summary-line {
    margin-bottom: 12px;
}
.hbk-costcard .hbk-book {
    margin-top: 18px;
}
.hbk-costcard .hbk-book + .hbk-note {
    margin-top: 14px;
}
.hbk-costcard .hbk-costcard-meta {
    margin: 12px 0 0;
}

/* Chosen-dates pills: two labelled boxes (design DatePill), with the Clear
   control sitting alongside rather than under the Book button. */
.hbk-stay {
    margin: 1rem 0;
}
.hbk-stay-pills {
    display: flex;
    gap: 0.6rem;
}
.hbk-datepill {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-strong, #c3c9c8);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}
.hbk-datepill-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #494949);
}
.hbk-datepill-value {
    display: block;
    font-weight: 700;
    color: var(--bs-body-color);
}
.hbk-stay .hbk-clear-dates {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.8rem;
    color: var(--bs-secondary, #6c815b);
    text-decoration: underline;
    cursor: pointer;
}
.hbk-stay .hbk-clear-dates:hover {
    color: var(--color-secondary-hover, #586a49);
}

/* Book now: trailing arrow, spaced and optically centred against the label.
   This button resolves to `display: inline-block`, NOT flex — Bootstrap's `.btn`
   display wins over anything set here. So flex properties on it are inert: an
   earlier `gap` did nothing at all, which is why raising it changed nothing on
   screen. The label and icon are baseline-aligned inline content, so:

   - Horizontal space must come from a margin, not `gap`. The arrow additionally
     carries ~4.4px of left side bearing inside its em box, so the visible gap is
     always about 4px wider than the margin; 0.4em lands ~15px of ink-to-ink
     space, which is what the design reads as (its 0.5em box gap plus a smaller
     0.9em icon and 0.08em of button letter-spacing the theme doesn't set).
   - Vertical alignment is a baseline correction. Bebas Neue is all-caps with
     effectively no descenders so its optical centre sits ~0.35em above the
     baseline, while Material Symbols centres its glyph 0.5em above it. On a
     shared baseline the arrow therefore rides high by exactly the difference —
     measured 5.5px = 0.21em of the icon at its 1.2em.

   - `line-height: 0` keeps the icon out of the line-box calculation. Because
     the label and icon share one line box, its height is the tallest inline box
     on the line — and the icon at `line-height: 1` of a 1.2em font is 26.4px
     against the button's 16px. That inflated the button to 64px (every other
     button on the site is 52px) and, since an icon's ascent is nearly all of
     its box, pushed the baseline down with it: measured 44px from the button
     top instead of 32px, leaving the label sitting 4px low — 28px of space
     above the ink and 20px below. At `line-height: 0` the icon's box collapses
     onto the baseline, the label centres, and the button returns to 52px. The
     glyph itself does not move: it is painted from the baseline, which is what
     the translateY below corrects against.

   Deliberately NOT applied to every `.hbk .btn` icon. The results cards' "View &
   book" CTA is a real flex button and pins its icon to an absolute 16px (plugin
   `.hbk-card-foot .btn`), so neither correction transfers — applying them there
   pushed that arrow low. It is already correctly aligned; leave it alone. */
.hbk-book .material-symbols-outlined {
    font-size: 1.2em;
    line-height: 0;
    margin-left: 0.4em;
    transform: translateY(0.21em);
}

/* "Or call …" contact row (design). */
.hbk-costcard-call {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--bs-border-color, #d9d9d9);
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #494949);
}
.hbk-costcard-call .material-symbols-outlined {
    font-size: 1rem;
    color: var(--bs-secondary, #6c815b);
}
.hbk-costcard-call a {
    color: inherit;
    font-weight: 700;
}

/* Vertical rhythm for the detail column, taken from the design. The build was
   uniformly tighter than the mock at every step (4 / 8 / 16 / 24px where the
   design has 8 / 16 / 24 / 34px), which is what made the column read cramped.
   Set here in one place so the sections share a rhythm instead of each carrying
   its own margin. */
.hbk-property .hbk-gallery,
.hbk-property .hbk-gallery-placeholder {
    margin-bottom: 32px;
}
.hbk-property header h1 {
    margin: 8px 0 16px;
    /* The design sets a smaller heading here than the global scale (46px vs the
       56px top of --text-h1, 28px vs 48px for the section h2): this is a utility
       page, not a marketing one, so the headings step back for the content.
       Ramped on the same 480px → 768px track the global scale uses, so it stays
       32px on a phone rather than jumping above the global size there. */
    font-size: clamp(32px, calc(32px + 14 * ((100vw - 480px) / 288)), 46px);
}
.hbk-property .hbk-prose {
    margin-top: 24px;
    line-height: 1.7;
    /* Hold a readable measure — uncapped the description runs past 120
       characters a line, since the theme container is 1320px where the design's
       was 1120. 75ch is the top of the comfortable range. */
    max-width: 75ch;
}
.hbk-property section {
    margin-top: 34px;
}
.hbk-property section > h2 {
    margin: 0 0 18px;
    font-size: 28px;
}
@media (min-width: 992px) {
    .hbk-property > .row {
        padding-bottom: 40px;
    }
    /* Design column gap is 48px; the grid gives 24px (12px of padding a side).
       Held on our own wrapper rather than on the grid columns, so the Bootstrap
       layout classes stay untouched. Only the inner edge moves, so the outer
       edges stay flush with the gallery above. */
    .hbk-property-main {
        padding-right: 24px;
    }
}

/* Property details table: SC Sleeps/Bedrooms + CMS rows, a two-column key:value
   grid with a hairline rule under each row (matches the old-site layout). */
.hbk-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: calc(var(--hbk-space-unit, 8px) * 6);
    margin: 0;
}
@media (min-width: 768px) {
    .hbk-details-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.hbk-details-grid .hbk-detail {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--bs-border-color, #d9d9d9);
}
.hbk-details-grid dt {
    color: var(--bs-secondary-color, #494949);
    font-weight: 400;
    margin: 0;
}
.hbk-details-grid dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    color: var(--bs-body-color);
}

/* Headline feature chips, directly under the spec row (design). The chip itself
   is the plugin's shared .hbk-chip, already tokenised to the brand palette; only
   the gap to the specs above it is a property-detail concern. */
.hbk-property header .hbk-chips {
    margin-top: 18px;
}

/* What's included: mirror the Property Details grid — two columns, hairline rule
   under each row, same gaps — so the two sections read as one system. Overrides
   the plugin's Bootstrap .row/.col markup. */
.hbk-property ul.hbk-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 calc(var(--hbk-space-unit, 8px) * 6);
    margin: 0;
    padding: 0;
    list-style: none;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
@media (min-width: 768px) {
    .hbk-property ul.hbk-features {
        grid-template-columns: 1fr 1fr;
    }
}
.hbk-property .hbk-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--bs-border-color, #d9d9d9);
    /* The list is a CSS grid here, but the markup keeps Bootstrap's `col` from
       `row-cols-sm-2`, whose 50% width would make each row half its grid cell —
       hairlines stopping halfway and misaligned with the details grid above. */
    width: auto;
}
.hbk-property .hbk-feature .material-symbols-outlined {
    flex: none;
    font-size: 20px;
    color: var(--bs-secondary, #6c815b);
}

/* Booking sidebar: sticks below the fixed header as the page scrolls (design).
   align-self keeps the flex item its own height so sticky has room to travel;
   the top offset clears the fixed header (100px, 65px once shrunk). */
@media (min-width: 992px) {
    .hbk-property .row > aside.col-lg-4 {
        position: sticky;
        top: 116px;
        align-self: flex-start;
    }
}

/* Calendar: was full column width and dominated the page. Constrain the calendar
   BOX to ~2/3 of the content column, with breathing room beneath. The box is
   either the standalone calendar or the collapsible "your dates" panel — the
   panel must be constrained, not the grid inside it, or the panel stays full
   width with an empty right half. */
.hbk-property .hbk-calendar,
.hbk-property .hbk-dates {
    margin-top: 40px;
    margin-bottom: calc(var(--hbk-space-unit, 8px) * 5);
}
@media (min-width: 992px) {
    .hbk-property .hbk-calendar,
    .hbk-property .hbk-dates {
        max-width: 66%;
    }
    /* The calendar fills the already-constrained dates panel. */
    .hbk-property .hbk-dates .hbk-calendar {
        max-width: none;
    }
}

/* Space between the full-bleed hero and the results grid (and before the
   footer). Two classes (.hbk.hbk-results) to out-specify Bootstrap's `.row`
   negative top margin, which otherwise pulls the cards up against the hero. */
.hbk.hbk-results {
    margin-top: 2.5rem;
    margin-bottom: 3rem;
}

/* Result-card title: the design sets the unit name at ~25px Bebas; Bootstrap's
   .h5 renders it at 20px, so nudge it up to match. */
.hbk-results .card-title {
    font-size: 1.5rem;
}

/* Result-card images: the SuperControl feed returns photos of varying sizes, so
   pin every card image to one landscape ratio and cover-crop it. This keeps the
   grid uniform whatever the source dimensions (the design uses a fixed image
   height with object-fit: cover). */
.hbk-results .card-img-top {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* Round the media box to the card's top corners. Bootstrap rounds .card-img-top,
   so real photos were fine, but the placeholder paints its background on
   .hbk-card-media itself — which had square corners. Rounding the box (with
   overflow) covers both real and placeholder. */
.hbk-results .hbk-card-media {
    overflow: hidden;
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

/* Placeholder image for units with no (or a broken) photo. A theme asset, not a
   media-library upload; the plugin marks the box .is-placeholder. */
.hbk-card-media.is-placeholder,
.hbk-gallery-placeholder {
    background-image: url('images/hbk-placeholder.svg');
}

/* Price: the design shows the stay figure as a large Bebas display number
   (~30px); the plugin renders it at body size, which reads too small. */
.hbk-results .hbk-price {
    font-size: 1.875rem;
    line-height: 1;
}

/* CTA: align the "View & book" label with its trailing arrow icon. */
.hbk-results .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.hbk-results .btn .material-symbols-outlined {
    font-size: 1.15em;
}

/* --------------------------------------------------------------------------
   Search-entry hero (design Screen 1).
   The /book/ hero is a Cover block wrapping an eyebrow, headline, subtext and
   the plugin's Search block. These rules style the hero copy (on the dark scrim)
   and recompose the search form into the design's single white segmented bar.
   -------------------------------------------------------------------------- */

/* Hero copy sits on the dark image scrim, so it is white / light. */
.hbk-hero :is(h1, h2, h3) {
    color: #fff;
}
.hbk-hero .hbk-hero-title {
    font-size: clamp(2.5rem, 1.4rem + 4.5vw, 4rem); /* ~40 -> 64px Bebas */
    line-height: 1.02;
    letter-spacing: 0.01em;
    margin: 0;
}
.hbk-hero .hbk-hero-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1.125rem;
}
.hbk-hero .hbk-hero-sub {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 46ch;
    margin: 1.125rem auto 0;
}

/* Search bar: skin the plugin's Search block (a Bootstrap .row of .col fields +
   a submit) into the design's single white segmented bar. The plugin owns the
   markup and field names (incl. the two native date inputs it enhances with
   Flatpickr) - this is pure CSS over its existing classes. `.hbk.hbk-search`
   (two classes) + `!important` on align-items out-specify Bootstrap's `.row` /
   `.align-items-end`, which load after this file in dev; the row gutter is
   zeroed via the Bootstrap custom properties, and the cols keep their own
   flex sizing (col-lg = equal fields, col-lg-auto = the button). */
.hbk.hbk-search {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    flex-wrap: nowrap;
    align-items: stretch !important;
    width: 100%;
    max-width: 1040px;
    /* auto side margins forced: Bootstrap's .row sets its own margin-left/right
       longhands that otherwise win in the dev load order and push the bar off
       centre. */
    margin: 2rem auto 0 !important;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(35, 48, 49, 0.28);
}
/* Field segments (every direct child; the submit is the last one). */
.hbk-search > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 18px;
    border-right: 1px solid var(--bs-border-color);
}
.hbk-search > div:last-child {
    padding: 0;
    border-right: 0;
}
.hbk-search .form-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 2px;
}
.hbk-search .form-control,
.hbk-search .form-select {
    border: 0;
    padding: 0;
    height: auto;
    min-height: 0;
    background: transparent;
    font-weight: 700;
    color: var(--bs-body-color);
    box-shadow: none;
}
.hbk-search .form-control:focus,
.hbk-search .form-select:focus {
    box-shadow: none;
    outline: none;
}
.hbk-search .btn {
    height: 100%;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    line-height: 1;
}
.hbk-search .btn .material-symbols-outlined {
    font-size: 1.15em;
    /* No optical nudge here, unlike .hbk-book. That button resolves to
       inline-block, so its label and icon share a baseline and the icon rides
       high; this one is a flex container with align-items:center and
       line-height:1, so the two boxes are already centred on each other and the
       glyph lands right. An earlier translateY(0.12em) here was correcting a
       problem this button doesn't have, and pushed the arrow visibly low. */
}

/* Field icons (design): a teal glyph to the left of each field's label + value.
   The plugin renders the icon span + a body wrapper; this lays them out in a
   row, overriding the default column stacking for icon-bearing fields. */
.hbk-search > .hbk-search-field {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.hbk-search-icon {
    flex: none;
    color: var(--bs-primary);
    font-size: 22px;
}
.hbk-search-field-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Give the date range more room (its "12 Jul 2026 – 15 Jul 2026" value is the
   longest) and shrink Guests, which only holds a number. Overrides the equal
   flex of Bootstrap's .col fields. */
.hbk-search > .hbk-field-dates {
    flex-grow: 1.7;
}
.hbk-search > .hbk-field-guests {
    flex-grow: 0.65;
}

/* Results "your search" summary + filter bar: icons and Edit link teal (design). */
.hbk-compact-cell-icon,
.hbk-compact-search-edit,
.hbk-filter-pill-icon {
    color: var(--bs-primary);
}

/* Stack the bar on smaller screens. */
@media (max-width: 991.98px) {
    .hbk.hbk-search {
        flex-direction: column;
        max-width: 480px;
    }
    .hbk-search > div {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }
    .hbk-search > div:last-child {
        border-bottom: 0;
        padding-top: 8px;
    }
}

/* Result-card footer layout (price left, CTA right, beneath a hairline) is now
   owned by the plugin's .hbk-card-foot component, so the card-body no longer
   needs a theme-side grid. Kept here: only the skin (title font, image ratio,
   price display size, CTA icon alignment) above. */

/* --------------------------------------------------------------------------
   Property gallery: Swiper main slider + synced thumbnail carousel, opening in
   a PhotoSwipe lightbox. Theme JS (src/js/holiday-booking-gallery.js) enhances
   the plugin's static `.hbk-gallery` grid into this; the grid is the no-JS
   fallback. Swiper base + PhotoSwipe styles come from the JS-imported bundles.
   -------------------------------------------------------------------------- */
.hbk-gallery.is-enhanced {
    display: block;
    /* No margin-bottom here: the rhythm block above owns the gap to the body so
       the enhanced and no-JS galleries sit identically. */
}

.hbk-gallery-main {
    --swiper-navigation-size: 18px;
    border-radius: var(--hbk-radius-md, 12px);
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--bs-tertiary-bg, #f1eee8);
}
.hbk-gallery-main .swiper-slide {
    /* Was 16/10, which on the full-width container rendered ~800px tall and
       pushed all content off the fold. 21/9 is Bootstrap's ratio-21x9 — used as
       the aspect-ratio property rather than the .ratio class because that helper
       absolutely-positions its children, which breaks Swiper's DOM. */
    aspect-ratio: 21 / 9;
}
.hbk-gallery-main .hbk-gallery-open {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.hbk-gallery-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Round white nav buttons over the image. */
.hbk-gallery-main .swiper-button-prev,
.hbk-gallery-main .swiper-button-next {
    top: 50%;
    width: 40px;
    height: 40px;
    margin: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--bs-body-color);
    box-shadow: 0 2px 10px rgba(35, 48, 49, 0.22);
}
.hbk-gallery-main .swiper-button-prev { left: 12px; }
.hbk-gallery-main .swiper-button-next { right: 12px; }
.hbk-gallery-main .swiper-button-prev::after,
.hbk-gallery-main .swiper-button-next::after {
    font-size: var(--swiper-navigation-size);
    font-weight: 700;
}

/* Thumbnail carousel. */
.hbk-gallery-thumbs {
    margin-bottom: 0;
}
.hbk-gallery-thumbs .swiper-slide {
    aspect-ratio: 3 / 2;
    border-radius: var(--hbk-radius-sm, 6px);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.hbk-gallery-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.hbk-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    border-radius: var(--hbk-radius-sm, 6px);
}

/* ==========================================================================
   Confirmation (design screen 7)
   The plugin ships the structure and neutral defaults; this is the Low Briery
   type scale and palette over it. Sizes follow the design's px values because
   Bebas is condensed and reads smaller than its nominal size.
   ========================================================================== */

/* Success band. The theme's confirmation template deliberately omits the
   container so this runs edge to edge, as the design shows it. */
.hbk-confirmation .hbk-confirm-hero {
    padding-block: 2.75rem 2.5rem;
}

.hbk-confirmation .hbk-confirm-hero > * {
    max-width: 900px;
    margin-inline: auto;
}

.hbk-confirmation .hbk-confirm-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--bs-white);
}

/* Moss on the dark band would sink into it, so the eyebrow and the meta icons
   use the design's muted-moss-on-dark instead of the flat brand secondary. */
.hbk-confirmation .hbk-confirm-hero .hbk-eyebrow {
    color: color-mix(in srgb, var(--bs-secondary), #fff 45%);
    font-size: 0.78rem;
    letter-spacing: 0.24em;
}

.hbk-confirm-meta {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
}

.hbk-confirm-meta-item .material-symbols-outlined {
    color: color-mix(in srgb, var(--bs-secondary), #fff 45%);
}

/* Next steps */
.hbk-confirm-next > h2 {
    font-size: 1.75rem;
}

.hbk-nextcard-title {
    font-size: 1.1875rem;
    letter-spacing: 0.02em;
    color: var(--bs-primary);
}

.hbk-nextcard-text {
    font-size: 0.84375rem;
}

.hbk-nextcard-icon {
    color: var(--bs-primary);
}

/* SC-returned details aside */
.hbk-confirm-source {
    font-size: 0.65625rem;
    font-weight: 700;
}

.hbk-confirm-unit .hbk-eyebrow {
    font-size: 0.65625rem;
    letter-spacing: 0.12em;
}

.hbk-confirm-unit-name {
    font-size: 1.375rem;
    color: var(--bs-primary);
}

.hbk-confirm-unit .hbk-note {
    font-size: 0.78125rem;
}

.hbk-confirm-label {
    font-size: 0.75rem;
}

.hbk-confirm-refvalue {
    font-size: 1.25rem;
    color: var(--bs-primary);
}

.hbk-confirm-total .hbk-price {
    font-size: 1.625rem;
}

.hbk-confirm-paid {
    font-size: 0.78125rem;
}

.hbk-confirm-emailed {
    font-size: 0.75rem;
}

/* The Heading CTA block placed after the next-steps grid (see
   holiday-booking-skin.php). The block normally gets its spacing from the
   editor's block-padding options, which a plugin-routed page has none of. */
.hbk-confirm-after .heading-cta {
    margin-top: 0.5rem;
}