/* ==============================================
   HOTEL GUEST APP
   Layout, Animation, and TV Media Queries
   Mobile-first approach
   ============================================== */

/* ------------------------------------------
   CSS CUSTOM PROPERTIES (App-specific)
   ------------------------------------------ */
:root {
    /* App viewport — consistent 5% inset on all sides (mobile/tablet) */
    --app-inset: 5vw;

    /* Panel dimensions */
    --panel-height: 88vh;
    --panel-radius-top: 32px;

    /* Safe areas */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);

    /* Hotel hero image — set dynamically by content-loader.js in live mode.
       Fallback is no image (gradient-only dark background for local dev). */
    --hero-image: none;
}

/* ------------------------------------------
   ICON SPRITE (Hidden)
   ------------------------------------------ */
.icon-sprite {
    display: none;
}

/* ------------------------------------------
   WALLPAPER BACKGROUND
   ------------------------------------------ */
.wallpaper {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #0a1628;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.4) 100%
        );
    opacity: 1;
    transition: opacity 0.6s ease;
}

.wallpaper-loaded {
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.4) 100%
        ),
        var(--hero-image) center / cover no-repeat;
    animation: wallpaper-fade-in 0.8s ease-out;
}

@keyframes wallpaper-fade-in {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* ------------------------------------------
   TV ROW (Hidden on mobile)
   ------------------------------------------ */
.tv-row {
    display: none;
}

/* ------------------------------------------
   MAIN SCREEN (Level 0)
   Fixed position, always underneath
   ------------------------------------------ */
.main-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--app-inset);
    padding-bottom: calc(var(--app-inset) + var(--safe-area-bottom));
    z-index: 1;
    
    /* Syncs with panel slide (500ms).
       Uses zoom (not transform: scale) because transform creates
       a containing block that breaks background-attachment: fixed
       on the faux-frost ::before pseudo in service tiles. zoom
       produces the same visual shrink without affecting fixed
       background alignment. */
    transition: 
        zoom var(--duration-slow) var(--ease-out),
        opacity var(--duration-slow) var(--ease-out);
}

/* CSS-only: When panel is open, main screen recedes slightly */
body:has(.service-panel.open) .main-screen,
body:has(.top-panel.open) .main-screen {
    zoom: 0.94;
    opacity: 0.5;
}

/* ------------------------------------------
   PANEL BACKDROP (click-to-dismiss)
   Invisible overlay, z-index between main screen
   and panels. Visible only when a panel is open.
   ------------------------------------------ */
.panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    cursor: pointer;
}

body:has(.service-panel.open) .panel-backdrop,
body:has(.top-panel.open) .panel-backdrop {
    pointer-events: auto;
}

/* ------------------------------------------
   MAIN HEADER (DND Toggle + Mini-tiles)
   Fixed in viewport — not affected by main-screen scale
   ------------------------------------------ */
.main-header {
    position: fixed;
    top: calc(var(--safe-area-top, 0px) + var(--app-inset));
    left: var(--app-inset);
    right: var(--app-inset);
    display: flex;
    justify-content: space-between;
    padding: 0;
    z-index: 5;
    
    /* Fade-in on panel close: short delay so panel starts sliding
       away before circles reappear, then quick fade-in */
    transition: opacity 250ms var(--ease-out) 150ms;
}

/* Fade header out when either panel is open.
   Delayed so circles stay visible while panel is still
   mid-slide, then fade quickly once panel is close. */
body:has(.service-panel.open) .main-header,
body:has(.top-panel.open) .main-header {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--ease-out) 100ms;
}

/* Keep header circle buttons clickable when top panel is open */
body:has(.top-panel.open) .main-header .header-right {
    pointer-events: auto;
}

/* Header right group: two 44px icon-only glass circles */
.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.glass-button.header-circle {
    width: 52px;
    height: 52px;
    border: var(--edge-glass-subtle);
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(20px) saturate(100%);
    -webkit-backdrop-filter: blur(20px) saturate(100%);
}

.glass-button.header-circle .btn-icon {
    width: 26px;
    height: 26px;
}

