/* Hotelier24 - shared styles on top of Bootstrap 5. Brand: maroon + metallic gold. */
:root {
    --hb-primary: #7a1d2b;
    --hb-primary-rgb: 122, 29, 43;
    --hb-primary-dark: #55131e;
    --hb-primary-light: #9c2a3a;
    /* Metallic gold. --hb-gold-ink is the darker tone used for gold text on white,
       because the bright gold alone does not reach 4.5:1 on a light background. */
    --hb-accent: #c9a227;
    --hb-accent-dark: #a8851b;
    --hb-gold-light: #f0d789;
    --hb-gold-ink: #8a6d10;
    --hb-on-accent: #2b1116;
    --hb-ink: #2b1116;
    --hb-muted: #7b6a6d;
    --hb-bg: #faf7f5;
    --hb-card: #ffffff;
    --hb-border: #ece1e2;
    /* Form fields outline in maroon rather than the near-white --hb-border: people were
       missing where a box started and ended. Dial this one value to change every field. */
    --hb-field-border: rgba(122, 29, 43, .55);
    --hb-field-border-strong: rgba(122, 29, 43, .75);
    --hb-radius: 14px;
    --hb-shadow: 0 6px 24px rgba(60, 20, 28, .08);
    --hb-shadow-lg: 0 18px 48px rgba(60, 20, 28, .16);
    --bs-primary: var(--hb-primary);
    --bs-primary-rgb: var(--hb-primary-rgb);
    --bs-link-color: var(--hb-primary);
    /* Bootstrap 5.3 paints links from the -rgb variables, so both have to be set. */
    --bs-link-color-rgb: var(--hb-primary-rgb);
    --bs-link-hover-color: var(--hb-primary-dark);
    --bs-link-hover-color-rgb: 85, 19, 30;
    --hb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hb-font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-family: var(--hb-font);
    --bs-body-color: var(--hb-ink);
}

body { background: var(--hb-bg); color: var(--hb-ink); font-family: var(--hb-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, .hb-brand, .stat-card .value, .fw-800, .display-3 { font-family: var(--hb-font-display); letter-spacing: -.015em; }
a { text-decoration: none; }
.text-muted, .text-secondary { color: var(--hb-muted) !important; }
.fw-800 { font-weight: 800; }
.small-caps { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--hb-muted); }

.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--hb-primary); --bs-btn-border-color: var(--hb-primary); --bs-btn-hover-bg: var(--hb-primary-dark); --bs-btn-hover-border-color: var(--hb-primary-dark); --bs-btn-active-bg: var(--hb-primary-dark); --bs-btn-disabled-bg: var(--hb-primary); --bs-btn-disabled-border-color: var(--hb-primary); }
.btn-outline-primary { --bs-btn-color: var(--hb-primary); --bs-btn-border-color: var(--hb-primary); --bs-btn-hover-bg: var(--hb-primary); --bs-btn-hover-border-color: var(--hb-primary); --bs-btn-active-bg: var(--hb-primary); }
.btn-accent { background: linear-gradient(135deg, var(--hb-gold-light), var(--hb-accent) 55%, var(--hb-accent-dark));
    border-color: var(--hb-accent-dark); color: var(--hb-on-accent); }
.btn-accent:hover, .btn-accent:focus { background: linear-gradient(135deg, var(--hb-accent), var(--hb-accent-dark));
    border-color: var(--hb-accent-dark); color: var(--hb-on-accent); }
/* ---------- Form fields ----------
   Every control an owner or visitor types into carries a maroon edge, so the box is
   obvious before it is focused. Bootstrap's own .is-invalid / .is-valid rules are two
   classes deep and still win, so red still means red. */
.form-control, .form-select, .form-check-input, .input-group-text {
    border-color: var(--hb-field-border); }
.form-control, .form-select { border-radius: 10px; padding: .6rem .85rem; }
.form-control:hover, .form-select:hover, textarea.form-control:hover { border-color: var(--hb-field-border-strong); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--hb-primary); box-shadow: 0 0 0 .2rem rgba(var(--hb-primary-rgb), .12); }
/* Nothing to type into, so it goes back to the quiet edge - but the touch dropdown and the
   clock field are only readonly to keep the phone keyboard away; they are still fields. */
.form-control:disabled, .form-select:disabled,
.form-control[readonly]:not(.hb-combo-pick):not([data-timepicker]) {
    border-color: var(--hb-border); }
.input-group-text { background: var(--hb-bg); color: var(--hb-muted); }
/* Ticks and switches were still Bootstrap blue, which looked like a different product. */
.form-check-input:checked { background-color: var(--hb-primary); border-color: var(--hb-primary); }
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%239c2a3a'/%3E%3C/svg%3E"); }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.required::after { content: " *"; color: #dc3545; }
.card { border: 1px solid var(--hb-border); border-radius: var(--hb-radius); box-shadow: var(--hb-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--hb-border); font-weight: 700; padding: .9rem 1.1rem; }
.badge { font-weight: 600; }
.pagination { --bs-pagination-active-bg: var(--hb-primary); --bs-pagination-active-border-color: var(--hb-primary); --bs-pagination-color: var(--hb-primary); }

/* ---------- Public navbar ---------- */
.hb-navbar { background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hb-border); }
.hb-brand { font-weight: 800; color: var(--hb-ink); letter-spacing: -.02em; }

/* Brand lockup (public/images/hotelier-logo.*) */
.hb-logo { width: auto; max-width: 100%; display: block; border-radius: 8px; }
/* The artwork's own maroon panel blends into dark surfaces, so it gets a gold edge there */
.hb-logo--plate { border: 1px solid rgba(240, 215, 137, .35); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.hb-brand .logo { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--hb-primary), var(--hb-accent)); color: #fff; margin-right: .5rem; }
.hb-brand span.accent { color: var(--hb-gold-ink); }
.hb-navbar .nav-link { font-weight: 600; color: var(--hb-ink); }
.hb-navbar .nav-link.active, .hb-navbar .nav-link:hover { color: var(--hb-primary); }
/* Log in was a pale grey button that read as disabled next to the gold one. It is now a
   maroon-outlined action: clearly clickable, still quieter than "List your property". */
.hb-btn-login { font-weight: 700; border-width: 2px; background: #fff;
    box-shadow: 0 1px 2px rgba(43, 17, 22, .06); }
