/* FILE: assets/styles.css */
:root {
  --maxw: 1120px;
  --gap: 14px;
  --chip: #eef2f7;
  --chip-on:#d6e4ff;
  --muted:#555;
  --border:#e6e6e6;
  --bg:#fafafa;
  --brand:#0b57d0;
  --site-header-h: 64px;   /* height of sticky header */
}
/* Ensure any element marked hidden stays hidden */
[hidden] { display: none !important; }
.card[hidden], section[hidden] { display: none !important; }

* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111; background:#fff; }
a { color: var(--brand); }
header { border-bottom:1px solid var(--border); background:var(--bg); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 18px; }
h1 { font-size: 1.6rem; margin: 0 0 6px; }
.lead { color: var(--muted); margin: 0 0 10px; }
.bar { display:flex; flex-wrap:wrap; gap: var(--gap); align-items:center; margin: 12px 0; }
.bar input[type="search"] { flex: 1 1 280px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; }
.bar select { padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0; }
.chip { padding:8px 10px; border-radius:999px; background:var(--chip); cursor:pointer; border:1px solid var(--border); user-select:none; }
.chip[aria-pressed="true"] { background: var(--chip-on); border-color:#a3c0ff; }
.count { color: var(--muted); font-size: 0.95rem; margin: 6px 0 12px; }
/* Layout the results in a responsive three‑column grid. auto‑fill ensures we get
   as many columns as will fit, down to a minimum width of 280px. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
}
.card {
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* The first child of the card is the logo link wrapping the image or initials.
   Make it span the full width and maintain a fixed height. */
.card .logo-link {
  display:block;
}
/* Card thumbnail (hotel image) */
.card .logo {
  width: 100%;
  aspect-ratio: 16 / 9;   /* keeps a consistent crop & prevents layout shift */
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 12px 12px 0 0;
  background: #f3f3f3;
}

.title {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.badge { background:#f1f1f1; border-radius:999px; padding:2px 8px; font-size:.8rem; border:1px solid var(--border); }
.tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.tag { background:#fafafa; border:1px dashed var(--border); border-radius:6px; padding:2px 6px; font-size:.8rem; color:#333; }
.cta {
  margin-top:12px;
}
.cta a {
  display:inline-block;
  padding:8px 10px;
  border-radius:8px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:600;
}
nav.pagination { display:flex; justify-content:center; align-items:center; gap:10px; margin: 18px 0; }
nav.pagination button { padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; }
nav.pagination button[disabled]{ opacity:.5; cursor:not-allowed; }
details.checklist { border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:#fff; margin: 18px 0; }
footer { border-top:1px solid var(--border); background:var(--bg); }
small.disclaimer { display:block; color:#444; line-height:1.45; }
.empty { padding:22px; border:1px dashed var(--border); border-radius:12px; background:#fff; text-align:center; color:#444; }
.meta { display:flex; gap:8px; align-items:center; color:#444; font-size:.9rem; }
.icons { display:none; }
.right { display:none; }
.toolbar { display:flex; flex-wrap:wrap; gap: var(--gap); align-items:center; justify-content:space-between; }
.link-btn { padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:#fff; text-decoration:none; color:var(--brand); font-weight:600;}
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
hr.sep { border:0; border-top:1px solid var(--border); margin:14px 0; }
.tool-hero { display:flex; gap:14px; align-items:flex-start; }
.tool-hero .logo { width:80px; height:80px; font-size:1.2rem; }
.related { display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: var(--gap); }
@media (min-width:700px){ .related{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* button styles (added 2025-08-24) */
.pager-numbers { display: inline-flex; gap: 6px; align-items: center; margin: 0 10px; flex-wrap: wrap; }
.page-btn { border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 0.95rem; cursor: pointer; }
.page-btn:hover { background: #f6f6f6; }
.page-btn.active { background: #111; color: #fff; border-color: #111; }
.dots { color: #999; padding: 0 2px; }

/* Primary (blue) chip */
.chip--primary {
  background: #0b5fff;
  color: #fff;
  border-color: #0b5fff;
}
.chip--primary:hover { background: #0a52e3; border-color: #0a52e3; }
.chip--primary:active { transform: translateY(1px); }
.chip--primary:focus-visible { outline: 2px solid #0b5fff; outline-offset: 2px; }

/* Extra safety: if the element has the id, make it blue even without the class */
#clear-filters {
  background: #0b5fff;
  color: #fff;
  border-color: #0b5fff;
}

/* -------------------------------------------
   Category chip counts (little number badges)
   - Shows a small rounded badge with the count
   - Turns inverted when the chip is active
   ------------------------------------------- */

/* Default badge on all chips */
.chip .chip-count {
  margin-left: .4rem;     /* space between label and badge */
  background: #eee;       /* light gray badge background */
  border-radius: 10px;    /* pill shape */
  padding: 0 .45rem;      /* horizontal padding for legibility */
  font-size: .85em;       /* slightly smaller than chip text */
}

/* When a chip is active/pressed, invert the badge for contrast */
.chip.active .chip-count {
  background: #111;       /* match active chip’s dark background */
  color: #fff;            /* white text for contrast */
}

/* -------------------------------------------
   Best Things to Do Section
   Inspired by bestdubai.com
   ------------------------------------------- */
.best-things {
  margin: 30px 0;
  padding-top: 10px;
}
.best-things .section-head {
  margin-bottom: 20px;
}
.best-things .section-head h2 {
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.best-things .section-head .tagline {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 650px;
  line-height: 1.4;
  margin: 0 0 12px;
}
.best-things .tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.best-things .tabs .tab {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--chip);
  cursor: pointer;
  font-weight: 600;
}
.best-things .tabs .tab.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.best-things .tabs .see-all {
  margin-left: auto;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
}
.best-things-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.featured-card {
  flex: 1 1 58%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 300px;
}
.featured-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.featured-card .content {
  padding: 16px;
}
.featured-card .rank {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 4px;
}
.featured-card .name {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}
.featured-card .meta {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--muted);
}
.featured-card .desc {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.featured-card .score-box {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.score-summary {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand);
  margin-right: 12px;
}
.score-summary small {
  font-size: 0.8rem;
  font-weight: 600;
  color: #666;
}
.score-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 0.85rem;
}
.score-breakdown span {
  display: flex;
  justify-content: space-between;
}
.top-listings {
  flex: 1 1 38%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 250px;
}
.listing-card {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.listing-card img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  flex-shrink: 0;
}
.listing-card .info {
  padding: 10px 12px;
  flex: 1;
}
.listing-card .info .name {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.listing-card .info .sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}
.listing-card .info .status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 4px;
  display: inline-block;
}
.listing-card .info .status.open {
  background: #e8f7e8;
  color: #107810;
}
.listing-card .info .status.closed {
  background: #fbeaea;
  color: #a42525;
}
.listing-card .score {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 800px) {
  .best-things-content {
    flex-direction: column;
  }
  .featured-card, .top-listings {
    flex: 1 1 100%;
  }
}

/* -------------------------------------------
   Subscribe box styles (newsletter signup)
   - Lightweight, accessible layout that works on mobile
   - Matches your existing visual tone
   ------------------------------------------- */
.subscribe {
  margin: 24px 0;
  padding: 16px;
  background: #f8f9fb;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
}
.subscribe h2 {
  margin: 0 0 8px;
  font-size: 1.12rem;
}
.subscribe .small {
  font-size: .9rem;
  color: #666;
  margin: 0 0 8px;
}
.subscribe form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;              /* stack on small screens */
  align-items: center;
  margin: 6px 0;
}
/* Style both name (text) and email inputs in the subscribe box */
.subscribe input[type="text"],
.subscribe input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
}
.subscribe .consent {
  font-size: .9rem;
  color: #444;
  display: flex;
  align-items: center;
  gap: 6px;
}
.subscribe button {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #0b5fff;
  background: #0b5fff;
  color: #fff;
  cursor: pointer;
}
.subscribe button:hover {
  background: #0a52e3;
  border-color: #0a52e3;
}

/* Screen-reader-only utility (already used elsewhere) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------------------------------
   Category chip counts (little number badges)
   - Shows a small rounded badge with the count
   - Turns inverted when the chip is active
   ------------------------------------------- */
.chip .chip-count {
  margin-left: .4rem;     /* space between label and badge */
  background: #eee;       /* light gray badge background */
  border-radius: 10px;    /* pill shape */
  padding: 0 .45rem;      /* horizontal padding for legibility */
  font-size: .85em;       /* slightly smaller than chip text */
}
.chip.active .chip-count {
  background: #111;       /* match active chip’s dark background */
  color: #fff;            /* white text for contrast */
}

/* ===== Book Banner (index.html) ===== */
.book-banner {
  margin: 32px 0 16px;
  background: linear-gradient(135deg, #f6f8ff 0%, #eef3ff 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(17,24,39,.05);
}
.book-banner__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 900px) {
  .book-banner__inner {
    grid-template-columns: 1.3fr 1fr; /* text left, visual right */
    align-items: center;
  }
}
.book-banner__title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}
.book-banner__subtitle {
  margin: 4px 0 12px;
  font-size: 1rem;
  color: var(--muted);
}
.book-banner__blurb {
  margin: 0 0 10px;
  color: #222;
}
.book-banner__points {
  margin: 0 0 14px;
  padding-left: 18px;
}
.book-banner__points li { margin: 6px 0; }

.book-banner__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 6px;
}
.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid #d9e2ff;
  font-weight: 600;
}
.btn.primary {
  background: #0b57d0;
  color: #fff;
  border-color: #0b57d0;
}
.btn.primary:hover { filter: brightness(0.95); }
.btn.subtle {
  background: #fff;
  color: #0b57d0;
}
.btn.subtle:hover { background: #f5f7ff; }

.book-banner__note {
  margin: 8px 0 0;
  font-size: .95rem;
  color: #333;
}

.book-banner__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
  font-size: .9rem;
  color: #333;
}
@media (max-width: 700px) {
  .book-banner__stats { display: none; }
}

/* Right-side visual */
.book-banner__visual {
  display: grid;
  place-items: center;
}
.book-banner__visual img {
  width: 260px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(17,24,39,.15);
  border: 1px solid var(--border);
  background: #fff;
}

/* ================================
   Book Banner: Note styling
   -------------------------------
   This styles the "living appendix"
   message that appears above the
   book title in the banner.
   ================================ */
.book-banner__note {
  margin: 0 0 14px;     /* add bottom spacing before the title */
  font-size: 1rem;      /* keep text at a readable base size */
  color: #111;          /* dark neutral text color for emphasis */
}

/* When the note text is wrapped in <strong><em>...</em></strong>,
   apply a branded highlight style (blue, italic, bold). */
.book-banner__note strong em {
  color: #0b57d0;       /* brand blue highlight */
  font-style: italic;   /* italic for emphasis */
  font-weight: 600;     /* semi-bold weight for visibility */
}

/* Reserve space for small brand logos (NOT card thumbnails) */
.tool-hero .logo,
.detail-header .logo,
.header-logo img {
  width: 160px;
  height: 40px;
  display: block;
  object-fit: contain;
}

/* Chip count bubble: reserve space so chip width doesn't jump */
.chip .chip-count {
  display: inline-block;
  min-width: 1.8em;
  text-align: center;
}

/* Paint large lists faster; the browser can skip offscreen cards */
.card {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}
/* ==============================
   HERO (Top Banner)
   ============================== */
.hero {
  display: flex;
  justify-content: center;
  padding: 24px 18px 12px;
}

.hero-card {
  width: 100%;
  max-width: var(--maxw); /* aligns with .wrap */
  background: #0b2a57;            /* deep navy */
  color: #fff;
  border-radius: 28px;
  padding: 44px 28px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* Preserve the image's own aspect ratio — never stretch */
.hero-logo {
  display: block;
  height: clamp(72px, 9vw, 120px); /* adjust size here */
  width: auto;                     /* <-- let width follow height */
  max-width: 100%;
  object-fit: contain;             /* safety if a width sneaks in */
  margin-inline: auto;   /* centers in normal block layout */
  align-self: center;    /* centers if parent is display:flex */
  float: none;           /* ignore any old float rules */
}

/* Optional: a bit larger on very wide screens */
@media (min-width: 1280px) {
  .hero-logo { height: 128px; }
}


.hero-title {
  font-size: 42px;
  line-height: 1.2;
  font-weight: 800;
  margin: 6px 0 10px;
}

.hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
  opacity: .95;
  margin: 0 auto 18px;
  max-width: 720px;
}

.hero-try {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.hero-try > span {
  opacity: .9;
}

.hero .chip {
  display: inline-block;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b2a57;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.6);
  transition: transform .08s ease, box-shadow .12s ease;
}

.hero .chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* Rounded container edges on very small screens look better with tighter radius */
@media (max-width: 520px) {
  .hero-card { border-radius: 20px; padding: 28px 18px; }
  .hero-title { font-size: 32px; }
  .hero-subtitle { font-size: 16px; }
}

/* ==============================
   STICKY HEADER
   ============================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #ddd;
}

.header-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header-logo img {
  height: 40px;
  display: block;
}

.header-search {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-search input {
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

.header-actions {
  display: flex;
  align-items: center;
}

.btn-suggest {
  display: inline-block;
  background: #0b2a57;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s;
}

.btn-suggest:hover {
  background: #0d356e;
}

/* =========================================
   CARD: Top-image layout (3-col grid friendly)
   ========================================= */
.card.card--place {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 16px;
  overflow: hidden;                /* so the image corners are rounded */
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  transition: transform .08s ease, box-shadow .12s ease;
}

.card.card--place:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.card-img {
  display: block;
  width: 100%;
  height: 190px;                   /* adjust to taste (160–220 looks good) */
  background: #f4f6f8;
  position: relative;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* full-bleed */
  display: block;
}

.card-img.img-fallback {
  background: linear-gradient(135deg, #0b2a57 0%, #174a8b 100%);
  color: #fff;
}

.card-img .img-placeholder {
  width: 100%;
  height: 100%;
  font-weight: 800;
  font-size: 42px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.card-title .card-link {
  color: inherit;
  text-decoration: none;
}

.card-title .card-link:hover {
  text-decoration: underline;
}

.card-sub {
  margin: 0;
  color: #333;
}

.card .badges,
.card .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.card .badge {
  background: #eef2f7;
  color: #243447;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.card .tag {
  background: #fafafa;
  border: 1px solid #eee;
  color: #444;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.card .cta {
  margin-top: 6px;
}

.card .cta a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  background: #0b2a57;
  color: #fff;
  font-size: 14px;
}

  /* ===== Inline rating chip beside Website/View ===== */
  .card-body .ctas{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  
  .ctas .rating-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #111;            /* dark pill so it stands out */
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
  }
  
  .ctas .rating-chip .star{
    width: 14px; height: 14px; display: inline-block;
  }
  
  .ctas .rating-chip .meta{
    opacity: .8;
    font-weight: 600;
    font-size: 12px;
  }

.card .cta a:hover { background: #0d356e; }

/* Keep 3 columns behaving nicely on small screens */
@media (max-width: 1024px) { .card-img { height: 180px; } }
@media (max-width: 820px)  { .card-img { height: 170px; } }
@media (max-width: 680px)  { .card-img { height: 160px; } }

/* ===== Rating badge on card images ===== */
  .card-img .rating-badge{
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    backdrop-filter: blur(4px);
  }
  .card-img .rating-badge .star{
    width: 16px; height: 16px; display: inline-block;
  }
  .card-img .rating-badge .rc{
    opacity: .85;
    font-weight: 600;
    margin-left: 2px;
    font-size: 12px;
  }

/* --- CLS fix: reserve space before JS fills showcase rows --- */
#showcase { min-height: 360px; } /* ~one row of cards; tweak if needed */
.cat-section .hscroll,
.hscroll.hscroll--snap { min-height: 260px; } /* row height incl. text */


/* ==============================
   Category showcase (horizontal)
   ============================== */
.cat-section { margin: 24px 0 12px; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.section-head h2 { margin: 0; font-size: 1.25rem; }
.section-head .see-all {
  text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}

.hscroll {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 8px;
  scroll-snap-type: x proximity;
}
/* smooth, elegant horizontal scrolling (opt-in) */
.hscroll--snap {
  scroll-snap-type: x mandatory;   /* stronger snap than proximity */
}
.hscroll--snap > * {
  scroll-snap-align: start;        /* ensure each child snaps cleanly */
}

.hscroll::-webkit-scrollbar { height: 10px; }
.hscroll::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 20px; }

.hscroll .card { 
  flex: 0 0 calc(33.333% - 11px);   /* show ~3 cards by default */
  min-width: 300px;                  /* ensures 3 visible on typical laptops */
  scroll-snap-align: start;
}

/* tighten on smaller screens */
@media (max-width: 1024px) { .hscroll .card { min-width: 280px; } }
@media (max-width: 820px)  { .hscroll .card { min-width: 260px; } }

/* Places to visit section */
.topics { margin: 24px 0 8px; }
.topics .section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.topics-list { display:flex; flex-wrap:wrap; gap:10px; }

/* =========================================
   Detail page enhancements
   These styles support the rich detail page layout for individual places.
   ========================================= */
.detail-header {
  margin-bottom: 16px;
}
.detail-header .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.badge.highlight {
  background: #ffecd6;
  color: #bf5100;
  font-weight: 600;
}
.rating-chip {
  display: inline-block;
  background: #1d8a4a;
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
  margin-left: 8px;
  font-size: 0.95rem;
}
.address {
  margin: 4px 0;
  color: #555;
  font-size: 0.9rem;
}
.meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: #f2f4f7;
  color: #333;
}
.pill.status-open {
  background: #e5f5e9;
  color: #1d8a4a;
}
.pill.status-closed {
  background: #fdecea;
  color: #c23c3e;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.actions .btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid #ddd;
  background: #fafafa;
  color: #0b2a57;
  transition: background .15s ease;
}
.actions .btn.primary {
  background: #0b2a57;
  color: #fff;
  border-color: #0b2a57;
}
.actions .btn:hover {
  background: #e8eef6;
}
.actions .btn.primary:hover {
  background: #174a8b;
}

.sticky-nav {
  position: sticky;
  top: 60px;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}
.sticky-nav ul {
  list-style: none;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 8px 0;
}
.sticky-nav li a {
  color: #0b2a57;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}
.sticky-nav li a:hover {
  text-decoration: underline;
}

.hero-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.section {
  margin-bottom: 24px;
}
.section h2 {
  margin-top: 0;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.subscores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.subscore {
  display: inline-block;
  background: #eef2f7;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.8rem;
  color: #243447;
}

.card-block {
  background: #f9fafc;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 12px;
  margin-bottom: 16px;
}
.card-block h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.card-chips .chip {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2f7;
  font-size: 0.8rem;
  color: #0b2a57;
}

.attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.attr-left {
  flex: 2;
}
.attr-right {
  flex: 1;
}
.tag-group {
  margin-bottom: 8px;
}
.tag-group .label {
  font-weight: 600;
  margin-right: 4px;
}
.tag-group .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-group .tag {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.8rem;
  color: #444;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
}
.hours-table th,
.hours-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
}
.hours-table th {
  font-weight: 600;
}
.map-embed {
  margin-bottom: 12px;
}
.faqs {
  margin-top: 12px;
}
.faq-item {
  margin-bottom: 12px;
}
.faq-item .q {
  font-weight: 600;
  margin-bottom: 4px;
}
.faq-item .a {
  margin: 0;
  color: #333;
}

@media (max-width: 768px) {
  .attributes {
    flex-direction: column;
  }
  .hero-img {
    height: 200px;
  }
  .sticky-nav {
    top: 50px;
  }
}

/* Layout for the Best Things buttons row */
.best-things .tabs {
  margin-top: 12px;
  margin-bottom: 16px; /* add space below the buttons */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Keep the “See All →” link pushed to the right */
.best-things .tabs .see-all {
  margin-left: auto;
}

/* Make the “Related places” cards stack vertically with a full-width image */
.related .card {
  display: flex;
  flex-direction: column;  /* stack children vertically */
  padding: 0;              /* remove padding so the image touches the edges */
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  overflow: hidden;
}

.related .card img.logo {
  width: 100%;
  height: 140px;           /* adjust height to taste */
  object-fit: cover;       /* ensure the photo fills the area */
  display: block;
}

/* Add some padding to the content area inside each related card */
.related .card > div {
  padding: 12px 14px;
}

/* Ensure the View button sits below the description */
.related .card .cta {
  margin-top: 8px;
}

/* Map styling */
.map-embed iframe { width: 100%; height: 320px; border: 0; border-radius: 12px; }

.back-row { margin: 12px 0 8px; }

/* ================================
   Footer category chips (polished)
   Scopes only to the footer nav
   ================================ */
.footer-nav .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;             /* row x column gap */
  align-items: center;
}

.footer-nav .chips .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;         /* larger tap target */
  min-height: 40px;
  border-radius: 9999px;      /* full pill */
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: #0f172a;             /* slate-900 */
  background:
    linear-gradient(180deg, #ffffff, #fafafa);
  border: 1px solid #e7eaf0;  /* subtle border */
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.8),
    0 1px 2px rgba(16,24,40,.06);  /* soft depth */
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease;
  cursor: pointer;
  white-space: nowrap;
}

.footer-nav .chips .chip:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.9),
    0 6px 14px rgba(16,24,40,.08);
  border-color: #dfe4ea;
  background: linear-gradient(180deg, #ffffff, #f7f7f9);
  text-decoration: none;
}

.footer-nav .chips .chip:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.7),
    0 2px 6px rgba(16,24,40,.08);
}

.footer-nav .chips .chip:focus-visible {
  outline: none;
  /* accessible focus ring */
  box-shadow:
    0 0 0 3px rgba(2,132,199,.2),   /* sky-600 glow */
    0 0 0 6px rgba(2,132,199,.12),
    inset 0 1px 0 0 rgba(255,255,255,.85);
  border-color: #0284c7;
}

/* Optional: compact on very small screens */
@media (max-width: 420px) {
  .footer-nav .chips .chip {
    padding: 9px 12px;
    font-size: 0.95rem;
  }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .footer-nav .chips .chip {
    transition: none;
  }
}

/* ======= Restaurant Menu ======= */
.section-menu { margin-top: 24px; }
.section-menu h2 { margin-bottom: 10px; }

.menu-external { margin: 6px 0 18px; }
.menu-external a { text-decoration: none; font-weight: 600; }

.menu-section { margin: 16px 0 22px; }
.menu-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.menu-section-note {
  margin: 0 0 10px;
  color: #666;
  font-size: 0.95rem;
}

.menu-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
}

.menu-item-name {
  font-weight: 600;
  line-height: 1.2;
}

.menu-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1;
  background: #f3f6ff;
  border: 1px solid #dfe6ff;
  color: #2a4bff;
}

.menu-item-desc {
  margin-top: 4px;
  color: #555;
  font-size: 0.94rem;
}

.menu-item-price {
  margin-left: 10px;
  font-weight: 600;
  white-space: nowrap;
  align-self: center;
}

/* Tighten mobile, keep two-column feel on wider screens */
@media (min-width: 680px) {
  .menu-items {
    grid-template-columns: 1fr 1fr;
  }
}

/* detail page layout (safe, minimal) */

/* Single-column detail layout */
.detail-body { 
  display: block;          /* was: grid */
  margin-top: 24px;
}

/* Sidebar becomes full-width and follows the main content */
.detail-aside { 
  margin-top: 16px; 
}
.detail-aside .aside-box { 
  width: 100%;             /* ensure full width cards */
}


.detail-aside .aside-box { background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 14px; }
.score-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 10px; margin: 12px 0; }
.score { display: flex; justify-content: space-between; background:#fafafa; border:1px solid #eee; border-radius:8px; padding:8px 10px; }
.hours { width: 100%; border-collapse: collapse; margin-top: 8px; }
.hours th, .hours td { border-bottom: 1px solid #eee; padding: 6px 8px; text-align: left; }
.related .hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding: 8px 0; }
.muted { color: #888; }
@media (max-width: 900px){
  .detail-head { grid-template-columns: 1fr; }
  .detail-body { grid-template-columns: 1fr; }
}

/* === Detail: Map + Location block === */
#d-location { margin-top: 8px; }
#d-location .map-embed { margin-bottom: 10px; }
#d-location p { margin: 6px 0; }

/* === Related places: consistent card sizing inside horizontal scroller === */
#related { margin-top: 20px; }
#related .hscroll { 
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 8px 2px 10px;
}
#related .card.card--place { min-width: 230px; }
#related .card.card--place .card-img { height: 140px; }

/* Make sure headings stick with their sections nicely */
#related .section-head h2,
.detail-main h2 { margin: 0 0 8px; }

/* Force "Related places" to stack: heading on its own line, carousel below */
#related .section-head {
  display: block;          /* override the global flex */
  margin: 0 0 10px;        /* space under the heading */
}

#related .section-head h2 {
  display: block;          /* ensure full-width heading */
  margin: 0 0 8px;         /* tidy spacing */
}

/* (Optional) tighten spacing above the carousel */
#related .hscroll {
  margin-top: 0;
}
/* Make sure the detail page "Related places" section stacks heading above carousel */
#related { display: block; }


/* Main content first, then Details box below it (since .detail-body is block) */
.detail-main { margin-top: 18px; }
.detail-aside { margin-top: 14px; }
.detail-aside .aside-box { width: 100%; }

/* Section spacing inside main column */
.detail-main > h2 { margin: 18px 0 8px; }

/* Hours table polish (already present, but ensure good spacing) */
.hours { width: 100%; border-collapse: collapse; margin-top: 8px; }
.hours th, .hours td { border-bottom: 1px solid #eee; padding: 6px 8px; text-align: left; }

/* Location layout: map, then lines; keep clean spacing */
#d-location { margin-top: 8px; }
#d-location .map-embed { margin-bottom: 10px; }
#d-location p { margin: 6px 0; }

/* Related places: heading above, carousel below (you already added most of this) */
#related { display: block; margin-top: 22px; }
#related .section-head { display: block; margin: 0 0 10px; }
#related .section-head h2 { margin: 0 0 8px; }
#related .hscroll { 
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 8px 2px 10px;
  margin-top: 0;
}
#related .card.card--place { min-width: 230px; }
#related .card.card--place .card-img { height: 140px; }

/* --- Detail layout (single column) --- */
.detail-body {
  display: block;          /* single column */
  margin-top: 24px;
}

/* keep the aside full-width below the main */
.detail-aside { margin-top: 16px; }
.detail-aside .aside-box { width: 100%; }


/* --- Cards --- */
.card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
  margin-bottom: 16px;
}
.card h2, .card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Subnav --- */
.detail-subnav {
  position: sticky;
  top: var(--site-header-h);       /* make sticky under your site header; adjust if header is fixed */
  z-index: 50;
  display: flex;
  gap: 12px;
  padding: 10px 0;
  margin: 12px 0 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.detail-subnav a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  color: #333;
  border: 1px solid #e5e5e5;
}
.detail-subnav a.active {
  border-color: #222;
  background: #222;
  color: #fff;
}

