/**
 * Habibi Rome — Table Card Grid
 *
 * Redesigned to match the party-size step aesthetic:
 * white/light background, clean dark typography, minimal visual noise.
 *
 * Emil Kowalski principles:
 *   · Only transform + opacity animated (GPU, no layout thrash).
 *   · 180ms cubic-bezier(0.16,1,0.3,1) for hover transitions.
 *   · scale(0.97) press feedback at 80ms — instant, physical.
 *   · Selected state: dark border + subtle shadow.  No color fill.
 *   · Check badge: dark circle + white check, springs in on selection.
 *   · @media (hover:hover) gates hover transforms (safe on touch).
 *   · prefers-reduced-motion: animation stripped to opacity only.
 *
 * CSS variable inheritance:
 *   Injected inside #amelia-v2-booking-{n} via .habibi-booking-outer.
 *   All --am-* tokens resolve from Amelia's inline styles.
 *   Fallbacks mirror Amelia's production defaults.
 */

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

/* Wrapper entrance — mirrors meal/party-size step entrance keyframe */
@keyframes habibi-selector-in {
    from {
        opacity:   0;
        transform: translateY( 10px );
    }
    to {
        opacity:   1;
        transform: translateY( 0 );
    }
}

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

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

/* ==========================================================================
   Native employee dropdown — hidden via sibling combinator.
   Vue's virtual-DOM patching cannot affect sibling CSS rules, so these
   survive every Vue re-render without JS intervention.
   ========================================================================== */

.habibi-table-grid-wrapper ~ .am-employee-select,
.habibi-table-grid          ~ .am-employee-select,
.habibi-table-no-availability ~ .am-employee-select {
    height:   0 !important;
    overflow: hidden !important;
    margin:   0 !important;
    padding:  0 !important;
    border:   none !important;
}

.habibi-table-grid-wrapper ~ .am-fs-scl__content,
.habibi-table-grid          ~ .am-fs-scl__content {
    height:   0 !important;
    overflow: hidden !important;
    margin:   0 !important;
    padding:  0 !important;
    border:   none !important;
}

/* Legacy JS class — no longer set, kept for safety */
.habibi-table-native-hidden {
    height:   0 !important;
    overflow: hidden !important;
    margin:   0 !important;
    padding:  0 !important;
    border:   none !important;
}

/* ==========================================================================
   Grid wrapper  (header + grid + continue-button footer)
   Matches the container style of .habibi-party-size.
   ========================================================================== */

