/* ==========================================================================
   CCTU Hostel UI — flat design system
   Single source of truth for page/component styling. No gradients.
   Palette from the CCTU crest: royal blue + gold, red flame as danger.
   Mobile-first: base rules target small screens; min-width queries scale up.
   ========================================================================== */

:root {
    /* CCTU crest colors */
    --hst-brand: #1e3a8a;           /* royal blue */
    --hst-brand-dark: #172d6e;
    --hst-brand-darker: #12235a;
    --hst-brand-soft: #eef2fb;
    --hst-brand-border: #c7d2ee;

    --hst-gold: #ffcc00;            /* crest gold */
    --hst-gold-dark: #8a6d00;       /* readable gold for text on light bg */
    --hst-gold-soft: #fff8dd;
    --hst-gold-border: #f0dd8a;

    --hst-ink: #1e293b;
    --hst-ink-soft: #475569;
    --hst-muted: #64748b;
    --hst-faint: #94a3b8;

    --hst-bg: #f8fafc;
    --hst-surface: #ffffff;
    --hst-border: #e2e8f0;
    --hst-border-strong: #cbd5e1;

    --hst-success: #16803c;
    --hst-success-soft: #f0fdf4;
    --hst-success-border: #bbe7c9;

    --hst-warning: #b45309;
    --hst-warning-soft: #fffbeb;
    --hst-warning-border: #fde68a;

    --hst-danger: #dc2626;
    --hst-danger-soft: #fef2f2;
    --hst-danger-border: #fecaca;

    --hst-info: #0369a1;
    --hst-info-soft: #f0f9ff;
    --hst-info-border: #bae6fd;

    --hst-radius: 8px;
    --hst-radius-sm: 6px;
}

/* --------------------------------------------------------------------------
   Base / theme overrides
   -------------------------------------------------------------------------- */

.app-main .wrapper {
    background-color: var(--hst-bg);
}

/* Top app bar: CCTU blue with gold accent line */
.hst-app-header {
    background-color: var(--hst-brand) !important;
    border-bottom: 3px solid var(--hst-gold);
}

.hst-brand-logo {
    height: 30px;
    width: auto;
    background: #fff;
    border-radius: 6px;
    padding: 2px;
    margin-right: 0.375rem;
}

/* Brand buttons (flat, with real interaction states) */
.btn-CCTU {
    color: #fff;
    background-color: var(--hst-brand);
    border: 1px solid var(--hst-brand);
    border-radius: var(--hst-radius-sm);
    font-weight: 600;
    min-height: 44px;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    cursor: pointer;
    touch-action: manipulation;
}

.btn-CCTU:hover {
    color: #fff;
    background-color: var(--hst-brand-dark);
    border-color: var(--hst-brand-dark);
}

.btn-CCTU:focus,
.btn-CCTU.focus {
    color: #fff;
    background-color: var(--hst-brand-dark);
    border-color: var(--hst-brand-dark);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.35);
    outline: none;
}

.btn-CCTU:active {
    color: #fff;
    background-color: var(--hst-brand-darker);
    border-color: var(--hst-brand-darker);
}

.btn-CCTU:disabled,
.btn-CCTU.disabled {
    background-color: var(--hst-brand);
    border-color: var(--hst-brand);
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-outline-CCTU {
    color: var(--hst-brand);
    background-color: transparent;
    border: 1px solid var(--hst-brand);
    border-radius: var(--hst-radius-sm);
    font-weight: 600;
    min-height: 44px;
    transition: background-color 150ms ease, color 150ms ease;
    cursor: pointer;
    touch-action: manipulation;
}

.btn-outline-CCTU:hover,
.btn-outline-CCTU:focus {
    color: var(--hst-brand-dark);
    background-color: var(--hst-brand-soft);
}

/* Sidebar: active nav item in brand color */
.stacked-menu .menu-link.active,
.stacked-menu .menu-item.has-active > .menu-link {
    color: var(--hst-brand);
    background-color: var(--hst-brand-soft);
    border-radius: var(--hst-radius-sm);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--hst-gold);
}