.header-circle .logo-letter {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

/* Visually hidden but accessible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
}

.service-tile {
    padding: 12%;
    aspect-ratio: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    
    /* Faux frost: disable backdrop-filter (fragile with parent
       compositing contexts) and use a ::before pseudo instead */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    /* Override glass-tile hover/active/focus transforms with zoom.
       transform: scale() creates a containing block that breaks
       background-attachment: fixed on the ::before faux-frost. */
    transition:
        zoom var(--duration-fast) var(--ease-spring),
        background var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.service-tile:hover {
    transform: none;
}

.service-tile:active {
    zoom: 0.95;
    transform: none;
}

.service-tile:focus-visible {
    zoom: var(--focus-scale);
    transform: none;
}

/* Faux frosted glass: a copy of the wallpaper behind each tile,
   blurred with filter: blur(). background-attachment: fixed aligns
   the copy with the real wallpaper so the illusion is seamless.
   Immune to parent transform/will-change/zoom compositing. */
.service-tile::before {
    content: '';
    position: absolute;
    inset: -8px;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.4) 100%
        ),
        var(--hero-image) center / cover no-repeat fixed;
    filter: blur(4px);
    border-radius: inherit;
    z-index: -1;
}

.service-tile .tile-icon {
    width: 33%;
    height: 33%;
}

.service-tile .tile-label {
    font-size: clamp(9px, 3.8vw, 15px);
}

/* No stagger animation - tiles appear with main screen */

/* ------------------------------------------
   SERVICE PANEL (Level 1)
   Slides up from bottom
   ------------------------------------------ */
.service-panel {
    position: fixed;
    left: var(--app-inset);
    right: var(--app-inset);
    bottom: 0;
    height: var(--panel-height);
    z-index: 10;
    
    /* Start off-screen below viewport */
    transform: translate3d(0, 100%, 0);
    visibility: hidden;
    will-change: transform, visibility;
    contain: layout style;
    
    /* Deliberate slide animation - smooth deceleration, NOT spring
       (spring overshoot goes above viewport edge, invisible) */
    transition: 
        transform var(--duration-slow) var(--ease-out),
        visibility 0ms linear var(--duration-slow);
    
    pointer-events: none;
}

.service-panel.open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    
    /* Override visibility delay when opening */
    transition: 
        transform var(--duration-slow) var(--ease-out),
        visibility 0ms linear 0ms;
}

/* ------------------------------------------
   TOP PANEL (Level 1)
   Slides down from top — mirror of service-panel
   ------------------------------------------ */
.top-panel {
    position: fixed;
    left: var(--app-inset);
    right: var(--app-inset);
    top: 0;
    height: var(--panel-height);
    z-index: 10;

    transform: translate3d(0, -100%, 0);
    visibility: hidden;
    will-change: transform, visibility;
    contain: layout style;
    transition:
        transform var(--duration-slow) var(--ease-out),
        visibility 0ms linear var(--duration-slow);
    pointer-events: none;
}

.top-panel.open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition:
        transform var(--duration-slow) var(--ease-out),
        visibility 0ms linear 0ms;
}

/* Rounded bottom corners (vs top corners on service-panel) */
.top-panel .panel-container {
    border-radius: 0 0 var(--panel-radius-top) var(--panel-radius-top);
}

.panel-container {
    height: 100%;
    border-radius: var(--panel-radius-top) var(--panel-radius-top) 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Override glass-panel padding and gap - children manage their own */
    padding: 0;
    gap: 0;
}

/* ------------------------------------------
   SERVICE HEADER
   ------------------------------------------ */
.service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3) var(--space-4);
    flex-shrink: 0;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Back arrow - no longer used (icon is the back affordance) */
.breadcrumb-back {
    display: none;
}

/* Service icon button:
   - Hidden at Level 1 (title only)
   - Shown at Level 2 as the back button (tapping goes back to categories) */
.breadcrumb-btn {
    pointer-events: none;
    cursor: default;
}

.breadcrumb.has-category .breadcrumb-btn {
    pointer-events: auto;
    cursor: pointer;
}

/* Separator: hidden at Level 1, visible at Level 2 between icon and category title */
.breadcrumb-separator {
    color: var(--text-tertiary);
    font-size: var(--font-size-lg);
    display: none;
}

.breadcrumb-separator::before {
    content: '\203A';
}

.breadcrumb.has-category .breadcrumb-separator {
    display: inline;
}

