/* ----------
   11. Room card
   ---------- */
.room-card {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-ink-800);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), border-color var(--t-med);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.room-card:hover {
    transform: translateY(-8px);
    border-color: rgba(230, 181, 74, 0.4);
    box-shadow: 0 30px 80px -30px rgba(230, 181, 74, 0.4);
}
.room-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.room-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) saturate(1.1);
    transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow);
}
.room-card:hover .room-card__media img {
    transform: scale(1.08);
    filter: brightness(0.85) saturate(1.2);
}
.room-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 18, 0.9));
}
.room-card__badges {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}
.room-card__live {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-neon-cyan);
    background: rgba(75, 227, 255, 0.1);
    border: 1px solid rgba(75, 227, 255, 0.3);
    padding: 0.25rem 0.6rem;
    border-radius: var(--r-pill);
    backdrop-filter: blur(8px);
}
.room-card__live::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-neon-cyan);
    margin-right: 0.35rem;
    box-shadow: 0 0 8px var(--c-neon-cyan);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Branded fallback panel shown in place of an <img> wherever a room/game
   photo or blog featured image hasn't been uploaded yet — fills whatever
   sizing (aspect-ratio, height:100%) the caller's image slot already
   defines, so it drops into .room-card__media, .post-card__media,
   .room-hero__bg, etc. without any layout changes. See
   cr_image_or_fallback() in inc/helpers.php. */
.img-fallback {
    width: 100%;
    height: 100%;
    min-height: 160px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    overflow: hidden;
    background: linear-gradient(160deg, var(--c-ink-800), var(--c-ink-900) 75%);
}
.img-fallback__glow {
    position: absolute;
    width: 60%;
    aspect-ratio: 1;
    max-width: 220px;
    border-radius: 50%;
    background: var(--c-gold-400);
    filter: blur(60px);
    opacity: 0.22;
    pointer-events: none;
}
.img-fallback__icon {
    width: 34px;
    height: 34px;
    color: var(--c-gold-300);
    opacity: 0.6;
    position: relative;
}
.img-fallback__label {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-mute);
}

.room-card__body {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
}
.room-card__cat {
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-gold-300);
    font-weight: 600;
}
.room-card__title {
    font-size: 1.5rem;
    line-height: 1.1;
}
.room-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    font-size: 0.85rem;
    color: var(--c-text-dim);
}
.room-card__specs span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.room-card__specs svg {
    width: 15px;
    height: 15px;
    color: var(--c-gold-400);
}
.room-card__foot {
    margin-top: auto;
    padding-top: var(--sp-2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.room-card__price .from {
    font-size: 0.72rem;
    color: var(--c-text-mute);
    display: block;
}
.room-card__price .amt {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--c-gold-300);
}

/* Shop product card — mirrors .room-card's structure/tokens. */
.product-card {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-ink-800);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), border-color var(--t-med);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(230, 181, 74, 0.4);
    box-shadow: 0 30px 80px -30px rgba(230, 181, 74, 0.4);
}
.product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--c-ink-900);
}
.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.product-card:hover .product-card__media img {
    transform: scale(1.08);
}
.product-card__badges {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}
.wishlist-btn {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    line-height: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(10, 10, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-dim);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.wishlist-btn svg {
    display: block;
    flex: none;
}
.wishlist-btn:hover {
    color: var(--c-gold-300);
    border-color: rgba(230, 181, 74, 0.4);
}
.wishlist-btn.is-active {
    color: var(--c-gold-300);
    border-color: rgba(230, 181, 74, 0.4);
}
.wishlist-btn.is-active svg {
    fill: currentColor;
}
/* WooCommerce appends "View cart" (a.added_to_cart) as a sibling right
   after the add-to-cart button once AJAX add succeeds — with no flex
   layout here it fell back to inline default spacing (crammed against the
   button, baseline-aligned instead of centered). Lay both out as a
   centered row with breathing room between them. */
.product-card__quick-add {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
/* Exactly the same sizing as the header's .btn/.btn--ghost pills (padding,
   radius, font, hover lift+shadow, and the diagonal shimmer sweep on hover)
   — not just a similar smaller one-off. */
.product-card__quick-add a,
.product-card__quick-add a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem;
    border-radius: var(--r-pill);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background var(--t-fast), border-color var(--t-fast);
}
.product-card__quick-add a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: translateX(-120%);
    transition: transform var(--t-slow) var(--ease-out);
    z-index: -1;
}
.product-card .product-card__quick-add a:hover::before {
    transform: translateX(120%);
}
/* Primary — a directly-purchasable product ("Add to cart"). WooCommerce
   puts .add_to_cart_button on EVERY loop button regardless of product type
   (variable products get it too, just without .ajax_add_to_cart, since
   clicking theirs navigates to the product page instead of adding via
   AJAX) — .ajax_add_to_cart is the class that actually distinguishes the
   two, not .add_to_cart_button. */
