/* ============================================================
   Hotelery — Luxury Hotel Design System
   Prefix: htl-  |  Fonts: Gilda Display (display, serif) / Jost (body) / Jost (labels, tracked)
   Visual direction ported from moonhotel: warm cream surfaces, navy
   headings, a soft gold accent for decoration + a teal accent for every
   interactive element, generous whitespace, soft-rounded/pill geometry
   (never theme-base's clipped-corner cut — see hotelery skill notes on
   why a palette swap on the same shapes doesn't count as a new direction).
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --htl-bg: #fbf9f6;
    --htl-surface: #f4f0e9;
    --htl-card: #ffffff;
    --htl-card-hover: #fbf9f6;
    --htl-border: rgba(0, 8, 52, 0.08);
    --htl-border-strong: rgba(0, 8, 52, 0.16);

    /* Brand — teal drives every interactive element (links, buttons, active
       nav state); gold is decorative only (dividers, icon accents, badges),
       matching moonhotel's actual two-accent system rather than flattening
       it to one variable. */
    --htl-accent: #1f8a7c;
    --htl-accent-ink: #ffffff;
    --htl-accent-soft: rgba(31, 138, 124, 0.10);
    --htl-accent-rgb: 31, 138, 124;
    --htl-gold: #ab8a62;
    --htl-gold-soft: rgba(171, 138, 98, 0.12);
    --htl-gold-rgb: 171, 138, 98;

    /* Text */
    --htl-text: #000834;
    --htl-heading: var(--htl-text);
    --htl-muted: #65676b;
    --htl-muted-2: #9a9ba3;
    --htl-white: #ffffff;
    --htl-breadcrumb: var(--htl-muted);
    --htl-breadcrumb-active: var(--htl-text);

    /* Icon colors — independent of the accent/gold/text colors those icons
       used to just borrow (inconsistently: some were --htl-text, others
       --htl-muted, --htl-accent, or --htl-gold, all coupled to a color
       meant for something else). Shortcode icons (contact/testimonials/
       gallery/etc, and interactive nav states like link-hover) intentionally
       keep tracking --htl-accent/--htl-gold as before — they're supposed to
       track the brand accent. These three are for icons whose color is
       otherwise "borrowed" from an unrelated setting. */
    --htl-icon-menu: var(--htl-text);
    --htl-icon-general: var(--htl-text);
    --htl-icon-room: var(--htl-gold);

    /* Footer — separate from the page's own text/bg tokens above so a
       custom footer color doesn't accidentally change the dark navy
       body-text color it used to be borrowed from (see .htl-footer). */
    --htl-footer-bg: var(--htl-text);
    --htl-footer-text: rgba(255, 255, 255, 0.68);
    --htl-footer-muted: rgba(255, 255, 255, 0.45);
    --htl-footer-heading: var(--htl-gold);

    /* Semantic */
    --htl-danger: #e5484d;
    --htl-warning: #d9932b;
    --htl-info: #3b82c4;
    --htl-success: var(--htl-accent);

    /* Type */
    --htl-font-display: 'Gilda Display', serif;
    --htl-font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
    --htl-font-mono: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Geometry — soft rounded, not theme-base's clipped-corner cut and not
       a full pill either (buttons used to be border-radius:999px — see
       --htl-radius-btn) */
    --htl-radius-sm: 8px;
    --htl-radius-md: 14px;
    --htl-radius-lg: 24px;
    --htl-radius-btn: 12px;
    --htl-header-height: 96px;
    --htl-container-max: 1240px;
    --htl-transition: all 0.2s ease;
}

/* ── 2. Reset & base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--htl-bg);
    color: var(--htl-text);
    font-family: var(--htl-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--htl-font-display);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--htl-heading);
    letter-spacing: 0;
}
p { margin: 0 0 16px; color: var(--htl-muted); }
code { font-family: var(--htl-font-mono); }
::selection { background: var(--htl-accent); color: var(--htl-accent-ink); }

.container {
    max-width: var(--htl-container-max);
    margin: 0 auto;
    padding: 0 20px;
}
@media (min-width: 992px) {
    .container { padding: 0 32px; }
}

.d-none { display: none !important; }
/* !important: equal-specificity component base styles declared later in this file
   (.htl-btn's own `display: inline-flex`, used by the header's Login/Book Now
   buttons) would otherwise win by source order, leaving them visible on mobile
   despite this utility class. Same reasoning as .d-lg-none below. */
.d-lg-flex, .d-lg-inline-flex { display: none !important; }
.w-100 { width: 100%; }
@media (min-width: 992px) {
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
    .d-lg-none { display: none !important; }
}
.pt-80 { padding-top: 80px; }
.pb-80 { padding-bottom: 80px; }
.mt-40 { margin-top: 40px; }

/* ── 3. Typography scale ──────────────────────────────────── */
.htl-display-1 { font-family: var(--htl-font-display); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 400; line-height: 1.05; letter-spacing: 0; color: var(--htl-heading); margin: 0; }
.htl-display-2 { font-family: var(--htl-font-display); font-size: clamp(2.1rem, 4vw, 3.25rem); font-weight: 400; line-height: 1.08; letter-spacing: 0; color: var(--htl-heading); margin: 0; }
.htl-h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.htl-h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.htl-h3 { font-size: 1.375rem; }
.htl-h4 { font-size: 1.125rem; }
/* moonhotel's kicker motif: a small dash-diamond-dash divider either side of
   an uppercase label, centered above the headline — not a plain left-aligned
   tag like theme-base's default overline. */
.htl-overline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--htl-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--htl-gold);
    margin: 0 0 14px;
}
.htl-overline::before, .htl-overline::after {
    content: '';
    width: 34px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='12' viewBox='0 0 34 12'%3E%3Cline x1='11' y1='6' x2='34' y2='6' stroke='%23ab8a62' stroke-width='1.4'/%3E%3Crect x='1' y='2' width='8' height='8' transform='rotate(45 5 6)' fill='none' stroke='%23ab8a62' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.htl-overline::after { transform: scaleX(-1); }
/* Gold reads fine over both the light surface and the dark navy photo
   overlays (hero, CTA banner) — no separate dark-mode variant needed. */
.htl-lead { font-size: 1.15rem; color: var(--htl-muted); line-height: 1.6; }
.htl-body-lg { font-size: 1.05rem; color: var(--htl-muted); }
.htl-body-base { font-size: 1rem; color: var(--htl-muted); }
.htl-body-sm { font-size: 0.875rem; color: var(--htl-muted-2); }
.htl-text-primary { color: var(--htl-accent); }
.htl-text-success { color: var(--htl-success); }
.htl-text-warning { color: var(--htl-warning); }
.htl-text-danger { color: var(--htl-danger); }
.htl-text-muted { color: var(--htl-muted); }
.htl-mono { font-family: var(--htl-font-mono); letter-spacing: 0.04em; }

.ck-content h1, .ck-content h2, .ck-content h3, .ck-content h4 { margin-top: 32px; }
.ck-content p { color: var(--htl-muted); }
.ck-content a { color: var(--htl-accent); text-decoration: underline; text-underline-offset: 3px; }
.ck-content img { border-radius: var(--htl-radius-md); margin: 16px 0; }
.ck-content blockquote {
    border-left: 2px solid var(--htl-gold);
    padding: 4px 0 4px 20px;
    margin: 24px 0;
    color: var(--htl-text);
    font-style: italic;
}
.ck-content code { background: var(--htl-surface); padding: 2px 6px; border-radius: 4px; font-size: 0.875em; }
.ck-content pre { background: var(--htl-surface); border: 1px solid var(--htl-border); padding: 16px; border-radius: var(--htl-radius-md); overflow-x: auto; }

/* ── 4. Header & nav ──────────────────────────────────────── */
/* Slim utility strip above the main header — phone/email left, address
   right. Only rendered when at least one is configured (see header.blade.php). */
.htl-topbar {
    /* .d-lg-flex (section 2 utility) handles show/hide by breakpoint —
       this rule only adds the topbar's own visuals on top of that. Same
       subtle gold-glow-over-navy treatment as the footer, for continuity
       between the two dark bands that bookend the page. */
    background:
        radial-gradient(circle at 85% 0%, rgba(var(--htl-gold-rgb), 0.16), transparent 60%),
        var(--htl-text);
    color: rgba(255, 255, 255, 0.85);
}
.htl-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 40px; font-size: 0.8125rem; }
.htl-topbar__contact { display: flex; align-items: center; gap: 24px; }
.htl-topbar__right { display: flex; align-items: center; gap: 20px; }
/* Text position (Theme Options / Quick Customizer > Header) — "between" is
   the original two-zone layout (contact left, address+switchers right).
   The other options group both zones into a single block and align it. */
.htl-topbar__inner[data-align="left"],
.htl-topbar__inner[data-align="center"],
.htl-topbar__inner[data-align="right"] { flex-wrap: wrap; gap: 8px 32px; }
.htl-topbar__inner[data-align="left"] { justify-content: flex-start; }
.htl-topbar__inner[data-align="center"] { justify-content: center; }
.htl-topbar__inner[data-align="right"] { justify-content: flex-end; }
.htl-topbar__item, .htl-topbar__address { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.htl-topbar__item svg, .htl-topbar__address svg { color: var(--htl-gold); flex-shrink: 0; }
.htl-topbar__item:hover { color: var(--htl-white); }

/* Three-column layout: nav left, logo centered, actions right — matches
   moonhotel's structure rather than theme-base's logo-left default. */
.htl-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 249, 246, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--htl-border);
}
.htl-header__inner {
    max-width: var(--htl-container-max);
    height: var(--htl-header-height);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
@media (min-width: 992px) {
    .htl-header__inner { padding: 0 32px; grid-template-columns: 1fr auto 1fr; display: grid; }
    .htl-header__logo { text-align: center; }
    .htl-header__actions { justify-content: flex-end; }

    /* Logo position (Theme Options / Quick Customizer > Header) — default
       (no attribute) is nav | logo | actions, logo centered as above. */
    .htl-header__inner[data-logo-pos="left"],
    .htl-header__inner[data-logo-pos="right"] { grid-template-columns: auto 1fr auto; }
    .htl-header__inner[data-logo-pos="left"] .htl-header__logo { order: -1; text-align: left; }
    .htl-header__inner[data-logo-pos="left"] .htl-nav { order: 0; }
    .htl-header__inner[data-logo-pos="left"] .htl-header__actions { order: 1; }
    .htl-header__inner[data-logo-pos="right"] .htl-nav { order: -1; }
    .htl-header__inner[data-logo-pos="right"] .htl-header__actions { order: 0; }
    .htl-header__inner[data-logo-pos="right"] .htl-header__logo { order: 1; text-align: right; }
}

.htl-logo-text { display: inline-flex; align-items: center; gap: 10px; }
.htl-logo-text__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--htl-gold);
    color: var(--htl-gold);
    font-family: var(--htl-font-display);
    font-weight: 400;
    font-size: 1rem;
}
.htl-logo-text__brand { font-family: var(--htl-font-display); font-weight: 400; font-size: 1.375rem; color: var(--htl-heading); }
.htl-logo { height: 36px; width: auto; }

.htl-nav__list { display: flex; align-items: center; gap: 6px; }
.htl-nav__item { position: relative; }
.htl-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-family: var(--htl-font-body);
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    color: var(--htl-text);
    border-radius: var(--htl-radius-sm);
    transition: var(--htl-transition);
}
.htl-nav__link:hover, .htl-nav__link.is-active { color: var(--htl-accent); }
/* moonhotel's active-item motif: a short gold dash grows in under the
   label, with a tiny diamond marker fading in at its center. */
.htl-nav__link::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 1px;
    background: var(--htl-gold);
    transform: translateX(-50%);
    transition: width 0.25s ease;
}
.htl-nav__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(var(--htl-gold-rgb), 0.85);
    transform: translateX(-50%) rotate(45deg) scale(0.5);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.htl-nav__link:hover::before, .htl-nav__link.is-active::before { width: 22px; }
.htl-nav__link:hover::after, .htl-nav__link.is-active::after { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1); }
.htl-nav__caret { transition: transform 0.15s ease; }
.htl-nav__item.has-children:hover .htl-nav__caret { transform: rotate(180deg); }
.htl-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--htl-card);
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-md);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: var(--htl-transition);
    box-shadow: 0 20px 44px rgba(0, 8, 52, 0.14);
}
.htl-nav__item.has-children:hover .htl-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(4px); }
.htl-nav__dropdown-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    font-size: 0.875rem;
    color: var(--htl-muted);
    border-radius: var(--htl-radius-sm);
    transition: var(--htl-transition);
}
/* Same gold-diamond marker language as the top-level nav's active/hover
   underline (.htl-nav__link::after) — fades in beside the label instead of
   growing under it, since a dropdown item has no room for an underline. */
.htl-nav__dropdown-link::before {
    content: '';
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border: 1px solid rgba(var(--htl-gold-rgb), 0.85);
    transform: rotate(45deg) scale(0.4);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.htl-nav__dropdown-link:hover, .htl-nav__dropdown-link.is-active { color: var(--htl-accent); background: var(--htl-accent-soft); }
.htl-nav__dropdown-link:hover::before, .htl-nav__dropdown-link.is-active::before { opacity: 1; transform: rotate(45deg) scale(1); }

.htl-header__actions { display: flex; align-items: center; gap: 12px; }
/* Header CTAs read as pills at the base .htl-btn padding (26px sides) next
   to short 1-2 word labels like "Login" — scoped down instead of shrinking
   .htl-btn globally, which every other button on the site still wants full-size. */
.htl-header__actions .htl-btn { padding: 10px 18px; font-size: 0.8125rem; }
.htl-btn__idx { font-family: var(--htl-font-mono); font-size: 0.6875rem; color: var(--htl-accent); opacity: 0.8; }

.htl-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--htl-border);
    border-radius: 50%;
    color: var(--htl-icon-menu);
}

/* ── 5. Mobile drawer ─────────────────────────────────────── */
.htl-mobile-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.htl-mobile-drawer.is-open { visibility: visible; }
.htl-mobile-drawer__overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.htl-mobile-drawer.is-open .htl-mobile-drawer__overlay { opacity: 1; }
.htl-mobile-drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 86vw);
    background: var(--htl-bg);
    border-left: 1px solid var(--htl-border);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.htl-mobile-drawer.is-open .htl-mobile-drawer__panel { transform: translateX(0); }
.htl-mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--htl-border); }
.htl-mobile-drawer__close { background: none; border: none; color: var(--htl-text); }
.htl-mobile-drawer__body { padding: 12px; overflow-y: auto; }

.htl-mobile-menu__link {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 12px;
    font-size: 0.95rem;
    color: var(--htl-text);
    border-bottom: 1px solid var(--htl-border);
}
.htl-mobile-menu__row { display: flex; align-items: center; }
.htl-mobile-menu__row .htl-mobile-menu__link { flex: 1; border-bottom: none; }
.htl-mobile-menu__item { border-bottom: 1px solid var(--htl-border); }
.htl-mobile-menu__item:last-child { border-bottom: none; }
.htl-mobile-menu__toggle { background: none; border: none; color: var(--htl-icon-menu); padding: 14px 8px; }
.htl-mobile-menu__sub { padding-left: 16px; }
.htl-mobile-menu__link.is-active { color: var(--htl-accent); }

/* ── 6. Footer ────────────────────────────────────────────── */
/* Dark navy "bookend" footer against the light body — a deliberate contrast
   pattern (not a palette-swapped copy of the header), matching the way
   moonhotel closes the page on a darker, quieter note than the rest of the
   site. Every color here is intentionally literal (white text, gold accent)
   rather than derived from the light-surface tokens above. */
.htl-footer {
    position: relative;
    background:
        radial-gradient(circle at 15% -10%, rgba(var(--htl-gold-rgb), 0.14), transparent 55%),
        var(--htl-footer-bg);
    margin-top: 80px;
    color: var(--htl-footer-text);
}
/* Thin gold accent line across the very top, fading out at both edges —
   ties the footer into the same gold-ornament brand language used in the
   hero/section overlines, instead of the plain flat rgba border this used
   to be. */
