/* ════════════════════════════════════════════════════════════════════════
 * search_variants.css — FINAL search-results polish (rev 4, May 2026).
 *
 * Filename kept as `search_variants.css` for compatibility with the link
 * tags already in activity_search.php / restaurant_search.php /
 * search_accomodation.php. The 3-variant mockup approach (Airbnb / Booking
 * / Magazine) was replaced after testing — the user picked the Booking
 * horizontal layout as the strongest visual baseline; this file is that
 * design refined and applied unconditionally (no `body[data-style]`
 * scoping anymore).
 *
 * Coverage:
 *   • All 3 search pages (activity / restaurant / accommodation)
 *   • Both modern (`.act-card` / `.hotel-card`) and legacy (`.--legacy`)
 *     card variants
 *   • Both image conventions: `.ac-img` (direct img on activity/restaurant)
 *     and `.hc-carousel` (positioned-absolute multi-image gallery on
 *     accommodation). Image aspect-ratio is forced consistent for both.
 *
 * Why so much `!important`: multiple older blocks compete for the same
 * selectors across activities.css / accommodations.css / vision_desktop.css
 * / tratok_design_system.css / per-page inline <style> blocks. Without
 * `!important` on this last-loaded sheet, half the rules silently lose.
 * ════════════════════════════════════════════════════════════════════════ */


/* ─── HERO ─────────────────────────────────────────────────────────── */

.search-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 22px 28px !important;
    background:
        radial-gradient(ellipse 70% 100% at 0% 50%, rgba(232,93,58,0.12) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20,28,46,0.82) 0%, rgba(13,19,33,0.96) 100%) !important;
    border: 1px solid rgba(232,93,58,0.16) !important;
    border-radius: 18px !important;
    margin: 18px 0 !important;
    box-shadow:
        0 12px 32px rgba(0,0,0,0.36),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    position: relative;
}
.search-bar::before { display: none !important; }

.sb-info { flex: 1 1 auto !important; min-width: 0 !important; }

.sb-dest {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.014em !important;
    line-height: 1.15 !important;
    color: #F8FAFC !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
}
.sb-dest::before {
    content: "\f3c5" !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 0.72em !important;
    color: #E85D3A !important;
    flex-shrink: 0 !important;
    text-shadow: 0 0 14px rgba(232,93,58,0.5) !important;
}

.sb-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 18px !important;
    margin-top: 10px !important;
    font-size: 0.86rem !important;
}
.sb-meta span,
.sb-meta .sb-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #CBD5E1 !important;
    font-weight: 500 !important;
    position: relative !important;
    font-size: inherit !important;
}
.sb-meta span i,
.sb-meta .sb-pill i {
    color: #E85D3A !important;
    font-size: 0.86rem !important;
    opacity: 0.92 !important;
}
.sb-meta span + span::before,
.sb-meta .sb-pill + .sb-pill::before,
.sb-meta span + .sb-pill::before,
.sb-meta .sb-pill + span::before {
    content: '' !important;
    display: inline-block !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: #475569 !important;
    margin-inline-end: 12px !important;
    vertical-align: middle !important;
}

/* Friend pile — neutral inline capsule, kills the teal chip from
   tratok_design_system.css and the green outline from anywhere else. */
.sb-friends {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-inline-start: auto !important;
}
.sb-friends .t-friend-pile {
    background: rgba(148, 163, 184, 0.06) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    padding: 5px 12px 5px 6px !important;
    border-radius: 999px !important;
    color: #CBD5E1 !important;
    font-size: 0.78rem !important;
    gap: 8px !important;
}
.sb-friends .t-friend-pile__avatar {
    width: 26px !important;
    height: 26px !important;
    border-width: 2px !important;
}
.sb-friends .t-friend-pile__avatar--more {
    background: rgba(232, 93, 58, 0.85) !important;
    color: #fff !important;
    font-size: 0.62rem !important;
}

/* Edit button — solid ember pill, mobile AND desktop */
.sb-edit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 22px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #E85D3A 0%, #D94B2A 100%) !important;
    border: none !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.003em !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 16px rgba(232, 93, 58, 0.38) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important;
}
.sb-edit i { font-size: 13px !important; }
.sb-edit-label { display: inline !important; }
.sb-edit:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 22px rgba(232, 93, 58, 0.5) !important;
}
.sb-edit:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 10px rgba(232, 93, 58, 0.32) !important;
}