.stacked-menu .menu-link.active .menu-icon,
.stacked-menu .menu-item.has-active > .menu-link .menu-icon {
    color: var(--hst-brand);
}

.stacked-menu .menu-link {
    border-radius: var(--hst-radius-sm);
    min-height: 44px;
    transition: background-color 150ms ease, color 150ms ease;
}

.stacked-menu .menu-link:hover {
    background-color: var(--hst-bg);
}

/* --------------------------------------------------------------------------
   Hero band (app-style page top: blue panel, white text, gold kicker)
   -------------------------------------------------------------------------- */

.hst-hero-band {
    position: relative;
    background: var(--hst-brand);
    border-radius: var(--hst-radius);
    color: #fff;
    padding: 1.25rem 1rem 2.75rem;
}

/* Subpage variant: no room reserved for an overlapping card */
.hst-hero-band--page {
    padding-bottom: 1.25rem;
    margin-bottom: 1rem;
}

.hst-hero-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hst-gold);
    margin: 0 0 0.25rem;
}

.hst-hero-band h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}

.hst-hero-band .hst-hero-meta {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0.25rem 0 0;
}

.hst-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 32px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    margin-bottom: 0.25rem;
}

.hst-hero-back:hover,
.hst-hero-back:focus {
    color: #fff;
    text-decoration: none;
}

/* Content that overlaps the hero band bottom edge */
.hst-overlap {
    position: relative;
    z-index: 1;
    margin-top: -1.75rem;
    padding: 0 0.5rem;
}

/* --------------------------------------------------------------------------
   Section titles (replace card-header-everywhere admin structure)
   -------------------------------------------------------------------------- */

.hst-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hst-ink-soft);
    margin: 1.25rem 0 0.625rem;
}

.hst-section-title::before {
    content: "";
    width: 4px;
    height: 14px;
    background: var(--hst-gold);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.hst-page-header {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-left: 3px solid var(--hst-gold);
    border-radius: var(--hst-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.hst-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 32px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hst-brand);
    text-decoration: none;
    margin-bottom: 0.25rem;
}

.hst-page-eyebrow:hover {
    color: var(--hst-brand-dark);
    text-decoration: none;
}

.hst-page-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
    line-height: 1.3;
}

.hst-page-subtitle {
    font-size: 0.875rem;
    color: var(--hst-muted);
    margin: 0.25rem 0 0;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.hst-card {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    margin-bottom: 1rem;
}

.hst-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--hst-border);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--hst-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hst-card-header .hst-card-header-icon {
    color: var(--hst-brand);
}

.hst-card-body {
    padding: 1rem;
}

/* Accent-topped status cards (flat replacement for gradient cards) */
.hst-card--success { border-top: 3px solid var(--hst-success); }
.hst-card--warning { border-top: 3px solid #f59e0b; }
.hst-card--danger  { border-top: 3px solid var(--hst-danger); }
.hst-card--brand   { border-top: 3px solid var(--hst-brand); }
.hst-card--gold    { border-top: 3px solid var(--hst-gold); }

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */

.hst-stat {
    background: var(--hst-bg);
    border: 1px solid var(--hst-border);
    border-left: 3px solid var(--hst-brand);
    border-radius: var(--hst-radius-sm);
    padding: 0.75rem 0.875rem;
    height: 100%;
}

.hst-stat--success { border-left-color: var(--hst-success); }
.hst-stat--warning { border-left-color: #f59e0b; }
.hst-stat--info    { border-left-color: var(--hst-info); }
.hst-stat--danger  { border-left-color: var(--hst-danger); }
.hst-stat--gold    { border-left-color: var(--hst-gold); }

.hst-stat-label {
    font-size: 0.75rem;
    color: var(--hst-muted);
    margin-bottom: 0.25rem;
}

.hst-stat-value {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--hst-ink);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Detail rows (label / value pairs)
   -------------------------------------------------------------------------- */

.hst-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--hst-border);
}

