/* /assets/css/browse.css */

/* Tokens ------------------------------------------------------ */
:root{
  --bg-page:#f4f6fb;
  --bg-shell:#f5f7fc;
  --card-bg:#ffffff;
  --accent:#4f46e5;
  --accent-soft:#eef2ff;
  --accent-strong:#4338ca;
  --pink:#ff4f8b;
  --yellow:#fbbf24;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow-soft:0 16px 40px rgba(15,23,42,.08);
  --radius-card:22px;
  --radius-lg:18px;
  --radius-pill:999px;

  /* Single source of truth for horizontal page padding */
  --page-gutter: 4vw;
}

/* Base -------------------------------------------------------- */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg-page);
  color:var(--text);
  min-height:100vh;
}

/* FULL-WIDTH APP SHELL ---------------------------------------- */
.app-shell{
  width:100%;
  margin:0;
  background:#fff;
  border-radius:0;
  box-shadow:none;
}

/* CATEGORY BAR ------------------------------------------------ */

.category-location{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  position:relative;
}

/* Province pill ---------------------------------------------- */
.avatar-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(204, 204, 204, 0.6);
  background:#ffffff;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:
    box-shadow .18s ease,
    transform .12s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.avatar-pill:hover{
  box-shadow:0 10px 26px rgba(15,23,42,.12);
  transform:translateY(-1px);
  border-color:rgba(148,163,184,.9);
}

.avatar-img{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.avatar-img svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:#ef4444;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.avatar-pill-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
}

.avatar-pill-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#94a3b8;
}

.avatar-pill-value{
  font-size:13px;
  font-weight:600;
  color:#020617;
}

.avatar-pill-caret{
  margin-left:4px;
  font-size:11px;
  color:#64748b;
}

#cityLabel{
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#94a3b8;
}

#cityValue{
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;
  font-weight:600;
  color:#0f172a;
}

/* Province dropdown popup */
.city-menu{
  position:absolute;
  top:100%;
  right:0;
  margin-top:8px;
  padding:6px 4px;
  min-width:190px;
  width:220px;
  max-width:260px;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.city-menu[hidden]{
  display:none !important;
}

.city-menu button{
  width:100%;
  padding:8px 14px;
  text-align:left;
  background:transparent;
  border:none;
  border-radius:14px;
  font:500 13px/1.3 "Poppins",system-ui;
  color:#0f172a;
  cursor:pointer;
}

.city-menu button:hover{
  background:#f1f5f9;
}

.city-menu button[aria-selected="true"]{
  background:#e5edff;
  font-weight:600;
}

/* CONTENT AREA ------------------------------------------------ */
.content-shell{
  background:var(--bg-shell);
  padding:40px var(--page-gutter) 100px;
}

@media (max-width:820px){
  .category-bar{
    padding:10px var(--page-gutter);
  }
  .content-shell{
    padding:14px var(--page-gutter) 22px;
  }
}

@media (max-width:640px){
  .category-location{
    display:none;
  }
}

/* ============================================
   Category tabs (Vendors / Venues / Catering / Rentals)
   ============================================ */

.category-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px var(--page-gutter) 10px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
}

.category-tabs{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:10px;
  padding-bottom:10px;
  overflow-x:visible;
  overflow-y:visible;
  flex:1 1 auto;
  min-width:0;
}

.category-tabs::-webkit-scrollbar{
  display:none;
}

/* Base tab styling */
.category-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid transparent;
  background:#ffffff;
  box-shadow:0 4px 10px rgba(15,23,42,.06);
  font:600 13px/1 "Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#0f172a;
  cursor:pointer;
  white-space:nowrap;
  transform:translateY(0) scale(1);
  transform-origin:center;
  transition:
    transform .26s cubic-bezier(.22,.61,.36,1),
    box-shadow .26s cubic-bezier(.22,.61,.36,1),
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
  will-change:transform, box-shadow;
}

.category-tab:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 6px 16px rgba(15,23,42,.10);
}

