/* ===== Sweet Spot Locator — CLS-Safe Styles (scoped) ===== */
#sweetspot-locator{
  --brand:#FF06B5; --ink:#111; --ink-2:#444; --bg:#fff; --card:#fff; --muted:#f7f7f8; --ring:#ffd6f0; --radius:20px;
  font-synthesis-weight:none;
}
#sweetspot-locator *{ box-sizing:border-box; }

/* Layout container */
#sweetspot-locator .wrap{ max-width:1140px; margin-inline:auto; }

/* Controls */
#sweetspot-locator .controls{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 20px; }
#sweetspot-locator .search{ flex:1 1 280px; display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid #ff00b1; border-radius:999px; padding:10px 14px; min-height:44px; }
#sweetspot-locator .search input{border:0;outline:none;background:none;width:100%;min-height:24px;font-size:16px}
#sweetspot-locator .badge{ padding:8px 12px; border-radius:999px; border:1px solid #ff00b1; background:var(--card); cursor:pointer; min-height:36px; line-height:20px; }

/* Grid */
#sweetspot-locator .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
#sweetspot-locator .card{ grid-column:span 12; background:var(--card); border:2px solid #ff00b1; border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.04); }
/* Ensures cards don’t shrink as content loads */
@media (min-width:760px){ #sweetspot-locator .card{ grid-column:span 6; } }

/* Media (image) — hard reserve to prevent CLS */
#sweetspot-locator .media{
  position:relative; background:#fafafa; height:260px; overflow:hidden; /* reserve the image slot */
}
#sweetspot-locator .media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

/* Status pill — min-width holds space for longest message */
#sweetspot-locator .pill{
  position:absolute; left:12px; top:12px; background:#fff; border:1px solid var(--brand);
  border-radius:999px; padding:6px 10px; line-height:1;
  min-height:28px; min-width:22ch; /* reserves for "Closed · Opens tomorrow at 11:00 PM" */
  display:inline-flex; align-items:center; justify-content:center;
}
#sweetspot-locator .status-open{ border-color:#2ecc71; color:#2ecc71; }
#sweetspot-locator .status-closed{ border-color:#e74c3c; color:#e74c3c; }
#sweetspot-locator .status-coming-soon{ border-color:#ff9800; color:#ff9800; }

/* Body */
#sweetspot-locator .body{ padding:16px; }

/* Title + address — min-heights stop jumping when fonts load */
#sweetspot-locator .title{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
#sweetspot-locator .title h2{ font-size:1rem; line-height:1.25rem; min-height:1.25rem; margin:0; }
#sweetspot-locator .addr{ margin:6px 0 10px; line-height:1.25rem; min-height:1.25rem; }

/* Hours list — reserve block height to avoid growing after render */
#sweetspot-locator .list{ display:grid; gap:8px; margin:12px 0; }
#sweetspot-locator .row{ display:flex; align-items:flex-start; gap:10px; min-height:24px; }
#sweetspot-locator .row svg{ flex:0 0 18px; width:18px; height:18px; display:block; margin-top:2px; }

/* The "teaser" line (Open now / Closed · Opens …) gets a fixed line box */
#sweetspot-locator .list .row .small{ display:block; min-height:1.25rem; }

/* Full hours block (7 rows) — anti-CLS reservation */
#sweetspot-locator .list .small{ line-height:1.25rem; min-height:calc(7 * 1.25rem); }

/* Actions/buttons — minimum height locks the row */
#sweetspot-locator .actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; min-height:44px; }
#sweetspot-locator .btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
  border:2px solid #ff00b1; background:#fff; text-decoration:none; white-space:nowrap; min-height:44px;
}
#sweetspot-locator .btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); }
#sweetspot-locator .btn.primary{ border-color:var(--brand); background:var(--brand); color:#fff; }
#sweetspot-locator .btn svg{ width:18px; height:18px; flex:0 0 18px; display:block; }

/* Socials — make space even if icons/text arrive a bit later */
#sweetspot-locator .social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; min-height:36px; }
#sweetspot-locator .social a{
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;
  border:2px solid #ff00b1; text-decoration:none; background:#fff; min-height:36px;
}
#sweetspot-locator .social svg{ width:16px; height:16px; display:block; }

/* Simple divider + util */
#sweetspot-locator .hr{ height:1px; background:#f0f0f2; margin:12px 0; }
#sweetspot-locator .hidden{ display:none !important; }