.hst-detail-row:last-child {
    border-bottom: none;
}

.hst-detail-label {
    font-size: 0.85rem;
    color: var(--hst-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.hst-detail-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hst-ink);
    text-align: right;
}

.hst-detail-value--success { color: var(--hst-success); }
.hst-detail-value--brand   { color: var(--hst-brand); }

/* --------------------------------------------------------------------------
   Pills (flat badges)
   -------------------------------------------------------------------------- */

.hst-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    background: var(--hst-bg);
    color: var(--hst-ink-soft);
    border: 1px solid var(--hst-border);
    white-space: nowrap;
}

.hst-pill--success { background: var(--hst-success-soft); color: var(--hst-success); border-color: var(--hst-success-border); }
.hst-pill--warning { background: var(--hst-warning-soft); color: var(--hst-warning); border-color: var(--hst-warning-border); }
.hst-pill--danger  { background: var(--hst-danger-soft);  color: var(--hst-danger);  border-color: var(--hst-danger-border); }
.hst-pill--info    { background: var(--hst-info-soft);    color: var(--hst-info);    border-color: var(--hst-info-border); }
.hst-pill--brand   { background: var(--hst-brand-soft);   color: var(--hst-brand);   border-color: var(--hst-brand-border); }
.hst-pill--gold    { background: var(--hst-gold-soft);    color: var(--hst-gold-dark); border-color: var(--hst-gold-border); }

/* --------------------------------------------------------------------------
   Empty state / notice
   -------------------------------------------------------------------------- */

.hst-empty {
    background: var(--hst-surface);
    border: 1px dashed var(--hst-border-strong);
    border-radius: var(--hst-radius);
    padding: 2rem 1rem;
    text-align: center;
}

.hst-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hst-brand-soft);
    border: 1px solid var(--hst-brand-border);
    color: var(--hst-brand);
    font-size: 1.375rem;
    margin-bottom: 0.875rem;
}

.hst-empty-icon--success {
    background: var(--hst-success-soft);
    border-color: var(--hst-success-border);
    color: var(--hst-success);
}

.hst-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin-bottom: 0.25rem;
}

.hst-empty-text {
    font-size: 0.875rem;
    color: var(--hst-muted);
    margin-bottom: 0;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.hst-empty .btn {
    margin-top: 1rem;
}

/* Inline notice (flat replacement for alert) */
.hst-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--hst-info-soft);
    border: 1px solid var(--hst-info-border);
    border-radius: var(--hst-radius-sm);
    padding: 0.875rem 1rem;
    color: var(--hst-ink-soft);
    font-size: 0.875rem;
}

.hst-notice .hst-notice-icon {
    color: var(--hst-info);
    margin-top: 0.125rem;
}

.hst-notice--warning {
    background: var(--hst-warning-soft);
    border-color: var(--hst-warning-border);
}

.hst-notice--warning .hst-notice-icon { color: var(--hst-warning); }

.hst-notice--danger {
    background: var(--hst-danger-soft);
    border-color: var(--hst-danger-border);
}

.hst-notice--danger .hst-notice-icon { color: var(--hst-danger); }

.hst-notice--success {
    background: var(--hst-success-soft);
    border-color: var(--hst-success-border);
}

.hst-notice--success .hst-notice-icon { color: var(--hst-success); }

/* --------------------------------------------------------------------------
   Countdown (Booked component)
   -------------------------------------------------------------------------- */

.hst-countdown {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius-sm);
    padding: 0.75rem 0.25rem;
}

.hst-countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: 0.25rem;
}

.hst-countdown-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--hst-danger);
    font-variant-numeric: tabular-nums;
}

.hst-countdown-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hst-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Booking accordion (Rooms page)
   -------------------------------------------------------------------------- */