.category-tab.active{
  background:linear-gradient(135deg,#020617,#0f172a);
  border-color:rgba(15,23,42,.9);
  color:#f9fafb;
  transform:translateY(-1px) scale(1.07);
}

.category-tab.active .ico{
  background:#0f172a;
  color:#e5e7eb;
}
.category-tab.active span{
  color:inherit;
}

/* Mobile tabs tweaks */
@media (max-width: 768px){
  .category-bar{
    position:relative;
    padding:18px var(--page-gutter) 14px;
    overflow:visible;
  }

  .category-bar::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:48px;
    pointer-events:none;
    z-index:1;
    background:linear-gradient(
      to left,
      #f8fafc 0%,
      rgba(248,250,252,0) 100%
    );
  }

  .category-bar::before{
    content:"›";
    position:absolute;
    top:50%;
    right:18px;
    transform:translateY(-50%);
    font-size:25px;
    font-weight:500;
    color:#94a3b8;
    pointer-events:none;
    z-index:2;
  }

  .category-tabs{
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:8px;
    padding-right:40px;
    gap:12px;
  }

  .category-tab{
    padding:10px 20px;
    font-size:13px;
    min-height:40px;
    min-width:120px;
  }

  .category-tab .ico{
    width:26px;
    height:26px;
  }

  .category-tab:first-child{
    margin-left:2px;
  }
  .category-tab:last-child{
    margin-right:6px;
  }

  .category-tab.active{
    transform:translateY(-1px) scale(1.03);
  }
}

/* Location hero row ------------------------------------------ */
.location-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.location-title{
  font:700 22px/1.3 "Poppins",system-ui;
  color:#0f172a;
  letter-spacing:-.01em;
}

.location-sub{
  margin-top:4px;
  margin-bottom:10px;
  font:500 13px/1.4 "Poppins",system-ui;
  color:#64748b;
}

@media (max-width: 768px){
  .location-row{
    flex-direction:column;
    align-items:flex-start;
    padding:20px 0px 4px;
  }
  .location-row-right{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

/* Toolbar refinements ---------------------------------------- */
.toolbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font:500 13px/1.4 "Poppins",system-ui;
  color:#51688980;
}

.toolbar-summary{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:40px;
}

.toolbar-summary-visible{
  white-space:nowrap;
}

#resultsCountVisible{
  font-weight:500;
}

#toolbarKindLabel{
  font-weight:500;
}

.toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Filters button (also used by Map toggle) */
.filter-btn{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#ffffff;
  font:600 13px/1 "Poppins",system-ui;
  color:#0f172a;
  box-shadow:0 3px 10px rgba(15,23,42,.06);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.filter-btn:hover{
  background:#f8fafc;
  box-shadow:0 5px 14px rgba(15,23,42,.10);
  transform:translateY(-1px);
}

/* Sort select */
.sort-wrap select{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#ffffff;
  font:500 13px/1 "Poppins",system-ui;
  color:#0f172a;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
  outline:none;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),
                   linear-gradient(135deg,#94a3b8 50%,transparent 50%);
  background-position:calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.sort-wrap{
  position:relative;
}

/* Compact tablet/mobile */
@media (max-width: 768px){
  .location-row{
    flex-direction:column;
    align-items:flex-start;
    padding:20px 0px 4px;
  }
}

/* Inline toolbar search -------------------------------------- */
.toolbar-right{
  position: relative;      /* anchor for absolute search bar on desktop */
  flex-wrap: wrap;
}

.toolbar-search-inline{
  position: absolute;
  top: 100%;               /* directly under the buttons row */
  left: 0;
  right: auto;
  margin-top: 8px;
  width: 260px;
  max-width: 100%;
  display: none;
  z-index: 1200;           /* above Leaflet panes + map */
}

.toolbar-search-inline.active{
  display: flex;
}

.toolbar-search-form{
  width: 100%;
}

.toolbar-search-form input{
  width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font: 500 13px/1 "Poppins", system-ui;
  color: #0f172a;
  box-shadow: 0 3px 10px rgba(15,23,42,.08);
  outline: none;
}

.toolbar-search-form input::placeholder{
  color: #9ca3af;
}

/* Mobile: let it span the full toolbar width */
@media (max-width: 768px){
  .toolbar-search-inline{
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 960px){
  .toolbar-actions{
    margin: 10px 0 8px;
    flex-wrap: wrap;          /* allow natural wrapping if screen is tiny */
  }

  /* Make Sort behave like the other pills instead of forcing a new row */
  .toolbar-actions .sort-wrap{
    flex: 0 0 auto;
  }

  .toolbar-actions .sort-wrap select{
    width: auto;
    max-width: 100%;
  }
}

/* Desktop filters: true centered dialog above scrim */
@media (min-width: 961px){
  #filtersPanel{
    display: block;

    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;

    width: min(540px, 90vw);
    max-height: min(720px, calc(100vh - 140px));

    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(15,23,42,.30);
    overflow-y: auto;
    z-index: 1000;

    transform: translate(-50%, -40%);
    opacity: 0;
    visibility: hidden;
    transition:
      transform .22s ease-out,
      opacity .18s ease-out,
      visibility .18s ease-out;
  }

  html.filters-open #filtersPanel[data-open="1"]{
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
  }

  #filtersScrim{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(6px);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease-out;
  }

  html.filters-open #filtersScrim:not([hidden]){
    opacity: 1;
    pointer-events: auto;
  }
}