.htl-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--htl-gold-rgb), 0.5) 50%, transparent);
}
.htl-footer--light::before { background: linear-gradient(90deg, transparent, rgba(var(--htl-gold-rgb), 0.7) 50%, transparent); }
/* Pro feature — see functions/theme-options.php "Pro Features" section */
.htl-footer--light { background: var(--htl-bg); color: var(--htl-muted); }
.htl-footer--light .htl-footer__logo-text,
.htl-footer--light .htl-footer__col-title,
.htl-footer--light .htl-footer__copyright { color: var(--htl-text); }
.htl-footer--light .htl-footer__about,
.htl-footer--light .htl-footer__menu-link,
.htl-footer--light .htl-footer__contact-link,
.htl-footer--light .htl-footer__bottom-link { color: var(--htl-muted); }
.htl-footer--light .htl-footer__social-link { border-color: var(--htl-border-strong); color: var(--htl-muted); }
.htl-footer--light .htl-footer__bottom,
.htl-footer--light .htl-footer__main { border-color: var(--htl-border); }
.htl-footer__main { padding: 72px 0 40px; }
.htl-footer__grid { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 768px) {
    .htl-footer__grid { flex-direction: row; flex-wrap: wrap; gap: 32px 64px; }
    .htl-footer__brand { flex: 1 1 320px; max-width: 400px; }
    /* Editorial-column feel: a hairline divider between the brand block and
       the link columns, and between the link columns themselves, instead of
       gap alone doing all the separating work. */
    .htl-footer__col { flex: 0 0 160px; padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
    .htl-footer--light .htl-footer__col { border-color: var(--htl-border); }
}
.htl-footer__kicker { color: var(--htl-footer-heading); margin-bottom: 12px; }
.htl-footer__logo-text {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--htl-font-display);
    font-weight: 400;
    font-size: 1.625rem;
    letter-spacing: 0.01em;
    color: var(--htl-white);
    margin-bottom: 16px;
}
.htl-footer--light .htl-footer__logo-text { color: var(--htl-text); }
.htl-footer__about { color: var(--htl-footer-text); max-width: 340px; margin-bottom: 20px; line-height: 1.65; }
.htl-footer__social { display: flex; gap: 10px; }
.htl-footer__social-link {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: var(--htl-footer-text);
    transition: var(--htl-transition);
}
.htl-footer__social-link:hover { color: var(--htl-text); background: var(--htl-footer-heading); border-color: var(--htl-footer-heading); }
.htl-footer__col-title { font-family: var(--htl-font-body); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--htl-footer-heading); margin-bottom: 18px; }
.htl-footer__menu-list, .htl-footer__contact-list { display: flex; flex-direction: column; gap: 12px; }
.htl-footer__menu-link, .htl-footer__contact-link { color: var(--htl-footer-text); font-size: 0.9rem; transition: var(--htl-transition); }
.htl-footer__menu-link:hover, .htl-footer__contact-link:hover { color: var(--htl-footer-heading); }
.htl-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 22px 0; }
.htl-footer--light .htl-footer__bottom { border-color: var(--htl-border); }
.htl-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.htl-footer__copyright { color: var(--htl-footer-muted); font-size: 0.8125rem; margin: 0; display: inline-flex; align-items: center; gap: 10px; }
.htl-footer--light .htl-footer__copyright { color: var(--htl-muted-2); }
/* Small gold diamond bullet, same shape language as .htl-overline's
   ornament, used to separate the copyright line from the bottom-bar links
   instead of leaving them to just float apart via justify-content. */
.htl-footer__copyright::after {
    content: '';
    width: 5px; height: 5px;
    border: 1px solid rgba(var(--htl-gold-rgb), 0.6);
    transform: rotate(45deg);
    flex-shrink: 0;
}
@media (max-width: 767px) { .htl-footer__copyright::after { display: none; } }
.htl-footer__bottom-links { display: flex; align-items: center; gap: 20px; }
.htl-footer__bottom-link { color: var(--htl-footer-muted); font-size: 0.8125rem; }
.htl-footer__bottom-link:hover { color: var(--htl-white); }

/* Language + currency switchers — matched pair, both a no-JS <details>/
   <summary> dropdown (same zero-JS approach as the FAQ accordion). Can
   render in the footer (dark background, dropdown opens upward, default
   below) or the header actions row (.htl-switchers--light for a light
   background + .htl-switchers--down to open downward instead, since the
   header is always at the top of the page) — see partials/header.blade.php
   / footer.blade.php. */
.htl-switchers { display: flex; align-items: center; gap: 10px; }
.htl-switchers--down .htl-lang-switcher__menu,
.htl-switchers--down .htl-currency-switcher__menu { bottom: auto; top: calc(100% + 8px); }

.htl-lang-switcher, .htl-currency-switcher { position: relative; font-family: var(--htl-font-mono); font-size: 0.75rem; }
.htl-lang-switcher__toggle, .htl-currency-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: var(--htl-transition);
}
.htl-lang-switcher__toggle::-webkit-details-marker,
.htl-currency-switcher__toggle::-webkit-details-marker { display: none; }
.htl-lang-switcher__toggle:hover, .htl-currency-switcher__toggle:hover { border-color: var(--htl-accent); color: var(--htl-white); }
.htl-lang-switcher[open] .htl-lang-switcher__toggle,
.htl-currency-switcher[open] .htl-currency-switcher__toggle { border-color: var(--htl-accent); color: var(--htl-white); background: rgba(255, 255, 255, 0.06); }

/* .htl-switchers--light — header-actions context: light/blurred-white
   background (.htl-header), so the dark-on-transparent-white palette above
   (built for the dark footer/topbar) would be nearly invisible. */
.htl-switchers--light .htl-lang-switcher__toggle,
.htl-switchers--light .htl-currency-switcher__toggle { border-color: var(--htl-border-strong); color: var(--htl-text); }
.htl-switchers--light .htl-lang-switcher__toggle:hover,
.htl-switchers--light .htl-currency-switcher__toggle:hover { border-color: var(--htl-accent); color: var(--htl-accent); }
.htl-switchers--light .htl-lang-switcher[open] .htl-lang-switcher__toggle,
.htl-switchers--light .htl-currency-switcher[open] .htl-currency-switcher__toggle { border-color: var(--htl-accent); color: var(--htl-accent); background: var(--htl-accent-soft); }

/* Only the caret rotates on open — it used to be a bare `svg:last-child`
   descendant selector, which (with no direct-child combinator) matched ANY
   svg that's the last child of ITS OWN parent, anywhere inside the toggle —
   including the flag SVG nested in .htl-lang-switcher__flag, since that flag
   is the only/last child of its own <span>. Both the caret AND the flag were
   silently rotating 180° together, flipping the flag upside-down on open. */
.htl-lang-switcher[open] .htl-lang-switcher__caret,
.htl-currency-switcher[open] .htl-currency-switcher__caret { transform: rotate(180deg); }
/* ...but a downward-opening menu (.htl-switchers--down, header context)
   should point its caret DOWN when open instead — toward where the menu
   actually expands — so cancel the rotation above in that context. */
.htl-switchers--down .htl-lang-switcher[open] .htl-lang-switcher__caret,
.htl-switchers--down .htl-currency-switcher[open] .htl-currency-switcher__caret { transform: none; }
.htl-lang-switcher__caret, .htl-currency-switcher__caret { transition: var(--htl-transition); flex-shrink: 0; }
.htl-lang-switcher__flag { display: inline-flex; flex-shrink: 0; line-height: 0; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.htl-lang-switcher__item, .htl-currency-switcher__item { display: flex !important; align-items: center; gap: 8px; }
.htl-currency-switcher__symbol {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 14px; flex-shrink: 0; font-weight: 600; color: var(--htl-gold);
}

/* .htl-switchers--vertical (compact) — stacked short-code toggles, e.g. in
   the trailing space beside Book Now. Small square buttons instead of the
   full pill; no flag/name/chevron, just the code/symbol (see $compact in
   language-switcher.blade.php / currency-switcher.blade.php). */
.htl-switchers--vertical { flex-direction: column; gap: 4px; }
.htl-lang-switcher--compact .htl-lang-switcher__toggle,
.htl-currency-switcher--compact .htl-currency-switcher__toggle {
    padding: 4px 8px;
    min-width: 38px;
    justify-content: center;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.htl-lang-switcher__menu, .htl-currency-switcher__menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    /* Hugs its content instead of a fixed min-width — a menu with a single
       short item ("EUR") no longer sits inside a box padded out with dead
       whitespace to the right of the text. */
    width: max-content;
    max-width: 220px;
    background: var(--htl-card);
    border: 1px solid var(--htl-border-strong);
    border-radius: var(--htl-radius-md);
    box-shadow: 0 16px 32px rgba(0, 8, 52, 0.24);
    padding: 6px;
    /* Above .htl-header's z-index: 100 — this menu can open out of a
       sticky-positioned ancestor (header actions row), and needs to render
       on top of it, not stack behind it (see the header/topbar comment
       above the .htl-switchers rule). */
    z-index: 150;
}
.htl-lang-switcher__item, .htl-currency-switcher__item {
    display: block;
    padding: 8px 12px;
    border-radius: var(--htl-radius-sm);
    color: var(--htl-text);
    font-size: 0.8125rem;
    white-space: nowrap;
}
.htl-lang-switcher__item:hover, .htl-currency-switcher__item:hover { background: var(--htl-surface); color: var(--htl-accent); }

.htl-back-to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 90;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--htl-card);
    border: 1px solid var(--htl-border-strong);
    color: var(--htl-icon-general);
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(0, 8, 52, 0.12);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: var(--htl-transition);
}
.htl-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.htl-back-to-top:hover { border-color: var(--htl-accent); color: var(--htl-accent); }

/* ── 7. Buttons ───────────────────────────────────────────── */
/* Softly rounded, not theme-base's clipped-corner cut and not a full pill
   either — moonhotel's original shape was 999px, tightened to a fixed
   radius that stays roughly constant regardless of button height/padding. */
.htl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    font-family: var(--htl-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    border-radius: var(--htl-radius-btn);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.htl-btn:active { transform: translateY(0) !important; }
.htl-btn--primary {
    background: var(--htl-accent);
    color: var(--htl-accent-ink);
    box-shadow: 0 1px 2px rgba(0, 8, 52, 0.06), 0 10px 20px -10px rgba(var(--htl-accent-rgb), 0.65);
}
.htl-btn--primary:hover {
    background: var(--htl-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 8, 52, 0.08), 0 14px 24px -10px rgba(var(--htl-accent-rgb), 0.55);
}
.htl-btn--ghost {
    background: transparent;
    border-color: var(--htl-border-strong);
    color: var(--htl-text);
}
.htl-btn--ghost:hover {
    border-color: var(--htl-accent);
    color: var(--htl-accent);
    background: var(--htl-accent-soft);
    transform: translateY(-1px);
}
.htl-btn--outline { background: transparent; border-color: var(--htl-border-strong); color: var(--htl-text); }
.htl-btn--outline:hover { border-color: var(--htl-text); transform: translateY(-1px); }
/* For use over a dark photo background (hero, CTA banner) — theme-owned
   dark-bg literals, not derived from the light surface tokens. */
.htl-btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: var(--htl-white); }
.htl-btn--outline-light:hover { border-color: var(--htl-white); background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.htl-btn--link { background: none; border: none; padding: 0; border-radius: 0; color: var(--htl-accent); text-decoration: underline; }
.htl-btn--sm { padding: 9px 16px; font-size: 0.8125rem; }
.htl-btn--lg { padding: 16px 32px; font-size: 0.9375rem; }
.htl-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── 8. Badges ────────────────────────────────────────────── */
.htl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-family: var(--htl-font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--htl-card);
    color: var(--htl-text);
    border: 1px solid var(--htl-border);
}
.htl-badge--primary { background: var(--htl-accent-soft); color: var(--htl-accent); border-color: transparent; }
.htl-badge--success { background: var(--htl-accent-soft); color: var(--htl-success); border-color: transparent; }
.htl-badge--warning { background: rgba(217, 147, 43, 0.12); color: var(--htl-warning); border-color: transparent; }
.htl-badge--danger { background: rgba(229, 72, 77, 0.1); color: var(--htl-danger); border-color: transparent; }
.htl-badge--neutral { background: var(--htl-surface); color: var(--htl-muted); border-color: transparent; }
.htl-badge--outline { background: transparent; border: 1px solid currentColor; }
.htl-badge--gold { background: var(--htl-gold-soft); color: var(--htl-gold); border-color: transparent; }

/* ── 9. Forms ─────────────────────────────────────────────── */
/* min-width: 0 matters whenever this sits in a CSS Grid track (.htl-availability__grid,
   .htl-account-form__grid, etc.) — grid items default to min-width: auto, which respects
   the CONTENT's own min-content size. A native <input type="date">/<input type="number">
   has a fairly wide browser-drawn minimum (calendar icon, spinner arrows, digit slots),
   wider than a 2-up 1fr column can offer at typical card widths, so the field (and the
   whole grid row) blew out past the card's right edge instead of shrinking to fit. */
.htl-form-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.htl-label { font-size: 0.8125rem; font-weight: 500; color: var(--htl-text); }
.htl-label--required::after { content: ' *'; color: var(--htl-danger); }
.htl-input, .htl-select, .htl-textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--htl-card);
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-sm);
    color: var(--htl-text);
    font-family: var(--htl-font-body);
    font-size: 0.9375rem;
    transition: var(--htl-transition);
}
.htl-input::placeholder, .htl-textarea::placeholder { color: var(--htl-muted-2); }
.htl-input:focus, .htl-select:focus, .htl-textarea:focus { outline: none; border-color: var(--htl-accent); box-shadow: 0 0 0 3px var(--htl-accent-soft); }
.htl-input--error { border-color: var(--htl-danger); }
.htl-input:disabled { opacity: 0.5; cursor: not-allowed; }
.htl-textarea { min-height: 120px; resize: vertical; }
.htl-form-hint { font-size: 0.8125rem; color: var(--htl-muted-2); }
.htl-form-error { font-size: 0.8125rem; color: var(--htl-danger); }
.htl-input-group { display: flex; gap: 0; }
.htl-input-group .htl-input { border-radius: var(--htl-radius-sm) 0 0 var(--htl-radius-sm); }
.htl-input-group .htl-btn { border-radius: 0 var(--htl-radius-sm) var(--htl-radius-sm) 0; }
.htl-checkbox-label, .htl-radio-label { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--htl-text); cursor: pointer; }
.htl-checkbox, .htl-radio { width: 18px; height: 18px; accent-color: var(--htl-accent); }

/* ── 10. Cards ────────────────────────────────────────────── */
.htl-card {
    background: var(--htl-card);
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-md);
    box-shadow: 0 4px 20px rgba(0, 8, 52, 0.05);
    transition: var(--htl-transition);
    overflow: hidden;
}
.htl-card:hover { box-shadow: 0 20px 44px rgba(0, 8, 52, 0.1); transform: translateY(-3px); }
.htl-card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.htl-card__body { padding: 24px; }
.htl-card__label { font-family: var(--htl-font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--htl-gold); margin-bottom: 8px; }
.htl-card__title { font-size: 1.125rem; margin-bottom: 8px; }
.htl-card__title a:hover { color: var(--htl-accent); }
.htl-card__text { font-size: 0.9rem; color: var(--htl-muted); margin: 0; }
.htl-card__footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid var(--htl-border); }
.htl-card--horizontal { display: flex; }
.htl-card--horizontal .htl-card__image { width: 40%; aspect-ratio: 4/3; }
.htl-card--horizontal .htl-card__body { flex: 1; }

/* ── 10b. Room card — moonhotel's signature motif ─────────────
   A raised, white "icon strip" straddles the boundary between the photo
   and the description panel (translateY(-50%), its own box-shadow so it
   reads as floating), rather than the icons living flush inside the body
   like a plain feature list. This is the one component future room-listing
   shortcodes should reuse verbatim — built here, ahead of any shortcode,
   so the motif is already proven out in the style guide. */