.hb-btn-login i { margin-right: .3rem; }
.hb-btn-login:hover, .hb-btn-login:focus-visible { color: #fff; box-shadow: 0 4px 12px rgba(122, 29, 43, .22); }
@media (max-width: 991.98px) {
    /* The collapsed menu is a panel of its own: rows with dividers, then the actions */
    .hb-navbar .navbar-collapse { margin-top: .75rem; border-top: 1px solid var(--hb-border); }
    .hb-navbar .navbar-nav { margin: .25rem 0 0; }
    .hb-navbar .navbar-nav .nav-item + .nav-item { border-top: 1px solid var(--hb-border); }
    .hb-navbar .navbar-nav .nav-link { display: flex; align-items: center; gap: .65rem;
        padding: .7rem .25rem; border-radius: 10px; }
    .hb-navbar .navbar-nav .nav-link i { width: 1.2rem; text-align: center; color: var(--hb-gold-ink); font-size: 1rem; }
    .hb-navbar .navbar-nav .nav-link.active { color: var(--hb-primary); font-weight: 700; }
    .hb-navbar .navbar-nav .nav-link.active i { color: var(--hb-primary); }

    .hb-navbar-actions { flex-wrap: wrap; margin-top: .85rem !important; padding: .85rem 0 .35rem;
        border-top: 1px solid var(--hb-border); }
    .hb-navbar-actions > .btn { flex: 1 1 0; min-width: 8rem; }
    .hb-navbar-actions .dropdown { flex: 1 1 100%; }
    .hb-navbar-actions .dropdown > .btn { width: 100%; }

    /* A smaller lockup leaves room for the toggle on narrow phones */
    .hb-navbar .hb-logo { height: 44px !important; }
    .navbar-toggler:focus { box-shadow: none; }
}

/* ---------- Hero ---------- */
.hb-hero {
    /* The ::after curve overlaps the foot of the hero, so the bottom padding has to clear
       it or the last row of content disappears underneath. Keep the two tied together. */
    --hb-hero-curve: 80px;
    position: relative; color: #fff; text-align: center;
    padding: 1.85rem 0 calc(var(--hb-hero-curve) + 1.4rem);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .1) 0, transparent 45%),
        radial-gradient(circle at 50% 0%, rgba(201, 162, 39, .3) 0, transparent 48%),
        linear-gradient(135deg, #48101b 0%, #7a1d2b 45%, #9c2a3a 100%);
    overflow: hidden;
}
.hb-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--hb-hero-curve); background: var(--hb-bg); clip-path: ellipse(75% 100% at 50% 100%); }
.hb-hero h1 { font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.15; }
.hb-hero .lead { color: rgba(255, 255, 255, .92); max-width: 660px; margin-left: auto; margin-right: auto; }
/* The supporting line sits a step below the lead, so the hero is not one dense block */
.hb-hero-sub { max-width: 620px; margin-left: auto; margin-right: auto;
    color: rgba(255, 255, 255, .72); font-size: .95rem; line-height: 1.65; }
.hb-hero-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.hb-hero-accent { color: var(--hb-gold-light); }
.hb-hero-copy { max-width: 880px; margin: 0 auto; }

/* Destination photo on the right, faded into the gradient */
.hb-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.hb-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hb-hero-photo-fade { position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(72, 16, 27, .72) 0%, rgba(72, 16, 27, .8) 100%),
        linear-gradient(0deg, #7a1d2b 0%, rgba(122, 29, 43, 0) 45%); }
/* Without a photo the panel is just a soft glow, never a placeholder illustration. */
.hb-hero-photo--empty { background: radial-gradient(circle at 50% 22%, rgba(201, 162, 39, .22) 0, transparent 55%); }
.hb-hero-photo--empty .hb-hero-photo-fade { background: none; }

/* Owner offer strip (kept for reuse: a pill-shaped link above a hero headline) */
.hb-offer-strip { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; padding: .35rem .9rem .35rem .35rem;
    border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .92); font-size: .88rem; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.hb-offer-strip:hover, .hb-offer-strip:focus-visible { background: rgba(255, 255, 255, .18); color: #fff; transform: translateY(-1px); }
.hb-offer-strip-badge { background: linear-gradient(135deg, var(--hb-gold-light), var(--hb-accent)); color: var(--hb-on-accent); border-radius: 999px; padding: .22rem .7rem; font-size: .76rem; font-weight: 800; }

/* Four promises, separated the way a brochure would */
.hb-hero-usps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: .85rem auto 0; max-width: 760px; }
.hb-hero-usps li { display: flex; align-items: center; gap: .55rem; padding: 0 1.1rem; border-left: 1px solid rgba(255, 255, 255, .18); }
.hb-hero-usps li:first-child { padding-left: 0; border-left: 0; }
.hb-hero-usps .icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid rgba(240, 215, 137, .75); color: var(--hb-gold-light); font-size: 1.05rem; }
.hb-hero-usps .icon-whatsapp { border-color: rgba(126, 226, 184, .75); color: #7ee2b8; }
.hb-hero-usps .label { color: rgba(255, 255, 255, .92); font-weight: 600; font-size: .85rem; line-height: 1.25; white-space: nowrap; }

/* The search card is the main action on this page */
.hb-hero-search { margin-top: 1.05rem; text-align: left; }
.hb-hero-search .hb-search-card { padding: 1.4rem; border-radius: 20px; box-shadow: 0 26px 55px rgba(43, 10, 18, .4); }
.hb-hero-search .hb-search-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, var(--hb-accent-dark), var(--hb-gold-light) 50%, var(--hb-accent)); }

.hb-hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; margin-top: 1.25rem; }
.hb-hero-popular { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }
.hb-hero-popular .small-caps { color: rgba(255, 255, 255, .65); margin-right: .25rem; }
.hb-hero-popular .hb-chip-link { margin: 0; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; font-size: .85rem; padding: .35rem .8rem; }

/* The hero's other audience: property owners. A light button rather than a second gold one,
   so it reads as a separate offer and never competes with Search below it. */
/* A 1366x768 laptop leaves roughly 650px of page once the browser's own chrome is gone.
   The hero is squeezed there rather than letting the search card slide out of sight. */
@media (min-width: 992px) and (max-height: 780px) {
    .hb-hero { --hb-hero-curve: 54px; padding-top: 1.2rem; padding-bottom: calc(var(--hb-hero-curve) + 1rem); }
    .hb-hero h1 { font-size: clamp(1.7rem, 3.1vw, 2.35rem); margin-bottom: .5rem !important; }
    .hb-hero .lead { font-size: 1.02rem; }
    .hb-hero-sub { font-size: .9rem; margin-bottom: .75rem !important; }
    .hb-hero-usps { margin-top: .6rem; }
    .hb-hero-usps .icon { width: 36px; height: 36px; flex-basis: 36px; }
    .hb-hero-search { margin-top: .85rem; }
}

/* The hero's other audience: property owners. A light button rather than a second gold one,
   so it reads as a separate offer and never competes with Search below it.

   It also asks for attention: a gold ring breathing out of it, and a sheen crossing the face
   every few seconds. Deliberately a slow pulse, not a blink - something flashing two or three
   times a second is hard to read past and is a genuine accessibility problem. */
.hb-hero-owner-btn { position: relative; isolation: isolate; overflow: hidden;
    font-weight: 700; white-space: nowrap; padding: .6rem 1.4rem;
    box-shadow: 0 8px 22px rgba(43, 10, 18, .28);
    animation: hb-cta-pulse 2.6s ease-out infinite; }
.hb-hero-owner-btn i { margin-right: .35rem; }

/* The sheen: a narrow bright band crossing the face, idle most of the cycle. It sits above
   the button's own background - behind it, an opaque button would simply hide it - and the
   label is lifted above the sheen so nothing ever washes the text out. */
.hb-hero-owner-btn > span { position: relative; z-index: 2; }
.hb-hero-owner-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(240, 215, 137, .75) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: hb-cta-sheen 4.5s ease-in-out infinite; }

/* Once it is hovered or focused the point is made, so it settles down. */
.hb-hero-owner-btn:hover, .hb-hero-owner-btn:focus-visible,
.hb-hero-owner-btn:hover::after, .hb-hero-owner-btn:focus-visible::after { animation-play-state: paused; }