/* --- Chips --- */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-group .chip {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  background: #fafafa;
}

/* --- Pill (overall rating) --- */
.pill {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  background: #111;
  color: #fff;
}

/* --- Score grid (subscores) --- */
.score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 8px 12px;
}
.score-grid .score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid #efefef;
  border-radius: 8px;
  background: #fcfcfc;
  font-size: 14px;
}

/* --- Facts list --- */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; }
.facts dt { color: #666; }
.facts dd { margin: 0; }

/* --- Map box --- */
.map-embed { height: 220px; border-radius: 12px; overflow: hidden; background: #f3f3f3; }
@media (max-width: 980px) { .map-embed { height: 200px; } }

/* --- Floating subnav: keep it purely sticky under the site header --- */
.detail-subnav {
  position: sticky;
  top: var(--site-header-h);
  z-index: 50;
  display: flex;
  gap: 12px;
  padding: 10px 0;
  margin: 12px 0 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.detail-subnav.fixed {
  position: sticky;
  top: var(--site-header-h);
  left: auto;
  right: auto;
  padding: 10px 0;
  margin: 12px 0 16px;
  box-shadow: none;
}

.detail-subnav a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  color: #333;
  border: 1px solid #e5e5e5;
  background: #fff;
}

.detail-subnav a.active {
  border-color: #222;
  background: #222;
  color: #fff;
}

/* Spacer gets its height from JS when subnav becomes fixed */
#detail-subnav-spacer { height: 0; }

/* ==== Place cards: edge-to-edge hero image (no inner white border) ==== */
.card.card--place {
  padding: 0;                 /* override the global .card padding */
  border-radius: 16px;        /* keep nice rounded corners */
  overflow: hidden;           /* clip the image to the same radius */
}

/* Top image block (full bleed) */
.card.card--place .card-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;       /* consistent height without CLS */
  background: #f4f6f8;
}

/* The image should completely cover the area */
.card.card--place .card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* full bleed */
  border: 0;                  /* no extra borders */
}