.htl-room-card {
    background: var(--htl-card);
    border-radius: var(--htl-radius-md);
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0, 8, 52, 0.05);
    transition: var(--htl-transition);
}
.htl-room-card:hover { box-shadow: 0 24px 48px rgba(0, 8, 52, 0.12); transform: translateY(-3px); }
.htl-room-card__media { position: relative; border-radius: var(--htl-radius-md) var(--htl-radius-md) 0 0; overflow: hidden; aspect-ratio: 4/3; }
.htl-room-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.htl-room-card:hover .htl-room-card__media img { transform: scale(1.06); }
.htl-room-card__price {
    position: absolute; top: 16px; right: 16px;
    background: var(--htl-white); color: var(--htl-text);
    padding: 6px 14px; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 8, 52, 0.16);
}
.htl-room-card__price span { color: var(--htl-muted); font-weight: 400; font-size: 0.75rem; }
.htl-room-card__icons {
    display: flex;
    justify-content: center;
    gap: 22px;
    background: var(--htl-white);
    margin: -28px 16px 0;
    padding: 14px 12px;
    border-radius: var(--htl-radius-sm);
    box-shadow: 0 14px 30px rgba(0, 8, 52, 0.12);
    position: relative;
    z-index: 2;
}
.htl-room-card__icon { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--htl-muted); font-size: 0.6875rem; text-align: center; }
.htl-room-card__icon svg { color: var(--htl-icon-room); }
.htl-room-card__body { padding: 20px 24px 24px; text-align: center; }
.htl-room-card__title { font-size: 1.25rem; margin-bottom: 6px; }
.htl-room-card__title a:hover { color: var(--htl-accent); }
.htl-room-card__excerpt { font-size: 0.875rem; color: var(--htl-muted); margin-bottom: 18px; }
.htl-room-card__footer { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--htl-border); }

/* ── 11. Alerts ───────────────────────────────────────────── */
.alert, .htl-alert {
    padding: 14px 18px;
    border-radius: var(--htl-radius-sm);
    border: 1px solid var(--htl-border);
    font-size: 0.9rem;
}
.alert-success, .htl-alert--success { background: var(--htl-accent-soft); border-color: rgba(31, 138, 124, 0.3); color: var(--htl-success); }
.alert-danger, .htl-alert--danger { background: rgba(229, 72, 77, 0.08); border-color: rgba(229, 72, 77, 0.3); color: var(--htl-danger); }
.alert-warning, .htl-alert--warning { background: rgba(217, 147, 43, 0.08); border-color: rgba(217, 147, 43, 0.3); color: var(--htl-warning); }
.alert-info, .htl-alert--info { background: rgba(59, 130, 196, 0.08); border-color: rgba(59, 130, 196, 0.3); color: var(--htl-info); }

#alert-container { position: fixed; top: 90px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 10px; width: min(340px, 90vw); }
/* Layout only here — color/background live on .toast-alert.alert-{type} below.
   An ID-scoped wrapper rule must never carry the type-specific colors
   itself (it would out-specify a plain .alert-success/.alert-danger no
   matter the source order) — see hotelery skill notes. window.showAlert
   always sets BOTH classes together, e.g. class="toast-alert alert-success",
   which the compound selectors below target directly. */
#alert-container .toast-alert {
    padding: 14px 18px;
    border-radius: var(--htl-radius-sm);
    background: var(--htl-card);
    border: 1px solid var(--htl-border-strong);
    color: var(--htl-text);
    font-size: 0.875rem;
    box-shadow: 0 16px 40px rgba(0, 8, 52, 0.16);
    animation: htl-toast-in 0.25s ease;
}
#alert-container .toast-alert.alert-success { background: var(--htl-white); border-color: var(--htl-success); }
#alert-container .toast-alert.alert-danger { background: var(--htl-white); border-color: var(--htl-danger); }
#alert-container .toast-alert.alert-warning { background: var(--htl-white); border-color: var(--htl-warning); }
#alert-container .toast-alert.alert-info { background: var(--htl-white); border-color: var(--htl-info); }
@keyframes htl-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ── 12. Avatars ──────────────────────────────────────────── */
.htl-avatar { border-radius: 50%; object-fit: cover; border: 1px solid var(--htl-border); }
.htl-avatar--sm { width: 32px; height: 32px; }
.htl-avatar--md, .htl-avatar { width: 48px; height: 48px; }
.htl-avatar--lg { width: 64px; height: 64px; }
.htl-avatar--xl { width: 96px; height: 96px; }
.htl-avatar-group { display: flex; }
.htl-avatar-group .htl-avatar { margin-left: -12px; border: 2px solid var(--htl-bg); }
.htl-avatar-group .htl-avatar:first-child { margin-left: 0; }

/* ── 13. Tables ───────────────────────────────────────────── */
.htl-table-wrap { overflow-x: auto; border: 1px solid var(--htl-border); border-radius: var(--htl-radius-md); }
.htl-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.htl-table th {
    text-align: left;
    font-family: var(--htl-font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--htl-muted);
    padding: 12px 16px;
    background: var(--htl-surface);
    border-bottom: 1px solid var(--htl-border);
}
.htl-table td { padding: 14px 16px; border-bottom: 1px solid var(--htl-border); color: var(--htl-text); }
.htl-table tbody tr:last-child td { border-bottom: none; }
.htl-table tbody tr:hover { background: var(--htl-surface); }

/* ── 14. Stats ────────────────────────────────────────────── */
.htl-stat { padding: 20px; background: var(--htl-card); border: 1px solid var(--htl-border); border-radius: var(--htl-radius-md); }
.htl-stat__label { font-family: var(--htl-font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--htl-muted); margin-bottom: 10px; }
.htl-stat__value { font-family: var(--htl-font-display); font-size: 2rem; font-weight: 400; color: var(--htl-text); margin-bottom: 6px; }
.htl-stat__delta { font-size: 0.8125rem; margin: 0; }
.htl-stat__delta--up { color: var(--htl-success); }
.htl-stat__delta--down { color: var(--htl-danger); }
.htl-stat--center { text-align: center; }

/* ── 15. Tags ─────────────────────────────────────────────── */
.htl-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.8125rem;
    color: var(--htl-muted);
    background: var(--htl-card);
    border: 1px solid var(--htl-border);
    border-radius: 999px;
    transition: var(--htl-transition);
}
.htl-tag:hover, .htl-tag--active { color: var(--htl-accent-ink); background: var(--htl-accent); border-color: var(--htl-accent); }

/* ── 16. Tooltips ─────────────────────────────────────────── */
.htl-tooltip { position: relative; cursor: help; border-bottom: 1px dashed var(--htl-muted-2); }
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: var(--htl-text); color: var(--htl-white);
    font-size: 0.75rem; font-weight: 500; white-space: nowrap;
    padding: 6px 10px; border-radius: 6px;
    opacity: 0; pointer-events: none; transition: opacity 0.15s;
    z-index: 20;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── 17. Pagination ───────────────────────────────────────── */
.htl-pagination__list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.htl-pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 8px;
    font-family: var(--htl-font-body); font-size: 0.8125rem;
    border: 1px solid var(--htl-border);
    border-radius: 50%;
    color: var(--htl-muted);
    transition: var(--htl-transition);
}
.htl-pagination__link:hover { border-color: var(--htl-accent); color: var(--htl-accent); }
.htl-pagination__item--active .htl-pagination__link { background: var(--htl-accent); border-color: var(--htl-accent); color: var(--htl-accent-ink); }
.htl-pagination__item--disabled .htl-pagination__link { opacity: 0.35; pointer-events: none; }

/* ── 18. Breadcrumb ───────────────────────────────────────── */
.htl-breadcrumb__list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.htl-breadcrumb__item { display: flex; align-items: center; gap: 6px; font-family: var(--htl-font-body); font-size: 0.8125rem; }
.htl-breadcrumb__link { color: var(--htl-breadcrumb); }
.htl-breadcrumb__link:hover { color: var(--htl-accent); }
.htl-breadcrumb__sep { color: var(--htl-breadcrumb); opacity: 0.6; }
.htl-breadcrumb__item--active { color: var(--htl-breadcrumb-active); }

/* ── 19. Section header pattern ───────────────────────────── */
.htl-section-header { max-width: 640px; margin-bottom: 40px; }
.htl-section-header--center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.htl-section-header__title { margin-bottom: 12px; }

/* ── 20. Page hero pattern ────────────────────────────────── */
.htl-page-hero {
    padding: 64px 0 48px;
    background: var(--htl-surface);
    border-bottom: 1px solid var(--htl-border);
}
.htl-page-hero__title { margin-bottom: 16px; }
.htl-page-hero__content { position: relative; z-index: 1; }

/* Optional custom photo (Theme Options / Quick Customizer > Page Images) —
   same navy-overlay treatment as .htl-home-hero/.htl-cta-banner, just at
   this band's shorter height. Falls back to the plain surface-color band
   above whenever no image is configured for that page. */
.htl-page-hero--photo {
    position: relative;
    border-bottom: none;
    background-color: var(--htl-text);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.htl-page-hero--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 8, 52, 0.68);
}
.htl-page-hero--photo .htl-page-hero__title,
.htl-page-hero--photo .htl-overline { color: var(--htl-white); }
.htl-page-hero--photo .htl-breadcrumb__link,
.htl-page-hero--photo .htl-breadcrumb__sep,
.htl-page-hero--photo .htl-breadcrumb__item--active { color: rgba(255, 255, 255, 0.75); }
.htl-page-hero--photo .htl-breadcrumb__link:hover { color: var(--htl-white); }

/* Text alignment — configurable per page type (Theme Options / Quick
   Customizer > Page). Left is the default/original look (no modifier
   class needed for it). */
.htl-page-hero--align-center .htl-page-hero__content { text-align: center; }
.htl-page-hero--align-center .htl-overline { justify-content: center; }
.htl-page-hero--align-center .htl-breadcrumb__list { justify-content: center; }
.htl-page-hero--align-right .htl-page-hero__content { text-align: right; }
.htl-page-hero--align-right .htl-overline { justify-content: flex-end; }
.htl-page-hero--align-right .htl-breadcrumb__list { justify-content: flex-end; }

/* ── 21. Empty state ──────────────────────────────────────── */
.htl-empty-state { text-align: center; padding: 64px 24px; color: var(--htl-muted); }

/* ── 22. Content grid (page/post + sidebar) ───────────────── */
.htl-content-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 992px) { .htl-content-grid { grid-template-columns: 2.4fr 1fr; } }
.htl-content-grid__sidebar { display: flex; flex-direction: column; gap: 24px; }

/* primary_sidebar ships with zero widgets configured by default, so
   dynamic_sidebar() returns an empty string — the views detect that and
   both skip rendering <aside> AND add this modifier, so the reserved 1fr
   sidebar column (and its 48px gap) doesn't sit there as dead whitespace
   next to a 2-3 card grid. */
@media (min-width: 992px) { .htl-content-grid.htl-content-grid--no-sidebar { grid-template-columns: 1fr; } }

/* 230px (not 280px) so 3 cards fit per row next to the sidebar at typical
   desktop widths instead of 2 oversized ones — see also .htl-post-card__image
   below, a shorter aspect-ratio to match the narrower card width. */
.htl-post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.htl-post-card { background: var(--htl-card); border: 1px solid var(--htl-border); border-radius: var(--htl-radius-md); overflow: hidden; transition: var(--htl-transition); }
.htl-post-card:hover { border-color: var(--htl-border-strong); transform: translateY(-2px); }
.htl-post-card__image { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.htl-post-card__body { padding: 16px; }
.htl-post-card__categories { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.htl-post-card__category { font-family: var(--htl-font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--htl-gold); }
.htl-post-card__title { font-size: 1.0625rem; margin-bottom: 8px; }
.htl-post-card__title a:hover { color: var(--htl-accent); }
.htl-post-card__excerpt { font-size: 0.875rem; color: var(--htl-muted); margin-bottom: 12px; }
.htl-post-card__date { font-size: 0.75rem; color: var(--htl-muted-2); font-family: var(--htl-font-body); }

.htl-post__featured-image img { border-radius: var(--htl-radius-md); margin-bottom: 24px; }
.htl-post__meta { display: flex; gap: 20px; margin-bottom: 24px; }
.htl-post__date, .htl-post__author { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--htl-muted-2); font-family: var(--htl-font-body); }
.htl-post__tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }

/* ── 23. Error pages ──────────────────────────────────────── */
.htl-error-page { min-height: 60vh; display: flex; align-items: center; }
.htl-error-page__content { text-align: center; max-width: 480px; margin: 0 auto; padding: 80px 0; }
.htl-error-page__code { font-family: var(--htl-font-display); font-size: 5rem; font-weight: 400; color: var(--htl-gold); line-height: 1; display: block; margin-bottom: 16px; }
.htl-error-page__title { margin-bottom: 12px; }
.htl-error-page__message { margin-bottom: 28px; }

/* ── 24. Style guide layout ───────────────────────────────── */
.htl-styleguide { min-height: 100vh; }
.htl-styleguide__layout { display: grid; grid-template-columns: 1fr; max-width: 1400px; margin: 0 auto; align-items: start; }
@media (min-width: 992px) { .htl-styleguide__layout { grid-template-columns: 220px 1fr; } }
.htl-styleguide__sidebar { padding: 32px 24px; border-right: 1px solid var(--htl-border); display: none; }
@media (min-width: 992px) {
    .htl-styleguide__sidebar { display: block; position: sticky; top: calc(var(--htl-header-height) + 8px); max-height: calc(100vh - var(--htl-header-height) - 24px); overflow-y: auto; }
}
.htl-styleguide__nav-title { font-family: var(--htl-font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--htl-muted-2); margin: 20px 0 6px; }
.htl-styleguide__nav-title:first-child { margin-top: 0; }
.htl-styleguide__nav-link { display: block; font-size: 0.8125rem; color: var(--htl-muted); padding: 5px 10px; border-radius: 4px; transition: var(--htl-transition); }
.htl-styleguide__nav-link:hover, .htl-styleguide__nav-link.is-active { color: var(--htl-accent); background: var(--htl-accent-soft); }
.htl-styleguide__main { padding: 40px 20px 96px; }
@media (min-width: 992px) { .htl-styleguide__main { padding: 48px 48px 120px; } }
.htl-styleguide__section { margin-bottom: 64px; padding-top: 16px; }
.htl-styleguide__section-title { font-size: 1.375rem; margin-bottom: 4px; }
.htl-styleguide__section-desc { color: var(--htl-muted); font-size: 0.9375rem; margin-bottom: 24px; }
.htl-styleguide__section-desc code { background: var(--htl-card); padding: 2px 6px; border-radius: 4px; color: var(--htl-accent); }

.htl-sg-block { border: 1px solid var(--htl-border); border-radius: var(--htl-radius-md); overflow: hidden; margin-bottom: 16px; }
.htl-sg-block__label { font-family: var(--htl-font-mono); font-size: 0.6875rem; font-weight: 500; color: var(--htl-muted); padding: 8px 16px; background: var(--htl-surface); border-bottom: 1px solid var(--htl-border); letter-spacing: 0.04em; text-transform: uppercase; }
.htl-sg-block__preview { padding: 24px; background: var(--htl-bg); display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.htl-sg-block__preview--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.htl-sg-block__code { background: #050506; padding: 16px; overflow-x: auto; border-top: 1px solid var(--htl-border); }
.htl-sg-block__code pre { margin: 0; }
.htl-sg-block__code code { font-family: var(--htl-font-mono); font-size: 0.8125rem; color: #d4d4d4; background: none; padding: 0; }

.htl-sg-swatch__color { height: 64px; border-radius: var(--htl-radius-sm); margin-bottom: 8px; border: 1px solid var(--htl-border); }
.htl-sg-swatch__name { font-size: 0.8125rem; font-weight: 600; color: var(--htl-text); }
.htl-sg-swatch__value { font-size: 0.6875rem; color: var(--htl-muted-2); font-family: var(--htl-font-mono); }

/* ── 24b. Homepage sections (views/index.blade.php) ──────────────────
   Hand-written until home-banner / hotel-about / cta-banner shortcodes
   exist — real hotel copy and real photography so this reads as a
   finished homepage, not a builder placeholder, even though none of it
   is admin-editable yet. Each block below is a proto-pattern: whichever
   shortcode replaces it should keep the same classes. */

/* Hero — full-bleed photo (set via inline style in the Blade view) with
   a navy overlay matching moonhotel's own rgba(0,8,52,.65) — which is
   literally --htl-text at 65%, so the mood carries over intentionally. */
.htl-home-hero {
    position: relative;
    padding: 210px 0 170px;
    text-align: center;
    background-color: var(--htl-text);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.htl-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 8, 52, 0.7) 0%, rgba(0, 8, 52, 0.58) 55%, rgba(0, 8, 52, 0.8) 100%);
}

/* [welcome-hero-video] — video layer sits BEHIND .htl-home-hero::before's
   gradient overlay (z-index: 0 vs 1) so the legibility wash still applies
   over motion the same way it does over a static photo. <video> covers via
   object-fit; the YouTube <iframe> can't use object-fit, so it's
   oversized (300% of its own positioned wrapper, centered) instead — safe
   for a hero band that's never absurdly wide/short relative to its own
   height, unlike a viewport-relative version of the same trick. */
.htl-hero-video__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.htl-hero-video__youtube-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.htl-hero-video__media--youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    transform: translate(-50%, -50%);
    border: 0;
}
@media (prefers-reduced-motion: reduce) {
    .htl-hero-video__media, .htl-hero-video__youtube-wrap { display: none; }
}

