/* ── Venues Listing Page ─────────────────────────────────────────────────────── */
.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: 100px 0 60px;
    text-align: center;
    color: #fff;
    position: relative !important;
    overflow: hidden !important;
}
.venues-hero-photos { display: none !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:#f8f9fc; border-bottom:1px solid #e5e7ef; padding:14px 0; position:sticky; top:60px; z-index:99; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
@media(max-width:992px){ .venues-filter-section { top:0; } }
/* City row in filter panel: only show on phones where search bar hides city */
.vf-mobile-city-row { display:none !important; }
@media(max-width:600px){ .vf-mobile-city-row { display:flex !important; } }
#venueFilterForm { display:flex; flex-direction:column; gap:0; }

/* Unified pill search bar */
.vf-searchbar-wrap { display:flex; align-items:center; justify-content:center; gap:12px; }
.vf-searchbar { display:flex; align-items:center; width:100%; max-width:680px; background:#fff; border:1px solid #d1d5db; border-radius:50px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:box-shadow 0.2s; }
.vf-searchbar:focus-within { box-shadow:0 2px 16px rgba(108,99,255,0.15); border-color:#a5b4fc; }
.vf-searchbar-search { display:flex; align-items:center; flex:1; padding:0 16px; gap:10px; min-width:0; }
.vf-searchbar-search svg { width:16px; height:16px; color:#9ca3af; flex-shrink:0; }
.vf-searchbar-input { border:none; outline:none; font-size:15px; font-family:'Inter',sans-serif; color:#1a1a2e; background:transparent; width:100%; padding:14px 0; }
.vf-searchbar-input::placeholder { color:#9ca3af; }
.vf-searchbar-divider { width:1px; height:24px; background:#e5e7ef; flex-shrink:0; }
.vf-searchbar-city { display:flex; align-items:center; padding:0 4px 0 12px; }
.vf-searchbar-select { border:none; outline:none; font-size:15px; font-family:'Inter',sans-serif; color:#374151; background:transparent; cursor:pointer; padding:14px 8px 14px 0; font-weight:500; }
.vf-searchbar-filters { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:14px 18px 14px 14px; background:transparent; border:none; font-size:14px; font-weight:600; color:#374151; cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; transition:all 0.15s; border-radius:0 50px 50px 0; }
.vf-searchbar-filters:hover { background:transparent; color:#6c63ff; }
.vf-searchbar-filters.active { background:transparent; color:#6c63ff; }
.vf-filter-dot { width:6px; height:6px; background:#6c63ff; border-radius:50%; display:inline-block; }

/* Expandable filters panel — hidden by default on all screen sizes */
.vf-filters-panel { display:none; padding:12px 0 4px; border-top:1px solid #e5e7ef; margin-top:12px; }
.vf-filters-panel.open { display:flex; flex-direction:column; gap:0; }
.vf-filter-row-item { display:flex; align-items:center; gap:16px; padding:10px 0; border-bottom:1px solid #f3f4f6; flex-wrap:wrap; }
.vf-filter-row-item:last-child { border-bottom:none; padding-top:12px; }
.vf-filter-label { font-size:12px; font-weight:600; color:#6b7280; min-width:90px; flex-shrink:0; }
/* Desktop (>767px): min guests + setting on same row */
@media(min-width:768px){
  .vf-filter-row-combined { display:flex; align-items:center; gap:0; border-bottom:1px solid #f3f4f6; }
  .vf-filter-row-combined .vf-filter-row-item { border-bottom:none; padding-right:32px; }
  .vf-filter-row-combined .vf-filter-row-item:last-child { padding-right:0; }
}
/* Mobile (≤767px): setting stacks below min guests */
@media(max-width:767px){
  .vf-filter-row-combined { display:flex; flex-direction:column; gap:0; }
}

/* Shared input/button/label styles */
.vf-input { padding:10px 14px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; font-family:'Inter',sans-serif; background:#fff; color:#1a1a2e; transition:border-color 0.2s; min-width:0; box-sizing:border-box; width:100%; }
.vf-input:focus { outline:none; border-color:#6c63ff; box-shadow:0 0 0 3px rgba(108,99,255,0.1); }
.vf-input::placeholder { color:#9ca3af; }
.vf-select { cursor:pointer; }
.vf-btn { padding:10px 16px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; font-family:'Inter',sans-serif; transition:all 0.2s; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.vf-btn-primary { background:#6c63ff; color:#fff; }
.vf-btn-primary:hover { background:#5a52e0; }
.vf-btn-clear { background:transparent; color:#6b7280; border:1px solid #d1d5db; }
.vf-btn-clear:hover { background:#f3f4f6; }
.vf-env-label { display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:8px; border:1px solid #d1d5db; background:#fff; color:#6b7280; font-size:14px; font-family:'Inter',sans-serif; font-weight:600; cursor:pointer; white-space:nowrap; box-sizing:border-box; user-select:none; transition:all 0.15s; }
.vf-env-label input[type="checkbox"] { width:14px; height:14px; cursor:pointer; flex-shrink:0; margin:0; }
.vf-env-label:hover { border-color:#6c63ff; color:#6c63ff; }
.vf-env-label.indoor-lbl.active  { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.vf-env-label.outdoor-lbl.active { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.vf-env-label.indoor-lbl  input { accent-color:#c2410c; }
.vf-env-label.outdoor-lbl input { accent-color:#15803d; }
.vf-view-toggle { display:flex; gap:4px; }
.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; }
.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; }
.vf-results-count { font-size:13px; color:#6b7280; white-space:nowrap; padding:4px 0; }

@media (max-width: 600px) {
    .vf-searchbar-city { display:none; }
    .vf-searchbar-divider:first-of-type { display:none; }
}

/* 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%; height: 267px; object-fit: cover; background: linear-gradient(135deg, #1a1a3e, #2d2d6e); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); font-size: 48px; flex-shrink: 0; position: relative; }
.venue-card-photo img { object-position: center center; width: 100%; height: 100%; object-fit: cover; 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-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; margin-top: 4px; 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; }
.venue-card-cta { font-size: 12px; font-weight: 600; color: #6c63ff; }
.venue-card-region { display: none; }

/* 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; }

/* View Toggle */
.vf-view-toggle { display: flex; gap: 4px; margin-left: 4px; }
.vf-view-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; color: #6b7280; cursor: pointer; transition: all 0.15s; text-decoration: none; }
.vf-view-btn:hover { border-color: #6c63ff; color: #6c63ff; }
.vf-view-btn.active { background: #6c63ff; border-color: #6c63ff; color: #fff; }
.vf-view-btn svg { width: 16px; height: 16px; }

/* List View */
.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-tags { display: flex; gap: 5px; flex-shrink: 0; align-items: center; }
.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; }
.venue-list-cta { font-size: 13px; font-weight: 600; color: #6c63ff; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) { .venue-list-city, .venue-list-tags, .venue-list-cap { 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; }
    .vf-top-row { flex-wrap: nowrap; gap: 6px; }
    .vf-search-wrap { min-width: 0; flex: 1; max-width: none; }
    .vf-toggle-btn { display: inline-flex; flex-shrink: 0; }
    .vf-filters { display: none; }
    .vf-filters.open { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; }
    .vf-filters .vf-input, .vf-filters .vf-btn { width: 100%; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; justify-content: center; }
    .vf-results-count { display: none; }
    .vf-right-controls .vf-results-count { display: none; }
    .vf-right-controls select { min-width: 90px !important; font-size: 12px; padding: 8px; }
}