/* Hotel product: search, results, hotel page, booking.
   Colours come from site.css: --brand (the logo's petrol blue) for actions and
   prices, --ok (green) for good states such as free cancellation. */

:root {
    --hotel-teal: #40e0d0;
    --hotel-ink: #1a1a1a;
    --hotel-muted: #6b7280;
    --hotel-line: #e8ebe9;
}

/* ---------------------------------------------------------- product tabs

   The strip sits on a photographic hero, where plain text washes out. It is
   given its own dark, blurred bar so it reads as a control, and the active tab
   is a solid white pill that visually joins the search card beneath it. */

.product-tabs {
    display: inline-flex;
    gap: .2rem;
    padding: .35rem;
    border-radius: 16px;
    background: rgba(12, 28, 24, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.product-tabs::-webkit-scrollbar { display: none; }

/* The strip renders as links on product pages and as buttons on the homepage, where
   the tabs swap panels instead of navigating. The button defaults (border, grey
   background, UA font) would break the shared look, so they are cleared here. */
.product-tab {
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .68rem 1.4rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: .95rem;
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: .01em;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.product-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

/* As buttons the tabs kept the browser's blue focus ring after a mouse click, which
   clashed with the strip. Keyboard users still get a ring — one that matches. */
.product-tab:focus { outline: none; }

.product-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.product-tab.active {
    background: #fff;
    color: var(--brand-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.product-tab.active:hover { background: #fff; color: var(--brand-dark); }

.product-tab i { font-size: 1.2rem; }

/* Inner pages put the strip on a light background instead of a photo. */
.product-tabs.on-light {
    background: #eef2f0;
    border-color: #e2e8e5;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.product-tabs.on-light .product-tab { color: #5b6b64; }
.product-tabs.on-light .product-tab:hover { background: rgba(0, 0, 0, .05); color: var(--hotel-ink); }
.product-tabs.on-light .product-tab.active {
    background: #fff;
    color: var(--brand-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

@media (max-width: 575.98px) {
    /* On a phone the strip spans the card width and each tab gets an equal share.
       Four tabs have to fit 375px, so the label drops a size and the icon sits
       above it — still a comfortable touch target, and nothing is cut off. */
    .product-tabs { display: flex; width: 100%; padding: .3rem; gap: .15rem; }
    .product-tab {
        flex: 1; min-width: 0; flex-direction: column; justify-content: center;
        padding: .55rem .25rem; font-size: .86rem; gap: .2rem; letter-spacing: 0;
    }
    .product-tab i { font-size: 1.35rem; }
    .product-tab span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

    /* Roboto stops at 700, so weight alone cannot make these read heavier on a phone —
       at .8rem the strokes thin out against the photograph. Full-strength white and a
       trace of shadow do what the extra weight would have. */
    .product-tab { font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
    .product-tabs.on-light .product-tab { color: var(--hotel-ink); text-shadow: none; }
    .product-tab.active, .product-tabs.on-light .product-tab.active { text-shadow: none; }
}

/* ------------------------------------------------------------ search hero */

/* One hero for every product — hotels, flights, transfers and the homepage share one
   photograph, one overlay and one desktop height, so moving between products never
   looks like changing site. The photo is a calm sky scene under a navy wash that is
   darkest behind the headline, so white text reads and the white search card stands
   clear of it. .hero-img is matched too: site.css gave it its own photo and overlay,
   and this file loads after site.css. */
.hotel-hero,
.hero-img {
    position: relative;
    /* WebP, 167 KB wide and 53 KB on phones: the 457 KB JPEG was the page's largest
       paint and took most of the load on a mobile connection. */
    background: #0f2a3f url('/img/hero-plane-istanbul-1920.webp') center 45%/cover no-repeat;
    padding: 1.75rem 0 0;
    color: #fff;
}
@media (max-width: 900px) {
    .hotel-hero,
    .hero-img { background-image: url('/img/hero-plane-istanbul-900.webp'); }
}

.hotel-hero::before,
.hero-img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
                rgba(6, 24, 44, .55) 0%,
                rgba(6, 24, 44, .30) 55%,
                rgba(6, 24, 44, .18) 100%);
}

.hotel-hero > .container,
.hero-img > .container {
    position: relative;
    z-index: 2;
}

/* The tallest hero (the homepage, which stacks every search box) sets the height;
   phones keep their natural height so the search box is not pushed down. */
@media (min-width: 992px) {
    .hotel-hero,
    .hero-img { min-height: 600px; display: flex; flex-direction: column; }
    /* The headline-and-card block hangs from the bottom of the hero with a fixed
       gap under it; whatever the photo has to spare opens up above the headline
       instead of below the card. */
    .hotel-hero .hero-body,
    .hero-img .hero-body { margin-top: auto; padding-bottom: 3.5rem !important; }
}

.hotel-hero h1,
.hotel-hero .hero-h1 {
    font-weight: 800;
    font-size: clamp(1.75rem, 3.6vw, 2.7rem);
    margin-bottom: .4rem;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* One reading measure for both heroes. It used to be a flat 720px on the transfer
   side and nothing at all here, so the same sentence sat on one line on /Hotels and
   wrapped on the homepage. In ch the limit follows the font rather than one
   sentence, and 100ch leaves room for a longer intro while still stopping the text
   from running the full 1296px of the container. */
.hotel-hero .lead,
.hero-img .lead {
    max-width: 100ch;
}

/* Supplier prose. The markup comes from the property, so it is given a predictable
   rhythm here rather than being trusted to arrive well spaced. */
.supplier-note > :last-child { margin-bottom: 0; }
.supplier-note p { margin-bottom: .6rem; }
.supplier-note ul,
.supplier-note ol { margin-bottom: .6rem; padding-left: 1.2rem; }
.supplier-note li { margin-bottom: .2rem; }

.hotel-hero .lead {
    color: rgba(255, 255, 255, .94);
    margin-bottom: 5.25rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

/* One search-card look for every product.
   Hotels and transfers had drifted apart — 18px corners against 14px, different
   padding and very different shadows — so the two heroes read as separate sites.
   The transfer card additionally never got its intended styling at all: the older
   `.hero-img .customCard` rule in site.css is more specific and was overriding it.
   This file loads after site.css, so matching that specificity settles it.

   The hero sets color:#fff for its own headings; the cards reset it so nothing
   inside inherits white text onto a white background. */
.hotel-searchbox,
.hero-img .hero-search-card,
.hero-img .hero-pnr-card,
.hotel-hero .hero-search-card,
.hotel-hero .hero-pnr-card {
    background: #fff;
    color: var(--hotel-ink);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 18px 44px rgba(16, 42, 34, .24), 0 2px 6px rgba(16, 42, 34, .08);
    padding: 1.5rem;
}

/* Over the hero photograph the box needs that lift to read as a card. On the
   results and hotel pages it sits on a plain light band, where the same shadow
   looked like a bruise under the card, so there it is barely there. */
.bg-light .hotel-searchbox {
    box-shadow: 0 1px 4px rgba(16, 42, 34, .07);
    border-color: #e6e9e7;
}

/* The flight box carries a trip-type row in its top padding; these two get the
   same 8px so all three product boxes come out the same height. */
.hotel-searchbox:not(.flight-searchbox),
.hero-img .hero-search-card,
.hotel-hero .hero-search-card { padding-top: 2rem; }

/* One label treatment for both search boxes — they had drifted to different
   font sizes and margins, which showed up as a few pixels of row-height
   difference between the two products. */
.hotel-searchbox label,
.hero-img .hero-search-card label,
.hero-img .hero-pnr-card label,
.hotel-hero .hero-search-card label,
.hotel-hero .hero-pnr-card label {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    /* Dark slate, not #888: the grey was 3.5:1 on white, under the 4.5:1 small
       text needs, and the field names read fainter than the hint lines below. */
    color: #2b3532;
    margin-bottom: .3rem;
}

/* ------------------------------------------------------------------
   "Search" / "Check Reservation" pair, and the lookup card behind it.

   Both products carry this pair, on the homepage and on their own page, so the
   rules live here rather than inside the transfer hero partial — /Hotels renders
   the same markup without ever loading that partial.
   ------------------------------------------------------------------ */

.hero-search-tabs {
    display: inline-flex;
    gap: 0;
    background: #f1f3f2;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 1.25rem;
}

.hero-search-tab {
    background: transparent;
    color: #666;
    font-weight: 700;
    padding: .55rem 1.4rem;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: .9rem;
    transition: all .15s;
}

.hero-search-tab:hover { color: #1a1a1a; }

.hero-search-tab.active {
    background: #fff;
    color: var(--brand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ASP.NET always renders the validation summary, marking it
   "validation-summary-valid" while there is nothing to report. Left in place it
   added 16px below the row, making the search card taller than the reservation
   lookup behind the same tab. It reappears the moment validation fails. */
.hero-search-card .text-danger:has(.validation-summary-valid),
.hero-pnr-card .text-danger:has(.validation-summary-valid) {
    display: none;
}

/* Both cards share one input treatment. The reservation lookup used to fall
   through to the Bootstrap defaults — 33px tall with square corners next to 48px
   rounded fields — so the two panels looked unrelated. */
.hero-search-card input.form-control,
.hero-pnr-card input.form-control {
    /* Fixed height so the inputs and the submit button always line up, whatever
       the root font size resolves to. */
    height: 48px;
    padding: .7rem .9rem;
    border: 1.5px solid #e2e8e5;
    border-radius: 10px;
    font-size: .95rem;
    background: #fafbfa;
    font-weight: 500;
    transition: border-color .15s, box-shadow .15s;
}

.hero-search-card input.form-control:focus,
.hero-pnr-card input.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0, 114, 150, .12);
    background: #fff;
    outline: none;
}

.hero-find-btn {
    background: linear-gradient(135deg, #007296 0%, #00a2cc 100%);
    color: #fff;
    border: none;
    font-weight: 700;
    padding: .7rem 1.2rem;
    border-radius: 10px;
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    box-shadow: 0 4px 12px rgba(0, 114, 150, .22);
    transition: transform .15s, box-shadow .15s;
}

.hero-find-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 114, 150, .35);
    color: #fff;
}

/* The search boxes' fields: filled, on a card. Data-entry forms (.hotel-form and
   the rest) take the white fields of forms.css. */
.hotel-searchbox .form-control,
.hotel-searchbox .form-select {
    height: 48px;
    border: 1.5px solid #d6ded9;
    border-radius: 10px;
    padding: .7rem .9rem;
    font-size: .95rem;
    font-weight: 500;
    background: #f5f8f6; /* a shade off the card so an empty field still reads as a field */
    transition: border-color .15s, box-shadow .15s, background .15s;
}

/* Single-line search controls are pinned to the same height as the transfer
   search, so a row never mixes 44px fields with a 48px button. Multi-line
   fields keep their natural height. */
.hotel-searchbox .form-control,
.hotel-searchbox .form-select,
.hotel-searchbox #occupancyButton {
    height: 48px;
}

.hotel-searchbox .form-control:focus,
.hotel-searchbox .form-select:focus,
/* The "+ 90" country-code group: the prefix box takes the field's own height,
   border and fill, so the pair reads as one field. */
.hotel-form .input-group { align-items: stretch; }
.hotel-form .input-group > .input-group-text {
    min-height: 46px;
    border: 1px solid var(--form-line, #d5dcd8);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #fff;
    color: var(--hotel-muted);
    padding: .6rem .2rem .6rem .75rem;
}
.hotel-form .input-group > .form-control { border-radius: 0 8px 8px 0; }

/* Consent and option text is read once, not scanned; it should not shout. */
/* The form's label rule makes labels blocks, which dropped this text under its box. */
.hotel-form .form-check { display: flex; align-items: flex-start; gap: .6rem; padding-left: 0; }
.hotel-form .form-check-input { flex: 0 0 auto; margin: .2em 0 0; float: none; }
.hotel-form .form-check-label { display: inline; font-weight: 500; font-size: .9rem; color: #2b3532; line-height: 1.45; margin: 0; }

.hotel-form label:not(.form-check-label) {
    font-weight: 600;
    font-size: .88rem;
    color: var(--hotel-ink);
    margin-bottom: .3rem;
}

/* Same gradient and proportions as the site's other primary actions. */
.btn-hotel-search,
.btn-hotel-primary {
    background: linear-gradient(135deg, #007296, #00a2cc);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    border-radius: 10px;
    padding: .7rem 1.25rem;
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    box-shadow: 0 4px 14px rgba(0, 114, 150, .25);
    transition: transform .15s, box-shadow .15s;
}

.btn-hotel-search:hover,
.btn-hotel-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 114, 150, .35);
}

.btn-hotel-search:disabled,
.btn-hotel-primary:disabled { opacity: .65; transform: none; }

/* autocomplete */
.suggest-wrap { position: relative; }

/* These panels open inside the hero, which sets color:#fff for its own text.
   Without an explicit colour they inherit it and render white on white. */
.suggest-list {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    color: var(--hotel-ink);
    text-align: left;
    border: 1px solid var(--hotel-line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    max-height: 320px;
    overflow-y: auto;
    display: none;
}

.suggest-list.show { display: block; }

.suggest-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .85rem;
    cursor: pointer;
    font-size: .92rem;
    color: var(--hotel-ink);
    line-height: 1.35;
}

.suggest-item span { flex: 1; min-width: 0; }

/* A property entry is two lines: the name, and the town that tells two
   identically named hotels apart. */
.suggest-text { display: flex; flex-direction: column; }

.suggest-text > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggest-place {
    font-size: .78rem;
    color: var(--hotel-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggest-item:hover, .suggest-item.active { background: #f2f7f4; }

.suggest-item .bx { color: var(--brand); font-size: 1.1rem; }

.suggest-item small { color: var(--hotel-muted); }

.suggest-group-title {
    padding: .45rem .85rem .2rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hotel-muted);
}

/* occupancy popover */
.occupancy-panel {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 4px);
    right: 0;
    width: 320px;
    background: #fff;
    /* Same inheritance trap as the suggestion list — see the note above. */
    color: var(--hotel-ink);
    text-align: left;
    border: 1px solid var(--hotel-line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    padding: 1rem;
    display: none;
}

.occupancy-panel .text-muted { color: var(--hotel-muted) !important; }

.occupancy-panel.show { display: block; }

.occ-room + .occ-room { border-top: 1px solid var(--hotel-line); margin-top: .85rem; padding-top: .85rem; }

.occ-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }

.occ-stepper { display: inline-flex; align-items: center; gap: .5rem; }

.occ-stepper button {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--hotel-line);
    background: #fff;
    line-height: 1;
    font-weight: 700;
    color: var(--brand-dark);
}

.occ-stepper button:disabled { opacity: .4; }

.child-age-select { width: 92px; }

/* The guests panel and the floating WhatsApp button want the same corner of a phone
   screen, and the button was winning — it covered the "+" that adds an adult. */
body.occupancy-open .whatsapp-float { display: none; }

/* Two cabins side by side. A dropdown for two options hides half the choice behind a
   click, and this panel is the only place the cabin can be set. */
.cabin-choice {
    display: inline-flex;
    border: 1px solid var(--hotel-line);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.cabin-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cabin-choice label {
    margin: 0;
    padding: .28rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--brand-dark);
    cursor: pointer;
}

.cabin-choice input:checked + label {
    background: var(--brand);
    color: #fff;
}

.cabin-choice input:focus-visible + label {
    outline: 2px solid var(--brand-dark);
    outline-offset: -2px;
}

/* ---------------------------------------------------------------- results */

/* Results past the first batch. display:none rather than visibility or opacity
   because it is the one that stops the browser fetching their photographs — the
   whole point of holding them back. */
.hotel-result-card.is-hidden { display: none; }

.btn-show-more {
    font-weight: 700;
    padding: .7rem 1.6rem;
    border-radius: 10px;
    border-width: 1.5px;
}

.hotel-result-card {
    position: relative;
    display: flex;
    gap: 1.15rem;
    border: 1px solid var(--hotel-line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 1.1rem;
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.hotel-result-card:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, .1);
    transform: translateY(-3px);
    border-color: #d6e3dc;
}

.hotel-result-img {
    width: 250px;
    min-height: 172px;
    flex: 0 0 250px;
    object-fit: cover;
    background: #f1f3f2;
    transition: transform .4s ease;
}

.hotel-result-card:hover .hotel-result-img { transform: scale(1.04); }

/* Keeps the zoom from spilling past the rounded corner. */
.hotel-result-imgwrap { overflow: hidden; flex: 0 0 250px; display: flex; }

.hotel-result-body { flex: 1; padding: .95rem 1rem .95rem 0; display: flex; flex-direction: column; min-width: 0; }

.hotel-result-name {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--hotel-ink);
    margin-bottom: .2rem;
    line-height: 1.3;
}

.hotel-stars { color: #f6a609; font-size: .85rem; letter-spacing: -1px; }

.hotel-result-room {
    font-size: .9rem;
    font-weight: 700;
    color: var(--hotel-ink);
    margin-top: .35rem;
    line-height: 1.3;
}

/* Address, distance, board and free cancellation, one per line behind an icon, the
   way Enuygun's app lists them: a row of mixed pills and grey text read as clutter. */
.hotel-result-facts {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
    font-size: .85rem;
    color: var(--hotel-muted);
}

.hotel-result-facts li {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    line-height: 1.35;
    margin-bottom: .2rem;
    min-width: 0;
}

.hotel-result-facts i { flex: none; font-size: 1rem; line-height: 1.35; }

/* A street address runs to three lines on a phone; one, cut short, is enough to
   place the hotel. The full address is on the hotel page and in the tooltip. */
.hotel-result-facts .hotel-result-address span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hotel-result-facts .hotel-free-cancel { color: var(--ok-dark); font-weight: 600; }

.hotel-kind-chip {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5b6b64;
    background: #f1f5f3;
    border-radius: 6px;
    padding: .16rem .5rem;
}

.hotel-price-col {
    flex: 0 0 210px;
    border-left: 1px dashed var(--hotel-line);
    padding: 1.15rem;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, #fff 0%, #fbfdfc 100%);
}

.hotel-price {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.05;
    letter-spacing: -.02em;
}

.hotel-price-sub { font-size: .82rem; color: var(--hotel-muted); }

.btn-see-rooms {
    background: var(--brand);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    padding: .58rem 1rem;
    width: 100%;
    transition: background .15s ease, box-shadow .15s ease;
    box-shadow: 0 4px 12px rgba(0, 114, 150, .22);
}

.btn-see-rooms:hover {
    background: var(--brand-dark);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 114, 150, .32);
}

.badge-free-cancel {
    background: rgba(25, 135, 84, .1);
    color: var(--ok-dark);
    font-weight: 600;
    font-size: .74rem;
    border-radius: 999px;
    padding: .25rem .6rem;
}

.badge-nonref {
    background: rgba(195,32,47,.08);
    color: #c3202f;
    font-weight: 600;
    font-size: .74rem;
    border-radius: 999px;
    padding: .25rem .6rem;
}

/* On a phone the headline and the intro pushed the search box to 443px down a
   812px screen — more than half the first view spent on copy nobody came for.
   Every travel site answers this the same way: the marketing text is desktop
   only, and the form sits right under the product tabs. The heading stays, small,
   because it is the page's h1. */
@media (max-width: 767.98px) {
    .hotel-hero .lead { display: none; }

    .hotel-hero h1,
.hotel-hero .hero-h1 {
        font-size: 1.25rem;
        line-height: 1.3;
        margin: .5rem 0 .75rem;
    }

    .hotel-hero { padding-top: 1.25rem; }

    .hero-search-tabs { margin-bottom: .75rem; }
}

/* On a phone: photo on the left, the facts on the right and the price under them —
   the layout of Enuygun's and Booking's apps. Stacked, with a full-width photo on
   top and a button underneath, one card filled the screen; side by side, two do,
   which is what a guest comparing a hundred hotels needs. The whole card is the
   link, so the button is not drawn. */
@media (max-width: 767.98px) {
    .hotel-result-card {
        display: grid;
        grid-template-columns: 38% minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        gap: 0;
        border-radius: 14px;
        margin-bottom: .8rem;
    }
    .hotel-result-card:hover { transform: none; }

    .hotel-result-imgwrap { grid-row: 1 / span 2; grid-column: 1; width: auto; }
    .hotel-result-img { width: 100%; height: 100%; min-height: 0; flex: none; }

    .hotel-result-body { grid-column: 2; padding: .75rem .8rem 0; }
    /* The site's root type is 14px on a phone, so 1rem is 14px here: the name at
       about 16px, the room and the facts at 14px. The facts were 12px and pale grey,
       the faintest thing on the card, though they are what places the hotel. */
    .hotel-result-name { font-size: 1.18rem; line-height: 1.25; }
    .hotel-stars { font-size: .8rem; }
    .hotel-result-room { font-size: 1rem; }
    .hotel-result-facts { font-size: 1rem; color: #55625c; }
    .hotel-rating, .hotel-rating-score { font-size: .95rem; }

    .hotel-price-col {
        grid-column: 2;
        flex: none;
        border: none;
        background: none;
        text-align: right;
        padding: .4rem .8rem .75rem;
        justify-content: flex-end;
    }
    .hotel-price-col .hotel-price { white-space: nowrap; font-size: 1.45rem; margin-bottom: 0 !important; }
    .hotel-price-col .hotel-price-total { font-size: .82rem; }
    .hotel-price-col .hotel-price-sub { font-size: .78rem; margin: .15rem 0 0 !important; }

    /* Still the link — its stretched ::after covers the card — but not drawn. */
    .hotel-price-col .btn-see-rooms {
        position: static;
        width: 0;
        height: 0;
        padding: 0;
        border: 0;
        font-size: 0;
        background: none;
        box-shadow: none;
    }
}

/* ------------------------------------------------------------- hotel page */

/* Main image and the 2x2 thumbnail grid are sized to finish level with each
   other, so the gallery reads as one block rather than a ragged column. */
.hotel-gallery-main {
    width: 100%;
    height: 372px;
    object-fit: cover;
    border-radius: 18px;
    background: #f1f3f2;
}

.hotel-gallery-thumb {
    width: 100%;
    height: 182px;
    object-fit: cover;
    border-radius: 14px;
    cursor: pointer;
    background: #f1f3f2;
    transition: opacity .18s ease, transform .18s ease;
}

.hotel-gallery-thumb:hover { opacity: .85; transform: scale(1.02); }

.rate-row {
    border: 1px solid var(--hotel-line);
    border-radius: 16px;
    padding: 1.1rem;
    margin-bottom: .9rem;
    display: flex;
    gap: 1.1rem;
    align-items: center;
    background: #fff;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.rate-row:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
    border-color: #d6e3dc;
}

.rate-room-img {
    width: 132px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    flex: 0 0 132px;
    background: #f1f3f2;
}

.rate-info { flex: 1; min-width: 0; }

.rate-name { font-weight: 700; color: var(--hotel-ink); font-size: 1.02rem; }

.rate-meta { font-size: .85rem; color: var(--hotel-muted); }

.rate-price-col {
    text-align: right;
    flex: 0 0 190px;
    padding-left: 1rem;
    border-left: 1px dashed var(--hotel-line);
}

@media (max-width: 767.98px) {
    .hotel-gallery-main { height: 240px; }
    .rate-row { flex-direction: column; align-items: stretch; }
    .rate-room-img { width: 100%; flex: none; height: 170px; }
    .rate-price-col { text-align: left; border-left: none; padding-left: 0; border-top: 1px dashed var(--hotel-line); padding-top: .85rem; }
}

/* Dates and party size on the hotel page. */
.stay-bar {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
    background: #f8faf9;
    border: 1px solid var(--hotel-line);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}

.stay-bar-field { flex: 1 1 170px; min-width: 150px; }

.stay-bar-field label {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    /* Dark slate, not #888: the grey was 3.5:1 on white, under the 4.5:1 small
       text needs, and the field names read fainter than the hint lines below. */
    color: #2b3532;
    margin-bottom: .3rem;
}

.stay-bar .form-control,
.stay-bar .form-select {
    height: 44px;
    border: 1.5px solid #e2e8e5;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 500;
    background: #fff;
}

.stay-bar-action { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; }
.stay-bar-action .btn-hotel-search { height: 44px; }

@media (max-width: 575.98px) {
    .stay-bar-field { flex: 1 1 100%; }
    .stay-bar-action { width: 100%; }
    .stay-bar-action .btn-hotel-search { width: 100%; }
}

/* Where the property is. The coordinates were cached all along and never shown. */
.hotel-map {
    border: 1px solid var(--hotel-line);
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
}

.hotel-map iframe {
    width: 100%;
    /* Shorter than a full-width map would need: in the right rail it is there to
       place the hotel at a glance, not to be browsed — "Open larger map" is for that. */
    height: 220px;
    border: 0;
}

/* House rules can run to several screens; folded until asked for. */
.supplier-note.is-clamped {
    max-height: 220px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
            mask-image: linear-gradient(#000 65%, transparent);
}

.supplier-note-toggle {
    font-size: .88rem;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
}

/* A room and every rate offered for it. The room is decided once, at the top; the
   rows below differ only in board, cancellation terms and price. */
.room-group {
    border: 1px solid var(--hotel-line);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: #fff;
}

.room-group-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: #f8faf9;
    border-bottom: 1px solid var(--hotel-line);
}

.room-group-title { flex: 1 1 auto; min-width: 0; }

.room-group-from { text-align: right; flex: none; }

/* Inside a group the rows are options, not cards: the border and radius they carry
   on their own would draw a second box around each one. */
.room-group .rate-row {
    border: none;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px dashed var(--hotel-line);
    /* Rows inside a group carry one line of text. Stacking the price, the "total for
       N nights" line and the button made each one 128px tall to hold 55px of content,
       with the room already named above — so they run along one line instead. */
    padding: .7rem 1.15rem;
}

.room-group .rate-row:last-child { border-bottom: none; }

.room-group .rate-price-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .9rem;
    flex: 0 0 auto;
    text-align: right;
}

.room-group .rate-price-col .hotel-price { font-size: 1.15rem; line-height: 1.2; }
.room-group .rate-price-col .hotel-price-sub { margin: 0; font-size: .74rem; }
.room-group .rate-price-col form { margin: 0; }
.room-group .rate-price-col .btn { white-space: nowrap; padding: .5rem 1.25rem; }

/* Everything past the first couple of options on a room with a long list. Most rooms
   have two or three and show them all; hiding those would put a click in front of the
   only comparison this page exists to make. */
.rate-row.is-extra { display: none; }
.room-group.is-open .rate-row.is-extra { display: flex; }

.room-group-more {
    width: 100%;
    border: none;
    border-top: 1px dashed var(--hotel-line);
    background: #f8faf9;
    color: var(--brand);
    font-weight: 700;
    font-size: .88rem;
    padding: .6rem;
    cursor: pointer;
}

.room-group-more:hover { background: #f1f6f3; }

@media (max-width: 767.98px) {
    .room-group .rate-price-col {
        justify-content: space-between;
        border-top: 1px dashed var(--hotel-line);
        padding-top: .7rem;
        margin-top: .5rem;
    }
}

@media (max-width: 767.98px) {
    .room-group-head { flex-wrap: wrap; }
    .room-group-from { text-align: left; width: 100%; }
}

.tax-note {
    font-size: .78rem;
    color: #92400e;
    background: #fff8e6;
    border: 1px solid #fde9b8;
    border-radius: 8px;
    padding: .4rem .6rem;
    margin-top: .4rem;
}

/* ---------------------------------------------------------- booking form */

.booking-summary {
    border: 1px solid var(--hotel-line);
    border-radius: 16px;
    padding: 1.15rem;
    background: #fff;
    position: sticky;
    top: 1rem;
}

.summary-total {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand-dark);
}

.price-changed-alert {
    border-left: 4px solid #f0ad4e;
    background: #fff8e6;
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .9rem;
}

.guest-block {
    border: 1px solid var(--hotel-line);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: .85rem;
}

.guest-block h6 { font-weight: 700; font-size: .95rem; margin-bottom: .75rem; }

/* --------------------------------------------------------- confirmation */

.confirm-hero { text-align: center; padding: 2.5rem 1rem 1.5rem; }

.confirm-icon { font-size: 3.4rem; line-height: 1; }

.confirm-code {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .12em;
    background: #f2f7f4;
    border: 1px dashed var(--brand);
    border-radius: 12px;
    padding: .5rem 1.1rem;
    color: var(--brand-dark);
}

.detail-list dt { font-weight: 600; color: var(--hotel-muted); font-size: .85rem; }
.detail-list dd { font-weight: 600; color: var(--hotel-ink); margin-bottom: .65rem; }

/* Phones: the same 16px floor as transfer-home.css, repeated for the hotel
   selectors because they are more specific and would otherwise keep their
   .95rem and go on triggering the iOS zoom. */
@media (max-width: 767.98px) {
    .hotel-searchbox .form-control,
    .hotel-searchbox .form-select,
    .hotel-searchbox #occupancyButton,
    .hotel-form .form-control,
    .hotel-form .form-select,
    .hotel-form textarea.form-control,
    .hotel-form .input-group > .form-control,
    .hotel-form .input-group > .input-group-text,
    .hero-search-card input.form-control,
    .hero-pnr-card input.form-control,
    .stay-bar .form-control,
    .stay-bar .form-select {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------ results
   Filters sit beside the list on a laptop and slide up from the bottom on a
   phone. Everything they act on is already in the page, so opening, ticking
   and closing never waits on the network. */

.hotel-results-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .5rem;
}

.hotel-results-tools {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    margin-left: .25rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
}

.hotel-layout {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.hotel-filters {
    position: sticky;
    top: 1rem;
    background: #fff;
    border: 1px solid #e6e9e7;
    border-radius: .75rem;
    overflow: hidden;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.hotel-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem .9rem;
    border-bottom: 1px solid #eef1ef;
}

.hotel-filters-body {
    overflow-y: auto;
    padding: .25rem .9rem .9rem;
}

.hotel-filters-foot {
    padding: .75rem .9rem;
    border-top: 1px solid #eef1ef;
}

.filter-group { padding: .85rem 0; border-bottom: 1px solid #f2f4f3; }
.filter-group:last-child { border-bottom: 0; }

/* The group headings in the ink colour and heavy: in small grey capitals they read
   as faintly as the options under them, and the panel had no visible structure. */
.filter-title {
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--hotel-ink);
    margin-bottom: .55rem;
}

.hotel-filters-head strong { font-weight: 800; font-size: 1.05rem; color: var(--hotel-ink); }

.filter-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .28rem 0;
    font-size: .9rem;
    cursor: pointer;
}

.filter-check span { flex: 1; min-width: 0; }
.filter-check small { color: var(--hotel-muted); font-size: .78rem; }
.filter-check input { flex: none; accent-color: var(--brand); }

.filter-stars { color: #f0a202; white-space: nowrap; }

.filter-range-legend {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--hotel-muted);
}

/* The guest score, in the supplier's ten-point scale. */
.hotel-rating {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    font-size: .82rem;
}

.hotel-rating-score {
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    border-radius: .35rem .35rem .35rem 0;
    padding: .1rem .35rem;
    font-size: .82rem;
}

.hotel-rating-word { font-weight: 600; color: var(--hotel-ink); }
.hotel-rating-count { color: var(--hotel-muted); }
.hotel-distance { color: var(--hotel-muted); white-space: nowrap; }

.hotel-filters-backdrop { display: none; }

@media (max-width: 991.98px) {
    .hotel-layout { grid-template-columns: minmax(0, 1fr); }

    .hotel-filters {
        position: fixed;
        inset: auto 0 0 0;
        top: 15vh;
        z-index: 1050;
        border-radius: 1rem 1rem 0 0;
        max-height: 85vh;
        transform: translateY(100%);
        transition: transform .25s ease;
    }

    .hotel-filters.is-open { transform: translateY(0); }

    .hotel-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        z-index: 1040;
    }

    .hotel-filters-backdrop.is-open { opacity: 1; pointer-events: auto; }

    body.filters-open { overflow: hidden; }

    /* The floating WhatsApp button would sit on top of the sheet. */
    body.filters-open .whatsapp-float { display: none; }

    .hotel-results-tools { width: 100%; justify-content: space-between; }
}

/* --------------------------------------------------------- guest reviews */

.review-summary {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: #f7faf8;
    border: 1px solid #e6e9e7;
    border-radius: .75rem;
    padding: 1rem 1.1rem;
}

.review-score-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    background: var(--brand);
    color: #fff;
    border-radius: .6rem;
    padding: .6rem .8rem;
}

.review-score-big span { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.review-score-big small { font-size: .7rem; opacity: .85; margin-top: .15rem; }

.review-aspects {
    flex: 1;
    min-width: 15rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .5rem 1.25rem;
}

.review-aspect-head {
    display: flex;
    justify-content: space-between;
    font-size: .84rem;
    margin-bottom: .15rem;
}

.review-bar {
    height: 5px;
    border-radius: 999px;
    background: #e2e8e4;
    overflow: hidden;
}

.review-bar-fill { height: 100%; background: var(--brand); border-radius: 999px; }

.review-list { display: grid; gap: .75rem; }

.review-card {
    border: 1px solid #e6e9e7;
    border-radius: .75rem;
    padding: .85rem 1rem;
}

.review-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .45rem;
}

.review-meta {
    display: block;
    font-size: .8rem;
    color: var(--hotel-muted);
}

.review-plus,
.review-minus {
    font-size: .9rem;
    margin-bottom: .35rem;
    /* Guest text arrives with its own line breaks; keeping them makes a long
       review readable instead of one solid paragraph. */
    white-space: pre-line;
}

.review-plus:last-child,
.review-minus:last-child { margin-bottom: 0; }

.review-plus i { color: var(--brand); }
.review-minus i { color: #b5651d; }

@media (max-width: 575.98px) {
    .review-summary { gap: .85rem; }
    .review-aspects { min-width: 0; }
}

/* The destination box when the guest has not picked from the list. It only
   recolours the border: Bootstrap's own is-invalid adds height, and in a row
   aligned along its bottom edge that shunts the whole column upwards. */
.hotel-searchbox .form-control.has-error {
    border-color: #dc3545;
    background-image: none;
}

.hotel-searchbox .form-control.has-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}

/* Where the score came from, on the same line that offers the reviews. */
.review-summary-note {
    flex-basis: 100%;
    font-size: .82rem;
    color: var(--hotel-muted);
}

.review-summary-note a { margin-left: .35rem; font-weight: 600; }

/* The folded rating card in the right rail. */
.rating-card {
    border: 1px solid #e6e9e7;
    border-radius: .75rem;
    background: #f7faf8;
    overflow: hidden;
}

.rating-card-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .8rem;
    cursor: pointer;
    list-style: none;
}

/* Safari and Chrome each draw their own marker on a summary element. */
.rating-card-head::-webkit-details-marker { display: none; }
.rating-card-head::marker { content: ""; }

.review-score-small {
    min-width: 0;
    padding: .35rem .5rem;
    border-radius: .5rem;
}

.review-score-small span { font-size: 1.15rem; }

.rating-card-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rating-card-text strong { font-size: .95rem; }
.rating-card-text small { font-size: .78rem; color: var(--hotel-muted); }

.rating-card-chevron {
    font-size: 1.25rem;
    color: var(--hotel-muted);
    transition: transform .2s ease;
}

.rating-card[open] .rating-card-chevron { transform: rotate(180deg); }

.rating-card-body {
    padding: 0 .8rem .8rem;
    display: grid;
    gap: .45rem;
}

.rating-card-note {
    font-size: .78rem;
    color: var(--hotel-muted);
    margin: .35rem 0 0;
}

.rating-card-note a { margin-left: .3rem; font-weight: 600; }

/* "total for 3 nights" under the price: the one line that stops a whole-stay
   figure being read as a nightly rate.
   The weight is on "total", not on the number. The number of nights is the same on
   every card of a given search, so emphasising it would emphasise the one thing
   that never varies; "total" is the word that answers the question the guest is
   actually asking of the figure above it, against the "/ night" line below. */
.hotel-price-total {
    font-size: .8rem;
    font-weight: 400;
    color: var(--hotel-muted);
    line-height: 1.2;
    /* Two different statements about the money, not one wrapped sentence. */
    margin-bottom: .25rem;
}

.hotel-price-total strong {
    font-weight: 700;
    color: var(--hotel-ink);
}

/* The trail above the product tabs: present, but never competing with the search
   box for attention. */
.hotel-crumbs {
    font-size: .82rem;
    padding: 0;
    background: transparent;
}

.hotel-crumbs .breadcrumb-item a { color: var(--hotel-muted); text-decoration: none; }
.hotel-crumbs .breadcrumb-item a:hover { text-decoration: underline; }
.hotel-crumbs .breadcrumb-item.active { color: var(--hotel-ink); font-weight: 600; }

/* The passport country, repeated on the guest step beside the passport
   instruction it belongs to. */
.guest-passport-country {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin: -.35rem 0 1rem;
    padding: .55rem .75rem;
    border-radius: .6rem;
    background: #f7faf8;
    border: 1px solid #e6e9e7;
    font-size: .88rem;
}

.guest-passport-country .bx { color: var(--brand); font-size: 1.1rem; }
.guest-passport-country span { flex: 1; min-width: 0; }
.guest-passport-country a { font-weight: 600; font-size: .85rem; }

/* The hotel search row on a laptop.
   Each field grows in proportion — the destination about a third of the row, as
   on Booking — with a floor at what its content needs: about 140 px for a date,
   147 for "1 room · 2 adults", 130 for the button. With fixed widths for the
   short fields, every spare pixel of a wide screen went to the destination, which
   ended up with half the row; in proportion the row stays balanced at any width,
   and on a narrow laptop the floors keep every field readable. */
@media (min-width: 992px) {
    .hotel-search-row {
        display: grid;
        grid-template-columns:
            minmax(14rem, 2.4fr)
            minmax(9.5rem, 1fr)
            minmax(9.5rem, 1fr)
            minmax(12rem, 1.2fr)
            minmax(8.75rem, .9fr);
    }

    .hotel-search-row > * {
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

.guest-passport-country .btn-link { font-weight: 600; font-size: .85rem; text-decoration: none; }

.guest-passport-picker {
    flex-basis: 100%;
    margin-top: .5rem;
}

.guest-passport-picker .form-label { font-size: .82rem; font-weight: 600; }

/* ------------------------------------------------ results while they load
   The page appears the moment Search is pressed; these stand where the cards
   will be until the search answers. */

.hotel-skeleton-card {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr) 11rem;
    gap: 1.25rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e6e9e7;
    border-radius: .9rem;
    background: #fff;
}

.hotel-skeleton-card .sk-body { display: grid; gap: .55rem; align-content: start; padding-top: .35rem; }
.hotel-skeleton-card .sk-price { display: grid; gap: .8rem; align-content: center; justify-items: end; }

.sk {
    border-radius: .45rem;
    background: linear-gradient(90deg, #eceff0 0%, #f6f7f8 40%, #eceff0 80%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.3s ease-in-out infinite;
}

.sk-img { height: 9.5rem; border-radius: .7rem; }
.sk-line { height: .85rem; }
.sk-btn { height: 2.4rem; width: 8rem; border-radius: .6rem; }
.w-30 { width: 30%; } .w-40 { width: 40%; } .w-60 { width: 60%; } .w-75 { width: 75%; }

@keyframes sk-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.hotel-loading-message {
    text-align: center;
    padding: 2rem 1rem 2.5rem;
    border: 1px solid #e6e9e7;
    border-radius: .9rem;
    background: #fff;
}

.hotel-loading-spinner {
    position: relative;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.8rem;
    color: var(--hotel-ink);
}

.hotel-loading-spinner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #e3efe8;
    border-top-color: var(--brand);
    animation: sk-spin .9s linear infinite;
}

@keyframes sk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sk, .hotel-loading-spinner::before { animation: none; }
}

.hotel-loading { display: flex; flex-direction: column; }

@media (max-width: 767.98px) {
    .hotel-skeleton-card { grid-template-columns: 1fr; }
    .hotel-skeleton-card .sk-price { justify-items: start; }
    .hotel-skeleton-card:nth-child(n+2) { display: none; }

    /* On a phone the search form is tall enough that a placeholder card pushed the
       "Finding available rooms" message below the fold — measured at 942 px on an
       812 px screen. The message goes first, where the guest is looking. */
    .hotel-loading-message {
        order: -1;
        margin-bottom: 1rem;
        padding: 1.25rem 1rem 1.5rem;
    }
}

/* ------------------------------------------------------------ photo gallery */

.gallery-open {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 14px;
    overflow: hidden;
}

.gallery-open img { display: block; }

/* "+33 photos" across the last small picture. */
.gallery-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: rgba(12, 20, 17, .55);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border-radius: inherit;
    transition: background .15s ease;
}

.gallery-open:hover .gallery-more { background: rgba(12, 20, 17, .68); }
.gallery-more .bx { font-size: 1.35rem; }

/* On a phone the small pictures sit below the fold, so the main one says how many
   there are. */
.gallery-count-pill {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(12, 20, 17, .7);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
}

/* The gallery, full screen. Three rows — title bar, the photo, a strip of
   thumbnails — and the photo row takes every pixel the other two leave.
   Sizes are set outright on every image here: site.css gives all <img> on the
   site width:100% and height:200px, which is what squeezed the first version of
   this gallery into a 200-pixel band. */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #0e1210;
    color: #fff;
}

.gallery-lightbox[hidden] { display: none; }

.glb-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.25rem;
}

.glb-title {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glb-count { font-size: .9rem; font-weight: 600; opacity: .85; }

.glb-close {
    justify-self: end;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.7rem;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.glb-stage {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5rem;
}

#galleryImage.glb-image {
    width: 100%;
    height: 100%;
    max-width: 1500px;
    object-fit: contain;
    user-select: none;
}

.glb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.25rem;
    height: 3.25rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 2.1rem;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.glb-nav.prev { left: 1rem; }
.glb-nav.next { right: 1rem; }

.glb-close:hover,
.glb-nav:hover { background: rgba(255, 255, 255, .24); }

.glb-strip {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .9rem 1.25rem 1.1rem;
    scrollbar-width: thin;
}

.glb-thumb {
    flex: none;
    width: 5.5rem;
    height: 4rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: .45rem;
    overflow: hidden;
    background: #1c2320;
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease, border-color .15s ease;
}

.glb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.glb-thumb:hover { opacity: .85; }
.glb-thumb.active { opacity: 1; border-color: #fff; }

@media (max-width: 767.98px) {
    .glb-top { padding: .6rem .75rem; }
    .glb-title { font-size: .88rem; }
    .glb-stage { padding: 0; }
    .glb-nav { width: 2.6rem; height: 2.6rem; font-size: 1.7rem; background: rgba(0, 0, 0, .45); }
    .glb-nav.prev { left: .4rem; }
    .glb-nav.next { right: .4rem; }
    .glb-strip { padding: .6rem .75rem .8rem; }
    .glb-thumb { width: 4.25rem; height: 3.1rem; }
}

body.gallery-open-body { overflow: hidden; }
body.gallery-open-body .whatsapp-float { display: none; }



/* A review's text in its own column beside the icon, so multi-line reviews stay
   aligned under their first line. */
.review-plus,
.review-minus {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.review-plus .bx,
.review-minus .bx { flex: none; margin-top: .2rem; }

.review-plus span,
.review-minus span { flex: 1; min-width: 0; white-space: pre-line; }

/* ------------------------------------------------------------ nearby dates */

.nearby-dates { margin: -.25rem 0 1.25rem; }

.nearby-dates-loading { font-size: .88rem; color: var(--hotel-muted); padding: .25rem 0; }

.nearby-dates-title { font-weight: 700; font-size: .95rem; margin-bottom: .6rem; }

.nearby-dates-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .6rem;
}

.nearby-date {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .85rem;
    border: 1px solid #dfe6e2;
    border-radius: .75rem;
    background: #fff;
    color: var(--hotel-ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nearby-date:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 10px rgba(0, 114, 150, .12);
    color: var(--hotel-ink);
}

.nearby-date-when { font-weight: 700; font-size: .92rem; }
.nearby-date-price { font-size: .88rem; }
.nearby-date-price strong { color: var(--brand); font-size: 1rem; }
.nearby-date-nights { font-size: .76rem; color: var(--hotel-muted); }

/* ------------------------------------------------------- about the hotel */

.facility-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.facility-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    border: 1px solid #dfe6e2;
    border-radius: 999px;
    background: #fff;
    font-size: .86rem;
    font-weight: 600;
    color: var(--hotel-ink);
}

.facility-chip .bx { font-size: 1.15rem; color: var(--brand); }

/* The description, folded to about five lines with a fade into the page. */
.about-text { position: relative; }

.about-text.is-collapsed {
    max-height: 9.5rem;
    overflow: hidden;
}

.about-text.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.5rem;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}

.about-text h3:first-child { margin-top: 0 !important; }

.about-toggle { font-weight: 600; font-size: .9rem; text-decoration: none; margin-top: .25rem; }

.all-facilities { margin-top: 1.25rem; }

.all-facilities summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .92rem;
    color: var(--brand);
    list-style: none;
}

.all-facilities summary::-webkit-details-marker { display: none; }
.all-facilities summary::after { content: " ›"; }
.all-facilities[open] summary::after { content: " ‹"; }

.all-facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem 1.5rem;
    margin-top: 1rem;
}

.facility-group-name { font-weight: 700; font-size: .88rem; margin-bottom: .35rem; }

.facility-group ul { list-style: none; margin: 0; padding: 0; }

.facility-group li {
    display: flex;
    gap: .35rem;
    font-size: .85rem;
    color: var(--hotel-muted);
    padding: .12rem 0;
}

.facility-group li .bx { color: var(--brand); margin-top: .15rem; }

/* Under the photographs, the row gets room to breathe and a link to the rest. */
.facility-highlights-top { margin: -.5rem 0 1.5rem; align-items: center; }

.facility-all-link {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    padding: .45rem .25rem;
}

.facility-all-link:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .facility-highlights-top { gap: .4rem; margin-top: -.25rem; }
    .facility-highlights-top .facility-chip { font-size: .8rem; padding: .38rem .6rem; }
}

/* ------------------------------------------- a room's options as a choice
   Each option is a row to click, with a radio at its left edge; the chosen one
   is tinted, and a single Reserve button under the room names its price. */

.room-group .rate-option {
    position: relative;
    cursor: pointer;
    padding-left: 3.1rem;
    transition: background .15s ease;
}

.room-group .rate-option:hover { background: #fafcfb; box-shadow: none; }

.room-group .rate-option.is-selected { background: #f1f8f4; }

.room-group .rate-option.is-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand);
}

/* The real radio stays in the page for keyboards and screen readers, invisible;
   the circle beside it is what the eye sees. */
.rate-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.rate-radio-mark {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid #b9c7bf;
    border-radius: 50%;
    background: #fff;
    transition: border-color .15s ease;
}

.rate-radio:checked + .rate-radio-mark {
    border-color: var(--brand);
    border-width: 6px;
}

.rate-radio:focus-visible + .rate-radio-mark {
    box-shadow: 0 0 0 3px rgba(0, 114, 150, .25);
}

.rate-choice-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--hotel-line);
    background: #fff;
}