/* [faq] — zero-JS <details>/<summary> accordion, same approach as
   partials/currency-switcher.blade.php. */
.htl-faq { padding: 96px 0; }
.htl-faq__head { max-width: 620px; margin: 0 auto 48px; text-align: center; }
.htl-faq__list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.htl-faq__item {
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-lg);
    background: var(--htl-card);
    padding: 4px 24px;
}
.htl-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--htl-heading);
}
.htl-faq__question::-webkit-details-marker { display: none; }
.htl-faq__chevron { flex-shrink: 0; transition: transform 0.2s; color: var(--htl-accent); }
.htl-faq__item[open] .htl-faq__chevron { transform: rotate(180deg); }
.htl-faq__answer { padding: 0 0 20px; color: var(--htl-body); }

/* [featured-in] — understated press/partner logo row: grayscale by
   default, full color on hover, so it reads as trust-building rather than
   competing with the theme's own accent color. */
.htl-featured-in { padding: 48px 0; }
.htl-featured-in__overline { margin-bottom: 28px; }
.htl-featured-in__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 56px; }
.htl-featured-in__logo { display: inline-flex; align-items: center; }
.htl-featured-in__logo img { max-height: 32px; width: auto; filter: grayscale(1); opacity: 0.55; transition: filter 0.2s, opacity 0.2s; }
.htl-featured-in__logo:hover img { filter: grayscale(0); opacity: 1; }
.htl-home-hero__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.htl-home-hero__inner h1, .htl-home-hero__inner .htl-lead { color: var(--htl-white); }
/* Defaults to the theme's own accent color (Quick Customizer > Colors) so it
   always matches whatever color pack is active, instead of a fixed value
   unrelated to it. The [welcome-hero*] shortcodes' own accent_color field
   can still override this per-instance (inline style wins over the var).
   The text-shadow is the legibility safety net over the dark photo overlay
   that used to come from hand-picking a lighter, fixed tint. */
.htl-home-hero__accent { color: var(--htl-accent); text-shadow: 0 2px 18px rgba(0, 8, 52, 0.55); }
.htl-home-hero__sub { max-width: 560px; margin: 0 auto 32px; opacity: 0.92; }
.htl-home-hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) { .htl-home-hero { padding: 150px 0 110px; } }

/* [welcome-hero-split] — asymmetric hero: copy on one side, a floating
   vertical booking-form card on the other. Reuses .htl-home-hero's own
   overlay/background technique, just without the centered/max-width
   constraints .htl-home-hero__inner applies. */
.htl-welcome-split {
    position: relative;
    padding: 140px 0;
    background-color: var(--htl-text);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.htl-welcome-split::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 8, 52, 0.7) 0%, rgba(0, 8, 52, 0.58) 55%, rgba(0, 8, 52, 0.8) 100%);
}
.htl-welcome-split__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 380px;
    gap: 56px;
    align-items: center;
}
.htl-welcome-split--form-left .htl-welcome-split__inner { grid-template-columns: 380px 1.2fr; }
.htl-welcome-split--form-left .htl-welcome-split__content { order: 2; }
.htl-welcome-split--form-left .htl-welcome-split__form { order: 1; }
.htl-welcome-split__content h1, .htl-welcome-split__content .htl-lead { color: var(--htl-white); }
.htl-welcome-split__content .htl-lead { max-width: 480px; margin: 16px 0 0; opacity: 0.92; }
.htl-welcome-split__form-card {
    background: var(--htl-card);
    border-radius: var(--htl-radius-lg);
    padding: 28px;
    box-shadow: 0 24px 48px rgba(0, 8, 52, 0.28);
}
.htl-welcome-split__form-title {
    font-family: var(--htl-font-display);
    font-size: 1.125rem;
    color: var(--htl-heading);
    margin: 0 0 16px;
}
@media (max-width: 991px) {
    .htl-welcome-split__inner,
    .htl-welcome-split--form-left .htl-welcome-split__inner { grid-template-columns: 1fr; gap: 32px; }
    .htl-welcome-split--form-left .htl-welcome-split__content,
    .htl-welcome-split--form-left .htl-welcome-split__form { order: initial; }
    .htl-welcome-split { padding: 110px 0 64px; text-align: center; }
    .htl-welcome-split__content .htl-lead { margin-left: auto; margin-right: auto; }
}

/* [welcome-hero-stacked] — same centered .htl-home-hero band as
   [welcome-hero], but the search widget is a narrow vertical card instead
   of the wide bar (.htl-home-hero__search). */
.htl-welcome-stacked__form { position: relative; z-index: 1; max-width: 400px; margin: 40px auto 0; }
.htl-welcome-stacked__form-card {
    background: var(--htl-card);
    border-radius: var(--htl-radius-lg);
    padding: 24px;
    box-shadow: 0 24px 48px rgba(0, 8, 52, 0.28);
}

/* [welcome-carousel] / [welcome-slider] — same navy-overlay photo-hero
   language as .htl-home-hero above, extended into a vanilla-JS carousel
   (see partials/shortcodes/_welcome-carousel-track.blade.php). */
.htl-carousel { position: relative; overflow: hidden; }
.htl-carousel__track { display: flex; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.htl-carousel__slide {
    flex: 0 0 100%;
    min-height: 480px;
    display: flex;
    align-items: center;
    position: relative;
    text-align: center;
    background: var(--slide-bg, none) center/cover, var(--htl-text);
}
.htl-carousel__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 8, 52, 0.7) 0%, rgba(0, 8, 52, 0.58) 55%, rgba(0, 8, 52, 0.8) 100%);
}
.htl-carousel__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.htl-carousel__inner h2 { color: var(--htl-white); margin: 16px 0; }
.htl-carousel__sub { color: var(--htl-white); opacity: 0.92; max-width: 560px; margin: 0 auto 28px; }
.htl-carousel__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (min-width: 992px) { .htl-carousel__slide { min-height: 560px; } }

.htl-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: var(--htl-white);
    transition: var(--htl-transition);
}
.htl-carousel__arrow:hover { background: var(--htl-accent); border-color: var(--htl-accent); color: var(--htl-accent-ink); }
.htl-carousel__arrow--prev { left: 24px; }
.htl-carousel__arrow--next { right: 24px; }
@media (max-width: 767px) { .htl-carousel__arrow { display: none; } }

.htl-carousel__dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; }
.htl-carousel__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); border: none; padding: 0; }
.htl-carousel__dot.is-active { background: var(--htl-white); width: 20px; border-radius: 4px; transition: var(--htl-transition); }

/* Icon strip — moonhotel's "hotel-about" pattern: kicker + heading + a row
   of icon/label amenity blocks. No plugin data, purely static content. */
.htl-icon-strip { padding: 96px 0; background: var(--htl-surface); }
.htl-icon-strip__head { max-width: 620px; margin: 0 auto 56px; text-align: center; }
.htl-icon-strip__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 32px 16px; }
.htl-icon-strip__item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: inherit; }
.htl-icon-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--htl-card);
    border: 1px solid var(--htl-border);
    color: var(--htl-accent);
    transition: var(--htl-transition);
}
.htl-icon-strip__item:hover .htl-icon-strip__icon { border-color: var(--htl-accent); transform: translateY(-3px); }
.htl-icon-strip__label { font-family: var(--htl-font-body); font-size: 0.9375rem; font-weight: 500; color: var(--htl-text); }

.htl-home-about { padding: 96px 0; }
.htl-home-about__inner { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 992px) { .htl-home-about__inner { grid-template-columns: 1fr 1fr; gap: 72px; } }
.htl-home-about__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--htl-radius-lg); }
.htl-home-about__list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.htl-home-about__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--htl-muted); font-size: 0.9375rem; }
.htl-home-about__list svg { color: var(--htl-accent); flex-shrink: 0; margin-top: 2px; }

/* Closing CTA banner — same photo-hero technique as .htl-home-hero, shorter
   and with a single message + one action. */
.htl-cta-banner {
    position: relative;
    padding: 120px 0;
    text-align: center;
    background-color: var(--htl-text);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.htl-cta-banner::before { content: ''; position: absolute; inset: 0; background: rgba(0, 8, 52, 0.72); }
.htl-cta-banner__inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.htl-cta-banner__inner h2 { color: var(--htl-white); margin-bottom: 16px; }
.htl-cta-banner__inner p { color: rgba(255, 255, 255, 0.85); margin-bottom: 32px; }
@media (max-width: 768px) { .htl-cta-banner { padding: 80px 0; } }

/* ── 14b. New shortcodes (2026-08-19 polish pass) ─────────────
   [hotel-story]/[hotel-highlights]/[cta-banner] reuse the section CSS
   above verbatim; only the new components below are genuinely new. */

/* [hotel-story] — layout switch, media on the right instead of left.
   Only meaningful at the >=992px breakpoint where .htl-home-about__inner
   actually becomes a 2-column grid. */
@media (min-width: 992px) {
    .htl-sc-hotel-story--reverse .htl-home-about__media { order: 2; }
}

/* [hotel-highlights] — icon sizing safeguard: hotelery_amenity_icon_svg()'s
   generated markup has no inline width/height (unlike this section's
   original hand-written icons), so size it here instead. */
.htl-icon-strip__icon svg { width: 26px; height: 26px; }

/* [special-offers] — promotional cards, same card/hover treatment as
   .htl-room-card but its own class so the two aren't coupled. */
.htl-offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 24px; }
.htl-offer-card {
    background: var(--htl-card);
    border-radius: var(--htl-radius-md);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 8, 52, 0.05);
    transition: var(--htl-transition);
}
.htl-offer-card:hover { box-shadow: 0 24px 48px rgba(0, 8, 52, 0.12); transform: translateY(-3px); }
.htl-offer-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.htl-offer-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.htl-offer-card:hover .htl-offer-card__media img { transform: scale(1.06); }
.htl-offer-card__price { position: absolute; top: 16px; right: 16px; }
.htl-offer-card__body { padding: 24px; }
.htl-offer-card__title { font-size: 1.25rem; margin-bottom: 8px; }
.htl-offer-card__desc { font-size: 0.9375rem; color: var(--htl-muted); margin-bottom: 18px; }

/* [hotel-numbers] — deliberately an open band, not a bordered card (that's
   .htl-stat's job, used for admin/style-guide KPIs) — bigger serif numeral
   in line with hotelery's own display type. */
.htl-numbers-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; text-align: center; }
.htl-numbers-row__item { display: flex; flex-direction: column; gap: 8px; }
.htl-numbers-row__value { font-family: var(--htl-font-display); font-size: 2.75rem; font-weight: 400; color: var(--htl-heading); line-height: 1; }
.htl-numbers-row__label { font-family: var(--htl-font-body); font-size: 0.9375rem; color: var(--htl-muted); }

/* [concierge-picks] — lighter-weight card than .htl-offer-card/.htl-room-card
   (no shadow/hover-lift), just photo + tag + short copy. */
.htl-concierge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.htl-concierge-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--htl-radius-md); overflow: hidden; }
.htl-concierge-card__media img { width: 100%; height: 100%; object-fit: cover; }
.htl-concierge-card__tag { position: absolute; bottom: 12px; left: 12px; }
.htl-concierge-card__body { padding: 16px 4px 0; }
.htl-concierge-card__title { font-size: 1.0625rem; margin-bottom: 6px; }
.htl-concierge-card__desc { font-size: 0.875rem; color: var(--htl-muted); }

/* [contact-info] — repeatable branch/location cards. */
.htl-contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.htl-contact-info-card {
    padding: 28px; background: var(--htl-card); border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-md);
}
.htl-contact-info-card__title { font-family: var(--htl-font-display); font-weight: 400; font-size: 1.25rem; color: var(--htl-text); margin-bottom: 16px; }
.htl-contact-info-card__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.htl-contact-info-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--htl-muted); }
.htl-contact-info-card__list svg { flex-shrink: 0; margin-top: 2px; color: var(--htl-accent); }
.htl-contact-info-card__list a { color: var(--htl-text); }
.htl-contact-info-card__list a:hover { color: var(--htl-accent); }
.htl-contact-info-card__sep { color: var(--htl-muted-2); }
.htl-contact-info-card__hours span { line-height: 1.5; }

/* [hotel-map] — location map embed, key-less by default (see functions/
   shortcodes.php for why). Height is set via --htl-map-height rather than a
   fixed class so the admin's own "Map height" field can control it without
   inline !important fights; a pasted custom embed code's own iframe still
   gets stretched to fill via the generic `iframe` selector below. */
.htl-map-embed {
    position: relative; width: 100%; height: var(--htl-map-height, 420px);
    border-radius: var(--htl-radius-md); overflow: hidden; background: var(--htl-surface);
}
.htl-map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.htl-map-address {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 16px; font-size: 0.9375rem; color: var(--htl-muted);
}
.htl-map-address svg { color: var(--htl-accent); flex-shrink: 0; }
.htl-map-address .htl-btn { margin-left: auto; }

/* ── 24c. Hotel plugin — Auth forms (login/register/forgot/reset) ────
   These render through a shared Bootstrap-classed template the `hotel`
   plugin owns (plugins/hotel::forms.auth) — themes can't override that
   Blade file, only restyle its output. Everything below is scoped to
   .auth-card (a class unique to this template in the whole install) so
   none of it leaks onto other pages. Bootstrap itself is NOT loaded on
   the frontend, so every property here is load-bearing, not a color tweak. */
.htl-auth { padding: 40px 0 64px; }
.htl-auth .container > .row.justify-content-center { display: flex; justify-content: center; }
.htl-auth .col-xl-6, .htl-auth [class*="col-"] { width: 100%; max-width: 440px; }
.auth-card {
    background: var(--htl-card) !important;
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-lg);
    box-shadow: 0 20px 50px rgba(0, 8, 52, 0.08);
    overflow: hidden;
}
.auth-card .card-header { background: var(--htl-card) !important; padding: 28px 28px 0; border: none; }
.auth-card .card-header h3 { font-family: var(--htl-font-display); font-weight: 400; font-size: 1.375rem; color: var(--htl-text); margin: 0 0 4px; }
.auth-card .card-header .text-muted { color: var(--htl-muted) !important; font-size: 0.8125rem; line-height: 1.4; }
.auth-card .card-header .bg-white { background: var(--htl-accent-soft) !important; border-radius: var(--htl-radius-sm); display: inline-flex; }
.auth-card .card-header svg { color: var(--htl-accent); }
.auth-card .card-body { padding: 16px 28px 28px; }
.auth-card form > div > div,
.auth-card [class*="col-"] > div { margin-bottom: 14px; }
.auth-card .form-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--htl-text); margin-bottom: 6px; }
.auth-card .position-relative { position: relative; }
/* The `hotel` plugin ships its own vendor/core/plugins/hotel/css/front-auth.css
   alongside this form, with a MORE specific selector for the exact same
   element (`.auth-card form .auth-input-icon`, 3 classes vs our 2) that sets
   a fixed `top: 3px; left: 1px` — silently winning over our centered
   positioning regardless of stylesheet order, since no !important was
   involved on either side. That's what pushed the icon up into the field's
   top-left corner instead of vertically centering it. Matched their selector
   exactly (same specificity) AND added !important on the properties that
   matter, so this can't silently regress again if that file ever changes. */