@keyframes hb-cta-pulse {
    0%   { box-shadow: 0 8px 22px rgba(43, 10, 18, .28), 0 0 0 0 rgba(240, 215, 137, .55); }
    70%  { box-shadow: 0 8px 22px rgba(43, 10, 18, .28), 0 0 0 14px rgba(240, 215, 137, 0); }
    100% { box-shadow: 0 8px 22px rgba(43, 10, 18, .28), 0 0 0 0 rgba(240, 215, 137, 0); }
}

@keyframes hb-cta-sheen {
    0%, 55%   { transform: translateX(-120%); }
    85%, 100% { transform: translateX(120%); }
}

/* Anyone who has asked their system for less motion gets a still button. */
@media (prefers-reduced-motion: reduce) {
    .hb-hero-owner-btn { animation: none; }
    .hb-hero-owner-btn::after { display: none; }
}

@media (max-width: 575.98px) {
    /* A proper tap target rather than a sliver in the middle of the screen. */
    .hb-hero-owner-btn { display: block; width: 100%; }
}
.hb-hero-popular .hb-chip-link:hover { background: rgba(255, 255, 255, .22); color: #fff; border-color: rgba(255, 255, 255, .45); }
.hb-hero-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.25rem; padding: 0; margin: 0; }
.hb-hero-trust li { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .82); font-size: .85rem; font-weight: 600; }
.hb-hero-trust i { color: var(--hb-gold-light); }

@media (max-width: 1199.98px) {
    .hb-hero-usps li { padding: .35rem 1rem; }
}
@media (max-width: 991.98px) {
    .hb-hero-copy { max-width: none; }
    .hb-hero-usps { gap: .6rem 0; }
    .hb-hero-usps li { flex: 1 1 50%; padding: .35rem 0; border-left: 0; }
    .hb-hero-search { margin-top: 1.5rem; }
    .hb-hero-meta { flex-direction: column; align-items: center; }
}

.hb-search-card { background: #fff; color: var(--hb-ink); border-radius: 18px; box-shadow: var(--hb-shadow-lg); padding: 1.25rem; position: relative; z-index: 2; }
.hb-search-card .form-control, .hb-search-card .form-select { padding: .75rem .9rem; }
.hb-search-card .input-icon { position: relative; }
.hb-search-card .input-icon i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--hb-muted); pointer-events: none; }
.hb-search-card .input-icon .form-control { padding-left: 2.4rem; }
.hb-search-card .input-icon .hb-combo { position: static; }
.hb-search-card .input-icon .hb-combo-menu { left: 0; right: 0; }
.hb-search-overlap { margin-top: -5rem; }

/* The 45-day offer on the owner banner, loud enough to be the first thing read */
.hb-offer-highlight { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .6rem;
    margin-bottom: 1.1rem; padding: .45rem .5rem .45rem .5rem; border-radius: 999px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(240, 215, 137, .5);
    box-shadow: 0 8px 26px rgba(43, 17, 22, .3); }
.hb-offer-highlight-badge { background: linear-gradient(135deg, var(--hb-gold-light), var(--hb-accent) 60%, var(--hb-accent-dark));
    color: var(--hb-on-accent); border-radius: 999px; padding: .38rem .9rem; font-size: .9rem; font-weight: 800; white-space: nowrap; }