/* Prevent background from scrolling when filters are open */
html.filters-open,
html.filters-open body{
  overflow: hidden;
}

/* Hide legacy inline empty message in the grid
   (we use #resultsEmpty instead) */
#gridResults .empty[role="status"] {
  display: none !important;
}

/* =========================================================
   Deal / discount badge — keep visible even on hover
   (overrides listing-pages hover animations)
========================================================= */

body[data-page-kind] #gridResults.cards-grid :is(
  [data-deal-badge],
  .deal-badge,
  .card-badge,
  .deal-pill
) {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none;
}

/* When any card or its media is hovered, keep badges pinned */
body[data-page-kind] #gridResults.cards-grid > *:hover :is(
  [data-deal-badge],
  .deal-badge,
  .card-badge,
  .deal-pill
),
body[data-page-kind] #gridResults.cards-grid .card-media:hover :is(
  [data-deal-badge],
  .deal-badge,
  .card-badge,
  .deal-pill
) {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* =========================================================
   Venues list + map
   - Map on the right, single-column list on the left
   - Pure layout container; cards remain standard
========================================================= */

/* Wrapper around results + map */
.results-layout{
  display:block;
  margin-top: 18px; /* add breathing room below the filters row */
}

/* Desktop / large screens: 50/50 list + map split for Venues */
body[data-page-kind="venue"].map-on .results-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr); /* list | map */
  gap:24px;
  align-items:stretch;
  margin-top:16px; /* extra breathing room under the filters */
}

/* Left pane: scrollable results list */
body[data-page-kind="venue"].map-on #gridResults{
  max-height:calc(100vh - var(--header-h, 88px) - 140px);
  overflow-y:auto;
  padding-right:4px; /* small buffer for scrollbar */
}

/* Map pane shell */
.map-pane{
  border-radius:18px;
  background:#dbeafe;
  box-shadow:0 16px 40px rgba(15,23,42,.18);
  overflow:hidden;
  min-height:420px;
}

/* Leaflet map fills pane */
#leafletMap{
  width:100%;
  min-height:420px; /* prevent zero-height map (“blue only” on tablet) */
}

/* Hide map toggle outside Venues tab (JS also guards this) */
body:not([data-page-kind="venue"]) #mapToggleBtn{
  display:none !important;
}

/* Tablet / mobile: stack instead of side-by-side
   and show MAP ABOVE the cards in map view */
@media (max-width: 900px){
  body[data-page-kind="venue"].map-on .results-layout{
    display:flex;
    flex-direction:column;
  }

  /* Map first */
  body[data-page-kind="venue"].map-on .map-pane{
    order:1;
    min-height:320px;
    margin-top:0;
    margin-bottom:16px;
  }

  /* Cards second */
  body[data-page-kind="venue"].map-on .results-main{
    order:2;
  }

  body[data-page-kind="venue"].map-on #gridResults{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }

  #leafletMap{
    min-height:320px;
  }
}

/* -------------------------------------------------------
   Venues map view (Option A) – desktop spacing + full-height map
-------------------------------------------------------- */
@media (min-width: 900px){
  /* Add breathing room ABOVE the map card */
  body[data-page-kind="venue"].map-on .map-pane{
    margin-top: 16px;
  }

  /* Make sure the Leaflet map fills the entire blue pane */
  body[data-page-kind="venue"].map-on #leafletMap{
    margin-top: 0;
    height: 100% !important;
  }
}

/* -------------------------------------------------------
   Card footer responsiveness – when cards get narrower
   on desktop, allow the rating to drop under the price
   instead of being clipped.
-------------------------------------------------------- */
@media (max-width: 1400px){
  /* Relax nowrap on the meta/price line */
  #gridResults .listing-card .card-meta,
  #gridResults .listing-card .card-footer,
  #gridResults .listing-card .card-price-row,
  #gridResults .listing-card p {
    white-space: normal;
  }

  /* Let the line wrap; if there isn't enough room,
     the last chunk (rating) will fall to the next line. */
  #gridResults .listing-card .card-meta,
  #gridResults .listing-card .card-footer,
  #gridResults .listing-card .card-price-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 2px;
    column-gap: 4px;
  }

  /* Make sure the last bit (rating) is allowed to sit on its own row */
  #gridResults .listing-card .card-meta > :last-child,
  #gridResults .listing-card .card-footer > :last-child,
  #gridResults .listing-card .card-price-row > :last-child{
    margin-left: 0;
  }
}

/* Desktop: Venues map view → limit cards to 3 columns */
@media (min-width: 1025px){
  body[data-page-kind="venue"].map-on .results-main #gridResults.cards-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}