.auth-card form .auth-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%);
    color: var(--htl-muted-2);
    z-index: 2;
    pointer-events: none;
    background: transparent;
    border: 0;
}
.auth-card .auth-input-icon svg { width: 18px; height: 18px; }
.auth-card form .form-control {
    width: 100%;
    padding: 10px 14px 10px 42px !important;
    background: var(--htl-bg) !important;
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-sm);
    color: var(--htl-text);
    font-family: var(--htl-font-body);
    font-size: 0.9375rem;
    transition: var(--htl-transition);
}
.auth-card .form-control:focus { outline: none; border-color: var(--htl-accent); box-shadow: 0 0 0 3px var(--htl-accent-soft); }
.auth-card .invalid-feedback { display: block; font-size: 0.8125rem; color: var(--htl-danger); margin-top: 6px; }
.auth-card .form-check { display: flex; align-items: center; gap: 8px; margin: 0; }
.auth-card .form-check-input { width: 16px; height: 16px; margin: 0; accent-color: var(--htl-accent); }
.auth-card .form-check-label { font-size: 0.875rem; color: var(--htl-muted); }
.auth-card .row.g-0 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.auth-card .row.g-0 .col-6 { flex: 1; }
.auth-card .text-end { text-align: right; }
.auth-card .d-grid { display: grid; }
.auth-card .btn-auth-submit,
.auth-card .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 26px;
    background: var(--htl-accent);
    color: var(--htl-accent-ink);
    border: none;
    border-radius: var(--htl-radius-btn);
    font-family: var(--htl-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--htl-transition);
    cursor: pointer;
}
.auth-card .btn-auth-submit:hover { background: var(--htl-accent-hover); }
.auth-card a.text-decoration-underline { color: var(--htl-accent); text-decoration: underline; text-underline-offset: 3px; }
.auth-card .mt-3.text-center { margin-top: 20px !important; text-align: center; font-size: 0.875rem; color: var(--htl-muted); }

/* ── 24d. Hotel plugin — Customer account area ────────────────────── */
.htl-account { padding: 64px 0 96px; }
.htl-account__shell { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 992px) { .htl-account__shell { grid-template-columns: 280px 1fr; gap: 40px; } }

.htl-account__sidebar {
    background: var(--htl-card);
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-lg);
    padding: 32px 24px;
    position: sticky;
    top: calc(var(--htl-header-height) + 24px);
}
.htl-account__identity { text-align: center; margin-bottom: 24px; }
.htl-account__identity .htl-avatar { margin: 0 auto 14px; }
.htl-account__identity h3 { font-family: var(--htl-font-display); font-weight: 400; font-size: 1.25rem; color: var(--htl-text); margin-bottom: 2px; }
.htl-account__identity p { font-size: 0.8125rem; color: var(--htl-muted); }
.htl-account__nav { display: flex; flex-direction: column; gap: 2px; padding-top: 20px; border-top: 1px solid var(--htl-border); }
.htl-account__nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--htl-radius-sm);
    color: var(--htl-muted);
    font-size: 0.9375rem;
    transition: var(--htl-transition);
}
.htl-account__nav-link svg { flex-shrink: 0; opacity: 0.75; }
.htl-account__nav-link:hover { background: var(--htl-surface); color: var(--htl-text); }
.htl-account__nav-link.is-active { background: var(--htl-accent-soft); color: var(--htl-accent); }
.htl-account__nav-link.is-active svg { opacity: 1; }
.htl-account__logout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin-top: 16px;
    border-top: 1px solid var(--htl-border);
    padding-top: 20px;
    color: var(--htl-danger);
    font-size: 0.9375rem;
}
.htl-account__logout:hover { opacity: 0.75; }

.htl-account-panel {
    background: var(--htl-card);
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-lg);
    padding: 32px;
}
@media (min-width: 768px) { .htl-account-panel { padding: 40px; } }
.htl-account-panel__header { margin-bottom: 28px; }
.htl-account-panel__header h2 { margin-bottom: 8px; }
.htl-account-panel__header--split { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.htl-account-panel__heading-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.htl-account-inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* flex, not grid — this strip has an ODD, review-plugin-dependent item count
   (2 or 3: bookings + member-since, optionally + reviews). A grid with
   auto-fit/minmax computes a FIXED column count for the whole container, so
   a leftover last item on its own row left a dangling empty grid CELL next
   to it (the gap/background "seam" trick painted that empty cell as a
   visible blank box). Flex-wrap has no such column-track concept — a lone
   trailing item just sits in its own row with nothing beside it. */
.htl-account-statstrip {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--htl-border);
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-md);
    overflow: hidden;
    margin-bottom: 28px;
}
.htl-account-statstrip__item { background: var(--htl-surface); padding: 18px 20px; flex: 1 1 140px; }
.htl-account-statstrip__item span { display: block; font-size: 0.75rem; color: var(--htl-muted); margin-bottom: 6px; }
.htl-account-statstrip__item strong { font-family: var(--htl-font-display); font-size: 1.5rem; font-weight: 400; color: var(--htl-text); }

.htl-account-data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.htl-account-data-card { padding: 14px 16px; background: var(--htl-surface); border-radius: var(--htl-radius-sm); }
.htl-account-data-card.is-wide { grid-column: 1 / -1; }
.htl-account-data-card span { display: block; font-size: 0.75rem; color: var(--htl-muted); margin-bottom: 4px; }
.htl-account-data-card strong { font-size: 0.9375rem; color: var(--htl-text); font-weight: 500; }

.htl-account-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.htl-account-form__grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
@media (min-width: 640px) { .htl-account-form__grid { grid-template-columns: 1fr 1fr; } }
.htl-account-form__grid--single { max-width: 420px; }
.htl-account-form__grid .is-wide { grid-column: 1 / -1; }
.htl-account-form__actions { display: flex; }

.htl-account-empty { text-align: center; padding: 48px 24px; color: var(--htl-muted); }
.htl-account-empty h4 { color: var(--htl-text); margin-bottom: 8px; }

.htl-account-pagination { margin-top: 24px; }

/* Booking cards (order history) */
.htl-account-bookings { display: flex; flex-direction: column; gap: 16px; }
.htl-account-booking-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 20px;
    padding: 16px;
    background: var(--htl-surface);
    border-radius: var(--htl-radius-md);
}
@media (min-width: 768px) { .htl-account-booking-card { grid-template-columns: 120px 1fr auto; align-items: center; } }
.htl-account-booking-card__media img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--htl-radius-sm); }
.htl-account-booking-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.htl-account-booking-card__body h4 { font-size: 1.0625rem; margin-bottom: 8px; }
.htl-account-booking-card__body h4 a { color: var(--htl-text); }
.htl-account-booking-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8125rem; color: var(--htl-muted); }
.htl-account-booking-card__summary { display: flex; flex-direction: row; align-items: center; gap: 16px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--htl-border); }
@media (min-width: 768px) { .htl-account-booking-card__summary { flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 0; margin-top: 0; border-top: none; text-align: right; } }
.htl-account-booking-card__summary span { font-size: 0.75rem; color: var(--htl-muted); }
.htl-account-booking-card__summary strong { font-family: var(--htl-font-display); font-size: 1.25rem; font-weight: 400; color: var(--htl-text); }

/* Booking detail (order view) */
.htl-account-detail { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
@media (min-width: 992px) { .htl-account-detail { grid-template-columns: 1fr 320px; } }
.htl-account-subsection { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--htl-border); }
.htl-account-subsection:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.htl-account-subsection__header { margin-bottom: 16px; }
.htl-account-subsection__header span { display: block; font-size: 0.75rem; color: var(--htl-muted); margin-bottom: 4px; }
.htl-account-subsection__header h4 { font-size: 1.0625rem; }
.htl-account-subsection__header h4 a { color: var(--htl-text); }
.htl-account-ordered-list { display: flex; flex-direction: column; gap: 10px; }
.htl-account-ordered-list__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--htl-surface); border-radius: var(--htl-radius-sm); }
.htl-account-ordered-list__item div { display: flex; flex-direction: column; gap: 2px; }
.htl-account-ordered-list__item span { font-size: 0.8125rem; color: var(--htl-muted); }

/* Not sticky (unlike .htl-availability's live checkout widget, which stays
   sticky on purpose) — this only appears on the post-payment confirmation
   page (booking-information.blade.php), a page you read once and click
   through, not an active form where a persistent running total matters.
   Sticky here just pinned the panel + its action buttons (Download PDF,
   View My Bookings) in place while the taller left column (stay/guest/
   requests) scrolled underneath, clipping the buttons off the bottom of
   the viewport whenever the panel's own content was taller than the space
   left below the sticky offset. */
.htl-account-summary-panel { background: var(--htl-surface); border-radius: var(--htl-radius-md); padding: 24px; }
.htl-account-summary-list { display: flex; flex-direction: column; gap: 10px; }
.htl-account-summary-list__item { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; color: var(--htl-muted); }
.htl-account-summary-list__item strong { color: var(--htl-text); font-weight: 500; }
.htl-account-summary-list__item.is-total { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--htl-border); font-size: 1rem; }
.htl-account-summary-list__item.is-total strong { font-family: var(--htl-font-display); font-size: 1.375rem; font-weight: 400; color: var(--htl-accent); }
.htl-account-summary-list--secondary { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--htl-border); }

/* Reviews */
.htl-account-reviews { display: flex; flex-direction: column; gap: 16px; }
.htl-account-review-card { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 16px; background: var(--htl-surface); border-radius: var(--htl-radius-md); }
.htl-account-review-card__media img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--htl-radius-sm); }
.htl-account-review-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.htl-account-review-card__body h4 { font-size: 1.0625rem; margin-bottom: 6px; }
.htl-account-review-card__body h4 a { color: var(--htl-text); }
.htl-account-review-stars { display: flex; gap: 2px; color: var(--htl-gold); }

/* ── 24e. Hotel plugin — Rooms listing, room detail, availability, checkout ── */
.htl-room-listing { padding: 64px 0 96px; }
.htl-room-listing__count { color: var(--htl-muted); }
.htl-room-listing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px 24px; padding-top: 24px; }
.htl-room-listing__pagination { margin-top: 40px; }

.htl-room-detail { padding: 64px 0 96px; }
.htl-room-detail__layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 992px) { .htl-room-detail__layout { grid-template-columns: 1fr 360px; } }
.htl-room-detail__price { font-family: var(--htl-font-display); font-size: 1.75rem; font-weight: 400; color: var(--htl-accent); margin-bottom: 8px; }
.htl-room-detail__price span { font-family: var(--htl-font-body); font-size: 0.875rem; color: var(--htl-muted); font-weight: 400; }
.htl-room-detail__title { margin-bottom: 16px; }
.htl-room-detail__meta { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--htl-border); color: var(--htl-muted); font-size: 0.9375rem; }
.htl-room-detail__meta span { display: inline-flex; align-items: center; gap: 8px; }
.htl-room-detail__meta svg { color: var(--htl-icon-room); flex-shrink: 0; }
.htl-room-detail__section-title { margin: 40px 0 20px !important; }

/* ── Photo grid — partials/photo-grid.blade.php ───────────────
   A hero tile + up to 4 more, adapting to however many photos exist
   (1-5+), with a "+N more" overlay on the last tile past 5. Every preset
   below is a fixed, gapless layout for its own photo count — no empty
   grid cells at any count, unlike a single generic auto-fit grid would
   produce once the count drops below whatever the preset assumes. */
.htl-photo-grid { display: grid; gap: 8px; border-radius: var(--htl-radius-lg); overflow: hidden; margin-top: 4px; }
.htl-photo-grid__item { position: relative; display: block; padding: 0; margin: 0; border: none; background: var(--htl-surface); cursor: pointer; overflow: hidden; }
.htl-photo-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--htl-transition); }
.htl-photo-grid__item:hover img { transform: scale(1.05); }
.htl-photo-grid__more {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(0, 8, 52, 0.62);
    color: #fff;
    text-align: center;
}
.htl-photo-grid__more strong { font-family: var(--htl-font-display); font-size: 1.75rem; font-weight: 400; line-height: 1; }
.htl-photo-grid__more span { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; }

.htl-photo-grid--count-1 { grid-template-columns: 1fr; grid-auto-rows: 360px; }

.htl-photo-grid--count-2 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }

.htl-photo-grid--count-3 { grid-template-columns: 2fr 1fr; grid-auto-rows: 148px; }
.htl-photo-grid--count-3 .htl-photo-grid__item:first-child { grid-row: span 2; }

.htl-photo-grid--count-4 { grid-template-columns: 2fr 1fr; grid-auto-rows: 100px; }
.htl-photo-grid--count-4 .htl-photo-grid__item:first-child { grid-row: span 3; }

.htl-photo-grid--count-5 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; }
.htl-photo-grid--count-5 .htl-photo-grid__item:first-child { grid-column: span 2; grid-row: span 2; }

@media (max-width: 640px) {
    .htl-photo-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 140px !important; }
    .htl-photo-grid--count-1 { grid-auto-rows: 220px !important; }
    .htl-photo-grid__item:first-child { grid-column: span 2 !important; grid-row: span 1 !important; }
}

/* ── Full photo grid — partials/photo-grid-full.blade.php ─────
   Uncapped, uniform grid for the gallery detail page itself (browsing
   every photo IS the point there, unlike the room-detail teaser above). */
.htl-photo-grid-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.htl-photo-grid-full__item { display: block; padding: 0; margin: 0; border: none; background: var(--htl-surface); border-radius: var(--htl-radius-md); overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; }
.htl-photo-grid-full__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--htl-transition); }
.htl-photo-grid-full__item:hover img { transform: scale(1.05); }

/* ── Lightbox — partials/photo-lightbox.blade.php ─────────────
   One global instance per page, opened by initPhotoLightbox() (main.js)
   from either photo grid above. */
.htl-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 8, 52, 0.94); display: flex; align-items: center; justify-content: center; }
.htl-lightbox[hidden] { display: none; }
.htl-lightbox__stage { max-width: 90vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.htl-lightbox__stage img { max-width: 90vw; max-height: 82vh; object-fit: contain; border-radius: var(--htl-radius-md); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); }
.htl-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: var(--htl-transition);
}
.htl-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.htl-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: var(--htl-transition);
}
.htl-lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
.htl-lightbox__nav--prev { left: 20px; }
.htl-lightbox__nav--next { right: 20px; }
.htl-lightbox__counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); font-size: 0.8125rem; letter-spacing: 0.02em; }
@media (max-width: 640px) {
    .htl-lightbox__nav { width: 40px; height: 40px; }
    .htl-lightbox__nav--prev { left: 8px; }
    .htl-lightbox__nav--next { right: 8px; }
    .htl-lightbox__close { top: 12px; right: 12px; }
}

/* ── Gallery detail — views/gallery.blade.php ─────────────────── */
.htl-gallery-detail { padding: 56px 0 96px; }
.htl-gallery-detail__description { max-width: 760px; margin: 0 auto 32px; }

.htl-room-amenities { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.htl-room-amenities__item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--htl-surface); border-radius: var(--htl-radius-sm); font-size: 0.9375rem; color: var(--htl-text); }
.htl-room-amenities__item img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
/* Curated icon (hotelery_amenity_icon_svg()) for common amenity names —
   recolorable via --htl-icon-room, unlike an admin-uploaded icon image
   (.img above), which is an arbitrary raster/vector file with baked-in
   colors no CSS variable can reach. */
.htl-room-amenities__item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--htl-icon-room); }

/* Check-availability sidebar widget (room detail page) */
.htl-availability { position: sticky; top: calc(var(--htl-header-height) + 24px); background: var(--htl-card); border: 1px solid var(--htl-border); border-radius: var(--htl-radius-lg); padding: 28px; }
.htl-availability__price { font-family: var(--htl-font-display); font-size: 1.5rem; font-weight: 400; color: var(--htl-text); margin-bottom: 16px; }
.htl-availability__price span { font-family: var(--htl-font-body); font-size: 0.875rem; color: var(--htl-muted); font-weight: 400; }
.htl-availability__badge { margin-bottom: 16px; }
.htl-availability .htl-btn { width: 100%; margin-top: 4px; }