/* Put padding only on the text area, not the whole card */
.card.card--place .card-body {
  padding: 12px 14px 14px;
}

/* Optional: slightly larger corner radius like your reference */
.card.card--place {
  border: 1px solid #e7e7e7;  /* keep subtle card outline */
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.card.card--place:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* ========== Sleek Detail Header ========== */
.place-hero {
  position: relative;
  margin: 0 0 16px;
}

.place-hero__media {
  position: relative;
  width: 100%;
  height: clamp(220px, 36vw, 420px);
  overflow: hidden;
}

.place-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.place-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 20%, rgba(0,0,0,.35) 100%);
}

.place-hero__panel {
  position: relative;
  margin-top: -84px;           /* floats panel over the hero */
  padding: 0 18px 6px;
}

@media (max-width: 700px){
  .place-hero__panel { margin-top: -56px; }
}

/* breadcrumbs */
.breadcrumbs {
  display: flex; align-items: center; gap: 8px;
  color: #eef2f7; font-size: .9rem; margin-bottom: 6px;
}
.breadcrumbs a { color: #f3f5f8; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span { opacity: .9; }

/* top row: badges + rating pill right */
.place-hero__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}

/* badges on dark background */
.place-hero .badge {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  color: #243447;
}

/* rating pill */
.rating-pill {
  background: #0b57d0; color:#fff; border-radius: 999px;
  padding: 6px 10px; font-weight: 800; min-width: 44px; text-align: center;
  box-shadow: 0 4px 12px rgba(11,87,208,.25);
}