.breadcrumb-text {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Header controls */
.header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Order badge */
.order-btn {
    position: relative;
}

.order-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--fill-active-gold);
    color: #fff;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    will-change: transform, opacity;
    transition:
        opacity var(--duration-fast) var(--ease-default),
        transform var(--duration-fast) var(--ease-spring);
    pointer-events: none;
}

.order-badge.visible {
    opacity: 1;
    transform: scale(1);
}

/* ------------------------------------------
   PANEL CONTENT
   ------------------------------------------ */
.panel-content-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.panel-view {
    position: absolute;
    inset: 0;
    padding: 0 var(--space-3) var(--space-3);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;  /* Rubber band at edges */
    
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    
    /* Slide animation - no spring to avoid shimmy */
    transition: 
        opacity var(--duration-fast) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
}

/* Categories view (starts visible when panel opens) */
.categories-view {
    transform: translate3d(0, 0, 0);
    opacity: 0;
    will-change: transform, opacity;
}

.categories-view.active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
}

.categories-view.slide-out {
    transform: translate3d(-30%, 0, 0);
    opacity: 0;
    pointer-events: none;
}

/* Items view (starts off-screen right) */
.items-view {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    will-change: transform, opacity;
    /* No separate background - shares panel's glass styling */
}

.items-view.active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
}

/* ------------------------------------------
   CATEGORY LIST
   ------------------------------------------ */
.category-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* First divider sits flush against service header */
.items-list .glass-divider:first-child {
    padding-top: 0;
}

.category-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    min-height: 64px;
    position: relative;
    overflow: hidden;
}

/* Hidden on mobile - only shown in TV mode */
.category-card .card-image-bg {
    display: none;
}

/* No stagger - cards appear with panel view slide */

.category-card .card-icon {
    width: 36px;
    height: 36px;
}

/* ------------------------------------------
   ITEMS LIST
   ------------------------------------------ */
.items-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.item-card {
    padding: var(--space-3);
}

/* ------------------------------------------
   VISUAL CARD GRID (Pattern A)
   ------------------------------------------ */
.visual-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

/* Single column on small screens */
@media (max-width: 400px) {
    .visual-card-grid {
        grid-template-columns: 1fr;
    }
}

/* No stagger - items appear with panel view slide */

.item-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.item-card .card-image {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.item-card .card-content {
    flex: 1;
    min-width: 0;
}

.card-subtitle-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    width: 100%;
}

.item-price {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    white-space: nowrap;
    margin-left: auto;
}

/* ------------------------------------------
   DETAIL CONTENT STYLES
   Used inside modal for item details
   ------------------------------------------ */
.detail-content {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Detail view styling */
.detail-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: var(--panel-radius-top) var(--panel-radius-top) 0 0;
}

.detail-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-4) var(--space-2);
}

.detail-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.detail-subtitle {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}

.detail-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.detail-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

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

.detail-label {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    text-align: right;
}

.detail-subsection {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--glass-fill-subtle);
    border-radius: var(--radius-lg);
}

.detail-subsection-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.detail-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.detail-badge.included {
    background: rgba(56, 161, 105, 0.2);
    color: var(--fill-active-teal);
}

.detail-badge.supplement {
    background: rgba(237, 137, 54, 0.2);
    color: var(--fill-active-gold);
}

.detail-note {
    padding: var(--space-3);
    background: var(--glass-fill-subtle);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--fill-active-gold);
}

.detail-note p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Item value (shown on item cards) */
.item-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    padding: var(--space-1) var(--space-2);
    background: var(--glass-fill-subtle);
    border-radius: var(--radius-md);
}

/* Large value display (detail view) */
.detail-value-large {
    font-size: var(--font-size-2xl, 32px);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    text-align: center;
    padding: var(--space-4) 0;
}

/* Monospace value (passwords, codes) */
.detail-value-mono {
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.05em;
}

/* ------------------------------------------
   DETAIL MODAL (Level 2)
   ------------------------------------------ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--app-inset);
    
    /* Dark backdrop */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    
    /* Fast fade for backdrop */
    transition: opacity var(--duration-fast) var(--ease-out);
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.detail-modal {
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
    
    /* Solid white for clear decision moment */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-panel);
    
    /* Dark text for white background */
    color: rgba(0, 0, 0, 0.87);
    
    /* Spring scale - overshoot gives pop */
    transform: scale(0.92);
    will-change: transform;
    transition: transform var(--duration-normal) var(--ease-spring);
}

