/* Hotel product: search, results, hotel page, booking.
   Palette follows the site logo — turquoise #40e0d0, red #c3202f — with the
   green (#198754) already used for prices and primary actions elsewhere. */

:root {
    --hotel-green: #198754;
    --hotel-green-dark: #146c43;
    --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(--hotel-green-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.product-tab.active:hover { background: #fff; color: var(--hotel-green-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(--hotel-green-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

@media (max-width: 575.98px) {
    .product-tab { padding: .6rem 1rem; font-size: .88rem; }
    .product-tab i { font-size: 1.05rem; }
}

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

.hotel-hero {
    background: linear-gradient(rgba(8, 32, 28, .72), rgba(8, 32, 28, .55)),
                url('/img/hero_1.jpg') center/cover no-repeat;
    padding: 2.5rem 0 0;
    color: #fff;
}

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

/* 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 {
    opacity: .94;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

/* 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;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .20);
    padding: 1.5rem;
}

/* 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: 11px;
    line-height: 1.6;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #888;
    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(--hotel-green);
    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(--hotel-green);
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .12);
    background: #fff;
    outline: none;
}

.hero-find-btn {
    background: linear-gradient(135deg, #198754 0%, #14b8a6 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(25, 135, 84, .22);
    transition: transform .15s, box-shadow .15s;
}

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

/* Matches the input treatment already used by the transfer and payment forms,
   so a guest moving between products sees one consistent form style. */
.hotel-searchbox .form-control,
.hotel-searchbox .form-select,
.hotel-form .form-control,
.hotel-form .form-select,
.hotel-form textarea.form-control {
    border: 1.5px solid #e2e8e5;
    border-radius: 10px;
    padding: .7rem .9rem;
    font-size: .95rem;
    font-weight: 500;
    background: #fafbfa;
    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,
.hotel-form .form-control:focus,
.hotel-form .form-select:focus {
    border-color: var(--hotel-green);
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .12);
    background: #fff;
    outline: none;
}

.hotel-form .form-label,
.hotel-form label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--hotel-ink);
    margin-bottom: .35rem;
}

/* Same gradient and proportions as the site's other primary actions. */
.btn-hotel-search,
.btn-hotel-primary {
    background: linear-gradient(135deg, #198754, #14b8a6);
    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(25, 135, 84, .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(25, 135, 84, .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; }

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

.suggest-item .bx { color: var(--hotel-green); 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(--hotel-green-dark);
}

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

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

/* ---------------------------------------------------------------- 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 {
    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-address { font-size: .85rem; color: var(--hotel-muted); }

.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(--hotel-green-dark);
    line-height: 1.05;
    letter-spacing: -.02em;
}

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

.btn-see-rooms {
    background: var(--hotel-green);
    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(25, 135, 84, .22);
}

.btn-see-rooms:hover {
    background: var(--hotel-green-dark);
    color: #fff;
    box-shadow: 0 6px 18px rgba(25, 135, 84, .32);
}

.badge-free-cancel {
    background: rgba(25,135,84,.1);
    color: var(--hotel-green-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 {
        font-size: 1.25rem;
        line-height: 1.3;
        margin: .5rem 0 .75rem;
    }

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

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

@media (max-width: 767.98px) {
    .hotel-result-card { flex-direction: column; gap: 0; }
    .hotel-result-imgwrap { flex: none; width: 100%; }
    .hotel-result-img { width: 100%; flex: none; height: 200px; min-height: 0; }
    .hotel-result-body { padding: 1rem; }
    .hotel-price-col {
        flex: none;
        border-left: none;
        border-top: 1px dashed var(--hotel-line);
        text-align: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .btn-see-rooms { width: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ------------------------------------------------------------- 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: 11px;
    line-height: 1.6;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #888;
    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-static {
    height: 44px;
    display: flex;
    align-items: center;
    font-size: .92rem;
    font-weight: 500;
    color: var(--hotel-ink);
}

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

@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(--hotel-green);
    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(--hotel-green);
    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(--hotel-green-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(--hotel-green);
    border-radius: 12px;
    padding: .5rem 1.1rem;
    color: var(--hotel-green-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,
    .hero-search-card input.form-control,
    .hero-pnr-card input.form-control,
    .stay-bar .form-control,
    .stay-bar .form-select {
        font-size: 16px;
    }
}