/* Base + layout */
.design-v2 { font-family:var(--font-sans); color:var(--text); background:var(--bg); }
.design-v2 .container{ width:100%; max-width:var(--container); padding-inline:min(5vw,24px); margin-inline:auto; }
.design-v2 .section{ padding-block:var(--section-y) }
.design-v2 .muted{ color:var(--text-muted) }

/* Buttons */
.design-v2 .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2); padding:12px 18px; font-weight:600; border-radius:10px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.design-v2 .btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow) }
.design-v2 .btn-primary:hover{ transform:translateY(-1px) }
.design-v2 .btn-outline{ background:#fff; border-color:var(--border); color:var(--text) }
.design-v2 .badge{
  display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px;
  background:var(--brand-50); color:var(--brand-700); font-weight:600; border:1px solid var(--brand-100);
}

/* Header / nav */
.design-v2 .header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(12px); background:rgba(255,255,255,.7); border-bottom:1px solid rgba(0,0,0,.06) }
.design-v2 .header .inner{ display:flex; align-items:center; justify-content:space-between; height:64px }
.design-v2 .nav{ display:flex; gap:var(--s-6) }
.design-v2 .nav a{ text-decoration:none; color:var(--text); font-weight:600; padding:6px 0; border-bottom:2px solid transparent }
.design-v2 .nav a[aria-current="page"]{ border-color:var(--brand-600); color:var(--brand-700) }

/* Hero */
.design-v2 .hero{ position:relative; isolation:isolate; background:linear-gradient(180deg, var(--brand-50), #fff) }
.design-v2 .hero-grid{ display:grid; gap:var(--s-12); grid-template-columns:1.1fr .9fr; align-items:center }
.design-v2 .hero .eyebrow{ margin-bottom:var(--s-4) }
.design-v2 .hero h1{ font-size:var(--fs-hero); margin:0 0 var(--s-4) }
.design-v2 .hero p{ margin:0 0 var(--s-8); color:var(--text-muted); max-width:60ch }
.design-v2 .hero-media{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:300px; box-shadow:var(--shadow) }
.design-v2 .hero-media img{ width:100%; height:100%; object-fit:cover; display:block }
.design-v2 .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(30deg, rgba(0,0,0,.35), rgba(0,0,0,.05) 60%) }
@media (max-width:900px){ .design-v2 .hero-grid{ grid-template-columns:1fr } }

/* Cards */
.design-v2 .cards{
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (max-width:1000px){ .design-v2 .cards{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .design-v2 .cards{ grid-template-columns:1fr } }
.design-v2 .card{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.03); transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease }
.design-v2 .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:transparent }
.design-v2 .card-media{ aspect-ratio:16/9; overflow:hidden }
.design-v2 .card-media img{ width:100%; height:100%; object-fit:cover; display:block }
.design-v2 .card-body{ padding:var(--s-6) }
.design-v2 .card-title{ margin:0 0 var(--s-3); font-size:18px }
.design-v2 .card-desc{ margin:0 0 var(--s-6); color:var(--text-muted) }
.design-v2 .card-cta{ display:flex; gap:var(--s-3) }

/* Mobile CTA (optional) */
.design-v2 .mobile-cta{ position:fixed; inset-inline:0; bottom:0; z-index:60; background:rgba(255,255,255,.9); border-top:1px solid var(--border); backdrop-filter:saturate(160%) blur(10px); padding:var(--s-4) min(5vw,24px); display:none }
.design-v2 .mobile-cta .inner{ display:flex; gap:var(--s-4); justify-content:space-between; align-items:center }
@media (max-width:760px){ .design-v2 .mobile-cta{ display:block } }

/* Signup block */
.design-v2 .signup{ background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s-8); display:grid; gap:var(--s-4); box-shadow:0 2px 12px rgba(0,0,0,.03) }
.design-v2 .signup form{ display:flex; gap:var(--s-3); flex-wrap:wrap }
.design-v2 .signup input[type="email"]{ flex:1 1 280px; min-width:220px; padding:12px 14px; border-radius:10px; border:1px solid var(--border); font:inherit }

