/* ============================================================
   Venue List & Venue Pages
   ============================================================ */

.vl-wrap            { width:100%; margin:20px 0; display:flex; gap:20px; align-items:flex-start; font-family:Arial,sans-serif; direction:ltr; }
.vl-sidebar         { width:210px; flex-shrink:0; }
.vl-main            { flex:1; min-width:0; }
.vl-right           { width:200px; flex-shrink:0; }

/* Sidebar */
.vl-find-box        { background:#fff; border:1px solid #ddd; border-radius:4px; overflow:hidden; margin-bottom:15px; }
.vl-find-title      { background:#E8520A; color:#fff; font-size:15px; font-weight:bold; padding:10px 12px; }
.vl-filter-title    { background:#555; color:#fff; font-size:11px; font-weight:bold; padding:7px 12px; letter-spacing:1px; text-transform:uppercase; }
.vl-filter-body     { padding:10px 12px; }
.vl-section-head    { font-size:11px; font-weight:bold; color:#333; margin:12px 0 6px 0; text-transform:uppercase; letter-spacing:.5px; }
.vl-cat-link,
.vl-cat-link:visited  { display:block; font-size:12px; color:#336699; text-decoration:none; padding:2px 0; }
.vl-cat-link:hover    { text-decoration:underline; }
.vl-cat-link.active   { color:#E8520A; font-weight:bold; }
.vl-date-link,
.vl-date-link:visited { display:inline-block; font-size:12px; color:#336699; text-decoration:none; padding:2px 6px; border:1px solid #ccc; border-radius:3px; margin-right:4px; margin-bottom:4px; }
.vl-date-link:hover,
.vl-date-link.active  { background:#E8520A; color:#fff; border-color:#E8520A; text-decoration:none; }
.vl-filter-btn      { display:block; width:100%; background:#E8520A; color:#fff; font-weight:bold; font-size:13px; border:none; border-radius:3px; padding:9px; cursor:pointer; letter-spacing:1px; text-transform:uppercase; margin-top:10px; }
.vl-filter-btn:hover { background:#c94208; }
/* Location toggle row */
.vl-loc-toggle      { display:flex; align-items:center; gap:5px; padding:7px 0; cursor:pointer; font-size:12px; color:#333; border-bottom:1px solid #eee; margin-bottom:6px; user-select:none; }
.vl-loc-toggle:hover { color:#E8520A; }
.vl-loc-arrow       { margin-left:auto; font-size:10px; color:#999; }

/* Expandable location panel */
.vl-loc-panel       { padding:6px 0 8px 0; border-bottom:1px solid #eee; margin-bottom:8px; }
.vl-loc-row         { margin-bottom:6px; }
.vl-loc-label       { display:block; font-size:10px; color:#888; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.vl-loc-panel select { width:100%; font-size:12px; padding:3px; border:1px solid #ccc; border-radius:3px; }

/* Top bar */
.vl-topbar          { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.vl-page-title      { font-size:18px; font-weight:bold; color:#333; }
.vl-create-btn,
.vl-create-btn:visited { background:#E8520A; color:#fff; font-weight:bold; font-size:13px; border-radius:3px; padding:8px 16px; text-decoration:none; white-space:nowrap; }
.vl-create-btn:hover   { background:#c94208; color:#fff; text-decoration:none; }

/* Venue cards */
.vl-card            { background:#fff; border:1px solid #e8e8e8; border-radius:12px; margin-bottom:12px; display:flex; align-items:stretch; box-shadow:0 1px 5px rgba(0,0,0,.07); overflow:hidden; }

/* Left column: logo + follower count */
.vl-card-left       { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px 12px; flex-shrink:0; background:#fafafa; border-right:1px solid #f0f0f0; min-width:100px; }
.vl-card-logo       { width:80px; height:80px; border-radius:10px; overflow:hidden; background:#eee; display:flex; align-items:center; justify-content:center; }
.vl-card-logo img   { width:80px; height:80px; object-fit:cover; display:block; }
.vl-card-logo-none  { color:#aaa; font-size:10px; text-align:center; padding:4px; }
.vl-card-followers  { display:flex; align-items:center; gap:4px; font-size:11px; color:#555; white-space:nowrap; }

/* Center body */
.vl-card-body       { flex:1; min-width:0; padding:14px 14px; display:flex; flex-direction:column; gap:5px; }

/* Title row: venue name + date inline */
.vl-card-title-row  { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:2px; }
a.vl-venue-name,
a.vl-venue-name:link,
a.vl-venue-name:visited { font-size:16px; font-weight:bold; color:#1a1a1a; text-decoration:none; }
a.vl-venue-name:hover   { color:#E8520A; text-decoration:none; }
.vl-date-badge      { font-size:14px; font-weight:bold; color:#1a1a1a; white-space:nowrap; }

/* Status badges */
.vl-status-live,
.vl-status-soon,
.vl-status-ended    { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:bold; padding:3px 11px; border-radius:20px; }
.vl-status-live     { background:#e6f9ed; color:#1a8c3e; }
.vl-status-soon     { background:#fff3e0; color:#e65100; }
.vl-status-ended    { background:#fce4ec; color:#c62828; }
.vl-status-dot      { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.vl-status-live .vl-status-dot  { background:#1a8c3e; }
.vl-status-soon .vl-status-dot  { background:#e65100; }
.vl-status-ended .vl-status-dot { background:#c62828; }

/* Address row */
.vl-card-addr       { display:flex; align-items:flex-start; gap:5px; font-size:14px; color:#555; }
.vl-pin-icon        { width:14px; height:14px; fill:#E8520A; flex-shrink:0; margin-top:2px; }

/* Meta row */
.vl-card-meta       { display:flex; align-items:center; gap:16px; font-size:14px; color:#666; }
.vl-meta-item       { display:flex; align-items:center; gap:4px; }

/* Right column: follow button only */
.vl-card-right      { display:flex; align-items:center; padding:14px 16px; flex-shrink:0; }
a.vl-follow-btn,
a.vl-follow-btn:link,
a.vl-follow-btn:visited { display:inline-flex; align-items:center; gap:6px; background:#1a1a1a; color:#fff; font-size:13px; font-weight:bold; border-radius:20px; padding:9px 18px; text-decoration:none; white-space:nowrap; }
a.vl-follow-btn:hover   { background:#000; color:#fff; text-decoration:none; }
.vl-following-btn       { display:inline-flex; align-items:center; background:#1a1a1a; color:#fff; font-size:13px; font-weight:bold; border-radius:20px; padding:9px 18px; white-space:nowrap; cursor:pointer; }

.vl-no-results      { text-align:center; padding:40px; color:#888; font-size:14px; }

/* ============================================================
   Mobile — max 768px
   ============================================================ */
@media (max-width: 768px) {

  /* Single column — hide sidebar and ad column */
  .vl-wrap            { flex-direction:column; margin:8px; gap:10px; }
  .vl-sidebar         { display:none; }
  .vl-right           { display:none; }
  .vl-main            { width:100%; min-width:0; }

  /* Top bar */
  .vl-topbar          { flex-wrap:wrap; gap:8px; margin-bottom:8px; }
  .vl-page-title      { font-size:15px; }
  .vl-create-btn,
  .vl-create-btn:visited { font-size:12px; padding:6px 12px; }

  /* Cards */
  .vl-card            { border-radius:8px; margin-bottom:8px; }
  .vl-card-left       { min-width:0; padding:10px 8px; }
  .vl-card-logo       { width:60px; height:60px; }
  .vl-card-logo img   { width:60px; height:60px; }
  .vl-card-body       { padding:10px 8px; gap:3px; }

  a.vl-venue-name,
  a.vl-venue-name:link,
  a.vl-venue-name:visited { font-size:14px; }

  .vl-card-addr       { font-size:12px; }
  .vl-card-meta       { font-size:12px; gap:8px; }

  /* Right column: narrow, stacked */
  .vl-card-right      { padding:10px 8px; min-width:80px; }
  .vl-date-badge      { font-size:11px; }

  a.vl-follow-btn,
  a.vl-follow-btn:link,
  a.vl-follow-btn:visited { font-size:11px; padding:6px 10px; border-radius:14px; }
  .vl-following-btn   { font-size:11px; padding:6px 10px; border-radius:14px; }

  .vl-status-live,
  .vl-status-soon,
  .vl-status-ended    { font-size:10px; padding:2px 7px; }
  .vl-status-dot      { width:6px; height:6px; }

  .vl-no-results      { padding:20px; font-size:13px; }
}