/* title & meta on top of image */
.place-hero h1 {
  margin: 6px 0 4px;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: #fff;
  letter-spacing: .2px;
}

.place-hero__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: #f1f5fb; font-size: .98rem; margin-bottom: 10px;
}
.place-hero__meta .pill {
  background: #10b981; color: #fff; border-color: transparent; font-weight: 700;
}
.place-hero__meta .dot { opacity: .8; }

/* actions */
.place-hero__actions {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.place-hero__actions .btn {
  border-radius: 999px;
  padding: 9px 14px;
}

/* ===== Sleek overlay detail header (BestDubai-style) ===== */
.detail-head { position: relative; margin-bottom: 16px; }

.detail-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #e9eef3;
}

/* Full-bleed hero image as a normal block (no overlay) */
.detail-hero img {
  position: static;        /* was: absolute */
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;    /* consistent height */
  object-fit: cover;
  object-position: center;
}

/* No gradient overlay */
.detail-hero::after { content: none; }



/* Overlay panel inside the hero (matches your new HTML: .detail-meta.overlay) */
.detail-meta.overlay {
  position: absolute;
  left: 20px; right: 20px; bottom: 20px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.detail-meta.overlay h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}

/* Pills on the dark overlay */
.detail-meta.overlay .d-sub .pill {
  display: inline-block;
  margin: 4px 8px 0 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: .88rem;
  backdrop-filter: blur(2px);
}