.booking-accordion .accordion-item {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    margin-bottom: 0.75rem;
    transition: border-color 150ms ease;
}

.booking-accordion .accordion-item.active {
    border-color: var(--hst-brand);
}

.booking-accordion .accordion-item.completed {
    border-color: var(--hst-success-border);
}

.booking-accordion .accordion-button {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.875rem 1rem;
    font-weight: 600;
    color: var(--hst-ink);
    text-align: left;
    border-radius: var(--hst-radius);
    cursor: pointer;
    touch-action: manipulation;
}

.booking-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--hst-brand);
    outline-offset: -2px;
}

.booking-accordion .accordion-body {
    padding: 1rem;
    border-top: 1px solid var(--hst-border);
}

/* Step icons */
.step-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    background: var(--hst-bg);
    border: 1px solid var(--hst-border);
    color: var(--hst-muted);
}

.step-icon.active {
    background: var(--hst-brand);
    border-color: var(--hst-brand);
    color: #fff;
}

.step-icon.completed {
    background: var(--hst-success);
    border-color: var(--hst-success);
    color: #fff;
}

/* Category & room selection cards */
.hst-select-card {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    padding: 1rem;
    height: 100%;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
    touch-action: manipulation;
}

.hst-select-card:hover {
    border-color: var(--hst-brand);
}

.hst-select-card.selected {
    border-color: var(--hst-brand);
    background: var(--hst-brand-soft);
    box-shadow: inset 0 0 0 1px var(--hst-brand);
}

.hst-select-card.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.hst-select-card.is-disabled:hover {
    border-color: var(--hst-border);
}

/* --------------------------------------------------------------------------
   Bed grid
   -------------------------------------------------------------------------- */

.hst-bed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.hst-bed {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-align: center;
    min-height: 96px;
    padding: 0.75rem 0.5rem;
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    transition: border-color 150ms ease, background-color 150ms ease;
    touch-action: manipulation;
}

.hst-bed-number {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-bed-status {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hst-muted);
}

.hst-bed .hst-bed-icon {
    font-size: 1.125rem;
    color: var(--hst-faint);
}

.hst-bed.is-available {
    border-color: var(--hst-success-border);
    background: var(--hst-success-soft);
    cursor: pointer;
}

.hst-bed.is-available .hst-bed-icon,
.hst-bed.is-available .hst-bed-status { color: var(--hst-success); }

.hst-bed.is-available:hover {
    border-color: var(--hst-success);
}

.hst-bed.is-booked {
    border-color: var(--hst-warning-border);
    background: var(--hst-warning-soft);
    cursor: not-allowed;
}

.hst-bed.is-booked .hst-bed-icon,
.hst-bed.is-booked .hst-bed-status { color: var(--hst-warning); }

.hst-bed.is-occupied {
    border-color: var(--hst-danger-border);
    background: var(--hst-danger-soft);
    cursor: not-allowed;
}

.hst-bed.is-occupied .hst-bed-icon,
.hst-bed.is-occupied .hst-bed-status { color: var(--hst-danger); }

.hst-bed.is-reserved {
    border-color: var(--hst-border-strong);
    background: var(--hst-bg);
    cursor: not-allowed;
}

.hst-bed.is-selected {
    border-color: var(--hst-brand);
    background: var(--hst-brand-soft);
    box-shadow: inset 0 0 0 1px var(--hst-brand);
}

.hst-bed.is-selected .hst-bed-icon,
.hst-bed.is-selected .hst-bed-status { color: var(--hst-brand); }

/* Legend */
.hst-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.hst-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--hst-ink-soft);
}

.hst-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--hst-border-strong);
    background: var(--hst-surface);
}