/* Related rooms */
.htl-related-rooms { padding: 0 0 96px; }
.htl-related-rooms__head { margin-bottom: 32px; }

/* Booking checkout */
.htl-checkout { padding: 64px 0 96px; }
.htl-checkout__layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 992px) { .htl-checkout__layout { grid-template-columns: 1fr 360px; } }
.htl-checkout__section { margin-bottom: 36px; }
.htl-checkout__section-title { margin-bottom: 20px !important; }
.htl-checkout__services { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.htl-checkout__service { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--htl-surface); border-radius: var(--htl-radius-sm); }
.htl-checkout__service em { font-style: normal; color: var(--htl-muted); font-size: 0.8125rem; white-space: nowrap; }
/* .htl-checkout__service-main is a row (checkbox + info), but
   .htl-checkout__service-info is its own column so the price-type badge
   stacks BELOW the name instead of sitting inline next to it at the same
   size/weight — .htl-checkout__service-type's own `display: block` had no
   effect on its own here, since a flex item's box type doesn't make it
   wrap onto a new line inside a *row* flex container; it needs an actual
   column container around just the name+badge, not the checkbox too. */
.htl-checkout__service-main { display: flex; align-items: flex-start; gap: 10px; }
.htl-checkout__service-info { display: flex; flex-direction: column; }
.htl-checkout__service-type {
    display: block;
    font-size: 0.625rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--htl-gold);
    margin-top: 2px;
}

.htl-checkout-summary { position: sticky; top: calc(var(--htl-header-height) + 24px); background: var(--htl-card); border: 1px solid var(--htl-border); border-radius: var(--htl-radius-lg); padding: 24px; }
.htl-checkout-summary__room { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--htl-border); }
.htl-checkout-summary__room img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--htl-radius-sm); flex-shrink: 0; }
.htl-checkout-summary__room strong { display: block; font-size: 1rem; color: var(--htl-text); }

/* Detailed line-item breakdown — collapsed by default to keep the summary's
   simple Price/Discount/Tax/Total view uncluttered; expands into a
   room-plus-each-selected-extra list, rebuilt client-side on every
   service/food change (see initCheckoutLivePricing() in main.js). */
.htl-checkout-summary__breakdown { margin-bottom: 16px; }
.htl-checkout-summary__breakdown-toggle {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0;
    font-family: var(--htl-font-body); font-size: 0.8125rem; color: var(--htl-accent);
    cursor: pointer;
}
.htl-checkout-summary__breakdown-toggle svg { transition: var(--htl-transition); }
.htl-checkout-summary__breakdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.htl-checkout-summary__breakdown-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 12px; padding: 12px 14px;
    background: var(--htl-surface); border-radius: var(--htl-radius-sm);
}
/* The [hidden] attribute's UA-stylesheet display:none was losing to the
   unconditional `display: flex` above (a class selector beats the
   attribute-default at equal-or-lower specificity) — the toggle button's
   JS (setting/clearing .hidden) was working the whole time, it just had
   no visible effect, so the list always rendered open regardless. */
.htl-checkout-summary__breakdown-list[hidden] { display: none; }
.htl-checkout-summary__breakdown-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.8125rem; }
.htl-checkout-summary__breakdown-item span { color: var(--htl-muted); }
.htl-checkout-summary__breakdown-item strong { color: var(--htl-text); font-weight: 500; white-space: nowrap; }
.htl-checkout-summary__breakdown-item-type { font-size: 0.75rem; color: var(--htl-muted-2); }

/* ── "Continue your booking" header widget + shared countdown ─────────── */
.htl-booking-intent { display: inline-flex; align-items: center; }
.htl-booking-intent__link {
    flex-direction: column; align-items: flex-start; gap: 2px;
    line-height: 1.25; padding-top: 8px; padding-bottom: 8px;
}
.htl-booking-intent__text { display: flex; flex-direction: column; }
.htl-booking-intent__text small { font-weight: 400; opacity: 0.85; font-size: 0.75em; }
.htl-booking-timer {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.75rem; font-variant-numeric: tabular-nums; opacity: 0.9;
}
.htl-checkout-timer-note {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 16px; padding: 10px 14px;
    background: var(--htl-surface); border-radius: var(--htl-radius-sm);
    font-size: 0.8125rem; color: var(--htl-muted);
}
.htl-checkout-timer-note .htl-booking-timer { color: var(--htl-text); font-weight: 600; opacity: 1; }
/* Same class-vs-[hidden] specificity trap as .htl-checkout-summary__breakdown-list
   above — .htl-btn's own `display: inline-flex` (and .htl-booking-intent's
   `display: inline-flex`) would otherwise win over [hidden]'s UA default. */
.htl-booking-intent [hidden] { display: none; }
@media (max-width: 991.98px) {
    .htl-booking-intent--mobile { display: flex; }
    .htl-booking-intent--mobile .htl-booking-intent__link { align-items: center; }
}

/* ── Step-by-step checkout wizard (booking-style-2.blade.php) ─────────── */
.htl-checkout-wizard__steps {
    display: flex; flex-wrap: wrap; gap: 8px 4px;
    list-style: none; margin: 0 0 32px; padding: 0;
}
.htl-checkout-wizard__step {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 6px; border-radius: 999px;
    background: var(--htl-surface); color: var(--htl-muted);
    font-size: 0.8125rem; cursor: default; transition: var(--htl-transition);
}
.htl-checkout-wizard__step.is-complete { cursor: pointer; }
.htl-checkout-wizard__step-num {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--htl-border); color: var(--htl-text);
    font-size: 0.6875rem; font-weight: 600; flex-shrink: 0;
}
.htl-checkout-wizard__step.is-active { background: var(--htl-accent); color: #fff; }
.htl-checkout-wizard__step.is-active .htl-checkout-wizard__step-num { background: rgba(255, 255, 255, 0.25); color: #fff; }
.htl-checkout-wizard__step.is-complete .htl-checkout-wizard__step-num { background: var(--htl-accent); color: #fff; }
.htl-checkout-wizard__panel[hidden] { display: none; }
.htl-checkout-wizard__hint { color: var(--htl-muted); margin-top: -8px; margin-bottom: 20px; }
.htl-checkout-wizard__nav {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--htl-border);
}
.htl-checkout-wizard__nav-right { display: flex; align-items: center; gap: 16px; }

/* Shared bridge for plugin-rendered Bootstrap-classed fragments this theme
   can't override directly (hotel plugin's coupon form, payment method
   list — plugins/hotel::coupons.partials.form, PaymentMethods::render()).
   Bootstrap itself isn't loaded on the frontend, so these are load-bearing,
   same reasoning as .auth-card above. */
.htl-bootstrap-bridge .form-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--htl-text); margin-bottom: 8px; }
.htl-bootstrap-bridge .form-control {
    width: 100%;
    padding: 12px 14px;
    background: var(--htl-bg);
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-sm);
    color: var(--htl-text);
    font-family: var(--htl-font-body);
    font-size: 0.9375rem;
}
.htl-bootstrap-bridge .form-control:focus { outline: none; border-color: var(--htl-accent); box-shadow: 0 0 0 3px var(--htl-accent-soft); }
.htl-bootstrap-bridge .input-group { display: flex; gap: 8px; }
.htl-bootstrap-bridge .btn,
.htl-bootstrap-bridge .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--htl-accent);
    color: var(--htl-accent-ink);
    border: none;
    border-radius: var(--htl-radius-btn);
    font-family: var(--htl-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
/* Coupon apply/remove round-trips through PHP's file-session lock (the
   apply POST and the price-recalc GET right after it share a session ID,
   so the second request queues behind the first) — a few seconds is normal,
   not stuck, but with no loading affordance a plain disabled button reads
   as unresponsive. Reuses the same spin keyframes as the Quick Customizer's
   own Save button (htl-qc-spin, defined further down). */
.htl-bootstrap-bridge .btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.htl-bootstrap-bridge .btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: htl-qc-spin 0.6s linear infinite;
}
.htl-bootstrap-bridge .btn-link.btn-loading { color: transparent !important; }
.htl-bootstrap-bridge .btn-link.btn-loading::after { border-color: rgba(31, 138, 124, 0.3); border-top-color: var(--htl-accent); }

.htl-bootstrap-bridge .btn-link {
    background: none;
    border: none;
    color: var(--htl-accent);
    text-decoration: underline;
    padding: 0;
    border-radius: 0;
    font-family: var(--htl-font-body);
    font-size: 0.875rem;
    cursor: pointer;
}
.htl-bootstrap-bridge .card { background: var(--htl-surface); border: 1px solid var(--htl-border); border-radius: var(--htl-radius-md); }
.htl-bootstrap-bridge .card-body { padding: 20px; }
.htl-bootstrap-bridge .list-group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.htl-bootstrap-bridge .list-group-item { padding: 14px 16px; background: var(--htl-surface); border-radius: var(--htl-radius-sm); border: 1px solid var(--htl-border); }

/* Generic Bootstrap utility classes the coupon form (coupons.partials.form)
   relies on — nothing in the bridge covered these before, so the applied-
   coupon success state (.alert-success, .d-flex, .w-100, ...) rendered with
   no layout/spacing/color at all, just raw unstyled text. Scoped to the
   bridge on purpose, not added as bare global utility classes. */
.htl-bootstrap-bridge .d-flex { display: flex; }
.htl-bootstrap-bridge .align-items-center { align-items: center; }
.htl-bootstrap-bridge .justify-content-between { justify-content: space-between; }
.htl-bootstrap-bridge .form-group { margin-bottom: 0; }
.htl-bootstrap-bridge .mb-0 { margin-bottom: 0; }
.htl-bootstrap-bridge .mb-20 { margin-bottom: 20px; }
.htl-bootstrap-bridge .mt-3 { margin-top: 16px; }
.htl-bootstrap-bridge .ps-0 { padding-left: 0; }
.htl-bootstrap-bridge .w-100 { width: 100%; }
.htl-bootstrap-bridge .text-decoration-none { text-decoration: none; }
.htl-bootstrap-bridge .icon { width: 16px; height: 16px; flex-shrink: 0; }
.htl-bootstrap-bridge .alert {
    padding: 12px 16px;
    border-radius: var(--htl-radius-sm);
    font-size: 0.875rem;
}
.htl-bootstrap-bridge .alert-success { background: rgba(31, 138, 124, 0.12); color: var(--htl-accent); border: 1px solid rgba(31, 138, 124, 0.3); }
.htl-bootstrap-bridge .remove-coupon-code { color: var(--htl-danger); }

/* ── 24f. Plugin-integration shortcodes (contact-form, gallery,
   plugin-testimonials, newsletter-form) — see functions/shortcodes.php. ── */
.htl-sc-contact-form { padding: 80px 0; }
.htl-sc-contact-form__card {
    max-width: 640px; margin: 0 auto;
    background: var(--htl-card); border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-lg);
    box-shadow: 0 20px 50px rgba(0, 8, 52, 0.08);
    padding: 40px;
}
.htl-sc-contact-form__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid var(--htl-gold); color: var(--htl-gold);
    margin-bottom: 16px;
}
.htl-sc-contact-form__card > .htl-body-base { color: var(--htl-muted); margin-bottom: 28px; }
.htl-sc-contact-form__form { display: flex; flex-direction: column; gap: 18px; }
.htl-sc-contact-form__form .htl-btn { align-self: flex-start; }

.htl-sc-newsletter { padding: 64px 0; background: var(--htl-surface); }
.htl-sc-newsletter__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.htl-sc-newsletter__inner .htl-h2 { margin-bottom: 8px; }
.htl-sc-newsletter__inner .htl-body-base { color: var(--htl-muted); }
.htl-sc-newsletter__form { margin-top: 20px; max-width: 440px; margin-left: auto; margin-right: auto; }
.htl-sc-newsletter__form .htl-input { flex: 1; }

.htl-sc-testimonials { padding: 80px 0; }
.htl-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.htl-testimonial-card {
    padding: 28px; background: var(--htl-card); border: 1px solid var(--htl-border);
    border-top: 2px solid var(--htl-gold);
    border-radius: var(--htl-radius-lg);
    box-shadow: 0 12px 32px rgba(0, 8, 52, 0.06);
}
.htl-testimonial-card__mark { font-family: var(--htl-font-display); font-size: 2.5rem; line-height: 1; color: var(--htl-gold); margin-bottom: 4px; }
.htl-testimonial-card__quote { margin: 0 0 20px; font-size: 0.9375rem; color: var(--htl-text); font-style: normal; }
.htl-testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.htl-testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.htl-testimonial-card__name { display: block; font-weight: 600; color: var(--htl-text); font-size: 0.875rem; }
.htl-testimonial-card__role { display: block; font-size: 0.75rem; color: var(--htl-muted-2); }

.htl-sc-gallery { padding: 80px 0; }
.htl-sc-gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 24px; }
.htl-sc-gallery__item { display: block; color: inherit; }
.htl-sc-gallery__media { aspect-ratio: 4/3; overflow: hidden; }
.htl-sc-gallery__media .htl-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.htl-sc-gallery__item:hover .htl-card__image { transform: scale(1.06); }
.htl-sc-gallery__item:hover .htl-card__title { color: var(--htl-accent); }

/* ── 25. Quick Customizer (admin-only, opens from Botble's own frontend
   admin bar — see the AdminBar::registerLink() call in functions.php).
   Deliberately self-contained: every color/font below is a hardcoded
   literal, NEVER a *style* token like var(--htl-accent) or var(--htl-font-*).
   This panel edits those live, so it must never depend on them itself —
   otherwise changing the accent color would also repaint the tool editing
   it. Same reason it gets its own "htl-qc-" prefix, kept separate from the
   theme's own "htl-" component classes. Copy this whole block verbatim
   into any hotelery fork — nothing here should be restyled per theme. */