/* Rating pill stays solid */
.detail-meta.overlay .pill--rating {
  background: #16a34a;
  border-color: transparent;
  color: #fff;
}

/* Overlay CTAs as white chips */
.detail-meta.overlay .btn {
  display: inline-block;
  margin: 12px 10px 0 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease;
}

.detail-meta.overlay .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

/* Responsive tweak */
@media (max-width: 740px) {
  .detail-meta.overlay { left: 12px; right: 12px; bottom: 12px; }
  .detail-hero { min-height: 280px; }
}

/* Optional polish: match the reference’s soft cards + rounded iframes */
.detail-body .card iframe,
.detail-aside .aside-box iframe {
  border: 0; border-radius: 12px; width: 100%;
}

.card { border-radius: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }


.detail-subnav {
  position: sticky; top: var(--site-header-h); z-index: 30;
  display: flex; gap: 8px; padding: 10px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.detail-subnav a {
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none; color: #111; font-weight: 500;
}
.detail-subnav a:hover { background: #f4f6f8; }

/* ===== Detail header: content ABOVE the image ===== */

/* Layout container */
.detail-head { margin-bottom: 16px; }

/* Meta block that sits above the hero */
.detail-meta.top {
  margin: 0 0 12px;
}

.detail-meta.top h1 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  color: #111;
}

/* Pills in the top meta (light theme) */
.detail-meta.top .d-sub .pill {
  display: inline-block;
  margin: 4px 8px 0 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2f4f7;
  border: 1px solid var(--border);
  color: #333;
  font-size: .88rem;
}

.detail-meta.top .pill--rating {
  background: #16a34a;
  border-color: transparent;
  color: #fff;
}

/* Top meta buttons (solid + subtle) */
.detail-meta.top .btn {
  display: inline-block;
  margin: 10px 10px 0 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0b57d0;
  color: #fff;
  border: 1px solid #0b57d0;
  font-weight: 600;
}
.detail-meta.top .btn:hover { filter: brightness(.97); }

.detail-meta.top .btn:not(#btn-share) {
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.08);
}