.hst-legend-swatch--available { background: var(--hst-success-soft); border-color: var(--hst-success); }
.hst-legend-swatch--occupied  { background: var(--hst-danger-soft);  border-color: var(--hst-danger); }
.hst-legend-swatch--booked    { background: var(--hst-warning-soft); border-color: #f59e0b; }
.hst-legend-swatch--reserved  { background: var(--hst-bg);           border-color: var(--hst-border-strong); }

/* --------------------------------------------------------------------------
   Loading
   -------------------------------------------------------------------------- */

.hst-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--hst-muted);
    font-size: 0.875rem;
}

.text-CCTU {
    color: var(--hst-brand) !important;
}

/* --------------------------------------------------------------------------
   Hero (logged-out landing / login)
   -------------------------------------------------------------------------- */

.hst-hero {
    max-width: 34rem;
    margin: 1.5rem auto;
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-top: 3px solid var(--hst-gold);
    border-radius: var(--hst-radius);
    padding: 2rem 1.25rem;
    text-align: center;
}

.hst-hero-logo {
    width: 84px;
    height: auto;
    margin-bottom: 1rem;
}

.hst-hero-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

.hst-hero-text {
    font-size: 0.9375rem;
    color: var(--hst-muted);
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Bottom tab bar (mobile primary navigation; sidebar takes over at md+)
   -------------------------------------------------------------------------- */

.hst-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    background: var(--hst-surface);
    border-top: 1px solid var(--hst-border);
    padding-bottom: env(safe-area-inset-bottom);
}

.hst-tabbar-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 56px;
    padding: 0.375rem 0.25rem 0.5rem;
    border-top: 3px solid transparent;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hst-muted);
    text-decoration: none;
    touch-action: manipulation;
    transition: color 150ms ease;
}

.hst-tabbar-item i {
    font-size: 1.125rem;
}

.hst-tabbar-item:hover,
.hst-tabbar-item:focus {
    color: var(--hst-ink-soft);
    text-decoration: none;
}

.hst-tabbar-item.active {
    color: var(--hst-brand);
    border-top-color: var(--hst-gold);
}

.hst-tabbar-item:focus-visible {
    outline: 2px solid var(--hst-brand);
    outline-offset: -2px;
}

/* Mobile: reserve space for the tab bar; hide the floating CTA (the Rooms
   tab and the Book Room quick action cover the same destination) */
@media (max-width: 767.98px) {
    .app-main {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .btn-floated {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Larger screens (tablet and up)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .hst-tabbar {
        display: none;
    }

    .hst-hero-band {
        padding: 1.75rem 1.5rem 3.25rem;
    }

    .hst-hero-band--page {
        padding-bottom: 1.75rem;
    }

    .hst-hero-band h1 {
        font-size: 1.625rem;
    }

    .hst-overlap {
        margin-top: -2rem;
        padding: 0 1rem;
    }

    .hst-page-header {
        padding: 1.25rem 1.5rem;
    }

    .hst-page-title {
        font-size: 1.375rem;
    }

    .hst-card-header {
        padding: 0.875rem 1.25rem;
    }

    .hst-card-body {
        padding: 1.25rem;
    }

    .hst-stat-value {
        font-size: 1.125rem;
    }

    .hst-countdown {
        gap: 0.5rem;
        padding: 0.875rem 0.5rem;
    }

    .hst-countdown-item {
        min-width: 64px;
    }

    .hst-countdown-value {
        font-size: 2rem;
    }

    .booking-accordion .accordion-button {
        padding: 1rem 1.25rem;
    }

    .booking-accordion .accordion-body {
        padding: 1.25rem;
    }

    .step-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin-right: 12px;
    }

    .hst-bed-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .hst-empty {
        padding: 2.5rem 1.5rem;
    }

    .hst-hero {
        margin: 3rem auto;
        padding: 3rem 2rem;
    }

    .hst-hero-logo {
        width: 104px;
    }

    .hst-hero-title {
        font-size: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hst-bed,
    .hst-select-card,
    .btn-CCTU,
    .btn-outline-CCTU,
    .stacked-menu .menu-link,
    .booking-accordion .accordion-item {
        transition: none;
    }
}