.htl-qc-overlay {
    position: fixed;
    inset: 0;
    z-index: 310;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.htl-qc-overlay.is-open { opacity: 1; visibility: visible; }

.htl-qc-panel {
    position: fixed;
    /* top:40px, not 0 — Botble's frontend admin bar (#admin_bar) is fixed,
       40px tall, z-index:1049. This panel only ever renders for the same
       logged-in admins who see that bar, so hardcoding 40px is safe —
       don't fight its z-index, just start below it. */
    top: 40px;
    left: 0;
    /* Not a hardcoded bottom either — the cookie-consent bar (.site-notice)
       is fixed with z-index:99999 (always on top by design), so Save/Reset
       must never sit under it while it's showing. A fixed guess (was 70px)
       is wrong as often as not: wasted dead space once the banner's
       dismissed (the common case), or wrong height if the banner wraps to
       more lines. JS (initQuickCustomizerBottomOffset in main.js) measures
       the real banner and sets this inline; 0 here is just the fallback
       before that runs / if the banner isn't present at all. */
    bottom: 0;
    z-index: 320;
    width: min(340px, 88vw);
    background: #18181b;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    color: #f4f4f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 16px 0 40px rgba(0, 0, 0, 0.35);
}
.htl-qc-panel.is-open { transform: translateX(0); }

.htl-qc-panel__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.htl-qc-panel__heading { flex: 1; min-width: 0; }
.htl-qc-panel__title { font-size: 0.9375rem; font-weight: 600; margin: 0; }
.htl-qc-panel__subtitle { font-size: 0.75rem; color: #a1a1aa; margin: 2px 0 0; }
.htl-qc-panel__back,
.htl-qc-panel__close {
    background: none;
    border: none;
    color: #a1a1aa;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.htl-qc-panel__back:hover,
.htl-qc-panel__close:hover { background: rgba(255, 255, 255, 0.08); color: #f4f4f5; }

.htl-qc-panel__body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
/* On the top-level menu screen there's nothing to save yet — hide the
   status/footer entirely instead of leaving a big dead gap above a pinned-
   bottom Reset/Save that has nothing to act on. */
.htl-qc-panel.is-menu-view .htl-qc-panel__body { flex: 0 1 auto; }
.htl-qc-panel.is-menu-view .htl-qc-status,
.htl-qc-panel.is-menu-view .htl-qc-panel__footer { display: none; }

.htl-qc-menu { padding-top: 8px; }
.htl-qc-menu__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #f4f4f5;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.htl-qc-menu__item:hover { color: #a5a5fa; }
.htl-qc-menu__item svg { color: #71717a; flex-shrink: 0; }

.htl-qc-section { padding-top: 4px; }

.htl-qc-field { margin-bottom: 20px; }
.htl-qc-field__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #d4d4d8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.htl-qc-field__hint { font-size: 0.75rem; color: #71717a; margin: 6px 0 0; }

.htl-qc-color-row { display: flex; align-items: center; gap: 10px; }
.htl-qc-color-row input[type="color"] {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}
.htl-qc-input {
    width: 100%;
    padding: 10px 12px;
    background: #0f0f11;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #f4f4f5;
    font-size: 0.875rem;
    font-family: inherit;
}
.htl-qc-input:focus { outline: none; border-color: #6d6df6; }

/* Per-page-type "sub category" groups inside the Page section (rooms/
   category/tag/post/blog-listing/CMS pages/homepage) — a heading + divider
   per group, so a long field list still reads as organized sections rather
   than one undifferentiated scroll. */
.htl-qc-group { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.htl-qc-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.htl-qc-group__title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #a5a5fa;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
}
.htl-qc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Color pack picker — Styles section, above the individual color fields. */
.htl-qc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.htl-qc-preset {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #0f0f11;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #d4d4d8;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.htl-qc-preset:hover, .htl-qc-preset:focus-visible { border-color: #6d6df6; background: #16161a; outline: none; }
.htl-qc-preset__dots { display: inline-flex; }
.htl-qc-preset__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #0f0f11;
    margin-left: -6px;
}
.htl-qc-preset__dot:first-child { margin-left: 0; }

.htl-qc-panel__footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.htl-qc-btn {
    flex: 1;
    padding: 11px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: #f4f4f5;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.htl-qc-btn:hover { background: rgba(255, 255, 255, 0.06); }
.htl-qc-btn--primary { background: #6d6df6; border-color: #6d6df6; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.htl-qc-btn--primary:hover { background: #5a5af0; }
.htl-qc-btn[disabled] { opacity: 0.5; pointer-events: none; }
.htl-qc-btn__spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: htl-qc-spin 0.6s linear infinite;
}
.htl-qc-btn--primary.is-loading .htl-qc-btn__spinner { display: inline-block; }
@keyframes htl-qc-spin { to { transform: rotate(360deg); } }

.htl-qc-status {
    font-size: 0.75rem;
    padding: 0 20px 12px;
    color: #a1a1aa;
    flex-shrink: 0;
}
.htl-qc-status.is-success { color: #4ade80; }
.htl-qc-status.is-error { color: #f87171; }

/* ── Botble admin design tokens (--bb-*) — media.css (Botble's own plugin
   stylesheet, loaded as-is) is written entirely in terms of these custom
   properties (bg-surface, border-color, primary, muted, etc.), which are
   normally defined once in the admin layout's core.css (Tabler theme). The
   frontend never loads that, so every var(--bb-*) in media.css was resolving
   to nothing — media items, checkboxes, hover states, dropdowns inside the
   picker all rendered unstyled/invisible. These are our own dark-theme
   values, not an attempt to match Tabler's exact palette. */
#rv_media_modal {
    --bb-bg-surface: #1c1c1f;
    --bb-bg-surface-secondary: #232326;
    --bb-bg-surface-tertiary: #2c2c31;
    --bb-body-bg: #18181b;
    --bb-body-color: #e4e4e7;
    --bb-border-color: rgba(255, 255, 255, 0.14);
    --bb-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bb-border-radius: 8px;
    --bb-border-radius-sm: 6px;
    --bb-border-style: solid;
    --bb-border-width: 1px;
    --bb-box-shadow-input: none;
    --bb-danger-rgb: 239, 68, 68;
    --bb-muted: #a1a1aa;
    --bb-muted-rgb: 161, 161, 170;
    --bb-primary: #6d6df6;
    --bb-primary-rgb: 109, 109, 246;
    --bb-secondary-color: #a1a1aa;
    --bb-success: #4ade80;
    --bb-success-rgb: 74, 222, 128;
    --bb-text-opacity: 1;
    --bb-white: #ffffff;
}
/* The actual root cause of "the picker's Insert button is unreachable, even
   by scrolling": admin core.css sets `#rv_media_body{display:flex;
   flex-direction:column; min-height:550px}` (ID selector — from the admin
   layout, not media.css, so easy to miss). #rv_media_body's only child,
   .rv-media-container, has flex-grow:1, so it ALWAYS fills the parent's full
   height — meaning that hardcoded 550px floor wins regardless of what height
   we give .rv-media-container directly (tried that first: even an
   `!important` 999px on .rv-media-container itself measurably did nothing,
   which is what led here — flex-grow distributes the PARENT's space, it
   doesn't defer to a grown item's own height). On any viewport shorter than
   ~650-700px this forces the picker taller than the screen, and scrolling
   can't reach the footer because of the .modal-dialog-centered issue above.
   550px is a reasonable admin-panel assumption (that context always has
   room); it isn't a safe assumption for a frontend modal. Drop the floor and
   let its own max-height (already calc(100vh - 6rem)) do the real work. */
#rv_media_modal #rv_media_body { min-height: 0 !important; }
/* Same admin-context assumption, one level deeper: media.css's own
   `.rv-media-main{height:400px}` is a hardcoded floor for the item-grid row,
   on top of its `flex-grow:1`. Fine when the surrounding chrome always has
   room (admin panel); on a short frontend viewport it's the same problem as
   #rv_media_body above — a fixed floor that doesn't shrink. flex-grow alone
   (still active) sizes it correctly once it isn't fighting a fixed height. */
#rv_media_modal .rv-media-main { height: auto !important; min-height: 0 !important; }
/* List-view row selection checkbox (`.custom-checkbox`, a Tabler admin
   component) shows its checked STATE fine — `input:checked + span{background
   -color:var(--bb-primary)}` only needs the token we already defined — but
   the checkmark glyph itself is drawn via `span:before{content:"\f00c";
   font-family:"Font Awesome 6 Free"}`, a private-use codepoint that's only a
   checkmark when Font Awesome's icon font supplies the glyph for it. Without
   that font (deliberately not loaded here) the box just goes solid-color
   with no mark inside — selection barely reads as "selected" compared to
   grid/tiles view's own checkmark badge. Same fix as the social icons:
   swap the FA-dependent content for a plain Unicode check, no font needed. */
#rv_media_modal .custom-checkbox span::before { content: "\2713"; font-family: inherit; }
/* Extra clarity beyond just the checkbox itself — grid/tiles view marks a
   selected item with a whole badge overlay, so match that level of "yes,
   this one" obviousness in list view too with a row highlight. */
#rv_media_modal li.rv-media-list-title:has(.custom-checkbox input:checked) {
    background: var(--bb-primary);
    background: color-mix(in srgb, var(--bb-primary) 14%, transparent);
}

/* ── Logo section: Botble's own <x-core::form.image> component, direct-upload
   mode (renders outside admin context). Class names below are Botble's own
   (image-box, preview-image-wrapper, image-box-actions, image-picker-*) —
   not ours to rename, just reskinned to fit the dark panel. */
.htl-qc-section [class^="image-box"] { display: flex; align-items: flex-start; gap: 12px; }
.htl-qc-section .preview-image-wrapper { width: 64px; flex-shrink: 0; margin: 0; }
.htl-qc-section .preview-image-inner { position: relative; }
.htl-qc-section .image-box-actions {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #0f0f11;
}
.htl-qc-section .preview-image { width: 100%; height: 100%; object-fit: contain; }
.htl-qc-section .image-picker-remove-button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f87171;
    color: #fff;
    border: none;
    font-size: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.htl-qc-section a[data-bb-toggle="image-picker-choose"]:not(.image-box-actions) {
    color: #6d6df6;
    font-size: 0.8125rem;
    text-decoration: underline;
}

/* ── Bootstrap modal shell for #rv_media_modal — hotelery loads bootstrap
   .bundle.min.js (behavior only, no CSS) to drive Botble's media picker, so
   without these the modal's JS runs fine ($.fn.modal, "show" class, the
   media.list AJAX call — all work) but nothing is visually positioned: no
   centering, no backdrop, no z-index, it just renders inline in the page
   flow. This is the standard Bootstrap 5 modal ruleset (not Botble's admin
   skin), scoped to .modal/.modal-dialog/.modal-content only so it can't leak
   into the rest of the theme. */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.modal.show { display: block; }
.modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    pointer-events: none;
}
/* Deliberately NOT flex + align-items:center here (the textbook Bootstrap
   "centered modal" recipe). When the dialog is taller than the viewport —
   routine for the media picker, whose content height is itself dynamic —
   flexbox centering clips the overflow asymmetrically above and below the
   centered box, and the portion pushed above the fold is NOT reachable by
   scrolling: scrollTop can only ever go from 0 to (scrollHeight-clientHeight),
   so if centering has already shifted content upward past y=0, no scroll
   position brings it back. Confirmed by measurement: on a short viewport,
   scrolling to the maximum possible scrollTop still left the picker's Insert
   button ~64px below the visible area — permanently unreachable, not just
   inconvenient. Plain top-margin centering (inherited from .modal-dialog's
   own `margin: 1.75rem auto` above) has no such ceiling: it degrades to
   "starts near the top, scroll down for the rest," which is always reachable.
   No min-height either, for the same reason: forcing the dialog to near-
   viewport height even when its content doesn't need it cascades downward —
   Botble's own .rv-media-container has `min-height: 100%`, so an artificially
   tall dialog makes THAT stretch too, which was making the picker taller
   than necessary rather than shorter. Let it size to its actual content. */
.modal-lg, .modal-xl { max-width: 900px; }
.modal-md { max-width: 640px; }
/* Botble's own class (from its Tabler-based admin CSS, not part of stock
   Bootstrap) for the media picker specifically — without sizing it here it
   silently falls back to the plain .modal-dialog default above (500px),
   squeezing the picker's sidebar+grid layout into a narrow column. */
.modal-full { max-width: min(94vw, 1360px); }
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #18181b;
    color: #e4e4e7;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    outline: 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-title { font-size: 1rem; font-weight: 600; margin: 0; }
.modal-body { position: relative; flex: 1 1 auto; padding: 20px; }
.modal-body.p-0 { padding: 0; }
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}
.modal-backdrop.fade { opacity: 0; transition: opacity 0.15s linear; }
.modal-backdrop.show { opacity: 0.6; }
.modal-open { overflow: hidden; }
.btn-close {
    background: transparent;
    border: 0;
    color: #a1a1aa;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.btn-close:hover { color: #e4e4e7; }

/* ── Bootstrap-lite: buttons, dropdowns, cards, list-groups, forms, and the
   handful of utility classes Botble's media-modal markup leans on (d-flex,
   gap-*, position-*, w-100, etc.). Scoped inside #rv_media_modal so it can
   never leak into the rest of the theme. Bootstrap's JS (bundle.min.js,
   already loaded) drives .show/.dropdown-menu state and Popper positioning —
   this only supplies the visuals it expects to find. Reused by every
   Quick Customizer fork; see hotelery skill Step 7b. */
#rv_media_modal .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #232326;
    color: #e4e4e7;
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}
#rv_media_modal .btn:hover { background: #2c2c31; }
#rv_media_modal .btn.disabled,
#rv_media_modal .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Botble's own `.btn-loading` class (applied by our Botble.showButtonLoading
   shim, see quick-customizer.blade.php) normally gets a spinner overlay from
   admin core.css. Minimal stand-in: dim + a small spinner, reusing the same
   spin keyframes as the Quick Customizer's own Save button. */
#rv_media_modal .btn-loading { position: relative; color: transparent !important; pointer-events: none; }
#rv_media_modal .btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: htl-qc-spin 0.6s linear infinite;
}
#rv_media_modal .btn-icon { padding: 6px; width: 34px; height: 34px; }
#rv_media_modal .btn-primary { background: #6d6df6; border-color: #6d6df6; color: #fff; }
#rv_media_modal .btn-primary:hover { background: #5b5bf0; }
#rv_media_modal .btn-danger { background: #ef4444; border-color: #ef4444; color: #fff; }
#rv_media_modal .btn-danger:hover { background: #dc2626; }
#rv_media_modal .btn-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#rv_media_modal .btn-group { display: inline-flex; }
#rv_media_modal .btn-group .btn { border-radius: 0; }
#rv_media_modal .btn-group .btn:first-child { border-radius: 8px 0 0 8px; }
#rv_media_modal .btn-group .btn:last-child { border-radius: 0 8px 8px 0; }
#rv_media_modal .btn-group .btn.active { background: #6d6df6; border-color: #6d6df6; color: #fff; }

#rv_media_modal .dropdown { position: relative; }
#rv_media_modal .dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1060;
    min-width: 200px;
    margin-top: 4px;
    padding: 6px;
    background: #232326;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    list-style: none;
}
#rv_media_modal .dropdown-menu.show { display: block; }
#rv_media_modal .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #e4e4e7;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}
#rv_media_modal .dropdown-item:hover,
#rv_media_modal .dropdown-item.active { background: rgba(255, 255, 255, 0.08); }
#rv_media_modal .dropdown-item-icon { flex-shrink: 0; }

#rv_media_modal .card {
    background: #1c1c1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
#rv_media_modal .card-header { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#rv_media_modal .list-group { list-style: none; margin: 0; padding: 0; }
#rv_media_modal .list-group-flush .list-group-item { border-radius: 0; }
#rv_media_modal .list-group-header {
    padding: 10px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #a1a1aa;
}
#rv_media_modal .list-group-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #e4e4e7;
    font-size: 0.8125rem;
    text-decoration: none;
    border-radius: 6px;
}
#rv_media_modal .list-group-item-action:hover,
#rv_media_modal .list-group-item.active { background: rgba(255, 255, 255, 0.08); }

#rv_media_modal .form-control,
#rv_media_modal .form-select {
    background: #0f0f11;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #e4e4e7;
    padding: 6px 10px;
    font-size: 0.8125rem;
}
#rv_media_modal .input-group { display: flex; }
#rv_media_modal .input-group .form-control { border-radius: 8px 0 0 8px; flex: 1; }
#rv_media_modal .input-group .btn { border-radius: 0 8px 8px 0; }
#rv_media_modal .form-check { display: flex; align-items: center; gap: 8px; }
#rv_media_modal .form-hint { display: block; font-size: 0.75rem; color: #a1a1aa; margin-top: 4px; }
#rv_media_modal .form-label { display: block; font-size: 0.8125rem; margin-bottom: 6px; }

#rv_media_modal .rv-media-grid ul { list-style: none; margin: 0; padding: 0; }
/* media.css's own .no-items is a deliberately-designed light-admin element:
   a big white circle (`background:#fff; border-radius:50% !important;
   width/height:400px`) meant to read as an inviting "click to upload"
   bullseye against Tabler's white admin background. Against our dark theme
   it's just a jarring white blob. Some of those properties (border-radius)
   carry !important in the source, so plain specificity isn't enough to beat
   them — matched here where needed. Left `position:absolute;
   transform:translate(-50%,-50%)` from media.css alone (still wanted, just
   centers the empty-state message). */