/* Hero image becomes a normal, non-overlay block */
.detail-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #e9eef3;
}

/* Make the image a standard block element (no absolute overlay) */
.detail-hero img {
  position: static;        /* override earlier absolute */
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;    /* keeps a consistent height */
  object-fit: cover;
  object-position: center;
}

/* Remove the gradient overlay if it exists */
.detail-hero::after { content: none; }

/* Ensure anchored sections land below the sticky header */
#about, #amenities, #cuisines, #meals, #rating, #hours, #map {
  scroll-margin-top: calc(var(--site-header-h) + 8px);
}

/* Keep newlines in the About text */
#d-about { white-space: pre-line; }

/* Hide the unused sidebar Actions card */
#actions-card { display: none; }

/* Make all rating badges/chips green */
.ctas .rating-chip,
.card-img .rating-badge,
.detail-hero .rating-badge{
  background: #16a34a;   /* emerald green */
  color: #fff;
}

/* Ensure the star icon shows in white on green */
.ctas .rating-chip .star path,
.card-img .rating-badge .star path,
.detail-hero .rating-badge .star path{
  fill: #fff;
}

/* === Best Things: generic status badges (for featured + listings) === */
.best-things .status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.best-things .status.open {
  background: #e8f7e8;
  color: #107810;
}
.best-things .status.closed {
  background: #fbeaea;
  color: #a42525;
}