.habibi-table-grid-wrapper {
    display:          flex;
    flex-direction:   column;
    gap:              20px;
    width:            100%;
    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;

    /* Matches the party-size step entrance */
    animation: habibi-selector-in 0.35s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

/* ==========================================================================
   Step header — title + subtitle, mirrors .habibi-party-size__header
   ========================================================================== */

.habibi-table-header {
    text-align: center;
}

.habibi-table-header__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-table-header__subtitle {
    margin:      0;
    font-size:   0.875rem;
    line-height: 1.5;
    color:       var( --am-c-main-text, #1a2c37 );
    opacity:     0.55;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.habibi-table-grid {
    display:               grid;
    grid-template-columns: repeat( 2, 1fr );
    gap:                   8px;
    width:                 100%;
}

@media ( max-width: 480px ) {
    .habibi-table-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Card — horizontal layout: thumbnail left, text right.
   Visually distinct from the old vertical (full-bleed image) layout.
   ========================================================================== */

.habibi-table-card {
    position:                  relative;
    display:                   flex;
    flex-direction:            row;
    align-items:               stretch;
    border:                    1px solid rgba( 26, 44, 55, 0.10 );
    border-radius:             var( --am-brad-main, var( --am-brad-main-default, 8px ) );
    overflow:                  hidden;
    cursor:                    pointer;
    background:                var( --am-c-main-bgr, #ffffff );
    user-select:               none;
    -webkit-tap-highlight-color: transparent;
    outline:                   none;
    min-height:                76px;

    /* Staggered entrance — delay overridden per :nth-child below */
    opacity:   0;
    animation: habibi-table-in 280ms cubic-bezier( 0.16, 1, 0.3, 1 ) forwards;

    /* Only GPU-compositable properties */
    transition:
        border-color 180ms cubic-bezier( 0.16, 1, 0.3, 1 ),
        box-shadow   180ms cubic-bezier( 0.16, 1, 0.3, 1 ),
        opacity      180ms cubic-bezier( 0.16, 1, 0.3, 1 ),
        transform    100ms ease-out;
}

/* Stagger delays — 50 ms per card */
.habibi-table-card:nth-child(1) { animation-delay:   0ms; }
.habibi-table-card:nth-child(2) { animation-delay:  50ms; }
.habibi-table-card:nth-child(3) { animation-delay: 100ms; }
.habibi-table-card:nth-child(4) { animation-delay: 150ms; }
.habibi-table-card:nth-child(5) { animation-delay: 200ms; }
.habibi-table-card:nth-child(6) { animation-delay: 250ms; }
.habibi-table-card:nth-child(7) { animation-delay: 300ms; }
.habibi-table-card:nth-child(8) { animation-delay: 350ms; }

/* Focus ring — keyboard navigation */
.habibi-table-card:focus-visible {
    outline:    none;
    box-shadow: 0 0 0 3px rgba( 26, 44, 55, 0.18 );
}

/* ── Hover — pointer devices only ─────────────────────────────────────── */
@media ( hover: hover ) and ( pointer: fine ) {
    .habibi-table-card:not( .habibi-table-card--disabled ):hover {
        border-color: rgba( 26, 44, 55, 0.28 );
        box-shadow:   0 4px 16px rgba( 0, 0, 0, 0.07 );
        transform:    translateY( -1px );
    }
}

/* ── Press feedback ──────────────────────────────────────────────────── */
.habibi-table-card:not( .habibi-table-card--disabled ):active {
    transform:           scale( 0.98 );
    transition-duration: 80ms;
}

/* ── Selected state — dark left accent + border, no color fill ───────── */
.habibi-table-card--selected {
    border-color: var( --am-c-main-text, #1a2c37 );
    box-shadow:   0 0 0 2px rgba( 26, 44, 55, 0.12 );
}

/* Prominent left accent bar on selected card */
.habibi-table-card--selected::before {
    content:          '';
    position:         absolute;
    left:             0;
    top:              0;
    bottom:           0;
    width:            3px;
    background-color: var( --am-c-main-text, #1a2c37 );
    z-index:          4;
}

/* Dim non-selected cards once a selection is made (:has() — graceful no-op) */
.habibi-table-grid:has( .habibi-table-card--selected )
.habibi-table-card:not( .habibi-table-card--selected ) {
    opacity:             0.45;
    transition-duration: 200ms;
}

/* ── Disabled state ──────────────────────────────────────────────────── */
.habibi-table-card--disabled {
    opacity:        0.4;
    cursor:         not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   Card image — square thumbnail on the left
   ========================================================================== */

.habibi-table-card__image {
    width:       80px;
    flex-shrink: 0;
    overflow:    hidden;
    display:     block;
    align-self:  stretch;
}

.habibi-table-card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 400ms cubic-bezier( 0.16, 1, 0.3, 1 );
}

@media ( hover: hover ) and ( pointer: fine ) {
    .habibi-table-card:not( .habibi-table-card--disabled ):hover .habibi-table-card__image img {
        transform: scale( 1.06 );
    }
}

/* Placeholder — muted background + centred icon */
.habibi-table-card__image--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba( 26, 44, 55, 0.05 );
}

.habibi-table-card__image-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba( 26, 44, 55, 0.18 );
    width:           28px;
    height:          28px;
}

.habibi-table-card__image-icon svg {
    width:  28px;
    height: 28px;
}

/* ==========================================================================
   Card body — fills remaining width
   ========================================================================== */

.habibi-table-card__body {
    flex:           1;
    min-width:      0;   /* prevents flex overflow from clipping text */
    padding:        12px 36px 12px 14px;  /* right padding reserves space for check badge */
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            3px;
}

.habibi-table-card__name {
    font-family:    var( --am-font-family, inherit );
    font-size:      0.875rem;
    font-weight:    600;
    line-height:    1.25;
    letter-spacing: -0.01em;
    color:          var( --am-c-main-heading-text, var( --am-c-main-text, #1a2c37 ) );
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.habibi-table-card__meta {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

.habibi-table-card__capacity {
    display:     inline-flex;
    align-items: center;
    gap:         3px;
    font-family: var( --am-font-family, inherit );
    font-size:   0.75rem;
    font-weight: 400;
    line-height: 1.3;
    color:       var( --am-c-main-text, #1a2c37 );
    opacity:     0.5;
}

.habibi-table-card__capacity svg {
    width:       10px;
    height:      10px;
    flex-shrink: 0;
}

.habibi-table-card__desc {
    font-family:   var( --am-font-family, inherit );
    font-size:     0.7rem;
    line-height:   1.3;
    color:         var( --am-c-main-text, #1a2c37 );
    opacity:       0.4;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     100%;
}

/* ==========================================================================
   Unavailable badge — overlays the card image (top-left)
   ========================================================================== */

.habibi-table-card__unavailable {
    position:       absolute;
    top:            8px;
    left:           8px;
    z-index:        2;

    font-family:    var( --am-font-family, inherit );
    font-size:      0.65rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height:    1;

    padding:        3px 6px;
    border-radius:  3px;
    background:     rgba( 26, 44, 55, 0.65 );
    color:          rgba( 255, 255, 255, 0.9 );
    backdrop-filter: blur( 4px );
}

/* ==========================================================================
   Check badge — dark circle with white check, springs in on selection
   ========================================================================== */

.habibi-table-card__check {
    position:        absolute;
    top:             8px;
    right:           8px;
    z-index:         3;

    width:           20px;
    height:          20px;
    border-radius:   50%;
    background:      var( --am-c-main-text, #1a2c37 );
    color:           #ffffff;
    display:         flex;
    align-items:     center;
    justify-content: center;

    /* Hidden by default */
    opacity:   0;
    transform: scale( 0.4 ) rotate( -15deg );
    transition:
        opacity   0ms linear,
        transform 0ms linear;   /* animation takes full control when selected */
}

.habibi-table-card__check svg {
    width:  10px;
    height: 10px;
}

.habibi-table-card--selected .habibi-table-card__check {
    animation: habibi-table-check-in 300ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) forwards;
}

/* Snap back when deselected */
.habibi-table-card:not( .habibi-table-card--selected ) .habibi-table-card__check {
    opacity:   0;
    transform: scale( 0.4 );
    transition:
        opacity   150ms ease-out,
        transform 150ms ease-out;
}

/* ==========================================================================
   No-availability message
   ========================================================================== */

.habibi-table-no-availability {
    padding:     20px 16px;
    text-align:  center;
    font-family: var( --am-font-family, inherit );
    font-size:   0.9rem;
    line-height: 1.5;
    color:       var( --am-c-main-text, #1a2c37 );
    opacity:     0.7;
}

/* ==========================================================================
   Footer — Continue button
   Reuses .habibi-meal-btn from meal-selector.css (identical arrow animation
   and press-state behaviour).  Only layout is defined here.
   ========================================================================== */

.habibi-table-footer {
    display:         flex;
    justify-content: flex-end;
}

/* ==========================================================================
   Hide Amelia's native Continue / Next Step button while our table grid is
   active.  Uses html:has() so the rule matches regardless of where Amelia
   renders its button in the DOM (footer element, teleported Vue component,
   sibling outside the booking container, etc.).

   The :not() exclusion protects our own Continue button.
   Using html:has() — graceful no-op in browsers that do not support it.
   ========================================================================== */

/* ── Visually hide Amelia's native Continue button while our table grid
      is active, but DO NOT use display:none — that removes the element from
      the browser's event model and silently breaks programmatic .click() /
      dispatchEvent calls.  The off-screen position keeps the element
      render-connected so our click handler can trigger it reliably.     ── */
html:has( .habibi-table-grid-wrapper ) .am-button--primary:not( .habibi-table-continue-btn ),
html:has( .habibi-table-grid-wrapper ) .am-btn-primary:not(    .habibi-table-continue-btn ),
html:has( .habibi-table-grid-wrapper ) .el-button--primary:not( .habibi-table-continue-btn ) {
    position:       fixed   !important;
    left:           -9999px !important;
    top:            -9999px !important;
    width:          1px     !important;
    height:         1px     !important;
    overflow:       hidden  !important;
    pointer-events: none    !important;
    opacity:        0       !important;
    /* NOT display:none — keeps element in event tree for programmatic click */
}

/* ==========================================================================
   Amelia "Bringing anyone with you?" popup — always hidden.
   JS detects activation via el.style.display (v-show inline style) and
   auto-clicks through.  CSS ensures the popup is never seen by the user.
   ========================================================================== */

.am-fs__init__bringing,
.am-fs__init .am-slide-popup__block {
    display: none !important;
}

/* ==========================================================================
   Reduced-motion overrides
   Remove positional movement; keep opacity-only transitions for clarity.
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
    .habibi-table-card {
        animation:  none !important;
        opacity:    1 !important;
        transform:  none !important;
        transition: border-color 150ms ease, opacity 150ms ease !important;
    }

    .habibi-table-card:not( .habibi-table-card--disabled ):active {
        transform: none;
    }

    .habibi-table-card__image img {
        transition: none !important;
    }

    .habibi-table-card--selected .habibi-table-card__check {
        animation: none !important;
        opacity:   1 !important;
        transform: scale( 1 ) !important;
    }

    .habibi-table-card:not( .habibi-table-card--selected ) .habibi-table-card__check {
        opacity:    0 !important;
        transition: opacity 150ms ease !important;
    }
}