.rate-choice-note { font-size: .84rem; color: var(--hotel-muted); }

.rate-choice-submit { min-width: 11rem; white-space: nowrap; }

@media (max-width: 767.98px) {
    .room-group .rate-option { padding-left: 2.75rem; }
    .rate-radio-mark { left: .85rem; top: 1.4rem; transform: none; }
    .rate-choice-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
    .rate-choice-note { text-align: center; }
    .rate-choice-submit { width: 100%; }
}

/* ------------------------------------------------------- guest details page */

.field-hint { font-size: .76rem; margin-top: .25rem; }

/* The cancellation terms in a tinted box of their own, under a rule: green when the
   stay can be cancelled free, red when it cannot. */
.mobile-stay-cancel {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .8rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
}
.mobile-stay-cancel .bx { font-size: 1.45rem; flex: none; }
.mobile-stay-cancel.is-free { background: #e9f6ee; color: var(--ok-dark); }
.mobile-stay-cancel.is-nonref { background: #fdecee; color: #b42335; }

.guest-page-lead { color: var(--hotel-muted); font-size: .9rem; margin-bottom: 1rem; }

/* Each part of the form a card with its own heading and icon; the guests' names are
   one card per guest, labelled above the boxes rather than beside them. */
.guest-card { border-radius: 16px; padding: 1.15rem 1.25rem; background: #fff; }

.guest-card-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.guest-card-head h2 { font-size: 1.05rem; font-weight: 800; color: var(--hotel-ink); margin: 0; }
.guest-card-head h2 span { font-weight: 400; color: var(--hotel-muted); font-size: .92rem; }

.guest-avatar {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #eaf3f7;
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}

.guest-card-note { color: var(--hotel-muted); font-size: .85rem; margin: -.25rem 0 .85rem; }

.guest-card .form-label { font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.guest-card .req { color: #c3202f; }

.guest-row { padding-top: .85rem; margin-top: .85rem; border-top: 1px solid #eef1ef; }
.guest-row.is-first { border-top: 0; margin-top: 0; padding-top: 0; }
.guest-row-head { font-weight: 700; font-size: .92rem; color: var(--hotel-ink); margin-bottom: .45rem; }
.guest-row-head span { font-weight: 400; color: var(--hotel-muted); }

.comment-count { text-align: right; font-size: .76rem; color: var(--hotel-muted); margin-top: .3rem; }

.mobile-pay-bar .btn-hotel-primary .bx { vertical-align: -2px; }

/* A hairline between the total and the button, as the two separate things they are. */
.mobile-pay-bar > div:first-child { padding-right: .9rem; border-right: 1px solid #e3e8e5; }

.mobile-stay-summary {
    border: 1px solid #e3e8e5;
    border-radius: 16px;
    background: #fff;
    padding: .9rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    line-height: 1.45;
    box-shadow: 0 2px 10px rgba(16, 42, 34, .04);
}

.mss-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; }
.mss-icon {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    background: #e6f2f7;
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
}
.mss-name { font-weight: 800; font-size: 1.1rem; color: var(--hotel-ink); line-height: 1.25; }

.mss-facts { list-style: none; margin: 0; padding: 0 0 .75rem 3.1rem; border-bottom: 1px solid #edf0ee; color: #4b5563; }
.mss-facts li { display: flex; gap: .45rem; align-items: flex-start; margin-bottom: .2rem; }
.mss-facts .bx { font-size: 1.05rem; color: var(--hotel-muted); margin-top: .12rem; flex: none; }

/* The total and the button, pinned to the foot of a phone's screen. */
.mobile-pay-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e3e8e5;
    box-shadow: 0 -4px 16px rgba(16, 42, 34, .08);
}

.mobile-pay-total { font-weight: 800; font-size: 1.2rem; color: var(--brand); line-height: 1.1; }
.mobile-pay-sub { font-size: .74rem; color: var(--hotel-muted); }
.mobile-pay-bar .btn-hotel-primary { width: auto; margin: 0; padding-left: 1.1rem; padding-right: 1.1rem; white-space: nowrap; }

@media (max-width: 991.98px) {
    /* Room for the pinned bar under the last of the page, and the card's own button
       gives way to the one in the bar. */
    #hotelBookingForm { padding-bottom: 5.5rem; }
    .booking-summary #confirmBookingBtn { display: none; }
    body:has(.mobile-pay-bar) .whatsapp-float { bottom: 6rem; }
}

/* ------------------------------------------------ results: filters and sort
   One pair of equal buttons — the same height, corners and weight. */

.hotel-results-tools { gap: .6rem; }

.results-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 46px;
    padding: 0 .95rem;
    margin: 0;
    border: 1px solid #dfe6e2;
    border-radius: 11px;
    background: #fff;
    color: var(--hotel-ink);
    font-size: .92rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
}

.results-tool > .bx { font-size: 1.25rem; flex: none; }

.results-filters {
    background: #eaf5f9;
    border-color: #cfe5d9;
    color: #005a78;
}

.results-filters .filter-count-badge { margin-left: .1rem; }

.results-sort { min-width: 15rem; }
.results-sort > .bx-sort-alt-2 { color: var(--hotel-muted); }

.results-sort-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--hotel-muted);
}

.results-sort-text strong { color: var(--hotel-ink); font-weight: 600; }
.results-sort-caret { color: var(--hotel-muted); }

/* The real select, over the whole button and invisible: a tap or click opens the
   browser's own list, which on a phone rises from the bottom of the screen. */
.results-sort-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px; /* below 16px iOS zooms the page on focus */
}

.results-sort:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 114, 150, .15); }