/* Modal */
.design-v2 .modal{ position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.45); padding:var(--s-6) }
.design-v2 .modal.open{ display:flex }
.design-v2 .modal-card{ width:min(560px, 100%); background:#fff; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow); padding:var(--s-8) }
.design-v2 .modal-close{ position:absolute; top:12px; right:12px; background:#fff; border:1px solid var(--border); border-radius:999px; width:36px; height:36px; display:grid; place-items:center; cursor:pointer }

/* Footer */
.design-v2 .footer{ background:var(--brand-900); color:#cbd5e1; padding-block:var(--s-16) }
.design-v2 .footer a{ color:#e2e8f0; text-decoration:none }
.design-v2 .footer .grid{ display:grid; gap:var(--s-10); grid-template-columns:2fr 1fr 1fr 2fr }
@media (max-width:900px){ .design-v2 .footer .grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .design-v2 .footer .grid{ grid-template-columns:1fr } }
.design-v2 .footer .logo img{ filter:none }
.design-v2 .footer small{ color:#94a3b8 }

/* =========================================================
   SaveRx.ai — Step 3: Featured Section (your IDs)
   ========================================================= */

.design-v2 #skeleton-cards,
.design-v2 #featured-cards{
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.design-v2 .card.skeleton{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-6);
  background: #fff;
}
.design-v2 .sk-line{
  height: 12px;
  border-radius: 8px;
  background: var(--brand-50);
  margin-bottom: var(--s-3);
}
.design-v2 .sk-title{ height: 16px }
.design-v2 .sk-pill{
  height: 28px; width: 40%;
  border-radius: 999px;
  background: var(--brand-100);
}

.design-v2 #featured.section-pad{ padding-block: var(--section-y) }
.design-v2 #featured .section-title{ margin: 0 0 var(--s-6) }

.design-v2 #ai-loader{
  display: grid; gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-6);
  background: var(--bg-soft);
  margin-bottom: var(--s-6);
}
.design-v2 #ai-loader .ai-dot{
  display: inline-block;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--brand-400); margin-right: 4px;
}

.design-v2 #cards-loading{
  text-align: center;
  margin-top: var(--s-6);
}

/* Footer disclaimer strip */
.design-v2 .footer-disclaimer{
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: var(--s-10);
  padding: var(--s-6) 0;
  color: #a8b3c6;          /* subtle slate-ish */
}
.design-v2 .footer-disclaimer small{
  display:block;
  line-height: 1.6;
}

/* Center footer logo + text */
.design-v2 .footer .logo,
.design-v2 .footer .logo img,
.design-v2 .footer .logo + p {
  display: block;
  margin-inline: auto;
  text-align: center;
}

/* v2 modal support for your markup */
.design-v2 .modal{
  position:fixed; inset:0; z-index:70; display:none;
  align-items:center; justify-content:center;
  background:rgba(15,23,42,.45); padding:var(--s-6);
}
.design-v2 .modal.open{ display:flex }
.design-v2 .modal-panel{
  position:relative;
  width:min(560px,100%);
  background:#fff;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:var(--s-8);
}
.design-v2 .modal-backdrop{ position:absolute; inset:0; }
.design-v2 .modal-close{
  position:absolute; top:12px; right:12px;
  background:#fff; border:1px solid var(--border);
  border-radius:999px; width:36px; height:36px;
  display:grid; place-items:center; cursor:pointer;
}


/* =========================================================
   Styles for Ask SaveRx widget
   ====================================================== */
#saverx-chat { position: fixed; bottom: 20px; right: 20px; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; z-index: 9999; }
#saverx-btn { padding: 10px 14px; border-radius: 999px; border: 0; box-shadow: 0 4px 14px rgba(0,0,0,.15); cursor: pointer; background:#111; color:#fff; }
#saverx-panel { width: 340px; max-width: calc(100vw - 32px); height: 420px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); margin-bottom: 10px; }
#saverx-panel[hidden] { display:none; }
.srx-header { display:flex; justify-content:space-between; align-items:center; font-size:14px; gap:8px; }
.srx-sub { color:#6b7280; font-weight:400; }
#srx-log { overflow:auto; padding:8px; border:1px solid #f0f0f0; border-radius:8px; background:#fafafa; font-size:14px; line-height:1.45; }
.srx-msg { margin:8px 0; }
.srx-user { text-align:right; }
#srx-form { display:flex; gap:8px; }
#srx-input { flex:1; padding:10px; border:1px solid #ddd; border-radius:8px; }
#srx-form button { padding:10px 12px; border-radius:8px; border:1px solid #ddd; background:#111; color:#fff; }
@media (max-width: 480px) { #saverx-panel { height: 60vh; } }

#srx-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.srx-chip { font-size:12px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; cursor:pointer; }
.srx-chip:hover { background:#f5f5f5; }

/* Prevent iOS input zoom + make tap targets comfy */
#srx-input {
  font-size: 16px;               /* key to avoid iOS zoom */
  min-height: 44px;              /* Apple HIG tap target */
}
#srx-form button { min-height: 44px; }

/* Base (unchanged for desktop) */
#saverx-chat { position: fixed; bottom: 20px; right: 20px; z-index: 9999; }
#saverx-panel { 
  width: 340px; height: 420px; 
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); margin-bottom: 10px;
}
#saverx-panel[hidden] { display: none; }

/* Add overlay for mobile sheet */
#srx-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9998; display: none;
}
#srx-overlay.show { display: block; }

/* Mobile layout: turn panel into a bottom sheet */
@media (max-width: 640px) {
  #saverx-chat { bottom: env(safe-area-inset-bottom, 16px); right: 16px; left: 16px; }
  #saverx-btn { width: 120px; } /* optional */

  #saverx-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    /* Use dynamic viewport to avoid the address bar “jump” */
    height: calc(88dvh - env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 16px 16px 0 0;
    border: 0;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  }

  /* Let the log area scroll comfortably */
  #srx-log { overflow: auto; -webkit-overflow-scrolling: touch; }
}