/* ── Venues Listing Page ─────────────────────────────────────────────────────── */
body { background: #fff; }
.venues-section, .venues-filter-section, .venues-hero p,
.venues-section input, .venues-section select, .venues-section textarea, .venues-section button { font-family: 'Roboto', sans-serif; }

/* Hero */
.venues-hero {
    background: url('../images/venues-hero.jpg') center center/cover no-repeat;
    padding: 160px 0 60px;
    text-align: center;
    color: #fff;
    position: relative !important;
    overflow: hidden !important;
}
.venues-hero-overlay {
    position: absolute !important;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,31,60,.72) 0%, rgba(13,31,60,.60) 100%);
    z-index: 1;
}
.venues-hero-text-wrap { display: contents; }
.venues-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 16px;
    font-family: 'Raleway', sans-serif;
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.venues-hero p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Filter Bar ─────────────────────────────────────────────────────────────── */
.venues-filter-section { background:#fff; border-bottom:1px solid #f0f0f5; padding:12px 0 10px; position:sticky; top:60px; z-index:99; box-shadow:0 4px 20px rgba(0,0,0,0.05); }
@media(max-width:992px){ .venues-filter-section { top:0; } }
#venueFilterForm { display:flex; flex-direction:column; gap:0; }

/* View toggle */
.vf-view-toggle { display:flex; gap:4px; flex-shrink:0; }
.vf-view-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; border:1px solid #e5e7ef; background:#fff; color:#6b7280; transition:all 0.15s; cursor:pointer; }
.vf-view-btn svg { width:16px; height:16px; }
.vf-view-btn:hover { border-color:#6c63ff; color:#6c63ff; }
.vf-view-btn.active { background:#6c63ff; border-color:#6c63ff; color:#fff; }

/* ── Airbnb unified filter bar ───────────────────────────────────────────────── */
.vf-bar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 0 2px;
}

/* The unified bar — one pill containing all segments */
.vf-unified-bar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #dddddd;
    border-radius: 40px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
    overflow: visible;
    position: relative;
    flex: 1;
    max-width: 900px;
}
.vf-unified-bar:focus-within {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 6px 20px rgba(0,0,0,0.08);
}

/* Divider between segments */
.vf-bar-divider {
    width: 1px;
    background: #dddddd;
    align-self: stretch;
    margin: 8px 0;
    flex-shrink: 0;
}

/* Each segment wrapper — positions the dropdown */
.vf-seg-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.vf-seg-search-wrap { flex: 2; }
.vf-seg-city-wrap   { flex: 1.2; }

/* Segment — button style (for filter segments) */
.vf-seg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    white-space: nowrap;
    box-sizing: border-box;
}
.vf-seg:hover { background: #f7f7f7; }

/* First and last segment rounded corners */
.vf-seg-wrap:first-child .vf-seg        { border-radius: 40px 0 0 40px; }
.vf-seg-wrap:first-child .vf-seg:hover  { border-radius: 40px 0 0 40px; }

/* Input-style segments (Search, City) */
.vf-seg.vf-seg-input {
    cursor: default;
}
.vf-seg.vf-seg-input:hover { background: transparent; }
.vf-seg-wrap:first-child .vf-seg.vf-seg-input:hover { background: transparent; }

/* Text input inside segment */
.vf-seg-text-input {
    border: none;
    outline: none;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: #222222;
    background: transparent;
    width: 100%;
    padding: 0;
    margin-top: 2px;
    line-height: 1.3;
}
.vf-seg-text-input::placeholder { color: #b0b0b0; font-weight: 400; }

/* Select inside segment */
.vf-seg-select {
    border: none;
    outline: none;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: #222222;
    background: transparent;
    width: 100%;
    padding: 0;
    margin-top: 2px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.3;
}
.vf-seg-select option { color: #222222; }

/* Segment label (small bold, always dark) */
.vf-seg-label {
    font-size: 11px;
    font-weight: 700;
    color: #222222;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
    line-height: 1.2;
    display: block;
    pointer-events: none;
}

/* Segment value (shows current filter selection) */
.vf-seg-value {
    font-size: 13px;
    font-weight: 400;
    color: #b0b0b0;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
    display: block;
    margin-top: 2px;
}
.vf-seg.vf-seg-active .vf-seg-value { color: #222222; font-weight: 500; }

/* Search button at end of bar */
.vf-seg-search-btn-wrap {
    display: flex;
    align-items: center;
    padding: 6px 6px 6px 4px;
    flex-shrink: 0;
}
.vf-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E8192C;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.vf-search-btn:hover { background: #c0101f; transform: scale(1.05); }
.vf-search-btn svg { flex-shrink: 0; color: #fff !important; stroke: #fff !important; }

/* Dropdown panel */
.vf-seg-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #dddddd;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
    padding: 14px;
    z-index: 300;
}
.vf-seg-panel.open { display: block; }
/* Right-aligned panel for last segment */
.vf-seg-panel-right { left: auto; right: 0; }

/* Panel label */
.vf-panel-label {
    font-size: 11px;
    font-weight: 700;
    color: #717171;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

/* Checkbox rows (Setting panel) */
.vf-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.vf-check-row:hover { background: #f7f7f7; }
.vf-check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #222222;
    cursor: pointer;
    flex-shrink: 0;
}
.vf-check-text {
    font-size: 14px;
    font-weight: 500;
    color: #222222;
    font-family: 'Inter', sans-serif;
}

/* City panel — search input */
.vf-city-search-input {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: #222;
    outline: none;
    box-sizing: border-box;
    background: #f7f7f7;
    transition: border-color 0.15s, background 0.15s;
}
.vf-city-search-input:focus { border-color: #6c63ff; background: #fff; }
.vf-city-search-input::placeholder { color: #b0b0b0; }

/* City panel — scrollable list */
.vf-city-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.vf-city-list::-webkit-scrollbar { width: 4px; }
.vf-city-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* City panel width */
#vfPanelCity { min-width: 220px; }

/* Option buttons (Guests / Per Page panels) */
.vf-panel-option {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #222222;
    cursor: pointer;
    font-weight: 400;
    transition: background 0.12s;
    box-sizing: border-box;
}
.vf-panel-option:hover { background: #f7f7f7; }
.vf-panel-option.selected { font-weight: 600; }
.vf-panel-option.selected::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 11px;
    border-right: 2px solid #222222;
    border-bottom: 2px solid #222222;
    transform: rotate(45deg) translateY(-2px);
    margin-left: auto;
    flex-shrink: 0;
}

/* Clear button beside the bar */
.vf-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 40px;
    border: 1px solid #dddddd;
    background: #fff;
    color: #717171;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    flex-shrink: 0;
}
.vf-clear-btn:hover { border-color: #222222; color: #222222; text-decoration: none; }

/* Always show clear — just dimmer when no active filters */
.vf-clear-btn.vf-clear-inactive {
    opacity: 0.4;
    pointer-events: none;
}

/* Desktop: hide mobile bar; Mobile: hide desktop bar */
.vf-mobile-bar    { display: none; }
.vf-mobile-panel  { display: none; }

@media (max-width: 899px) {
    /* Hide the full desktop unified bar */
    .vf-bar-row { display: none; }
    /* Show mobile bar */
    .vf-mobile-bar { display: flex; }
}

/* ── Mobile bar ─────────────────────────────────────────────────────────────── */
.vf-mobile-bar {
    align-items: center;
    gap: 8px;
    padding: 4px 0 2px;
}

/* Search pill */
.vf-mobile-search-pill {
    display: flex;
    align-items: center;
    flex: 1;
    background: #fff;
    border: 1px solid #dddddd;
    border-radius: 40px;
    padding: 0 6px 0 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05);
    gap: 8px;
    min-width: 0;
}
.vf-mobile-search-pill > svg:first-child { color: #ffffff; flex-shrink: 0; }
.vf-mobile-search-pill svg { flex-shrink: 0; }
.vf-mobile-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #222222;
    background: transparent;
    padding: 11px 0;
    min-width: 0;
}
.vf-mobile-search-input::placeholder { color: #b0b0b0; }
.vf-mobile-search-go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #E8192C;
    border: none;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.vf-mobile-search-go:hover { background: #c0101f; }

/* Divider between search and filter icon inside pill */
.vf-mobile-pill-divider {
    width: 1px;
    height: 24px;
    background: #dddddd;
    flex-shrink: 0;
    margin: 0 2px;
}

/* Filter icon button — inline segment inside the search pill */
.vf-mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: #555555;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    border-radius: 40px;
    transition: background 0.15s, color 0.15s;
}
.vf-mobile-filter-btn:hover { background: #f5f5f5; color: #222222; }
.vf-mobile-filter-btn.has-active { color: #222222; }
.vf-mobile-filter-btn.open { background: #f0f0f0; color: #222222; }

/* Active filter dot — hidden */
.vf-filter-dot {
    display: none !important;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6c63ff;
    margin-left: 2px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Mobile view toggle */
.vf-mobile-view-toggle { flex-shrink: 0; }

/* ── Mobile filter dropdown panel ───────────────────────────────────────────── */
.vf-mobile-panel {
    background: #fff;
    border: 1px solid #dddddd;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    margin-top: 8px;
    overflow: hidden;
    animation: vfPanelIn 0.18s ease;
}
.vf-mobile-panel.open { display: block; }

@keyframes vfPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Panel section */
.vf-mp-section {
    padding: 14px 18px;
}
.vf-mp-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 0 18px;
}
.vf-mp-label {
    font-size: 11px;
    font-weight: 700;
    color: #717171;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
}

/* City select */
.vf-mp-select {
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #222222;
    background: #fff;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.vf-mp-select:focus { border-color: #222222; }

/* Checkboxes */
.vf-mp-checks {
    display: flex;
    gap: 16px;
}
.vf-mp-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #222222;
    font-family: 'Inter', sans-serif;
}
.vf-mp-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #222222;
    cursor: pointer;
    flex-shrink: 0;
}

/* Option chips (Min Guests / Per Page) */
.vf-mp-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vf-mp-option {
    padding: 7px 14px;
    border-radius: 40px;
    border: 1px solid #dddddd;
    background: #fff;
    color: #222222;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.vf-mp-option:hover { border-color: #222222; }
.vf-mp-option.selected { background: #222222; border-color: #222222; color: #fff; }

/* Actions row */
.vf-mp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-top: 1px solid #f0f0f0;
    gap: 12px;
}
.vf-mp-clear {
    font-size: 13px;
    font-weight: 600;
    color: #717171;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.vf-mp-clear:hover { color: #222222; text-decoration: underline; }
.vf-mp-apply {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 40px;
    background: #1a3a5c;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}
.vf-mp-apply:hover { background: #1e4a72; }

/* Venue Grid */
.venues-section { padding: 24px 0 60px; background: #fff; }
.venues-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media(max-width:1024px){ .venues-grid { grid-template-columns: repeat(2, 1fr); } }

/* Venue Card */
.venue-card { background: #fff; border: 1px solid #e5e7ef; border-radius: 16px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.venue-card:hover { transform: translateY(-6px); box-shadow: 0 30px 30px -20px rgba(0,0,0,0.35), 0 10px 10px -8px rgba(0,0,0,0.15); text-decoration: none; color: inherit; }
.venue-card-photo { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: linear-gradient(135deg, #1a1a3e, #2d2d6e); flex-shrink: 0; }
.venue-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 0.4s ease; }
.venue-card-photo img.loaded { opacity: 1; }
.venue-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.venue-card-name { font-size: 15px; font-weight: 800; color: #1a1a2e; font-family: 'Raleway', sans-serif; line-height: 1.3; }
.venue-card-location { font-size: 12px; color: #9ca3af; font-weight: 500; }
.venue-card-types { font-size: 12px; color: #6b7280; font-weight: 500; }
.venue-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.venue-card-cap { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #374151; font-weight: 600; background: #f3f4f6; padding: 3px 9px; border-radius: 20px; width: fit-content; }
.venue-card-cap svg { flex-shrink: 0; color: #6c63ff; }
.venue-card-footer { padding: 10px 16px; border-top: 1px solid #f3f4f6; display: flex; align-items: center; }

/* Empty State */
.venues-empty { text-align: center; padding: 80px 20px; color: #6b7280; grid-column: 1 / -1; }
.venues-empty i { font-size: 56px; display: block; margin-bottom: 20px; opacity: 0.3; }
.venues-empty h3 { font-size: 22px; color: #1a1a2e; margin-bottom: 10px; }

/* List View */
/* Stretched link — covers entire card, footer buttons sit above it */
.venue-card { position: relative; }
.venue-card-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 12px;
}
.venue-card-photo { position: relative; z-index: 1; pointer-events: none; }
.venue-card-body  { position: relative; z-index: 1; pointer-events: none; }
.venue-card-footer { position: relative; z-index: 2; }

.venues-list { display: flex; flex-direction: column; gap: 10px; }
.venue-list-row { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #e5e7ef; border-radius: 12px; padding: 14px 18px; text-decoration: none; color: inherit; transition: box-shadow 0.2s, border-color 0.2s; }
.venue-list-row:hover { border-color: #6c63ff; box-shadow: 0 4px 16px rgba(108,99,255,0.1); text-decoration: none; color: inherit; }
.venue-list-thumb { width: 64px; height: 48px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg,#1a1a3e,#2d2d6e); }
.venue-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.venue-list-name { font-size: 15px; font-weight: 700; color: #1a1a2e; font-family: 'Raleway', sans-serif; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.venue-list-cap { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #374151; font-weight: 600; background: #f3f4f6; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; }
.venue-list-cap svg { flex-shrink: 0; color: #6c63ff; }
.venue-list-city { font-size: 13px; color: #6b7280; flex-shrink: 0; width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
@media (max-width: 767px) { .venue-list-cap, .venue-list-city { display: none; } }

/* Pagination */
.venues-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 32px 0 8px; flex-wrap: wrap; }
.vp-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; text-decoration: none; transition: all 0.15s; border: 1px solid #e5e7ef; color: #374151; background: #fff; }
.vp-btn:hover { border-color: #6c63ff; color: #6c63ff; text-decoration: none; }
.vp-btn.active { background: #6c63ff; border-color: #6c63ff; color: #fff; }
.vp-btn.disabled { opacity: 0.4; pointer-events: none; }
.vp-ellipsis { color: #9ca3af; font-size: 14px; padding: 0 4px; line-height: 38px; }

@media (max-width: 600px) {
    .venues-grid { grid-template-columns: 1fr; }
}

/* ── Extracted from venues.php inline <style> blocks ────────────────────────── */

/* ── Card footer: two action buttons inside the card ── */
.venue-card-footer {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-top: 1px solid #f0f0f0;
}
.venue-card-footer .btn-detail {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border: none;
    border-right: 1px solid #f0f0f0;
    border-radius: 0 0 0 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    background: #29b6f6;
}
.venue-card-footer .btn-detail:hover { background: #0288d1; color: #fff; }
.venue-card-footer .btn-atq {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    background: #e91e8c;
    border: none;
    border-radius: 0 0 14px 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.venue-card-footer .btn-atq:hover { background: #c4176f; }
/* ── Prevent button text wrapping at mid-range widths (2-col grid) ── */
@media (min-width: 1025px) and (max-width: 1199px) {
    .venue-card-footer .btn-detail,
    .venue-card-footer .btn-atq {
        padding: 10px 7px;
        font-size: 0.73rem;
    }
}
/* ── List view row wrapper — takes over card styling from .venue-list-row ── */
.venue-list-row-wrap {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e5e7ef;
    background: #fff;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.venue-list-row-wrap:hover {
    border-color: #6c63ff;
    box-shadow: 0 4px 16px rgba(108,99,255,0.1);
}
/* Strip card styling from the inner link — wrapper owns it now */
.venue-list-row-wrap .venue-list-row {
    flex: 1;
    min-width: 0;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0;
}
.venue-list-row-wrap .venue-list-row:hover {
    border-color: transparent !important;
    box-shadow: none !important;
}
/* ── List view right-side button column — View Details (left) + Add to Quote (right) ── */
.venue-list-btn-col {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    width: 164px;
    margin: 2px 2px 2px 0;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
}
/* View Details — left button, light blue */
.venue-view-btn--list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 0 8px;
    background: #29b6f6;
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: normal;
    transition: background 0.2s;
    text-align: center;
    line-height: 1.3;
    border-right: 1px solid rgba(255,255,255,0.25);
}
.venue-view-btn--list:hover { background: #0288d1; color: #fff; }
/* Add to Quote — right button, pink */
.venue-atq-btn--list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 0 8px;
    background: #e91e8c;
    color: #fff;
    border: none;
    font-family: 'Inter', 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: normal;
    transition: background 0.2s;
    text-align: center;
    line-height: 1.3;
}
.venue-atq-btn--list:hover { background: #c4176f; }

/* ── Filter bar overflow fix: Capacity button added, bar too wide at 1199px ── */
/* Override the external venues.css breakpoint: switch to mobile panel at ≤1100px
   (was ≤899px) so the desktop bar only shows at 1101px+ where it fits comfortably. */
@media (max-width: 1100px) {
    .vf-bar-row    { display: none !important; }
    .vf-mobile-bar { display: flex !important; }
}
/* At 1101–1199px the desktop bar is visible — tighten segment padding so all
   five segments (Search, City, Setting, Capacity, Show) fit without overflow. */
@media (min-width: 1101px) and (max-width: 1199px) {
    .vf-seg { padding: 10px 11px; }
    .vf-seg-label { font-size: 10px; }
    .vf-seg-value { font-size: 12px; }
}
/* ── Subtle blue accent palette for filter dropdown panels ──────────────── */
/* City search input inside the dropdown panel */
.vf-city-search-input {
    background: #fff;
    border: 1.5px solid #d1d5db;
    color: #1f2937;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}
.vf-city-search-input::placeholder { color: #9ca3af; }
.vf-city-search-input:focus { border-color: #1a3a5c !important; background: #fff !important; }

/* City list items — plain list rows, NOT pill/button style */
.vf-city-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #374151;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s, color 0.12s;
    outline: none;
    user-select: none;
}
.vf-city-option:hover {
    background: #f0f4f8;
    color: #1a3a5c;
}
/* Selected city — text highlight + checkmark, NO filled background */
.vf-city-option.selected {
    font-weight: 700;
    color: #1a3a5c;
    background: #eef4fb;
}
.vf-city-option.selected::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 10px;
    border-right: 2px solid #1a3a5c;
    border-bottom: 2px solid #1a3a5c;
    transform: rotate(45deg) translateY(-2px);
    margin-left: auto;
    flex-shrink: 0;
}
.vf-city-option:focus-visible {
    box-shadow: 0 0 0 2px #1a3a5c40;
}

/* Setting panel (Indoor/Outdoor) checkbox rows */
.vf-check-row { border-radius: 8px; }
.vf-check-row:hover { background: #f0f4f8 !important; }
.vf-check-row input[type="checkbox"] { accent-color: #1a3a5c !important; }
.vf-check-text { color: #374151 !important; }

/* Per-page panel option buttons — same clean pattern */
#vfPanelPer .vf-panel-option {
    background: #f7f7f7 !important;
    color: #333 !important;
    border-color: #e5e7eb !important;
}
#vfPanelPer .vf-panel-option:hover { background: #eef2f7 !important; color: #1a3a5c !important; }
#vfPanelPer .vf-panel-option.selected {
    background: #1a3a5c !important;
    color: #fff !important;
    border-color: #1a3a5c !important;
}

/* Dropdown panel background — white, clean */
.vf-seg-panel {
    background: #fff !important;
    border-color: #e5e7eb !important;
}
.vf-panel-label { color: #1a3a5c !important; font-weight: 600; }

/* Mobile panel: city list container */
.vf-mp-city-list {
    max-height: 180px;
    overflow-y: auto;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    padding: 4px 0;
    background: #fff;
}
.vf-mp-city-list::-webkit-scrollbar { width: 4px; }
.vf-mp-city-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Mobile panel: select dropdown (kept for legacy, hidden now) */
.vf-mp-select {
    background: #fff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}
.vf-mp-select:focus { border-color: #1a3a5c !important; }

/* Mobile panel: checkbox labels */
.vf-mp-check { color: #374151 !important; }
.vf-mp-check input[type="checkbox"] { accent-color: #1a3a5c !important; }

/* Mobile panel: option chips (Show / Per Page) */
.vf-mp-option {
    background: #f7f7f7 !important;
    border-color: #e5e7eb !important;
    color: #333 !important;
}
.vf-mp-option:hover { border-color: #1a3a5c !important; color: #1a3a5c !important; background: #eef2f7 !important; }
.vf-mp-option.selected {
    background: #1a3a5c !important;
    border-color: #1a3a5c !important;
    color: #fff !important;
}

/* Mobile panel section labels */
.vf-mp-label { color: #1a3a5c !important; font-weight: 600; }

/* ── Capacity Filter Modal ────────────────────────────────────────────────────── */
#vfCapacityModal {
    font-family: 'Roboto', sans-serif;
}
/* Custom number input — white background, dark text */
#vfCapCustomInput {
    background: #fff;
    border-color: #d1d5db;
    color: #1f2937;
}
#vfCapCustomInput::placeholder { color: #9ca3af; }
/* Preset buttons (Guest Count + Seating Style) — white default, dark blue selected */
.vf-cap-preset {
    padding: 9px 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
}
.vf-cap-preset:hover {
    border-color: #1a3a5c;
    background: #eef2f7;
    color: #1a3a5c;
}
/* Selected preset — solid dark blue, white text */
.vf-cap-preset-sel {
    border-color: #1a3a5c !important;
    background: #1a3a5c !important;
    color: #fff !important;
    box-shadow: none !important;
}
@media (max-width: 540px) {
    #vfCapacityModal > div { grid-template-columns: 1fr !important; }
    #vfCapacityModal > div > div:first-child { border-right: none !important; border-bottom: 1px solid #e5e7eb; }
}

/* ── RFQ back button (conditional — only shown when ?from=rfq) ───────────────── */
@keyframes rfqSlideIn { from { transform: translateX(120px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
#rfq-back-btn {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgb(255 255 255 / 70%);
    color: #e91e8c;
    border: 2px solid #e91e8c;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    text-decoration: none;
    opacity: 0;
    animation: rfqSlideIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 1s forwards;
}
#rfq-back-btn:hover { background: rgba(255, 233, 247, 0.7); color: #e91e8c; transform: translateY(-2px); }
#rfq-back-btn svg { width: 14px; height: 14px; flex-shrink: 0; stroke: #e91e8c; }
@media (max-width: 600px) {
    #rfq-back-btn { bottom: 84px; right: 14px; padding: 11px 16px; font-size: 12px; }
}

/* ── Venue Search Autocomplete Dropdown ──────────────────────────────────────── */
.vf-ac-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7ef;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
    z-index: 9999;
    overflow: hidden;
    min-width: 280px;
}
.vf-ac-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    color: #1a1a2e;
    transition: background 0.12s;
    border-bottom: 1px solid #f3f4f6;
}
.vf-ac-item:last-child { border-bottom: none; }
.vf-ac-item:hover, .vf-ac-item.vf-ac-active { background: #f5f3ff; }
.vf-ac-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #e5e7ef;
}
.vf-ac-thumb-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6c63ff22, #e91e8c22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6c63ff;
    font-size: 16px;
}
.vf-ac-info { flex: 1; min-width: 0; }
.vf-ac-name { font-size: 13px; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-ac-city { font-size: 11px; color: #9ca3af; margin-top: 1px; }
.vf-ac-no-results { padding: 14px 16px; font-size: 13px; color: #9ca3af; text-align: center; }