/**
 * Habibi Rome — Meal Category Selector
 * Upgraded with Emil Kowalski–style motion: spring physics, staggered
 * entrances, physical press states, and intentional micro-interactions.
 *
 * CSS variable inheritance:
 *   Amelia sets --am-* vars as inline styles on #amelia-v2-booking-{n}.
 *   JS copies them to .habibi-booking-outer so everything below inherits
 *   the site's Amelia colour/font theme. Fallbacks = Amelia's defaults.
 *
 * Easing vocabulary used throughout:
 *   --ease-spring  : cubic-bezier(0.34, 1.56, 0.64, 1)  — overshoots, snappy
 *   --ease-expo    : cubic-bezier(0.16, 1, 0.3,  1)      — fast start, smooth end
 *   --ease-out     : cubic-bezier(0.4,  0, 0.2,  1)      — standard deceleration
 */

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes habibi-card-in {
    from {
        opacity: 0;
        transform: translateY( 18px ) scale( 0.96 );
    }
    to {
        opacity: 1;
        transform: translateY( 0 ) scale( 1 );
    }
}

@keyframes habibi-selector-in {
    from {
        opacity: 0;
        transform: translateY( 10px );
    }
    to {
        opacity: 1;
        transform: translateY( 0 );
    }
}

@keyframes habibi-selector-out {
    from {
        opacity: 1;
        transform: translateY( 0 ) scale( 1 );
    }
    to {
        opacity: 0;
        transform: translateY( -14px ) scale( 0.975 );
    }
}

@keyframes habibi-check-in {
    from {
        opacity: 0;
        transform: scale( 0.2 ) rotate( -20deg );
    }
    to {
        opacity: 1;
        transform: scale( 1 ) rotate( 0deg );
    }
}

@keyframes habibi-check-out {
    from {
        opacity: 1;
        transform: scale( 1 );
    }
    to {
        opacity: 0;
        transform: scale( 0.4 );
    }
}

@keyframes habibi-btn-arrow-in {
    from {
        opacity: 0;
        transform: translateX( -6px );
    }
    to {
        opacity: 1;
        transform: translateX( 0 );
    }
}

/* ==========================================================================
   Outer wrapper
   ========================================================================== */

.habibi-booking-outer {
    box-sizing: border-box;
}

/* ==========================================================================
   Show / hide helpers
   ========================================================================== */

.habibi-amelia-hidden {
    display: none !important;
}

.habibi-meal-selector--hidden {
    display: none !important;
}

/*
 * Exit animation.
 * Compound selector (2 classes = specificity 0,2,0) beats the base
 * .habibi-meal-selector rule (1 class = 0,1,0), so the exit animation
 * always overrides the entrance animation regardless of source order.
 */
.habibi-meal-selector.habibi-meal-selector--exiting {
    animation: habibi-selector-out 0.25s cubic-bezier( 0.4, 0, 0.2, 1 ) forwards;
    pointer-events: none;
}

/* ==========================================================================
   Meal-selector container
   ========================================================================== */