/* Hero responsive collapse */
@media (max-width: 720px) {
    .search-bar { padding: 16px 18px !important; gap: 12px !important; }
    .sb-dest    { font-size: 1.4rem !important; }
    .sb-meta    { font-size: 0.78rem !important; gap: 4px 12px !important; margin-top: 6px !important; }
    .sb-info    { flex: 1 1 100% !important; }
    .sb-friends { order: 3 !important; flex-basis: 100% !important; margin: 4px 0 0 !important; }
    .sb-friends .t-friend-pile { font-size: 0.74rem !important; }
    .sb-edit    { padding: 11px 18px !important; font-size: 0.84rem !important; }
}
@media (max-width: 420px) {
    .search-bar { padding: 14px 16px !important; gap: 10px !important; }
    .sb-dest    { font-size: 1.2rem !important; }
    .sb-edit-label { display: none !important; }
    .sb-edit    { padding: 10px 12px !important; }
}


/* ─── RESULTS TOOLBAR ─────────────────────────────────────────────── */

.results-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin: 8px 0 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.08) !important;
}
.results-toolbar .chips {
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    background: transparent !important;
}
.results-toolbar .chips::-webkit-scrollbar { display: none; }

/* Result count — explicitly sans-serif at small size. Some upstream
   rule (vision_desktop or tratok_design_system) was promoting this to
   a Playfair heading on desktop; the explicit font-family + size with
   !important guarantees the override sticks. */
.results-toolbar .result-count,
.result-count {
    margin: 0 !important;
    padding: 0 !important;
    color: #94A3B8 !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-align: start !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    border: none !important;
}
.results-toolbar .result-count .rc-sub,
.result-count .rc-sub {
    color: #64748B !important;
    font-weight: 500 !important;
    font-size: 0.94em !important;
    margin-inline-start: 4px !important;
}

@media (max-width: 480px) {
    .results-toolbar { gap: 10px !important; margin-bottom: 14px !important; }
    .results-toolbar .chips       { flex-basis: 100% !important; order: 1 !important; }
    .results-toolbar .result-count { flex-basis: 100% !important; order: 2 !important; }
}


/* ─── CARDS — UNIFIED HORIZONTAL DESIGN ───────────────────────────── */

/* Shared outer-shell: gradient surface, subtle border, hover lift.
   Targets activity + restaurant + accommodation card classes including
   their legacy variants. */
.act-card,
.act-card--legacy,
.ac-card,
.hotel-card,
.hotel-card--legacy,
.hot-card {
    background: linear-gradient(180deg, #11182B 0%, #0C1322 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;
    text-decoration: none !important;
    color: inherit !important;
    margin-bottom: 0 !important;
}
.act-card:hover,
.ac-card:hover,
.hotel-card:hover,
.hot-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 93, 58, 0.32) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42),
                0 4px 12px rgba(232, 93, 58, 0.10) !important;
}
.act-card--legacy:hover,
.hotel-card--legacy:hover { transform: none !important; }

/* Image: forced aspect ratio + object-fit cover, no more ragged sizes.
   Two image conventions on the platform:
     • `.ac-img` (activity, restaurant) — the IMG element itself
     • `.hc-carousel` (accommodation) — wrapper with absolutely-positioned IMGs
   The rules below apply consistent dimensions to both, then the
   positioned-img rule inside `.hc-carousel` keeps the carousel mechanic. */