.hb-offer-highlight-text { color: #fff; font-weight: 700; font-size: 1rem; padding-right: .65rem; }

@media (max-width: 575.98px) {
    .hb-offer-highlight { border-radius: 18px; }
    .hb-offer-highlight-text { font-size: .92rem; padding: 0 .4rem .15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hotel-card, .hotel-card .thumb img { transition: none; }
}

/* ---------- Time picker: a clock face ---------- */
.hb-clock { position: relative; }
/* The browser's own three-column picker is replaced by the dial below. */
.hb-clock input[type="time"] { padding-right: 2.4rem; cursor: pointer; }
.hb-clock input[type="time"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.hb-clock-icon { position: absolute; top: 50%; right: .85rem; transform: translateY(-50%);
    color: var(--hb-muted); cursor: pointer; line-height: 1; }
.hb-clock.is-open .hb-clock-icon { color: var(--hb-primary); }

.hb-clock-menu { display: none; position: absolute; z-index: 1056; top: calc(100% + .35rem); left: 0;
    width: 288px; max-width: calc(100vw - 2rem); padding: 1rem; background: #fff; border: 1px solid var(--hb-border);
    border-radius: 16px; box-shadow: var(--hb-shadow-lg); }
/* Flipped when the panel would otherwise run past the edge of the window */
.hb-clock-menu.to-right { left: auto; right: 0; }
.hb-clock-menu.to-top { top: auto; bottom: calc(100% + .35rem); }
.hb-clock.is-open .hb-clock-menu { display: block; }

.hb-clock-head { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-bottom: .85rem; }
.hb-clock-part { border: 0; background: var(--hb-bg); border-radius: 10px; padding: .3rem .7rem;
    font-family: var(--hb-font-display); font-size: 1.6rem; font-weight: 800; line-height: 1.1;
    color: var(--hb-muted); cursor: pointer; }
.hb-clock-part.is-active { background: rgba(var(--hb-primary-rgb), .1); color: var(--hb-primary); }
.hb-clock-colon { font-family: var(--hb-font-display); font-size: 1.5rem; font-weight: 800; color: var(--hb-muted); }
.hb-clock-ampm { display: inline-flex; flex-direction: column; gap: .2rem; margin-left: .5rem; }
.hb-clock-ampm button { border: 1px solid var(--hb-border); background: #fff; border-radius: 7px;
    padding: .1rem .45rem; font-size: .72rem; font-weight: 700; color: var(--hb-muted); cursor: pointer; }
.hb-clock-ampm button.is-active { background: var(--hb-primary); border-color: var(--hb-primary); color: #fff; }

/* The dial: numbers sit on a circle, the hand points at the selected one */
.hb-clock-dial { position: relative; width: 240px; height: 240px; margin: 0 auto;
    border-radius: 50%; background: var(--hb-bg); }
.hb-clock-dial::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
    margin: -4px 0 0 -4px; border-radius: 50%; background: var(--hb-primary); }
.hb-clock-hand { position: absolute; bottom: 50%; left: 50%; width: 2px; height: 84px; margin-left: -1px;
    transform-origin: bottom center; background: var(--hb-primary); transition: transform .18s ease; }
.hb-clock-hand::after { content: ""; position: absolute; top: -18px; left: 50%; width: 36px; height: 36px;
    margin-left: -18px; border-radius: 50%; background: rgba(var(--hb-primary-rgb), .15); }

.hb-clock-num { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
    border: 0; border-radius: 50%; background: none; font-size: .95rem; font-weight: 600; color: var(--hb-ink);
    cursor: pointer; line-height: 36px; padding: 0;
    transform: rotate(var(--angle)) translateY(-84px) rotate(calc(-1 * var(--angle))); }
.hb-clock-num:hover { background: rgba(var(--hb-primary-rgb), .1); color: var(--hb-primary); }
.hb-clock-num.is-selected { background: var(--hb-primary); color: #fff; }

.hb-clock-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .85rem; }
.hb-clock-hint { font-size: .74rem; color: var(--hb-muted); }

@media (max-width: 575.98px) {
    .hb-clock-menu { width: 264px; padding: .85rem; }
    .hb-clock-dial { width: 216px; height: 216px; }
    .hb-clock-hand { height: 74px; }
    .hb-clock-num { transform: rotate(var(--angle)) translateY(-74px) rotate(calc(-1 * var(--angle))); }
}

/* ---------- Photo fields ---------- */
.hb-previews { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.hb-preview { position: relative; width: 92px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--hb-border); background: var(--hb-bg); }
.hb-preview img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hb-preview.is-loading img { opacity: 0; }
.hb-preview-spinner { display: none; position: absolute; top: 28%; left: 50%; margin: -.5rem 0 0 -.5rem; color: var(--hb-primary); }
.hb-preview.is-loading .hb-preview-spinner { display: block; }
.hb-preview-name { display: block; padding: .2rem .35rem; font-size: .65rem; line-height: 1.3; color: var(--hb-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-preview-remove { position: absolute; top: .2rem; right: .2rem; width: 20px; height: 20px; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(43, 17, 22, .75);
    color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.hb-preview-remove:hover { background: var(--hb-primary); }
/* Upload progress: a gold bar across the foot of the thumbnail while the photo is on its way. */
.hb-preview-bar { display: none; position: absolute; left: 0; right: 0; bottom: 1.15rem; height: 4px; background: rgba(43, 17, 22, .25); }
.hb-preview-bar > span { display: block; width: 4%; height: 100%; background: var(--hb-accent); transition: width .15s linear; }
.hb-preview.is-uploading .hb-preview-bar { display: block; }
.hb-preview.is-uploading img { opacity: .45; }
/* Uploaded and waiting for Save. */
.hb-preview.is-staged { border-color: var(--hb-accent); }
.hb-preview.is-failed { border-color: var(--bs-danger, #dc3545); }
.hb-preview.is-failed img { opacity: .35; filter: grayscale(1); }
.hb-preview.is-failed .hb-preview-name { color: var(--bs-danger, #dc3545); }

/* Full-page upload overlay: photos have no size limit, so a big one takes a while and the
   page has to look busy rather than frozen. Sits above Bootstrap's modals. */
.hb-uploading { position: fixed; inset: 0; z-index: 2000; display: none; place-items: center;
    padding: 1rem; background: rgba(43, 17, 22, .55); backdrop-filter: blur(3px); }
.hb-uploading.is-open { display: grid; }
body.hb-busy { overflow: hidden; }
.hb-uploading-card { width: min(26rem, 100%); padding: 1.6rem 1.4rem 1.4rem; text-align: center;
    background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(43, 17, 22, .32); }
.hb-uploading-spinner { width: 2.2rem; height: 2.2rem; color: var(--hb-primary); border-width: .22em; }
.hb-uploading-warn { display: none; font-size: 2.1rem; line-height: 1; color: var(--bs-danger, #dc3545); }
.hb-uploading.is-failed .hb-uploading-spinner { display: none; }
.hb-uploading.is-failed .hb-uploading-warn { display: block; }
.hb-uploading-title { margin: .85rem 0 .25rem; }
.hb-uploading-file { margin: 0 0 .9rem; font-size: .85rem; color: var(--hb-muted);
    overflow-wrap: anywhere; }
.hb-uploading-bar { height: 8px; border-radius: 99px; overflow: hidden; background: #efe6e8; }
.hb-uploading-bar > span { display: block; width: 3%; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--hb-gold-light), var(--hb-accent)); transition: width .18s linear; }
.hb-uploading.is-failed .hb-uploading-bar > span { background: var(--bs-danger, #dc3545); }
.hb-uploading-count { margin: .6rem 0 0; font-size: .8rem; font-weight: 600; color: var(--hb-ink); }
.hb-uploading-close { margin-top: .9rem; }

/* The tick on the review thank-you page. */
.hb-thanks-tick { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--hb-gold-light), var(--hb-accent)); color: var(--hb-on-accent);
    font-size: 2rem; box-shadow: 0 8px 22px rgba(201, 162, 39, .35); }


.hb-photo-empty { display: grid; place-items: center; gap: .35rem; aspect-ratio: 4 / 3; border-radius: 12px;
    border: 1px dashed var(--hb-border); background: var(--hb-bg); color: var(--hb-muted); font-size: .85rem; text-align: center; }
.hb-photo-empty i { font-size: 1.6rem; }

/* ---------- Amenity checkboxes ---------- */
.hb-amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .35rem .75rem;
    padding: .85rem 1rem; border: 1px solid var(--hb-border); border-radius: 12px; background: var(--hb-bg); }
.hb-amenity { margin: 0; }
.hb-amenity .form-check-label { font-size: .92rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.hb-amenity .form-check-input { cursor: pointer; }
.hb-amenity .form-check-input:checked { background-color: var(--hb-primary); border-color: var(--hb-primary); }
.hb-amenity .form-check-input:checked + .form-check-label { color: var(--hb-primary); font-weight: 600; }
.hb-amenity i { color: var(--hb-gold-ink); }

/* ---------- Searchable select ---------- */
.hb-combo { position: relative; }
/* The native select keeps the value and the validation; the input is what people see. */
.hb-combo-native { position: absolute; opacity: 0; pointer-events: none; height: 0; padding: 0; margin: 0; border: 0; }
.hb-combo-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237b6a6d'%3E%3Cpath d='M8 11.5 3.5 7l1-1L8 9.5 11.5 6l1 1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px; padding-right: 2.25rem; cursor: pointer; }
.hb-combo.is-open .hb-combo-input { border-color: var(--hb-primary); box-shadow: 0 0 0 .2rem rgba(var(--hb-primary-rgb), .12); }
/* Touch: no search box, so it reads and behaves like a plain select - no caret, no keyboard. */
.hb-combo-input.hb-combo-pick { cursor: pointer; caret-color: transparent; background-color: #fff; }
.hb-combo-input.hb-combo-pick:read-only { background-color: #fff; }
.hb-combo-menu { display: none; position: absolute; z-index: 1056; top: calc(100% + .25rem); left: 0; right: 0;
    max-height: 260px; overflow-y: auto; padding: .35rem; background: #fff; border: 1px solid var(--hb-border);
    border-radius: 12px; box-shadow: var(--hb-shadow-lg);
    /* Keep the flick inside the list instead of carrying the page with it, and let the
       finger pan vertically - without touch-action the browser may cancel the gesture. */
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

/* A finger needs a taller list and taller rows than a mouse does. This has to come after
   the block above, or the 260px there would win on equal specificity. */
@media (pointer: coarse) {
    .hb-combo-menu { max-height: 60vh; }
    .hb-combo-item { padding: .7rem .6rem; }
}
.hb-combo.is-open .hb-combo-menu { display: block; }
.hb-combo-group { padding: .45rem .6rem .25rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 700; color: var(--hb-muted); }
.hb-combo-item { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px;
    padding: .5rem .6rem; font-size: .92rem; color: var(--hb-ink); cursor: pointer; }
.hb-combo-item:hover, .hb-combo-item.is-active { background: rgba(var(--hb-primary-rgb), .08); color: var(--hb-primary); }
.hb-combo-item.is-selected { font-weight: 700; color: var(--hb-primary); }
.hb-combo-empty { padding: .6rem; font-size: .88rem; color: var(--hb-muted); text-align: center; }

/* ---------- Sections ---------- */
.hb-section { padding: 4rem 0; }
.hb-section-title { font-weight: 800; letter-spacing: -.02em; }
.hb-step { text-align: center; padding: 1.5rem; }
.hb-step .icon, .hb-feature .icon { width: 58px; height: 58px; border-radius: 16px; display: inline-grid; place-items: center; font-size: 1.5rem; background: rgba(var(--hb-primary-rgb), .08); color: var(--hb-primary); margin-bottom: 1rem; }
.hb-feature { display: flex; gap: 1rem; }
.hb-feature .icon { flex: 0 0 auto; margin: 0; }
.hb-cta { background: linear-gradient(135deg, #48101b, var(--hb-primary-light)); color: #fff; border-radius: 22px; padding: 2.5rem; }
.hb-chip-link { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--hb-border); color: var(--hb-ink); font-weight: 600; font-size: .9rem; margin: 0 .35rem .5rem 0; }
.hb-chip-link:hover { border-color: var(--hb-primary); color: var(--hb-primary); }
button.hb-chip-link { cursor: pointer; font-family: inherit; }

/* ---------- About ----------
   Two aligned columns: the heading and the promise on the left, the story on the right.
   Everything is left-aligned inside its own column, so nothing drifts out of line. */
.hb-about { padding: 3.5rem 0 3rem; }
.hb-about .small-caps { color: var(--hb-gold-ink); }
.hb-about-title { font-family: var(--hb-font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.18;
    font-size: clamp(1.5rem, 2.9vw, 2.15rem); margin: .4rem 0 0; color: var(--hb-ink); }
.hb-about-rule { display: block; width: 68px; height: 3px; border-radius: 2px; margin: 1.15rem 0 1.75rem;
    background: linear-gradient(90deg, var(--hb-accent-dark), var(--hb-gold-light) 55%, var(--hb-accent)); }

.hb-promise-card { position: relative; overflow: hidden; padding: 1.85rem 1.75rem; border-radius: 20px; color: #fff;
    background: linear-gradient(140deg, #48101b 0%, var(--hb-primary) 58%, var(--hb-primary-light) 100%);
    box-shadow: 0 16px 38px rgba(122, 29, 43, .22); }
.hb-promise-card::after { content: ""; position: absolute; inset: -55% -25% auto auto; width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 39, .32) 0, transparent 70%); pointer-events: none; }
.hb-promise-card > * { position: relative; }
.hb-promise-card .small-caps { color: var(--hb-gold-light); }
.hb-promise-line { font-family: var(--hb-font-display); font-weight: 800; letter-spacing: -.015em; line-height: 1.32;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin: .55rem 0 1.15rem; color: #fff; }
.hb-promise-note { padding-top: 1.05rem; border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: .88rem; line-height: 1.7; color: rgba(255, 255, 255, .78); }

.hb-about-copy { max-width: 620px; }
.hb-about-copy p { color: var(--hb-muted); font-size: .95rem; line-height: 1.85; margin-bottom: 1.35rem; }
.hb-about-copy .hb-about-lead { color: var(--hb-ink); font-size: 1.08rem; line-height: 1.75; font-weight: 500; }

@media (min-width: 992px) {
    /* A hairline keeps the two columns visually tied together */
    .hb-about-copy { padding-left: 2.5rem; border-left: 1px solid var(--hb-border); max-width: none; }
}
@media (max-width: 991.98px) {
    .hb-about { padding: 2.75rem 0 2.25rem; }
    .hb-about-rule { margin: 1rem 0 1.5rem; }
    .hb-promise-card { margin-bottom: .5rem; }
}

/* ---------- Results & detail ---------- */
.hb-page-head { background: #fff; border-bottom: 1px solid var(--hb-border); padding: 1.5rem 0; }
.hb-filter-card { position: sticky; top: 84px; }
.hb-gallery { display: grid; gap: .5rem; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; border-radius: var(--hb-radius); overflow: hidden; max-height: 440px; }
.hb-gallery img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.hb-gallery .main { grid-row: span 2; }
.hb-gallery.single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.hb-gallery.single .main { grid-row: auto; }
.hb-map-frame { width: 100%; height: 280px; border: 0; border-radius: 12px; background: #f2e9ea; }
.hb-sticky-enquiry { position: sticky; top: 84px; }
.amenity { display: inline-flex; align-items: center; gap: .35rem; background: #f6eeee; border-radius: 8px; padding: .35rem .65rem; margin: 0 .35rem .45rem 0; font-size: .88rem; }

/* ---------- Hotel card ---------- */
.hotel-card { display: flex; flex-direction: column; width: 100%; background: var(--hb-card); border: 1px solid var(--hb-border);
    border-radius: 18px; box-shadow: var(--hb-shadow); overflow: hidden; position: relative;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.hotel-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 3; opacity: 0;
    background: linear-gradient(90deg, var(--hb-accent-dark), var(--hb-gold-light) 50%, var(--hb-accent)); transition: opacity .22s ease; }
.hotel-card:hover { transform: translateY(-4px); box-shadow: var(--hb-shadow-lg); border-color: rgba(var(--hb-primary-rgb), .18); }
.hotel-card:hover::before { opacity: 1; }

.hotel-card .thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: #f2e9ea; overflow: hidden; }
.hotel-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }

/* ---------- Card photo slider ---------- */
/* The owner's photos, one on top of the other, cross-faded. The link covering the photo sits
   under the arrows, so an arrow press changes the slide instead of opening the hotel. */
.hotel-card .thumb .slides { position: absolute; inset: 0; }
.hotel-card .thumb .slides img { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease, transform .45s ease; }
.hotel-card .thumb .slides img.is-active { opacity: 1; }
.hotel-card .thumb-link { position: absolute; inset: 0; z-index: 1; }
.hotel-card .thumb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; color: #fff; font-size: .95rem; line-height: 1;
    background: rgba(27, 10, 13, .45); opacity: 0; transition: opacity .2s ease, background .2s ease; }
.hotel-card .thumb-nav.prev { left: .5rem; }
.hotel-card .thumb-nav.next { right: .5rem; }
.hotel-card:hover .thumb-nav, .hotel-card .thumb-nav:focus-visible { opacity: 1; }
.hotel-card .thumb-nav:hover { background: rgba(27, 10, 13, .72); }
.hotel-card .thumb-dots { position: absolute; left: 0; right: 0; bottom: .55rem; z-index: 2;
    display: flex; justify-content: center; align-items: center; gap: .25rem; pointer-events: none; }
.hotel-card .thumb-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55);
    transition: width .25s ease, background .25s ease; }
.hotel-card .thumb-dots span.is-active { width: 16px; border-radius: 3px; background: #fff; }

/* A touch screen has no hover, so the arrows have to be visible without one. */
@media (hover: none) {
    .hotel-card .thumb-nav { opacity: .85; }
}

/* ---------- Photo viewer ---------- */
[data-lightbox] { cursor: zoom-in; }
/* One number sets the frame's height, and its width follows from it, so the mount keeps
   a sensible shape instead of stretching to the full dialog and leaving a field of white
   either side of a squarish photo. */
.hb-lightbox { --lb-height: 74vh; --lb-ratio: 1.45; }
.hb-lightbox .modal-content { background: transparent; border: 0; box-shadow: none; }
.hb-lightbox .modal-body { padding: 0; position: relative; text-align: center;
    max-width: calc(var(--lb-height) * var(--lb-ratio)); margin-inline: auto; width: 100%; }
/* One frame, the same for every photo. Owners upload portrait, landscape and square
   pictures in the same gallery; sizing the dialog to each one made it jump on every step
   and moved the close button and arrows out from under the reader's finger. The frame
   stays put and the photo is fitted inside it, whole, never cropped or stretched. */
.hb-lightbox .lb-frame { position: relative; width: 100%; height: var(--lb-height);
    display: flex; align-items: center; justify-content: center;
    /* A white mount on all four sides, like a print in a frame: it separates the photo from
       the dark backdrop and gives portrait and landscape shots the same outline. */
    background: #fff; padding: 16px; border-radius: var(--hb-radius); overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55); }
/* No background here: the white mount must show through wherever the photo does not reach. */
.hb-lightbox .lb-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Dark disc, white cross: a white button would vanish into the mount behind it.
   Not Bootstrap's .btn-close - making its cross white needs .btn-close-white, whose
   invert() filter applies to the whole element and turns the dark disc white again. */
.hb-lightbox .lb-close { position: absolute; top: .9rem; right: .9rem; z-index: 5;
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 50%; color: #fff; font-size: 1.05rem; line-height: 1;
    background: rgba(27, 10, 13, .78); box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
    transition: background-color .2s ease, transform .15s ease; }
.hb-lightbox .lb-close:hover { background: rgba(27, 10, 13, .95); transform: scale(1.06); }
.hb-lightbox .lb-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hb-lightbox .lb-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; }
.hb-lightbox .lb-nav { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .16); transition: background .2s ease; }
.hb-lightbox .lb-nav:hover { background: rgba(255, 255, 255, .3); }
.hb-lightbox .lb-count { color: #fff; font-size: .85rem; min-width: 4.5rem; }
.hb-lightbox.single .lb-bar { display: none; }
.hotel-card:hover .thumb img { transform: scale(1.06); }
.hotel-card .thumb-scrim { position: absolute; inset: 40% 0 0 0;
    background: linear-gradient(180deg, rgba(43, 17, 22, 0) 0%, rgba(43, 17, 22, .55) 100%); }

.hotel-card .badges { position: absolute; top: .7rem; left: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; max-width: calc(100% - 5.5rem); }
.hotel-card .badges .badge { font-size: .72rem; padding: .34rem .6rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(43, 17, 22, .28); }
.badge-premium { background: linear-gradient(135deg, var(--hb-gold-light), var(--hb-accent) 55%, var(--hb-accent-dark));
    color: var(--hb-on-accent); border: 1px solid rgba(138, 109, 16, .45); }
.badge-glass { background: rgba(255, 255, 255, .92); color: var(--hb-ink); backdrop-filter: blur(4px); }

.hotel-card .rating-pill { position: absolute; top: .7rem; right: .7rem; display: inline-flex; align-items: center; gap: .25rem;
    background: rgba(43, 17, 22, .8); color: #fff; font-size: .78rem; font-weight: 700; padding: .3rem .55rem; border-radius: 8px;
    backdrop-filter: blur(4px); }
.hotel-card .rating-pill i { color: var(--hb-gold-light); font-size: .7rem; }
.hotel-card .distance { position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .3rem;
    color: #fff; font-size: .78rem; font-weight: 600; text-shadow: 0 1px 6px rgba(43, 17, 22, .6); }

.hotel-card .body { display: flex; flex-direction: column; flex: 1; padding: .95rem 1.05rem 1.05rem; }
.hotel-card .title { display: block; font-family: var(--hb-font-display); font-weight: 700; font-size: 1.05rem; color: var(--hb-ink);
    line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hotel-card .title:hover { color: var(--hb-primary); }
.hotel-card .meta { margin-top: .3rem; font-size: .85rem; color: var(--hb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotel-card .meta i { color: var(--hb-primary); }

.amenity-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: .7rem 0 0; }
.amenity-chips li { font-size: .74rem; font-weight: 600; color: var(--hb-muted); background: var(--hb-bg);
    border: 1px solid var(--hb-border); border-radius: 7px; padding: .2rem .5rem; }
.amenity-chips li.more { color: var(--hb-primary); border-color: rgba(var(--hb-primary-rgb), .25); background: rgba(var(--hb-primary-rgb), .06); }

.availability-note { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; margin: .7rem 0 .2rem;
    font-size: .76rem; font-weight: 600; color: var(--hb-gold-ink); background: #fbf3dd; padding: .22rem .55rem; border-radius: 8px; }

.hotel-card .price-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem;
    margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--hb-border); }
.hotel-card .price { display: flex; align-items: baseline; gap: .3rem; }
.price-tag { font-family: var(--hb-font-display); color: var(--hb-primary); font-weight: 800; font-size: 1.15rem; }

/* Rooms & prices on a phone: one block per room instead of a table that scrolls sideways. */
.hb-room-list { list-style: none; margin: 0; padding: 0; }
.hb-room-list > li { padding: .85rem 1.1rem; border-top: 1px solid var(--hb-border); }
.hb-room-list > li:first-child { border-top: 0; }
.hb-room-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.hb-room-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem;
    margin-top: .45rem; font-size: .8rem; color: var(--hb-muted); }
.hb-room-meta i { color: var(--hb-gold-ink); margin-right: .2rem; }
.hb-room-per { margin-left: auto; }
.hotel-card .per, .hotel-card .on-request { font-size: .8rem; color: var(--hb-muted); }
.hotel-card .on-request { font-weight: 600; }
.hotel-card .no-fee { font-size: .74rem; font-weight: 600; color: var(--hb-muted); white-space: nowrap; }
.hotel-card .no-fee i { color: #0f9d58; }

.hotel-card .actions { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; margin-top: .8rem; }
.hotel-card .actions .btn { font-size: .82rem; padding-left: .7rem; padding-right: .7rem; }
.hotel-card .actions .hb-share { padding-left: .55rem; padding-right: .55rem; }

/* ---------- Pricing plans ---------- */
.hb-plan { display: flex; flex-direction: column; width: 100%; position: relative; padding: 1.75rem 1.5rem 1.5rem;
    background: var(--hb-card); border: 1px solid var(--hb-border); border-radius: 18px; box-shadow: var(--hb-shadow); }
.hb-plan--featured { border-color: rgba(201, 162, 39, .55); box-shadow: 0 18px 44px rgba(122, 29, 43, .18); }
.hb-plan--featured::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--hb-accent-dark), var(--hb-gold-light) 50%, var(--hb-accent)); }
.hb-plan-flag { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
    background: linear-gradient(135deg, var(--hb-gold-light), var(--hb-accent) 60%, var(--hb-accent-dark)); color: var(--hb-on-accent);
    font-size: .72rem; font-weight: 800; padding: .28rem .8rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(43, 17, 22, .22); }
.hb-plan-name { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--hb-primary); margin: 0; }
.hb-plan-price { display: flex; align-items: baseline; gap: .35rem; margin: .5rem 0 .9rem; }
.hb-plan-price .amount { font-family: var(--hb-font-display); font-size: 2.1rem; font-weight: 800; color: var(--hb-ink); letter-spacing: -.02em; }
.hb-plan-price .term { font-size: .85rem; color: var(--hb-muted); }
.hb-plan-delivery { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; margin-bottom: 1rem;
    font-size: .82rem; font-weight: 700; color: var(--hb-gold-ink); background: #fbf3dd; padding: .35rem .7rem; border-radius: 9px; }
.hb-plan--featured .hb-plan-delivery { color: #0b6b3f; background: #e6f6ee; }
.hb-plan-features { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.hb-plan-features li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--hb-ink); padding: .32rem 0; }
.hb-plan-features i { color: var(--hb-primary); margin-top: .15rem; }

/* Bootstrap's accordion defaults to blue, so the open panel is re-tinted */
.accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--hb-primary-rgb), .15);
    --bs-accordion-active-color: var(--hb-primary); --bs-accordion-active-bg: rgba(var(--hb-primary-rgb), .06);
    --bs-accordion-border-color: var(--hb-border); --bs-accordion-border-radius: 12px; }
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed)::after { filter: sepia(1) saturate(4) hue-rotate(-40deg) brightness(.6); }

/* ---------- Footer ---------- */
.hb-footer { background: var(--hb-ink); color: rgba(255, 255, 255, .75); padding: 3rem 0 1.5rem; }
.hb-footer a { color: rgba(255, 255, 255, .75); }
.hb-footer a:hover { color: #fff; }
.hb-footer h6 { color: #fff; font-weight: 700; margin-bottom: .9rem; }
.hb-footer-links li { margin-bottom: .95rem; line-height: 1.5; }
.hb-footer-links a:hover { color: var(--hb-gold-light); }
.hb-footer-slogan { font-family: var(--hb-font-display); font-weight: 700; color: var(--hb-gold-light); letter-spacing: -.01em; }
.hb-footer-note { color: rgba(255, 255, 255, .5); margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .1); }
/* The one column people hunt for when something is wrong, so it sits on its own panel
   with a gold edge rather than blending into the rest of the footer. */
.hb-footer-help { padding: 1.1rem 1.2rem; border-radius: 14px; background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(240, 215, 137, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.hb-footer-help h6 { color: var(--hb-gold-light); }
.hb-footer-help .hb-footer-links li:last-child { margin-bottom: 0; }
.hb-footer-help i { color: var(--hb-gold-light); }
.hb-footer-help .bi-whatsapp { color: #4ade80; }
.hb-footer-legal { margin: 0; }
.hb-footer-legal .list-inline-item:not(:last-child)::after { content: "·"; margin-left: .55rem; opacity: .4; }

/* ---------- Legal pages (privacy, terms, data deletion) ----------
   Long prose, so it gets a readable measure and headings that break the wall of text up. */
.hb-legal { max-width: 68ch; }
.hb-legal h2 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .65rem; color: var(--hb-primary); }
.hb-legal h2:first-child { margin-top: 0; }
.hb-legal h3 { font-size: .98rem; font-weight: 700; margin: 1.35rem 0 .4rem; }
.hb-legal p, .hb-legal li { line-height: 1.7; }
.hb-legal ul { padding-left: 1.15rem; margin-bottom: 1rem; }
.hb-legal li { margin-bottom: .4rem; }
.hb-legal .lead { font-size: 1.05rem; color: var(--hb-ink); }

/* ---------- Panels (admin / owner) ---------- */
.hb-panel { min-height: 100vh; }
.hb-sidebar { width: 260px; background: linear-gradient(180deg, #48101b, #2b1116); color: rgba(255, 255, 255, .78); position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 1040; transition: transform .2s ease; }
.hb-sidebar .brand { padding: 1.1rem 1.25rem; display: flex; align-items: center; color: #fff; font-weight: 800; font-size: 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.hb-sidebar .brand .logo { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--hb-accent), var(--hb-gold-light)); color: var(--hb-on-accent); margin-right: .6rem; }
.hb-sidebar .section { padding: 1rem 1.25rem .35rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .4); font-weight: 700; }
.hb-sidebar .nav-link { color: rgba(255, 255, 255, .78); display: flex; align-items: center; gap: .7rem; padding: .6rem 1.25rem; font-weight: 500; border-left: 3px solid transparent; }
.hb-sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.hb-sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.hb-sidebar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .08); border-left-color: var(--hb-accent); }
.hb-sidebar .nav-link .badge { margin-left: auto; }
.hb-main { margin-left: 260px; min-height: 100vh; display: flex; flex-direction: column; }
.hb-topbar { background: #fff; border-bottom: 1px solid var(--hb-border); padding: .7rem 1.5rem; position: sticky; top: 0; z-index: 1030; }
.hb-content { padding: 1.5rem; flex: 1; }
.hb-backdrop { display: none; }

/* ---------- Save bar on long panel forms ----------
   These forms are long, and their Save button sat at the end of a column - on the hotel
   forms, a column that stacks under the whole form below xl. Saving meant scrolling past
   every field.

   The bar is FIXED at every width, not sticky. `position: sticky; bottom` only ever pulls a
   box upwards: the moment you scroll past its place in the flow the constraint is already
   satisfied and it drifts away up the page, which is exactly what it did. Fixed also means
   one behaviour to reason about, and it suits both layouts here - actions in a right-hand
   rail (hotel forms) and actions at the end of the main column (settings, templates). */
.hb-form-actions {
    display: flex; align-items: center; gap: .5rem;
    position: fixed; left: 260px; right: 0; bottom: 0; z-index: 1036;
    margin: 0; padding: .7rem 1rem;
    /* Clear of the iPhone home indicator. */
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--hb-field-border);
    box-shadow: 0 -8px 24px rgba(60, 20, 28, .12);
}
/* The main action takes the room; Cancel and friends stay the size of their label. */
.hb-form-actions > .btn-primary, .hb-form-actions > .btn-accent { flex: 1 1 auto; }
.hb-form-actions > .btn { margin: 0; white-space: nowrap; }
.hb-form-actions > .btn-lg { --bs-btn-padding-y: .6rem; font-size: 1rem; }
/* app.js sets this class when a page actually has a bar, so the last card is not hidden. */
body.hb-has-form-actions .hb-content { padding-bottom: 5.75rem; }

/* On a wide screen the bar does not need the full width - it lines up with the form. */
@media (min-width: 1200px) {
    .hb-form-actions { gap: .75rem; padding: .8rem 1.5rem; justify-content: flex-end; }
    .hb-form-actions > .btn-primary, .hb-form-actions > .btn-accent { flex: 0 0 auto; min-width: 14rem; }
}
/* Below lg the sidebar is off-canvas, so the bar spans the whole width. */
@media (max-width: 991.98px) {
    .hb-form-actions { left: 0; }
}
@media (max-width: 991.98px) {
    .hb-sidebar { transform: translateX(-100%); }
    .hb-sidebar.show { transform: translateX(0); }
    .hb-main { margin-left: 0; }
    .hb-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1035; }
    .hb-content { padding: 1rem; }
}
.stat-card { border-radius: var(--hb-radius); background: #fff; border: 1px solid var(--hb-border); padding: 1.1rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--hb-shadow); height: 100%; color: var(--hb-ink); }
a.stat-card:hover { border-color: rgba(var(--hb-primary-rgb), .35); color: var(--hb-ink); }
.stat-card .icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; flex: 0 0 auto; }
.stat-card .value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.stat-card .label { color: var(--hb-muted); font-size: .85rem; font-weight: 600; }
.bg-soft-primary { background: rgba(var(--hb-primary-rgb), .1); color: var(--hb-primary); }
.bg-soft-success { background: #e6f6ee; color: #0f9d58; }
.bg-soft-warning { background: #fff5e0; color: #d98b00; }
.bg-soft-danger { background: #fdecec; color: #d63939; }
.bg-soft-info { background: #e5f5fb; color: #0b8bb8; }
.bg-soft-accent { background: #fbf3dd; color: var(--hb-gold-ink); }
.bg-soft-dark { background: #eceff4; color: var(--hb-ink); }
.table > :not(caption) > * > * { padding: .75rem .9rem; vertical-align: middle; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hb-muted); font-weight: 700; background: #f8fafc; border-bottom-width: 1px; white-space: nowrap; }
.table-card { overflow: hidden; }
.table-card .table { margin-bottom: 0; }
.thumb-sm { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; background: #f2e9ea; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 2px; background: var(--hb-border); }
.timeline li { position: relative; padding-left: 2.1rem; padding-bottom: 1rem; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--hb-primary); }
.timeline li.internal::before { border-color: var(--hb-accent); }
.progress-thin { height: 8px; border-radius: 999px; }
.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 10px; }
.bar-chart .bar { flex: 1; background: linear-gradient(180deg, var(--hb-primary-light), var(--hb-primary)); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.bar-chart .bar:hover::after { content: attr(data-label); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--hb-ink); color: #fff; font-size: .7rem; padding: .15rem .4rem; border-radius: 4px; white-space: nowrap; margin-bottom: 4px; }
.masked { filter: blur(0); letter-spacing: .05em; color: var(--hb-muted); }
.whitespace-pre { white-space: pre-line; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: linear-gradient(135deg, #48101b 0%, #7a1d2b 45%, #9c2a3a 100%); }
.auth-card { width: 100%; max-width: 440px; border-radius: 20px; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--hb-muted); }
.empty-state i { font-size: 2.6rem; color: #cbb6b9; }
.dropdown-notifications { width: 340px; max-height: 420px; overflow-y: auto; }


/* ---------------------------------------------------------------
   Responsive refinements (phones first, then tablets)
   --------------------------------------------------------------- */
img, svg, iframe { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.min-w-0 { min-width: 0; }
.modal-content { border-radius: 18px; }

@media (max-width: 991.98px) {
    .hb-hero { --hb-hero-curve: 60px; padding: 2.25rem 0 calc(var(--hb-hero-curve) + 1.1rem); }
    .hb-search-overlap { margin-top: -4rem; }
    .hb-filter-card, .hb-sticky-enquiry { position: static; }
    .hb-gallery { grid-template-columns: 1fr; grid-template-rows: auto; max-height: none; }
    .hb-gallery img:not(.main) { display: none; }
    .hb-gallery .main { grid-row: auto; aspect-ratio: 16 / 10; }
}

@media (max-width: 767.98px) {
    body { font-size: .95rem; }
    .hb-section { padding: 2.5rem 0; }
    .hb-cta { padding: 1.75rem; border-radius: 16px; }
    .hb-search-card { padding: 1rem; border-radius: 14px; }
    .hb-page-head { padding: 1rem 0; }
    .hb-footer { padding: 2rem 0 1rem; }

    /* Panels: tighter chrome, roomier content */
    .hb-topbar { padding: .55rem .75rem; gap: .5rem !important; }
    .hb-content { padding: .75rem; }
    .card-header { padding: .75rem .85rem; font-size: .95rem; }
    .card-body { padding: .9rem; }

    /* Stat tiles: two per row without truncating numbers */
    .stat-card { padding: .8rem; gap: .65rem; border-radius: 12px; }
    .stat-card .icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 10px; }
    .stat-card .value { font-size: 1.25rem; }
    .stat-card .label { font-size: .75rem; }
    .stat-card .small { font-size: .7rem; }

    /* Tables stay readable and scroll instead of squeezing */
    .table > :not(caption) > * > * { padding: .55rem .6rem; }
    .table, .table .small { font-size: .85rem; }
    .table-responsive table { min-width: 640px; }

    /* A panel table sizes to its content and scrolls, instead of being crushed to fit.
       640px cannot hold the hotels table - a thumbnail column plus six more - so the hotel
       name broke one word per line and ran into the category beside it. Scoped to the panel:
       the public site has no table this wide below md. */
    .hb-main .table-responsive table { width: max-content; min-width: 100%; }
    .hb-main .table-responsive th, .hb-main .table-responsive td { white-space: nowrap; }
    /* The second line inside a cell may still wrap, within the width its column was given. */
    .hb-main .table-responsive td .small, .hb-main .table-responsive td .text-muted { white-space: normal; }
    .table-card .table-responsive { border-radius: 0 0 var(--hb-radius) var(--hb-radius); }

    /* Filter forms and action rows stack cleanly */
    .card-body > form.row > [class*="col-"] { margin-bottom: .25rem; }
    .btn-lg { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1rem; }
    .fs-3 { font-size: 1.4rem !important; }
    .fs-4 { font-size: 1.2rem !important; }
    .display-3 { font-size: 2.5rem; }

    .hb-map-frame { height: 220px; }
    .timeline li { padding-left: 1.8rem; }
    .dropdown-notifications { width: calc(100vw - 2rem); }
    .hotel-card .actions { grid-template-columns: 1fr auto auto; }
    .hotel-card .title { font-size: 1rem; }
}

@media (max-width: 575.98px) {
    /* A full-width card photo eats the screen, so it gets shorter on phones */
    .hotel-card .thumb { aspect-ratio: 16 / 10; }

    /* Never let a panel table or wide form push the page sideways */
    /* The guard belongs on the content, not on .hb-main: overflow-x on an ancestor makes it
       a scroll container, and the sticky topbar inside it then sticks to that instead of to
       the window - which is why it scrolled away on phones. */
    .hb-main { max-width: 100vw; }
    .hb-content { max-width: 100vw; overflow-x: hidden; }
    .hb-content > .card, .hb-content > .row { min-width: 0; }
    .btn-group-sm > .btn, .btn-sm { --bs-btn-padding-x: .5rem; }
    .badge { font-size: .7rem; }
    .hb-brand .logo { width: 32px; height: 32px; }
    .auth-card .card-body { padding: 1.5rem !important; }
    .hb-cta { padding: 1.25rem; }
    /* The viewer frame is shorter on a phone so the arrows and counter stay in view. */
    .hb-lightbox { --lb-height: 58vh; }
    .hb-lightbox .lb-frame { padding: 10px; }

    /* Action buttons in tables wrap instead of overflowing */
    .table .text-end.text-nowrap { white-space: normal !important; }
    .table .text-end form { display: inline-block; }
}

/* ---------- Owner reviews (home page) ---------- */
.hb-review { display: flex; flex-direction: column; background: var(--hb-card); border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius); box-shadow: var(--hb-shadow); padding: 1.5rem; margin: 0; position: relative; }
.hb-review::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--hb-radius) var(--hb-radius) 0 0;
    background: linear-gradient(90deg, var(--hb-accent-dark), var(--hb-gold-light) 50%, var(--hb-accent)); }
.hb-review-stars { color: var(--hb-gold-ink); letter-spacing: .1em; margin-bottom: .6rem; }
.hb-review-stars-off { color: #dcd0d1; }
.hb-review blockquote p { font-size: .95rem; }