/* Override text colors inside modal for white background */
.detail-modal .modal-title,
.detail-modal .modal-description,
.detail-modal .quantity-value {
    color: rgba(0, 0, 0, 0.87);
}

.detail-modal .modal-price {
    color: var(--fill-active-gold);
}

/* Modal buttons need adjustment for white bg */
.detail-modal .glass-button {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.87);
}

.detail-modal .glass-button:hover {
    background: rgba(0, 0, 0, 0.1);
}

.detail-modal .glass-button.primary {
    background: var(--fill-active-gold);
    border-color: rgba(212, 175, 55, 0.3);
    color: #fff;
}

.detail-modal .glass-button.icon-only {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
}

.detail-modal .glass-button.icon-only .btn-icon {
    color: rgba(0, 0, 0, 0.7);
}

.modal-overlay.open .detail-modal {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1;
}

/* Modal hero image */
.modal-hero {
    height: 160px;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}

.modal-hero.compact {
    height: 100px;
}

/* Modal header */
.modal-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-2) 0;
}

.modal-subtitle {
    font-size: var(--font-size-sm);
    color: rgba(0, 0, 0, 0.6);
}

/* Modal body */
.modal-body {
    padding: 0 var(--space-2);
}

/* Modal info section */
.modal-info {
    padding: var(--space-3) var(--space-2) var(--space-4);
}

.modal-info .info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.modal-info .info-row:last-child {
    border-bottom: none;
}

.modal-info .info-label {
    font-size: var(--font-size-sm);
    color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.modal-info .info-value {
    font-size: var(--font-size-sm);
    color: rgba(0, 0, 0, 0.87);
    text-align: right;
}

/* Modal order section (transactional) */
.modal-order-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.modal-order-section .modal-price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--fill-active-gold);
}

.add-to-order-btn,
.action-btn {
    width: 100%;
}

/* Large value display (room number, dates) */
.modal-value-display {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    text-align: center;
    padding: var(--space-3) var(--space-4);
    color: var(--fill-active-gold);
}

/* Info note (special callout) */
.info-note {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--fill-active-gold);
}

.info-note p {
    font-size: var(--font-size-sm);
    color: rgba(0, 0, 0, 0.7);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

.info-value.mono {
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.05em;
}

/* Hotel Collection Grid */
.hotel-collection-grid {
    gap: var(--space-3);
}

.hotel-collection-card {
    min-height: 140px;
}

.hotel-card-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    margin-top: var(--space-1);
    background: var(--fill-active-gold);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
}

/* Legacy modal-image support */
.modal-image {
    height: 180px;
    margin: calc(-1 * var(--space-6));
    margin-bottom: var(--space-5);
    background: linear-gradient(135deg, 
        rgba(49, 151, 149, 0.5) 0%, 
        rgba(56, 161, 105, 0.5) 100%
    );
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}

.modal-image.has-image {
    background-size: cover;
    background-position: center;
}

.modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    
    /* Fade in slightly after modal scales */
    opacity: 0;
    transform: translateY(8px);
    will-change: transform, opacity;
    transition: 
        opacity var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    transition-delay: 50ms;
}

.modal-overlay.open .modal-content {
    opacity: 1;
    transform: translateY(0);
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.modal-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.modal-price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--fill-active-gold);
}

/* Quantity selector */
.quantity-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-4) 0;
}

.quantity-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    min-width: 40px;
    text-align: center;
}

/* Modal actions */
.modal-actions {
    display: flex;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.modal-actions .glass-button {
    flex: 1;
}

/* ------------------------------------------
   MODAL FORMS (Action Single Pattern)
   Forms inside modals need dark-on-light styling
   ------------------------------------------ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Time picker - grid of time buttons */
.time-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.time-option {
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.time-option.selected {
    background: var(--fill-active-gold);
    color: #fff;
    border-color: rgba(212, 175, 55, 0.3);
}

/* Option list - vertical list of selectable cards */
.option-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.option-card {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-card);
    transition: all var(--duration-fast) var(--ease-default);
}

.option-card:hover {
    background: rgba(0, 0, 0, 0.08);
}

.option-card.selected {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--fill-active-gold);
}

.option-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option-card .card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: rgba(0, 0, 0, 0.87);
}