#rv_media_modal .no-items {
    /* No !important on display — Botble's own base rule already sets
       display:flex by default; !important here was the bug: it also beat
       `.rv-media-items.has-items .no-items{display:none!important}` (the
       rule media.js relies on to hide this message once real items exist —
       3 classes, would've out-specificized a plain `.no-items` override even
       without !important, but the !important made it unconditional), so the
       "empty" message stayed visible over real results, e.g. after switching
       to list view. The has-items hide rule below restores that behavior
       while still keeping our restyle for the genuinely-empty case. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 1px dashed rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    color: #a1a1aa;
    text-align: center;
    cursor: default !important;
}
#rv_media_modal .no-items svg { color: #71717a; }
#rv_media_modal .no-items h3 { font-size: 0.9375rem; font-weight: 600; color: #e4e4e7; margin: 4px 0 0; }
#rv_media_modal .no-items p { font-size: 0.8125rem; color: #a1a1aa; margin: 0; }
#rv_media_modal .rv-media-items.has-items .no-items { display: none !important; }
#rv_media_modal .spinner-border {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.2em solid rgba(255, 255, 255, 0.25);
    border-right-color: transparent;
    border-radius: 50%;
    animation: rv-spin 0.75s linear infinite;
}
#rv_media_modal .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.15em; }
@keyframes rv-spin { to { transform: rotate(360deg); } }
#rv_media_modal .offcanvas { display: none; }
#rv_media_modal .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

#rv_media_modal .d-flex { display: flex; }
#rv_media_modal .d-inline-flex { display: inline-flex; }
#rv_media_modal .d-none { display: none; }
#rv_media_modal .d-block { display: block; }
/* .d-md-none was undefined — the mobile-only offcanvas-sidebar toggle button
   (`.btn.d-flex.d-md-none`) had `.offcanvas` itself correctly hidden (rule
   above) but nothing hid the *button that opens it*, so a dead hamburger
   icon sat there on desktop with nothing behind it to toggle. Bootstrap's
   real `md` breakpoint is 768px. */
@media (min-width: 768px) {
    #rv_media_modal .d-md-none { display: none !important; }
}
/* media.css's own .breadcrumb has no layout rules at all (relies on
   Bootstrap's, which we don't load) — a bare browser default <ol> stacks
   each <li> as its own block, one per line. */
#rv_media_modal .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    color: #a1a1aa;
}
#rv_media_modal .breadcrumb > li { display: flex; align-items: center; gap: 4px; }
#rv_media_modal .breadcrumb > li a { color: #a1a1aa; }
#rv_media_modal .breadcrumb > li a:hover { color: #e4e4e7; }
#rv_media_modal .breadcrumb > li + li::before {
    content: "/";
    color: #52525b;
    margin-right: 4px;
}
#rv_media_modal .flex-wrap { flex-wrap: wrap; }
#rv_media_modal .flex-column { flex-direction: column; }
#rv_media_modal .align-items-center { align-items: center; }
#rv_media_modal .align-items-start { align-items: flex-start; }
#rv_media_modal .justify-content-between { justify-content: space-between; }
#rv_media_modal .justify-content-center { justify-content: center; }
#rv_media_modal .justify-content-end { justify-content: flex-end; }
#rv_media_modal .gap-1 { gap: 4px; }
#rv_media_modal .gap-2 { gap: 8px; }
#rv_media_modal .gap-3 { gap: 12px; }
#rv_media_modal .w-100 { width: 100%; }
#rv_media_modal .h-100 { height: 100%; }
#rv_media_modal .position-relative { position: relative; }
#rv_media_modal .position-absolute { position: absolute; }
#rv_media_modal .position-fixed { position: fixed; }
#rv_media_modal .top-0 { top: 0; }
#rv_media_modal .top-50 { top: 50%; }
#rv_media_modal .end-0 { right: 0; }
#rv_media_modal .start-0 { left: 0; }
#rv_media_modal .bottom-0 { bottom: 0; }
#rv_media_modal .mb-0 { margin-bottom: 0; }
#rv_media_modal .mb-2 { margin-bottom: 8px; }
#rv_media_modal .mb-3 { margin-bottom: 12px; }
#rv_media_modal .mt-2 { margin-top: 8px; }
#rv_media_modal .mt-3 { margin-top: 12px; }
#rv_media_modal .ms-2 { margin-left: 8px; }
#rv_media_modal .p-0 { padding: 0; }
#rv_media_modal .p-2 { padding: 8px; }
#rv_media_modal .px-2 { padding-left: 8px; padding-right: 8px; }
#rv_media_modal .py-4 { padding-top: 16px; padding-bottom: 16px; }
#rv_media_modal .text-center { text-align: center; }
#rv_media_modal .text-end { text-align: right; }
#rv_media_modal .text-muted { color: #a1a1aa; }
#rv_media_modal .small { font-size: 0.8125rem; }
#rv_media_modal .border-top { border-top: 1px solid rgba(255, 255, 255, 0.1); }
#rv_media_modal .border-bottom { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#rv_media_modal .rounded { border-radius: 8px; }
#rv_media_modal .overflow-auto { overflow: auto; }
#rv_media_modal .table-responsive { overflow-x: auto; }

/* ── Booking widget ───────────────────────────────────────────
   Shared control behind [hotel-availability-search] (search mode) and the
   room-detail page's own booking form (book mode) — see
   views/hotel/includes/booking-widget.blade.php. Popovers follow the same
   z-index:150-over-sticky-header lesson as .htl-lang-switcher__menu above. */
.htl-booking-widget { width: 100%; }
.htl-booking-widget__form {
    display: flex;
    align-items: stretch;
    gap: 10px;
    background: var(--htl-card);
    border: 1px solid var(--htl-border-strong);
    border-radius: var(--htl-radius-lg);
    padding: 10px;
    box-shadow: 0 24px 48px rgba(0, 8, 52, 0.14);
}
.htl-booking-widget__field { position: relative; flex: 1; min-width: 0; }
.htl-booking-widget__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--htl-radius-md);
    color: var(--htl-text);
    text-align: left;
    cursor: pointer;
    transition: var(--htl-transition);
}
.htl-booking-widget__trigger:hover { background: var(--htl-surface); }
.htl-booking-widget__trigger-icon { flex-shrink: 0; color: var(--htl-icon-room); }
.htl-booking-widget__trigger-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.htl-booking-widget__trigger-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--htl-muted);
}
.htl-booking-widget__trigger-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--htl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.htl-booking-widget__field--dates { border-right: 1px solid var(--htl-border); }
.htl-booking-widget__submit { flex-shrink: 0; }

/* Popover shell — shared visual language for both the calendar and the
   guests/rooms stepper list. position:fixed + top/left set by JS
   (positionBookingPopover(), main.js) once reparented to <body> — this is
   what lets the popover escape ANY ancestor's overflow:hidden (e.g.
   .htl-home-hero, needed to contain its own gradient overlay), not just
   whichever placement a bug report happened to surface. */
.htl-calendar-popover, .htl-guests-popover {
    position: fixed;
    background: var(--htl-card);
    border: 1px solid var(--htl-border-strong);
    border-radius: var(--htl-radius-lg);
    box-shadow: 0 24px 48px rgba(0, 8, 52, 0.2);
    padding: 20px;
    z-index: 150;
}
.htl-calendar-popover[hidden], .htl-guests-popover[hidden] { display: none; }

/* ── Calendar ─────────────────────────────────────────────── */
.htl-calendar { width: 300px; max-width: 100%; }
.htl-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.htl-calendar__title { font-family: var(--htl-font-display); font-size: 1.0625rem; color: var(--htl-heading); }
.htl-calendar__nav {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--htl-surface);
    border: 1px solid var(--htl-border);
    border-radius: 50%;
    color: var(--htl-text);
    cursor: pointer;
    transition: var(--htl-transition);
}
.htl-calendar__nav:hover { border-color: var(--htl-accent); color: var(--htl-accent); }
.htl-calendar__weekdays, .htl-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.htl-calendar__weekdays {
    margin-bottom: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--htl-muted-2);
    text-align: center;
}
.htl-calendar__day {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--htl-radius-sm);
    color: var(--htl-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.htl-calendar__day:hover:not(:disabled) { background: var(--htl-accent-soft); color: var(--htl-accent); }
.htl-calendar__day.is-other-month { color: var(--htl-muted-2); opacity: 0.5; }
.htl-calendar__day.is-disabled { opacity: 0.28; cursor: not-allowed; }
.htl-calendar__day.is-between { background: var(--htl-accent-soft); border-radius: 0; }
.htl-calendar__day.is-start, .htl-calendar__day.is-end {
    background: var(--htl-accent);
    color: var(--htl-accent-ink);
}
.htl-calendar__day.is-start { border-radius: var(--htl-radius-sm) 0 0 var(--htl-radius-sm); }
.htl-calendar__day.is-end { border-radius: 0 var(--htl-radius-sm) var(--htl-radius-sm) 0; }
.htl-calendar__day.is-start.is-end { border-radius: var(--htl-radius-sm); }
/* Live preview of the range while hovering a candidate check-out date, after
   check-in is picked but before check-out is confirmed — a lighter/dashed
   treatment so it never reads as an already-confirmed range. */
.htl-calendar__day.is-hover-between { background: var(--htl-surface); border-radius: 0; }
.htl-calendar__day.is-hover-end {
    background: var(--htl-card);
    color: var(--htl-accent);
    border-radius: 0 var(--htl-radius-sm) var(--htl-radius-sm) 0;
    box-shadow: inset 0 0 0 1.5px var(--htl-accent);
}

/* ── Guests / rooms popover ───────────────────────────────── */
.htl-guests-popover { width: 280px; max-width: 100%; }
.htl-guests-popover__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--htl-border);
}
.htl-guests-popover__row:last-of-type { border-bottom: none; padding-bottom: 4px; }
.htl-guests-popover__label { font-size: 0.9375rem; font-weight: 500; color: var(--htl-text); }
.htl-guests-popover__hint { font-size: 0.75rem; color: var(--htl-muted); margin-top: 2px; }
.htl-stepper { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.htl-stepper__btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--htl-card);
    border: 1px solid var(--htl-border-strong);
    border-radius: 50%;
    color: var(--htl-accent);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--htl-transition);
}
.htl-stepper__btn:hover:not(:disabled) { border-color: var(--htl-accent); background: var(--htl-accent-soft); }
.htl-stepper__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.htl-stepper__value { min-width: 20px; text-align: center; font-size: 0.9375rem; font-weight: 600; color: var(--htl-text); }
.htl-guests-popover__done { width: 100%; margin-top: 12px; }

@media (max-width: 767px) {
    .htl-booking-widget__form { flex-wrap: wrap; }
    .htl-booking-widget__field--dates { border-right: none; border-bottom: 1px solid var(--htl-border); flex-basis: 100%; }
    .htl-booking-widget__field--guests { flex-basis: 100%; }
    .htl-booking-widget__submit { width: 100%; }
    /* Popover left/width below 480px are set directly by
       positionBookingPopover() (main.js) as a full-width sheet — no CSS
       override needed here. */
}

/* The widget's row layout (dates | guests | submit) assumes a wide
   placement (hero/full-width search). Reused in "book" mode inside the
   room-detail page's own narrow sidebar (~380-420px), that row has no room
   to breathe and the trigger buttons visually collide — stack it instead,
   same as the mobile breakpoint above but keyed to the narrow ANCESTOR
   context rather than viewport width, since this can happen at any
   viewport size once the widget is this cramped. */
.htl-availability .htl-booking-widget__form,
.htl-room-detail-2__aside .htl-booking-widget__form,
.htl-welcome-split__form-card .htl-booking-widget__form,
.htl-welcome-stacked__form-card .htl-booking-widget__form {
    flex-direction: column;
    align-items: stretch;
}
.htl-availability .htl-booking-widget__field--dates,
.htl-room-detail-2__aside .htl-booking-widget__field--dates,
.htl-welcome-split__form-card .htl-booking-widget__field--dates,
.htl-welcome-stacked__form-card .htl-booking-widget__field--dates {
    border-right: none;
    border-bottom: 1px solid var(--htl-border);
}

/* ── Homepage hero search placement ──────────────────────────
   Sits in normal flow inside the hero's own generous bottom padding
   (see .htl-home-hero), not absolutely straddling the edge — simpler and
   avoids fighting the next section's own stacking/spacing. */
.htl-home-hero__search { position: relative; z-index: 1; max-width: 900px; margin: 40px auto 0; }

/* Shortcode wrapper — used wherever [hotel-availability-search] is placed
   outside the hero (e.g. a regular content page). */
.htl-search-widget-section { padding: 48px 0; }
.htl-search-widget-section__panel { max-width: 900px; margin: 0 auto; }
.htl-search-widget-section__head { text-align: center; margin-bottom: 20px; }
.htl-search-widget-section__head .htl-overline { justify-content: center; }

/* /rooms page's own search bar — same widget, placed above the grid. */
.htl-room-listing__search { max-width: 900px; margin: 0 auto 40px; }

/* ── Search-mode room card ───────────────────────────────────
   Sibling of .htl-room-card (browse mode, unchanged) for when /rooms was
   reached via a real search — see includes/room-item-search.blade.php. */
.htl-room-card__availability-badge { position: absolute; top: 16px; left: 16px; }
.htl-room-card__search-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    margin: 4px 0 16px;
    border-top: 1px solid var(--htl-border);
    border-bottom: 1px solid var(--htl-border);
    text-align: left;
}
.htl-room-card__search-price-night { font-size: 0.9375rem; font-weight: 600; color: var(--htl-text); }
.htl-room-card__search-price-night span { font-weight: 400; color: var(--htl-muted); font-size: 0.75rem; }
.htl-room-card__search-price-total { font-size: 0.75rem; color: var(--htl-muted); text-align: right; }
.htl-room-card__search-price-total strong { display: block; color: var(--htl-accent); font-size: 0.9375rem; margin-top: 2px; }
.htl-room-card__footer--search { justify-content: space-between; border-top: none; padding-top: 0; }
.htl-room-card__book-form { margin: 0; }

/* ── Room details — Style 2 (hero gallery + tabs) ─────────────
   Structurally distinct from style-1 (partials/room-detail-style-1.blade.php,
   no hero image, stacked <h2> sections): full-width hero banner, a
   horizontal quick-facts/price bar, and tabbed content instead of stacked
   sections. Selected via theme_option('room_details_style'). */
.htl-room-detail-2__hero {
    position: relative;
    height: 46vh;
    min-height: 320px;
    max-height: 560px;
    background-size: cover;
    background-position: center;
    background-color: var(--htl-text);
    display: flex;
    align-items: flex-end;
}
.htl-room-detail-2__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 8, 52, 0.05) 0%, rgba(0, 8, 52, 0.75) 100%);
}
.htl-room-detail-2__hero-inner { position: relative; z-index: 1; padding-bottom: 40px; }
.htl-room-detail-2__eyebrow { color: rgba(255, 255, 255, 0.8); justify-content: flex-start; }
.htl-room-detail-2__title { color: var(--htl-white); margin: 0; }
.htl-room-detail-2__quickbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--htl-card);
    border: 1px solid var(--htl-border);
    border-radius: var(--htl-radius-md);
    padding: 20px 28px;
    margin-top: -36px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 8, 52, 0.12);
}
.htl-room-detail-2__quickbar-meta { display: flex; flex-wrap: wrap; gap: 20px; color: var(--htl-muted); font-size: 0.9375rem; }
.htl-room-detail-2__quickbar-meta span { display: inline-flex; align-items: center; gap: 8px; }
.htl-room-detail-2__quickbar-meta svg { color: var(--htl-icon-room); flex-shrink: 0; }
.htl-room-detail-2__quickbar-price { font-family: var(--htl-font-display); font-size: 1.5rem; color: var(--htl-accent); margin: 0; }
.htl-room-detail-2__quickbar-price span { font-family: var(--htl-font-body); font-size: 0.875rem; color: var(--htl-muted); }
.htl-room-detail-2__layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; padding: 40px 0 96px; }
.htl-room-detail-2__tabs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; border-bottom: 1px solid var(--htl-border); }
.htl-room-detail-2__tab {
    padding: 12px 4px;
    margin-right: 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--htl-muted);
    font-family: var(--htl-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--htl-transition);
}
.htl-room-detail-2__tab:hover { color: var(--htl-text); }
.htl-room-detail-2__tab.is-active { color: var(--htl-accent); border-bottom-color: var(--htl-accent); }
.htl-room-detail-2__panel[hidden] { display: none; }

@media (min-width: 992px) {
    .htl-room-detail-2__layout { grid-template-columns: 1fr 380px; }
    .htl-room-detail-2__aside { position: sticky; top: calc(var(--htl-header-height) + 24px); }
}