@media (max-width: 991.98px) {
    .hotel-results-tools { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .results-tool { width: 100%; justify-content: center; height: 48px; padding: 0 .7rem; gap: .4rem; }
    .results-sort { min-width: 0; }
    .results-sort-text { flex: 0 1 auto; }

    /* Half a phone's width holds the icon and "Lowest price", not "Sort:" and a
       caret as well; the icon already says what the button does. */
    .results-sort-prefix,
    .results-sort-caret { display: none; }
}

.results-stay { display: block; margin-top: .15rem; }

/* ------------------------------------------- results: the search in one line
   Phones and tablets only; a wide screen shows the search box itself. */
.search-summary { display: none; }

@media (max-width: 991.98px) {
    .search-summary {
        display: flex;
        align-items: center;
        gap: .7rem;
        background: #fff;
        border: 1px solid #e3e8e5;
        border-radius: 14px;
        padding: .7rem .75rem .7rem .9rem;
        box-shadow: 0 2px 10px rgba(16, 42, 34, .05);
    }

    .search-summary-pin { color: var(--brand); font-size: 1.35rem; flex: none; }

    .search-summary-text { flex: 1; min-width: 0; line-height: 1.3; }
    .search-summary-text strong,
    .search-summary-text span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .search-summary-text strong { font-size: 1rem; font-weight: 700; color: var(--hotel-ink); }
    .search-summary-text span { font-size: .85rem; color: var(--hotel-muted); margin-top: .1rem; }

    .search-summary-edit {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        border: 1px solid var(--brand);
        border-radius: 10px;
        background: #fff;
        color: var(--brand);
        font-weight: 700;
        font-size: .9rem;
        padding: .5rem .75rem;
    }
    .search-summary-edit[aria-expanded="true"] { background: #eaf5f9; }

    .search-form-wrap { display: none; margin-top: .75rem; }
    .search-form-wrap.is-open { display: block; }

    /* The summary above already says when and for whom. */
    .results-stay { display: none; }
}

/* --------------------------------------------- clearing the destination box */

.dest-clear {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e7ece9;
    color: #4b5a52;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 2;
}

.dest-clear[hidden] { display: none; }
.dest-clear:hover { background: #d9e1dc; }

#destinationInput { padding-right: 2.6rem; }

/* ------------------------------------------------- icons in the search fields
   A pin, a calendar and a person at the left of each box, as Booking draws them.
   iPhone Safari shows no calendar icon of its own in a date field, so there the
   dates looked like plain text, with nothing to say they could be tapped. */

/* The base icon is in forms.css (grey, for data-entry fields); the search boxes
   draw theirs larger and green. */
.hotel-searchbox .field-icon,
.stay-bar .field-icon,
.hero-search-card .field-icon {
    left: .9rem;
    font-size: 1.25rem;
    color: var(--brand);
}

#destinationInput { padding-left: 2.65rem; }

/* The same icons in the transfer and flight boxes: any field wrapped in
   .has-field-icon. */
.hotel-searchbox .has-field-icon > .form-control,
.hero-search-card .has-field-icon > input.form-control { padding-left: 2.65rem; }

/* iPhone Safari draws no clock in a time field either. */
.has-field-icon > input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

#flightPaxButton { display: flex; align-items: center; gap: .55rem; }
#flightPaxButton .occ-icon { font-size: 1.25rem; color: var(--brand); flex: none; }
#flightPaxButton #flightPaxSummary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Half a phone wide, "1 adult · Economy" was ten pixels short once the icon was in;
   a slightly tighter box fits it whole. */
@media (max-width: 575.98px) {
    #flightPaxButton { padding-left: .55rem; padding-right: .55rem; gap: .35rem; }
}

.hotel-searchbox .date-field.with-icon input[type="date"],
.stay-bar .date-field.with-icon input[type="date"],
.hero-search-card .date-field.with-icon input[type="date"] { padding-left: 2.65rem; }


#occupancyButton {
    display: flex;
    align-items: center;
    gap: .55rem;
}

#occupancyButton .occ-icon { font-size: 1.25rem; color: var(--brand); flex: none; }
#occupancyButton #occupancySummary { flex: 1; min-width: 0; }
#occupancyButton .occ-caret { font-size: 1.2rem; color: var(--hotel-muted); flex: none; }

/* ------------------------------------------------------------ member price
   On the guest step: sign in to save X / enter the code / member price applied. */
.member-offer { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; background: #fff8e6; border: 1px solid #ffe2a3; border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem; color: #4a3600; }
.member-offer > i { font-size: 1.9rem; color: #d18b00; flex: none; }
.member-offer-text { flex: 1 1 260px; min-width: 0; }
.member-offer-text strong { display: block; font-size: 1.02rem; color: #3d2c00; }
.member-offer-text span { font-size: .87rem; line-height: 1.45; }
.member-offer-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.member-offer-btn { display: inline-flex; align-items: center; padding: .55rem 1rem; border-radius: 10px; border: 1.5px solid #d18b00; color: #7a5200; font-weight: 700; font-size: .9rem; text-decoration: none; background: #fff; white-space: nowrap; }
.member-offer-btn:hover { background: #fff3d1; color: #5c3d00; }
.member-offer-btn.is-primary { background: #d18b00; color: #fff; }
.member-offer-btn.is-primary:hover { background: #b87a00; color: #fff; }
.member-offer.is-applied { background: #ecfdf3; border-color: #bbf7d0; color: #14532d; }
.member-offer.is-applied > i { color: #16a34a; }
.member-offer.is-applied strong { color: #14532d; }
@media (max-width: 575.98px) { .member-offer-actions { width: 100%; } .member-offer-btn { flex: 1; justify-content: center; } }
.bk-price-row.is-discount, .bk-price-row.is-discount span:last-child { color: #15803d; font-weight: 700; }
.member-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; background: #fff8e6; border: 1px solid #ffe2a3; border-radius: 12px; padding: .55rem .85rem; margin-bottom: 1rem; font-size: .9rem; color: #4a3600; }
.member-strip > i { font-size: 1.25rem; color: #d18b00; }
.member-strip a { font-weight: 700; color: #7a5200; }
.member-strip-or { color: #8a6a1f; }
.member-strip.is-member { background: #ecfdf3; border-color: #bbf7d0; color: #14532d; }
.member-strip.is-member > i { color: #16a34a; }