.option-card .card-subtitle {
    font-size: var(--font-size-sm);
    color: rgba(0, 0, 0, 0.5);
}

/* Star rating */
.star-rating {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    padding: var(--space-3) 0;
}

.star-btn {
    width: 44px;
    height: 44px;
    padding: var(--space-2);
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-circle);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-default);
}

.star-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.star-btn.active {
    background: var(--fill-active-gold);
    border-color: rgba(212, 175, 55, 0.3);
}

.star-icon {
    width: 100%;
    height: 100%;
    color: rgba(0, 0, 0, 0.3);
    fill: currentColor;
}

.star-btn.active .star-icon {
    color: #fff;
}

/* Textarea in modal */
.detail-modal .glass-input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.87);
}

.detail-modal .glass-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.detail-modal .glass-input:focus {
    border-color: var(--fill-active-gold);
    background: rgba(0, 0, 0, 0.06);
}


/* ------------------------------------------
   DND MODAL (inside detail-modal)
   ------------------------------------------ */
.dnd-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
}

.dnd-toggle-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: rgba(0, 0, 0, 0.87);
}

.dnd-status {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
}

.dnd-status.active {
    background: rgba(229, 62, 62, 0.15);
    color: var(--fill-active-red);
}

.dnd-status.inactive {
    background: rgba(56, 161, 105, 0.15);
    color: var(--fill-active-green);
}

/* Reservation modal uses calendar day-cell molecule from glass-calendar.css */

/* ==============================================
   TABLET BREAKPOINT
   ============================================== */
@media (min-width: 768px) {
    .service-grid {
        max-width: 520px;
        gap: var(--space-3);
    }
    
    .detail-modal {
        max-width: 480px;
    }
    
    .item-card .card-image {
        width: 80px;
        height: 80px;
    }
}

/* ==============================================
   TV / DESKTOP BREAKPOINT
   Landscape orientation, large screen
   ============================================== */