/* === Best Things: green rating pill (used in right column) — compact like "Open" === */
.pill-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #16a34a;   /* emerald */
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
}


/* Make space between stacked blocks on the See-All page */
.bt-block { margin: 26px 0; }
.bt-block .bt-head h2 { margin: 0 0 10px; }

/* ===== Best Things — one column: featured full-width, then two-column list ===== */
#best-things .bt-block .best-things-content {
  display: block;                     /* one column container */
}

#best-things .featured-card {
  display: block;
  width: 100%;
  margin-bottom: 14px;                /* space before the grid below */
}

/* Below the featured: 2-column grid of listings */
#best-things .top-listings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Keep tidy row layout inside each listing card/anchor (unchanged behavior) */
#best-things .top-listings .card,
#best-things .top-listings a {
  display: grid;
  grid-template-columns: 1fr auto; /* title/info | rating/chip */
  gap: 8px;
  align-items: center;
  text-decoration: none;
}

/* Ensure ratings / chips align on the right nicely (unchanged) */
#best-things .top-listings .badge,
#best-things .top-listings .rating-badge {
  justify-self: end;
}

/* Section heading breathing space (unchanged) */
#best-things .bt-block .bt-head {
  margin: 18px 0 12px;
}

/* Mobile: listings collapse to 1 column */
@media (max-width: 900px) {
  #best-things .top-listings {
    grid-template-columns: 1fr;
  }
}


.header-actions .btn-suggest + .btn-suggest { margin-left: 8px; }

/* === Best Things (right column): make rating sit under the thumbnail,
      same width as the thumbnail (88px), text centered === */

/* Grid the small listing rows so we can park the rating under the image */
.best-things .top-listings .listing-card {
  display: grid !important;
  grid-template-columns: 88px 1fr;   /* thumbnail | info */
  grid-template-rows: auto auto;     /* name/meta | rating under image */
  column-gap: 10px;
  align-items: start;
}

/* Keep the 88×88 thumbnail in column 1 */
.best-things .top-listings .listing-card img {
  grid-column: 1;
  grid-row: 1;
}

/* Info spans the right side (both rows) */
.best-things .top-listings .listing-card .info {
  grid-column: 2;
  grid-row: 1 / span 2;
}


/* === Best Things (right-column listings): fixed right-rail for Open + Rating === */
#best-things .top-listings .listing-card {
  position: relative;
  padding-right: 110px;                 /* room for the right-rail badges */
}

/* Right-rail — common size */
#best-things .top-listings .listing-card ._rightpill {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;                          /* fixed width */
  height: 28px;                         /* fixed height (pill) */
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;                       /* keeps text vertically crisp */
  text-align: center;
  white-space: nowrap;
  pointer-events: none;                 /* they’re indicators, not CTAs */
}

/* Open (top) — reuse your Open colors */
#best-things .top-listings .listing-card .info .status.open {
  top: 10px;
  background: #e8f7e8;
  color: #107810;
  border: 0;
}

/* Make Open adopt the right-rail sizing */
#best-things .top-listings .listing-card .info .status.open {
  /* inherit the size/centering */
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  position: absolute;                   /* pull it out of the meta line */
}

/* Rating (below Open) — fixed size, emerald */
#best-things .top-listings .listing-card .score.pill-green {
  top: 44px;                            /* sits below the Open pill */
  background: #16a34a !important;
  color: #fff !important;

  /* inherit the size/centering from the right-rail */
  right: 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 90px !important;
  height: 28px !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  position: absolute;
}