.product-card__quick-add a.ajax_add_to_cart {
    background: var(--c-gold-400);
    color: var(--c-black);
}
/* WooCommerce's own stylesheet ships ".woocommerce a.button:hover" at the
   same specificity as ".product-card__quick-add a...:hover" (a tie that, in
   practice, WC's own rule keeps winning) with its own
   background-color — repaints these buttons an unrelated lavender/white on
   hover. Scope through the card wrapper too (".product-card
   .product-card__quick-add") so ours is unambiguously more specific. */
.product-card .product-card__quick-add a.ajax_add_to_cart:hover {
    background: var(--c-gold-300);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -16px rgba(230, 181, 74, 0.7);
}
/* Secondary — anything that routes to the product page instead
   ("Select options" on variable products, "Read more" otherwise). */
.product-card__quick-add a:not(.ajax_add_to_cart) {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--c-text);
    backdrop-filter: blur(8px);
}
.product-card .product-card__quick-add a:not(.ajax_add_to_cart):hover {
    background: transparent;
    border-color: var(--c-gold-400);
    color: var(--c-text);
    box-shadow: var(--sh-glow-gold);
}
.product-card__body {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}
.product-card__foot {
    margin-top: auto;
    padding-top: var(--sp-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.product-card__cat {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-mute);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.product-card__cat .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-gold-400);
    display: inline-block;
    flex: none;
}
.product-card__title {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.3;
}
.product-card__title a {
    color: var(--c-text);
}
.product-card__title a:hover {
    color: var(--c-gold-300);
}
.product-card__price {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--c-gold-300);
}
.product-card__price del {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--c-text-mute);
    text-decoration: line-through;
    margin-right: 0.4rem;
}
.product-card__price ins {
    text-decoration: none;
}
.chip--sale {
    background: rgba(198, 91, 78, 0.15);
    border-color: rgba(198, 91, 78, 0.45);
    color: #e08c7d;
}

/* List view modifier */
.rooms-grid.is-list {
    grid-template-columns: 1fr;
}
.rooms-grid.is-list .room-card {
    flex-direction: row;
}
.rooms-grid.is-list .room-card__media {
    aspect-ratio: 16 / 10;
    flex: 0 0 42%;
}
.rooms-grid.is-list .room-card__body {
    flex: 1;
}
.rooms-grid.is-list .product-card {
    flex-direction: row;
}
.rooms-grid.is-list .product-card__media {
    aspect-ratio: 16 / 10;
    flex: 0 0 42%;
}
.rooms-grid.is-list .product-card__body {
    flex: 1;
}

/* ----------
   23. Single room layout
   ---------- */
.room-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    padding-top: calc(var(--header-h) + var(--admin-bar-h));
    overflow: hidden;
}
.room-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.room-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4);
}
.room-hero__bg .img-fallback {
    min-height: 100%;
}
.room-hero__bg .img-fallback__icon {
    width: 56px;
    height: 56px;
}
.room-hero__bg .img-fallback__label {
    font-size: 0.82rem;
}
.room-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(6, 7, 10, 0.95));
}
.room-hero__content {
    padding-bottom: var(--sp-6);
}
.room-meta-row,
.post-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-block: var(--sp-3);
}
.room-meta-row .meta-item,
.post-meta-row .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-text-dim);
    font-size: 0.9rem;
}
.room-meta-row .meta-item svg,
.post-meta-row .meta-item svg {
    width: 18px;
    height: 18px;
    color: var(--c-gold-400);
}

.room-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--sp-4);
    align-items: start;
}
/* A grid item's default min-width is `auto` (its max-content size), not 0
   — without this, .room-content can render wider than its own 1fr track
   whenever its content's intrinsic width is large (the reviews-slider's
   un-shrunk max-content size, in particular), which also then pushes the
   whole page into horizontal overflow on mobile once .room-layout collapses
   to a single column and .room-content becomes the only/full-width track. */