@media (min-width: 1200px) and (orientation: landscape) {
    :root {
        /* Increase sizes for 10-foot viewing */
        --font-size-sm: 15px;
        --font-size-base: 17px;
        --font-size-md: 20px;
        --font-size-lg: 24px;
        --font-size-xl: 28px;
        --font-size-2xl: 36px;
    }
    
    /* ------------------------------------------
       TV ROW (Fixed at top, mirrors service grid)
       Viewport-relative sizing: tiles occupy the
       same screen proportion on any TV resolution.
       justify-content: center guarantees the 3|3
       split falls on the exact screen midline.
       ------------------------------------------ */
    .tv-row {
        display: block;
        position: fixed;
        top: 22vh;
        left: 0;
        right: 0;
        z-index: 5;
    }
    
    .tv-grid {
        display: grid;
        grid-template-columns: repeat(6, 12vw);
        gap: 1.2vw;
        justify-content: center;
    }
    
    .tv-tile {
        padding: 1.5vw;
    }
    
    .tv-tile .tile-icon {
        width: 5.5vw;
        height: 5.5vw;
    }
    
    .tv-tile .tile-label {
        font-size: 1vw;
    }
    
    /* ------------------------------------------
       MAIN SCREEN (TV Layout)
       Single row of 9, positioned 20% from bottom
       ------------------------------------------ */
    .main-screen {
        align-items: flex-end;
        padding-bottom: 15vh;
        padding-top: 0;
    }
    
    .service-grid {
        grid-template-columns: repeat(9, 7.5vw);
        grid-template-rows: 1fr;
        gap: 0.8vw;
        max-width: 100%;
        justify-content: center;
    }
    
    /* Focus states for remote navigation (TV) */
    .glass-tile:focus,
    .glass-card:focus,
    .glass-button:focus {
        outline: none;
    }
    
    .glass-tile:focus-visible,
    .glass-card:focus-visible,
    .glass-button:focus-visible {
        border-color: var(--edge-glow-intense);
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
        box-shadow: 
            var(--focus-ring-glow),
            var(--shadow-glass-elevated);
        transform: scale(var(--focus-scale-card));
    }
    
    /* ------------------------------------------
       SERVICE PANEL (TV)
       Still slides up from bottom
       ------------------------------------------ */
    .service-panel {
        left: var(--space-10);
        right: var(--space-10);
    }

    .panel-container {
        border-radius: 48px 48px 0 0;
    }

    /* ------------------------------------------
       TOP PANEL (TV)
       Still slides down from top
       ------------------------------------------ */
    .top-panel {
        left: var(--space-10);
        right: var(--space-10);
    }

    .top-panel .panel-container {
        border-radius: 0 0 48px 48px;
    }
    
    .service-header {
        padding: var(--space-6) var(--space-8);
    }
    
    .panel-view {
        padding: 0 var(--space-8) var(--space-6);
    }
    
    /* ------------------------------------------
       CATEGORY CARDS (TV - Visual Image Cards)
       auto-fit + 1fr = edge-to-edge filling.
       minmax floor of 240px prevents too many
       cramped columns. Cards stretch to fill
       regardless of count: 2 items = 2 wide
       cards, 10 items = rows of 3-4.
       ------------------------------------------ */
    .category-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--space-5);
    }
    
    .category-card {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        min-height: 220px;
        border-radius: var(--radius-card);
    }
    
    /* Show image background in TV mode */
    .category-card .card-image-bg {
        display: block;
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        border-radius: var(--radius-card);
        z-index: 0;
    }
    
    /* Gradient overlay for text legibility */
    .category-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.4) 40%,
            rgba(0, 0, 0, 0.1) 100%
        );
        border-radius: var(--radius-card);
        z-index: 1;
    }
    
    /* Hide icon in TV mode - image is the visual */
    .category-card .card-icon {
        display: none;
    }
    
    /* Hide chevron in TV mode */
    .category-card .card-chevron {
        display: none;
    }
    
    /* Position content at bottom */
    .category-card .card-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--space-4);
        z-index: 2;
        text-align: center;
    }
    
    .category-card .card-title {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    
    .category-card .card-subtitle {
        font-size: var(--font-size-sm);
        opacity: 0.9;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    
    /* TV Mode - Category card hover/focus with image zoom */
    .category-card .card-image-bg {
        transition: transform var(--duration-normal) var(--ease-out);
    }
    
    .category-card:hover .card-image-bg,
    .category-card:focus-visible .card-image-bg {
        transform: scale(1.08);
    }
    
    .category-card:active .card-image-bg {
        transform: scale(1.02);
    }
    
    /* Items list - grid layout */
    .items-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    /* Dividers and card grids span full width of items-list */
    .items-list > .glass-divider,
    .items-list > .visual-card-grid,
    .items-list > .venue-card-grid {
        grid-column: 1 / -1;
    }

    /* Visual card grid fills edge-to-edge on TV */
    .visual-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    
    /* ------------------------------------------
       DETAIL MODAL (TV)
       ------------------------------------------ */
    .detail-modal {
        max-width: 560px;
    }
    
    .modal-image {
        height: 240px;
    }
    
    .detail-image {
        height: 280px;
    }
    
    .item-card .card-image {
        width: 100px;
        height: 100px;
    }
    
}

/* ==============================================
   LARGE TV (4K)
   ============================================== */
@media (min-width: 1920px) and (orientation: landscape) {
    :root {
        --font-size-sm: 18px;
        --font-size-base: 20px;
        --font-size-md: 24px;
        --font-size-lg: 28px;
        --font-size-xl: 34px;
        --font-size-2xl: 44px;
    }
    
    /* Category Cards - 4K adjustments */
    .category-list {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .category-card {
        min-height: 260px;
    }
    
    .category-card .card-title {
        font-size: var(--font-size-xl);
    }
    
    .category-card .card-subtitle {
        font-size: var(--font-size-base);
    }
}

/* ==============================================
   ANIMATIONS
   ============================================== */

/* Basket pulse on add - asymmetric with settle */
@keyframes pulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }     /* Fast pop */
    45% { transform: scale(1.12); }    /* Settle back */
    65% { transform: scale(1.16); }    /* Small bounce */
    85% { transform: scale(1.02); }    /* Nearly rest */
    100% { transform: scale(1); }
}

.order-btn.pulse {
    animation: pulse var(--duration-fast) var(--ease-out);
}

/* ==============================================
   REDUCED MOTION
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==============================================
   DARK MODE ADJUSTMENTS
   (Glass works best on vibrant backgrounds)
   ============================================== */
@media (prefers-color-scheme: dark) {
    .wallpaper {
        filter: brightness(0.9);
    }
}