.habibi-meal-selector {
    box-sizing: border-box;
    font-family: var( --am-font-family, inherit );
    background-color: var( --am-c-main-bgr, #ffffff );
    border-radius: var( --am-brad-main, var( --am-brad-main-default, 4px ) );
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;

    /* Entrance */
    animation: habibi-selector-in 0.35s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

/* ==========================================================================
   Header
   ========================================================================== */

.habibi-meal-selector__header {
    text-align: center;
}

.habibi-meal-selector__title {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var( --am-c-main-heading-text, var( --am-c-main-text, #1a2c37 ) );
}

.habibi-meal-selector__subtitle {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var( --am-c-main-text, #1a2c37 );
    opacity: 0.55;
}

/* ==========================================================================
   Cards list
   ========================================================================== */

.habibi-meal-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ==========================================================================
   Individual card
   ========================================================================== */

.habibi-meal-card {
    position: relative;
    width: 100%;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    /* Invisible border — keeps layout stable, avoids reflow on selection */
    border: 2px solid transparent;

    /* Master transition */
    transition:
        transform     0.22s cubic-bezier( 0.16, 1, 0.3, 1 ),
        border-color  0.2s  cubic-bezier( 0.16, 1, 0.3, 1 ),
        box-shadow    0.2s  cubic-bezier( 0.16, 1, 0.3, 1 ),
        opacity       0.2s  cubic-bezier( 0.16, 1, 0.3, 1 ),
        filter        0.2s  cubic-bezier( 0.16, 1, 0.3, 1 );

    /* Staggered entrance per card — index supplied by CSS :nth-child */
    animation: habibi-card-in 0.5s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

/* Stagger delays */
.habibi-meal-cards .habibi-meal-card:nth-child(1) { animation-delay: 80ms;  }
.habibi-meal-cards .habibi-meal-card:nth-child(2) { animation-delay: 140ms; }
.habibi-meal-cards .habibi-meal-card:nth-child(3) { animation-delay: 200ms; }
.habibi-meal-cards .habibi-meal-card:nth-child(4) { animation-delay: 260ms; }

/* Focus ring */
.habibi-meal-card:focus-visible {
    box-shadow: 0 0 0 3px var( --am-c-primary, #265cf2 );
}

/* Hover */
.habibi-meal-card:hover {
    transform: translateY( -2px );
    box-shadow:
        0  2px  4px rgba( 0, 0, 0, 0.06 ),
        0  8px 20px rgba( 0, 0, 0, 0.12 );
}

/* Physical press — scale down, then spring back on release */
.habibi-meal-card:active {
    transform: scale( 0.975 );
    transition-duration: 0.08s;
}

/* Selected */
.habibi-meal-card--selected {
    border-color: var( --am-c-primary, #265cf2 );
    box-shadow:
        0 0 0 4px color-mix( in srgb, var( --am-c-primary, #265cf2 ) 18%, transparent ),
        0 4px 16px rgba( 0, 0, 0, 0.14 );
    transform: translateY( -1px );
}

/*
 * Dim non-selected cards once a selection is made.
 * Uses :has() — graceful no-op if unsupported.
 */
.habibi-meal-cards:has( .habibi-meal-card--selected )
.habibi-meal-card:not( .habibi-meal-card--selected ) {
    opacity: 0.55;
    filter: saturate( 0.6 );
}

/* ==========================================================================
   Gradient placeholders  ( ::before — behind the photo layer )
   ========================================================================== */

.habibi-meal-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

.habibi-meal-card[data-category="breakfast"]::before {
    background-image: linear-gradient( 135deg, #e8a045 0%, #c97d3a 55%, #8b4e1a 100% );
}

.habibi-meal-card[data-category="lunch"]::before {
    background-image: linear-gradient( 135deg, #7aaa55 0%, #5a7a45 55%, #2f4a1f 100% );
}

.habibi-meal-card[data-category="apero"]::before {
    background-image: linear-gradient( 135deg, #d4956a 0%, #8b5e3c 50%, #4a2d1e 100% );
}

.habibi-meal-card[data-category="dinner"]::before {
    background-image: linear-gradient( 135deg, #2a4a7a 0%, #1a2c4a 55%, #0d1626 100% );
}

/* ==========================================================================
   Photo layer  ( z-index 1 — above gradient, below overlay )
   ========================================================================== */

.habibi-meal-card__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.55s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.habibi-meal-card:hover .habibi-meal-card__bg {
    transform: scale( 1.05 );
}

/* ==========================================================================
   Dark overlay  ( z-index 2 )
   ========================================================================== */

.habibi-meal-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        160deg,
        rgba( 0, 0, 0, 0.08 )  0%,
        rgba( 0, 0, 0, 0.52 ) 100%
    );
    transition: opacity 0.2s ease;
}

.habibi-meal-card:hover .habibi-meal-card__overlay {
    opacity: 0.85;
}

.habibi-meal-card--selected .habibi-meal-card__overlay {
    opacity: 0.8;
}

/* ==========================================================================
   Card text  ( z-index 3 )
   ========================================================================== */

.habibi-meal-card__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 18px;
    gap: 3px;
    pointer-events: none;
}

.habibi-meal-card__title {
    font-family: var( --am-font-family, inherit );
    font-size: 0.975rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.55 );
    display: block;
    transition: transform 0.22s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.habibi-meal-card:hover .habibi-meal-card__title {
    transform: translateX( 3px );
}

.habibi-meal-card__subtitle {
    font-family: var( --am-font-family, inherit );
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba( 255, 255, 255, 0.8 );
    text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.45 );
    display: block;
    transition: transform 0.22s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.habibi-meal-card:hover .habibi-meal-card__subtitle {
    transform: translateX( 3px );
}

/* ==========================================================================
   Checkmark badge  ( ::after — z-index 4, top-right corner )
   Springs in on selection, springs out on deselection.
   ========================================================================== */

.habibi-meal-card::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;

    width: 22px;
    height: 22px;
    border-radius: 50%;
    line-height: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;

    background-color: var( --am-c-primary, #265cf2 );

    /* Hidden by default */
    opacity: 0;
    transform: scale( 0.3 ) rotate( -20deg );
    transition:
        opacity   0.18s cubic-bezier( 0.4, 0, 0.2, 1 ),
        transform 0.0s  linear;   /* transition disabled — animation takes over */
}

.habibi-meal-card--selected::after {
    animation: habibi-check-in 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 ) forwards;
}

/* When deselecting (no --selected class), fall back to the hidden state */
.habibi-meal-card:not( .habibi-meal-card--selected )::after {
    opacity: 0;
    transform: scale( 0.3 );
}

/* ==========================================================================
   Footer / Continue button
   ========================================================================== */

.habibi-meal-selector__footer {
    display: flex;
    justify-content: flex-end;
}

.habibi-meal-btn {
    /* Inherit Amelia button shape tokens */
    height:        var( --am-h-btn,    40px );
    border-radius: var( --am-rad-btn,  var( --am-brad-main, var( --am-brad-main-default, 4px ) ) );
    padding:       var( --am-padd-btn, 0 20px );
    font-size:     var( --am-fs-btn,   0.9375rem );
    font-weight:   var( --am-fw-btn,   600 );
    font-family:   var( --am-font-family, inherit );
    line-height:   1;
    letter-spacing: -0.01em;

    /* Colours */
    background-color: var( --am-c-btn-bgr, var( --am-c-primary, #265cf2 ) );
    color:            var( --am-c-btn-text, #ffffff );
    border:           1px solid transparent;
    cursor:           pointer;

    /* Arrow glyph */
    display: inline-flex;
    align-items: center;
    gap: 0;

    transition:
        background-color 0.15s ease,
        opacity          0.2s  cubic-bezier( 0.16, 1, 0.3, 1 ),
        transform        0.18s cubic-bezier( 0.16, 1, 0.3, 1 ),
        box-shadow       0.18s cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* Arrow slides in when button is enabled */
.habibi-meal-btn::after {
    content: '→';
    display: inline-block;
    margin-left: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX( -4px );
    transition:
        opacity      0.22s cubic-bezier( 0.16, 1, 0.3, 1 ),
        transform    0.22s cubic-bezier( 0.16, 1, 0.3, 1 ),
        width        0.22s cubic-bezier( 0.16, 1, 0.3, 1 ),
        margin-left  0.22s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.habibi-meal-btn:not( :disabled )::after {
    opacity: 1;
    transform: translateX( 0 );
    width: 1em;
    margin-left: 7px;
}

.habibi-meal-btn:not( :disabled ):hover {
    filter: brightness( 1.08 );
    transform: translateY( -1px );
    box-shadow: 0 4px 12px color-mix( in srgb, var( --am-c-primary, #265cf2 ) 35%, transparent );
}

.habibi-meal-btn:not( :disabled ):active {
    transform: scale( 0.97 );
    transition-duration: 0.07s;
}

.habibi-meal-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* ==========================================================================
   Party-size step
   ========================================================================== */

.habibi-party-size {
    box-sizing: border-box;
    font-family: var( --am-font-family, inherit );
    background-color: var( --am-c-main-bgr, #ffffff );
    border-radius: var( --am-brad-main, var( --am-brad-main-default, 4px ) );
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;

    /* Reuse the same entrance keyframe as the meal selector */
    animation: habibi-selector-in 0.35s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

.habibi-party-size--hidden {
    display: none !important;
}

/* Exit animation — higher specificity wins over base rule */
.habibi-party-size.habibi-party-size--exiting {
    animation: habibi-selector-out 0.25s cubic-bezier( 0.4, 0, 0.2, 1 ) forwards;
    pointer-events: none;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.habibi-party-size__header {
    text-align: center;
}

.habibi-party-size__title {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var( --am-c-main-heading-text, var( --am-c-main-text, #1a2c37 ) );
}

.habibi-party-size__subtitle {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var( --am-c-main-text, #1a2c37 );
    opacity: 0.55;
}

/* ── Counter ─────────────────────────────────────────────────────────────── */

.habibi-party-size__counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 12px 0 16px;
}

.habibi-party-size__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var( --am-c-inp-border, #d0d5dd );
    background: var( --am-c-main-bgr, #ffffff );
    color: var( --am-c-main-text, #1a2c37 );
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;

    transition:
        border-color  180ms cubic-bezier( 0.23, 1, 0.32, 1 ),
        color         180ms cubic-bezier( 0.23, 1, 0.32, 1 ),
        box-shadow    180ms cubic-bezier( 0.23, 1, 0.32, 1 ),
        transform     120ms cubic-bezier( 0.23, 1, 0.32, 1 );
}

@media ( hover: hover ) and ( pointer: fine ) {
    .habibi-party-size__btn:not( :disabled ):hover {
        border-color: var( --am-c-primary, #265cf2 );
        color:        var( --am-c-primary, #265cf2 );
        box-shadow:   0 0 0 4px color-mix( in srgb, var( --am-c-primary, #265cf2 ) 12%, transparent );
        transform:    scale( 1.08 );
    }
}

.habibi-party-size__btn:not( :disabled ):active {
    transform:           scale( 0.93 );
    transition-duration: 80ms;
}

.habibi-party-size__btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix( in srgb, var( --am-c-primary, #265cf2 ) 40%, transparent );
}

.habibi-party-size__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.habibi-party-size__value {
    font-family:    var( --am-font-family, inherit );
    font-size:      2.75rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    line-height:    1;
    min-width:      56px;
    text-align:     center;
    color: var( --am-c-main-heading-text, var( --am-c-main-text, #1a2c37 ) );
}

@keyframes habibi-value-bump {
    0%   { transform: scale( 1 ); }
    40%  { transform: scale( 1.18 ); }
    100% { transform: scale( 1 ); }
}

.habibi-party-size__value--bump {
    animation: habibi-value-bump 220ms cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.habibi-party-size__footer {
    display: flex;
    justify-content: flex-end;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
    .habibi-party-size {
        padding: 20px 14px 16px;
        gap: 16px;
    }
}

/* ==========================================================================
   Reduced-motion overrides
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
    .habibi-party-size {
        animation: none !important;
        opacity:   1 !important;
    }

    .habibi-party-size__btn {
        transition: opacity 0.15s ease !important;
    }

    .habibi-party-size__btn:not( :disabled ):hover,
    .habibi-party-size__btn:not( :disabled ):active {
        transform: none;
    }

    .habibi-party-size__value--bump {
        animation: none !important;
    }

    .habibi-meal-selector,
    .habibi-meal-card,
    .habibi-meal-card__bg,
    .habibi-meal-card__title,
    .habibi-meal-card__subtitle,
    .habibi-meal-btn,
    .habibi-meal-btn::after {
        animation: none !important;
        transition: opacity 0.15s ease !important;
    }

    .habibi-meal-card:hover,
    .habibi-meal-card:active,
    .habibi-meal-btn:not( :disabled ):hover,
    .habibi-meal-btn:not( :disabled ):active {
        transform: none;
    }

    /* Show check instantly */
    .habibi-meal-card--selected::after {
        opacity: 1;
        transform: none;
    }

    /* Show arrow instantly */
    .habibi-meal-btn:not( :disabled )::after {
        width: 1em;
        margin-left: 7px;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 480px ) {
    .habibi-meal-selector {
        padding: 20px 14px 16px;
        gap: 16px;
    }

    .habibi-meal-card {
        height: 96px;
    }

    .habibi-meal-cards {
        gap: 8px;
    }

    .habibi-meal-card__title {
        font-size: 0.9rem;
    }

    .habibi-meal-card__subtitle {
        font-size: 0.73rem;
    }
}