.room-content {
    min-width: 0;
}
.room-content > * + * {
    margin-top: var(--sp-5);
}
.room-sidebar {
    position: sticky;
    top: calc((var(--header-h) + var(--admin-bar-h)) + 1rem);
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.gallery__item {
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.gallery__item:hover img {
    transform: scale(1.1);
}
.gallery__item--lg {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1;
}

.intensity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}
.intensity-card {
    padding: var(--sp-2);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}
.intensity-card .label {
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-mute);
    margin-bottom: 0.5rem;
}

/* ----------
   28. Records slider
   ---------- */
.records-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.records-slider {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    flex: 1;
    cursor: grab;
    user-select: none;
}
.records-slider::-webkit-scrollbar { display: none; }
.records-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.record-card {
    flex: 0 0 calc(50% - 1.75rem);
    scroll-snap-align: start;
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
}
.record-card__photo {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.record-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.record-card:hover .record-card__photo img {
    transform: scale(1.06);
}
.record-card__photo-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: rgba(230, 181, 74, 0.08);
    border: 1px solid rgba(230, 181, 74, 0.2);
}
.record-card__photo-fallback svg {
    width: 44%;
    height: 44%;
    color: var(--c-gold-400);
}

/* Single-room reviews slider — 1 card at a time, next card peeking, shares nav-button look with .records-nav */
.reviews-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.reviews-slider {
    display: flex;
    align-items: stretch;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    flex: 1;
    cursor: grab;
    user-select: none;
}
.reviews-slider::-webkit-scrollbar { display: none; }
.reviews-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.reviews-slider .review {
    flex: 0 0 88%;
    scroll-snap-align: start;
}

/* "Secure checkout — pay safely by card" note under the booking/checkout
   button — cr_render_secure_checkout_note() in inc/helpers.php is called by
   both single-room.php and single-online_game.php, but its own styling
   only lived in single-product.css, which never loads on either (that file
   is gated to real WooCommerce product pages, and the shop is currently
   closed anyway). rooms.css is enqueued on both single-room and
   single-online_game, so it belongs here too. */
.cr-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--c-text-mute);
}
.cr-secure-note svg {
    color: var(--c-gold-400);
    flex: none;
}

/* Responsive overrides for this file's own selectors live here, not in
   base.css — base.css loads BEFORE this file, so a same-specificity
   @media rule there loses the cascade tie to this file's unconditional
   desktop rule regardless of viewport (moved out after finding several
   "dead" mobile overrides this way — .room-layout not collapsing to one
   column being the one that actually broke the page, oversizing the
   reviews-slider .review cards it contains). */
@media (max-width: 1024px) {
    .room-layout {
        grid-template-columns: 1fr;
    }
    .room-sidebar {
        position: static;
    }
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    .gallery__item--lg {
        grid-column: span 3;
        grid-row: span 1;
    }
}
@media (max-width: 768px) {
    /* The section right after .room-hero (single room/online_game) reads as
       jammed under the fixed header on mobile — the hero itself accounts for
       header height via padding-top, but this next section only had the
       generic .section mobile padding-block, with no extra room for the
       header floating on top of it as you scroll into it. */
    .room-hero + .section {
        padding-top: calc(2.5rem + 1.5rem);
    }
    .records-wrap {
        gap: var(--sp-1);
    }
    .record-card {
        flex: 0 0 100%;
    }
    /* Match the homepage's mobile testimonials pattern (home.css #reviews
       .reviews): plain swipeable row, no prev/next buttons. Keeps the
       desktop rule's align-items:stretch (every card in the row matches
       the tallest one's height) on purpose — cards are meant to line up
       evenly at a uniform height sized to the longest review, not each
       hug its own content. */
    .reviews-nav {
        display: none;
    }
    .reviews-wrap {
        gap: 0;
    }
    .reviews-slider .review {
        flex: 0 0 82%;
    }
    .rooms-grid.is-list .room-card {
        flex-direction: column;
    }
    .rooms-grid.is-list .room-card__media {
        flex: none;
        aspect-ratio: 16 / 10;
        width: 100%;
    }
    .rooms-grid.is-list .product-card {
        flex-direction: column;
    }
    .rooms-grid.is-list .product-card__media {
        flex: none;
        aspect-ratio: 16 / 10;
        width: 100%;
    }
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery__item--lg {
        grid-column: span 2;
    }
    .intensity-grid {
        gap: 0.5rem;
    }
    .intensity-card {
        padding: 0.6rem 0.35rem;
    }
    .intensity-card .label {
        font-size: 0.66rem;
        margin-bottom: 0.4rem;
    }
}