/* Keep the meta line from jumping (since Open is now absolutely positioned) */
#best-things .top-listings .listing-card .info .sub {
  padding-right: 100px;                 /* avoids text under the right rail */
}

/* Tighten on small screens but keep alignment */
@media (max-width: 600px) {
  #best-things .top-listings .listing-card {
    padding-right: 100px;
  }
  #best-things .top-listings .listing-card ._rightpill,
  #best-things .top-listings .listing-card .info .status.open,
  #best-things .top-listings .listing-card .score.pill-green {
    width: 84px;
  }
}

/* === See-All page only (prevents homepage bleed) === */

/* One column: featured full-width, then two-column list */
.page-best-things #best-things .bt-block .best-things-content {
  display: block;
}
.page-best-things #best-things .featured-card {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}
.page-best-things #best-things .top-listings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .page-best-things #best-things .top-listings {
    grid-template-columns: 1fr;
  }
}

/* Hide the per-block headings on this page only */
.page-best-things #best-things .bt-block .bt-head { 
  display: none; 
}

/* Hide tabs on this page only (you can remove the inline <style> if you want) */
.page-best-things #best-things .tabs { 
  display: none; 
}

/* Right-rail for Open (top) + Rating (below) – page-scoped */
.page-best-things #best-things .top-listings .listing-card {
  position: relative;
  padding-right: 110px;
}

/* Open pill */
.page-best-things #best-things .top-listings .listing-card .info .status.open {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 90px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  background: #e8f7e8;
  color: #107810;
  z-index: 2;
  border: 0;
}

/* Rating pill */
.page-best-things #best-things .top-listings .listing-card .score.pill-green {
  position: absolute;
  right: 10px;
  top: 44px;
  width: 90px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  background: #16a34a !important;
  color: #fff !important;
  z-index: 2;
}

/* Keep meta text from flowing under right-rail */
.page-best-things #best-things .top-listings .listing-card .info .sub {
  padding-right: 100px;
}

@media (max-width: 600px) {
  .page-best-things #best-things .top-listings .listing-card { padding-right: 100px; }
  .page-best-things #best-things .top-listings .listing-card .info .status.open,
  .page-best-things #best-things .top-listings .listing-card .score.pill-green {
    width: 84px;
  }
}

/* =========================
   HOMEPAGE ONLY (NOT see-all)
   One column + fixed right-rail pills (Open above, Rating below)
   ========================= */
body:not(.page-best-things) #best-things .top-listings {
  display: block;                 /* keep homepage list as one column */
}

body:not(.page-best-things) #best-things .top-listings .listing-card {
  position: relative;             /* enable right-rail positioning */
  padding-right: 110px;           /* reserve space for pills on the right */
}

/* Open pill (top-right, fixed size) */
body:not(.page-best-things) #best-things .top-listings .listing-card .info .status.open {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 90px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  background: #e8f7e8;
  color: #107810;
  z-index: 2;
  border: 0;
}

/* Rating pill (below Open, fixed size) */
body:not(.page-best-things) #best-things .top-listings .listing-card .score.pill-green {
  position: absolute;
  right: 10px;
  top: 44px;                      /* below the Open pill */
  width: 90px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  background: #16a34a !important;
  color: #fff !important;
  z-index: 2;
}

/* Prevent meta text from flowing under the right rail */
body:not(.page-best-things) #best-things .top-listings .listing-card .info .sub {
  padding-right: 100px;
}

/* Slightly narrower pills on very small screens */
@media (max-width: 600px) {
  body:not(.page-best-things) #best-things .top-listings .listing-card { padding-right: 100px; }
  body:not(.page-best-things) #best-things .top-listings .listing-card .info .status.open,
  body:not(.page-best-things) #best-things .top-listings .listing-card .score.pill-green {
    width: 84px;
  }
}

/* === Add My Business (apply) === */
.page-add-business .header-search { display:none; }

.apply-card { 
  margin: 20px 0; 
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow: 0 6px 18px rgba(17,24,39,.05);
}
.apply-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); }
.apply-title { margin: 14px 18px 6px; font-size:1.4rem; }
.apply-sub { margin: 0 18px 14px; color:#444; }

.dot { display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:6px; vertical-align:middle; }
.dot-green { background:#16a34a; }
.dot-blue { background:#0b57d0; }

.form { padding: 0 18px 18px; }
.form-row { margin: 10px 0; }
.form-label { display:block; font-weight:600; margin-bottom: 6px; }
.form-input { width:100%; padding:10px 12px; border:1px solid #d0d5dd; border-radius:10px; }
.form-hint { margin:6px 0 0; color:#666; font-size: .92rem; }

.form-fieldset { border:0; margin: 10px 0; padding:0; }
.chip-toggle { cursor:pointer; }
.chip-toggle input { appearance:none; width:0; height:0; position:absolute; }
.chip-toggle:has(input:checked) { background:#0b5fff; color:#fff; border-color:#0b5fff; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width:700px){ .grid-2 { grid-template-columns:1fr; } }

.form-check { display:flex; gap:8px; align-items:flex-start; margin:12px 0; }
.btn-submit { margin-top: 8px; width: 100%; }

.form-msg { margin: 10px 0 0; font-weight:600; }
.form-msg.ok { color:#107810; }
.form-msg.err { color:#a42525; }

.apply-steps { border-top:1px solid var(--border); padding: 14px 18px 18px; display:grid; gap:12px; }
.step-title { font-weight:700; margin-bottom:4px; }

.apply-badge img { width:40px; height:40px; object-fit:contain; }