.ac-img,
.hot-img,
.hotel-img,
.hc-carousel {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    object-fit: cover !important;
    background: #1E293B !important;
    display: block !important;
    flex-shrink: 0 !important;
}
.hc-carousel { position: relative !important; overflow: hidden !important; }
.hc-carousel img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Body */
.ac-body,
.hot-body,
.hotel-body,
.hc-body {
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.ac-top, .hc-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.ac-name,
.hot-name,
.hotel-name,
.hc-name {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: -0.005em !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
}
.ac-location,
.hot-location,
.hotel-location,
.hc-location {
    font-size: 0.78rem !important;
    color: #94A3B8 !important;
    margin: 2px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.ac-location i,
.hc-location i {
    color: #E85D3A !important;
    font-size: 11px !important;
}

.ac-desc,
.hot-desc,
.hotel-desc,
.hc-desc {
    font-size: 0.84rem !important;
    color: #CBD5E1 !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 6px 0 0 !important;
}

.ac-perks { margin-top: 8px !important; gap: 10px !important; flex-wrap: wrap; }
.ac-perk  { font-size: 0.66rem !important; color: #2ECDA7 !important; }
.ac-participants {
    margin-top: 8px !important;
    background: rgba(139, 92, 246, 0.12) !important;
    color: #B498F2 !important;
    font-size: 0.66rem !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    align-self: flex-start;
}

.ac-footer,
.hot-footer,
.hotel-footer,
.hc-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 12px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.08) !important;
}
.ac-price-wrap { display: flex; flex-direction: column; gap: 2px; }

.ac-price,
.hot-price,
.hotel-price,
.hc-price {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
    letter-spacing: -0.008em !important;
    line-height: 1.1 !important;
    font-family: inherit !important;
}
.ac-price small,
.hc-price small {
    font-size: 0.6em !important;
    color: #E85D3A !important;
    font-weight: 600 !important;
    margin-inline-start: 2px !important;
}
.ac-per,
.ac-total,
.hc-pinfo,
.hc-avail {
    font-size: 0.66rem !important;
    color: #64748B !important;
    font-weight: 500 !important;
    margin: 0 !important;
}
.hc-avail { color: #2ECDA7 !important; font-weight: 600 !important; }
.ac-discount,
.hc-discount {
    background: rgba(46, 205, 167, 0.12) !important;
    color: #2ECDA7 !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    margin-bottom: 4px !important;
}

.ac-btn,
.hot-btn,
.hotel-btn,
.hc-btn {
    padding: 12px 20px !important;
    background: linear-gradient(135deg, #E85D3A 0%, #D94B2A 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 4px 14px rgba(232, 93, 58, 0.30) !important;
    white-space: nowrap !important;
    transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}
.ac-btn i, .hc-btn i { font-size: 12px !important; }
.ac-btn:hover, .hc-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 7px 18px rgba(232, 93, 58, 0.42) !important;
}

/* DESKTOP (≥768): horizontal layout — image left, content right.
   Single column grid so each card has room to breathe. */
@media (min-width: 768px) {
    .act-card,
    .act-card--legacy,
    .ac-card,
    .hotel-card,
    .hotel-card--legacy,
    .hot-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
    }
    .ac-img,
    .hot-img,
    .hotel-img,
    .hc-carousel {
        width: 320px !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        max-height: none !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
    }
    .ac-body,
    .hot-body,
    .hotel-body,
    .hc-body {
        flex: 1 !important;
        padding: 22px 26px !important;
    }
    .ac-footer,
    .hot-footer,
    .hotel-footer,
    .hc-footer {
        margin-top: auto !important;
    }
    /* Single-column grid */
    body #activityResults,
    body #hotelResults,
    body #restaurantResults,
    body .results,
    body .activity-list,
    body .hotel-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        max-width: 960px !important;
        margin: 0 auto !important;
        gap: 16px !important;
    }
}
@media (min-width: 1280px) {
    .ac-img,
    .hot-img,
    .hotel-img,
    .hc-carousel { width: 360px !important; }
    body #activityResults,
    body #hotelResults,
    body #restaurantResults,
    body .results,
    body .activity-list,
    body .hotel-list { max-width: 1040px !important; }
}

/* Legacy "Coming Soon" overlay — softer than the original red ban,
   matches the rest of the design language. */
.act-card--legacy,
.hotel-card--legacy {
    opacity: 0.85;
    cursor: not-allowed !important;
}
.act-card--legacy:hover,
.hotel-card--legacy:hover {
    border-color: rgba(148, 163, 184, 0.10) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;
}

/* Hide deferred-pagination cards regardless — wins over both
   activities.css and accommodations.css rules from rev3 + perf phase 1. */
.ac-card[data-deferred="1"],
.act-card[data-deferred="1"],
.hot-card[data-deferred="1"],
.hotel-card[data-deferred="1"],
.car-card[data-deferred="1"] { display: none !important; }

/* Style switcher widget — hidden permanently. The variant approach was
   replaced by this single design. The `.style-switcher` markup is still
   emitted by app_includes/style_switcher.php on pages that still call
   tratokRenderStyleSwitcher(); hiding via CSS is the lowest-risk kill. */
.style-switcher { display: none !important; }