/* ══════════════════════════════════════════════════════════════
   AstroAI — Conversion-Optimised CSS  v3
   Warm cream/saffron palette  ·  credibility-first design
   Cinzel (display) + Nunito (body)
   ══════════════════════════════════════════════════════════════ */
/* ── Auth Modal ────────────────────────────────────────────── */
.auth-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 16px;
}
.auth-modal-overlay.open { display: flex; }
.auth-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; width: 100%; max-width: 420px;
  overflow: hidden; position: relative;
}
.auth-tabs {
  display: flex; border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1; padding: 14px; text-align: center; font-size: 0.88rem;
  font-weight: 700; cursor: pointer; color: var(--muted);
  background: none; border: none; font-family: 'Nunito', sans-serif;
  border-bottom: 2px solid transparent; transition: all 0.2s;
}
.auth-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.auth-panel { display: none; padding: 24px; }
.auth-panel.active { display: block; }
.auth-header { text-align: center; margin-bottom: 20px; }
.auth-header .auth-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.auth-header h2 { font-family: 'Cinzel', serif; color: var(--gold); font-size: 1.1rem; }
.auth-header p  { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.auth-field input, .auth-field select {
  width: 100%; padding: 11px 14px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--bg2);
  color: var(--text); font-family: 'Nunito', sans-serif; font-size: 0.88rem;
  outline: none; transition: border-color 0.2s;
}
.auth-field input:focus, .auth-field select:focus { border-color: var(--gold); }
.auth-field input[type="date"] { color-scheme: dark; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-grid .full { grid-column: 1 / -1; }
.auth-btn {
  width: 100%; padding: 13px; background: linear-gradient(135deg, #c8860a, #f5c842);
  color: #fff; border: none; border-radius: 13px; font-size: 0.95rem; font-weight: 800;
  font-family: 'Nunito', sans-serif; cursor: pointer; margin-top: 4px;
  box-shadow: 0 4px 20px rgba(200,134,10,0.3); transition: opacity 0.2s;
}
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-err {
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5; border-radius: 10px; padding: 9px 13px; font-size: 0.8rem;
  margin-bottom: 12px; display: none;
}
.auth-err.show { display: block; }
.auth-close {
  position: absolute; top: 12px; right: 14px;
  background: rgba(255,255,255,0.08); border: none; color: var(--muted);
  cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
  font-size: 0.9rem; display: flex; align-items: center; justify-content: center;
}
.auth-trust {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; font-size: 0.68rem; color: var(--muted); font-weight: 700;
}

/* ── User Bar ───────────────────────────────────────────────── */
#userBar {
  background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%);
  padding: 10px 16px; display: none; flex-shrink: 0;
}
#userBar.show { display: flex; }
.ub-inner {
  max-width: 700px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 10px;
}
.ub-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.15); display: flex; align-items: center;
  justify-content: center; font-size: 1.2rem; border: 2px solid rgba(255,255,255,0.3);
}
.ub-info { flex: 1; min-width: 0; }
.ub-name  { font-family: 'Cinzel', serif; font-size: 0.85rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-sub   { font-size: 0.68rem; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-badge { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 3px 9px; font-size: 0.68rem; color: #fff; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.ub-btn   { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 0.75rem; padding: 4px; flex-shrink: 0; }

/* ── Paywall ─────────────────────────────────────────────────── */
.paywall-banner { margin: 12px 12px 0; border-radius: 18px; display: none; }
.paywall-banner.show { display: block; }
:root {
  /* Warm, trustworthy palette — NOT dark-gaming */
  --bg:           #fdf8f0;          /* warm parchment */
  --bg2:          #f5efe4;
  --surface:      #ffffff;
  --surface2:     #fef9f2;
  --border:       rgba(180,120,40,0.18);
  --border-strong:rgba(180,120,40,0.35);

  --gold:         #c8860a;          /* saffron-gold — readable on light */
  --gold-light:   #f5c842;
  --gold-bg:      rgba(248,196,60,0.12);
  --gold-glow:    rgba(200,134,10,0.25);

  --purple:       #6d28d9;
  --purple2:      #4338ca;
  --purple-soft:  rgba(109,40,217,0.08);
  --purple-glow:  rgba(109,40,217,0.25);

  --orange:       #ea580c;
  --orange-soft:  rgba(234,88,12,0.08);

  --green:        #16a34a;
  --green-soft:   rgba(22,163,74,0.10);
  --red:          #dc2626;

  --text:         #1c1410;
  --text-dim:     #5c4a30;
  --muted:        #9c8060;
  --bubble-ai:    #ffffff;
  --bubble-user:  #6d28d9;

  --radius:       16px;
  --shadow:       0 2px 16px rgba(100,60,10,0.10);
  --shadow-strong:0 4px 32px rgba(100,60,10,0.18);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; scroll-behavior:smooth; }
body {
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex; flex-direction:column;
  min-height:100%;
  overflow-x:hidden;
}

/* ── Subtle background texture ─────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(248,196,60,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(109,40,217,0.04) 0%, transparent 60%);
}

/* ── Social Proof Ticker ────────────────────────────────────── */
.social-proof-bar {
  background: linear-gradient(90deg, #fef3c7, #fde68a, #fef3c7);
  border-bottom: 1px solid rgba(180,120,40,0.25);
  overflow:hidden; height:34px;
  display:flex; align-items:center;
  flex-shrink:0; position:relative; z-index:90;
}
.proof-ticker {
  display:flex; gap:0;
  white-space:nowrap;
  animation:ticker 32s linear infinite;
  font-size:0.72rem; color:#7c4a10; font-weight:600;
}
.proof-ticker span { padding:0 28px; border-right:1px solid rgba(180,120,40,0.25); }
.proof-ticker strong { color:var(--orange); }
@keyframes ticker {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ── Header ─────────────────────────────────────────────────── */
.header {
  position:sticky; top:0; z-index:100;
  background:rgba(253,248,240,0.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:10px 14px;
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
  box-shadow:0 1px 12px rgba(100,60,10,0.08);
}
.astro-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, #c8860a, #f5c842);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
  box-shadow:0 0 0 3px rgba(248,196,60,0.3), 0 2px 12px rgba(200,134,10,0.3);
  animation:avatar-glow 3s ease-in-out infinite alternate;
}
@keyframes avatar-glow {
  from { box-shadow:0 0 0 3px rgba(248,196,60,0.2), 0 2px 12px rgba(200,134,10,0.2); }
  to   { box-shadow:0 0 0 3px rgba(248,196,60,0.5), 0 2px 20px rgba(200,134,10,0.4); }
}
.header-info h1 {
  font-family:'Cinzel',serif; font-size:1rem; font-weight:700;
  color:var(--gold); letter-spacing:0.06em;
}
.header-info .status {
  font-size:0.65rem; color:var(--green);
  display:flex; align-items:center; gap:4px; margin-top:1px; font-weight:700;
}
.status-dot {
  width:7px; height:7px; border-radius:50%; background:var(--green);
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(22,163,74,0.5); }
  50%     { box-shadow:0 0 0 5px rgba(22,163,74,0); }
}
.header-right { margin-left:auto; display:flex; align-items:center; gap:6px; }
.free-badge {
  font-size:0.65rem; font-weight:800;
  background:var(--gold-bg);
  border:1px solid rgba(200,134,10,0.3); color:var(--gold);
  padding:4px 10px; border-radius:20px;
}
.lang-btn {
  background:var(--surface); border:1px solid var(--border);
  color:var(--text-dim); border-radius:50%; width:32px; height:32px;
  font-size:0.9rem; cursor:pointer; transition:all 0.2s;
}
.lang-btn:hover { border-color:var(--gold); transform:scale(1.1); }
.my-reports-btn {
  background:var(--purple-soft);
  border:1px solid rgba(109,40,217,0.25);
  color:var(--purple); padding:5px 10px; border-radius:10px;
  font-size:0.65rem; font-weight:700; text-decoration:none;
  transition:all 0.2s; white-space:nowrap;
}
.my-reports-btn:hover { background:rgba(109,40,217,0.15); }

/* ── Chat Area ──────────────────────────────────────────────── */
.chat-area {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:16px 14px 10px;
  display:flex; flex-direction:column; gap:14px;
  scroll-behavior:smooth;
  position:relative; z-index:1;
  max-width:900px; width:100%; margin:0 auto;
}
.chat-area::-webkit-scrollbar { width:4px; }
.chat-area::-webkit-scrollbar-track { background:transparent; }
.chat-area::-webkit-scrollbar-thumb { background:rgba(200,134,10,0.2); border-radius:4px; }

/* ── Welcome Card ───────────────────────────────────────────── */
.welcome-card {
  background:linear-gradient(145deg, #fffbf0, #fef3c7);
  border:2px solid rgba(248,196,60,0.5);
  border-radius:24px;
  padding:28px 20px 22px;
  text-align:center;
  position:relative; overflow:hidden;
  box-shadow:0 4px 24px rgba(200,134,10,0.12);
}
.welcome-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), #f5c842, var(--orange), var(--gold));
  background-size:200% 100%;
  animation:shimmer-bar 3s linear infinite;
}
@keyframes shimmer-bar {
  0%   { background-position:0% 0%; }
  100% { background-position:200% 0%; }
}
.moon {
  font-size:2.8rem; display:block; margin-bottom:10px;
  animation:float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform:translateY(0) rotate(-5deg); }
  50%     { transform:translateY(-8px) rotate(5deg); }
}
.welcome-card h2 {
  font-family:'Cinzel',serif; font-size:1.2rem; font-weight:700;
  color:var(--gold); margin-bottom:6px;
}
.hi-sub { font-size:0.82rem; color:var(--text-dim); margin-bottom:10px; }
.welcome-card > p { font-size:0.88rem; color:var(--text-dim); margin-bottom:14px; }
.welcome-bullets {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:12px;
}
.welcome-bullets span {
  background:var(--surface);
  border:1px solid var(--border);
  padding:5px 12px; border-radius:20px;
  font-size:0.73rem; color:var(--text-dim); font-weight:600;
}

/* ── Trust Strip (NEW) ──────────────────────────────────────── */
.trust-strip {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  padding:10px 4px;
}
.trust-pill {
  display:flex; align-items:center; gap:5px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px; padding:6px 14px;
  font-size:0.72rem; font-weight:700; color:var(--text-dim);
  box-shadow:var(--shadow);
}
.trust-pill .tp-icon { font-size:1rem; }
.trust-pill .tp-val { color:var(--text); }

/* ── Review Card (NEW) ─────────────────────────────────────── */
.reviews-row {
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;
}
.reviews-row::-webkit-scrollbar { display:none; }
.review-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px; padding:14px 16px;
  min-width:220px; flex-shrink:0;
  box-shadow:var(--shadow);
}
.review-stars { color:#f59e0b; font-size:0.8rem; margin-bottom:4px; }
.review-text { font-size:0.78rem; color:var(--text-dim); line-height:1.5; margin-bottom:8px; }
.review-author { font-size:0.7rem; font-weight:700; color:var(--text); }
.review-meta { font-size:0.65rem; color:var(--muted); }

/* ── Talk to Astrologer Banner ───────────────────────────────── */
.talk-astro-banner {
  background:linear-gradient(135deg, #1e1b4b, #312e81);
  border:1px solid rgba(109,40,217,0.4);
  border-radius:20px; overflow:hidden;
  box-shadow:0 4px 24px rgba(109,40,217,0.2);
}
.talk-astro-inner {
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.talk-astro-left { display:flex; align-items:center; gap:10px; }
.talk-astro-avatar {
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  border:1px solid rgba(255,255,255,0.2);
}
.talk-astro-title { font-size:0.88rem; font-weight:700; color:#e0d7ff; }
.talk-astro-sub   { font-size:0.7rem; color:#a5b4fc; }
.talk-astro-btns  { display:flex; gap:8px; }
.talk-free-btn {
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);
  color:white; padding:8px 14px; border-radius:12px;
  font-size:0.75rem; font-weight:700; cursor:pointer;
  transition:all 0.2s;
}
.talk-free-btn:hover { background:rgba(255,255,255,0.2); }
.talk-paid-btn {
  background:linear-gradient(135deg,#f59e0b,#d97706);
  border:none; color:white; padding:8px 14px; border-radius:12px;
  font-size:0.75rem; font-weight:800; cursor:pointer;
  transition:all 0.2s; box-shadow:0 2px 12px rgba(245,158,11,0.4);
}
.talk-paid-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(245,158,11,0.5); }

/* ── Quick Questions ─────────────────────────────────────────── */
.quick-q {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.quick-q button {
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--text-dim); padding:8px 14px; border-radius:22px;
  font-size:0.78rem; font-weight:700; font-family:'Nunito',sans-serif;
  cursor:pointer; transition:all 0.18s;
  box-shadow:var(--shadow);
}
.quick-q button:hover {
  border-color:var(--gold); color:var(--gold);
  background:var(--gold-bg); transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(200,134,10,0.15);
}

/* ── Messages ───────────────────────────────────────────────── */
.msg {
  display:flex; align-items:flex-end; gap:8px;
  animation:msgIn 0.28s ease-out;
}
@keyframes msgIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.msg.user { flex-direction:row-reverse; }
.msg-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.msg.ai .msg-avatar {
  background:linear-gradient(135deg,#c8860a,#f5c842);
  box-shadow:0 2px 8px rgba(200,134,10,0.3);
}
.msg.user .msg-avatar {
  background:linear-gradient(135deg,var(--purple),var(--purple2));
}
.msg-bubble {
  max-width:80%; padding:12px 16px; border-radius:18px;
  font-size:0.88rem; line-height:1.65; word-break:break-word;
}
.msg.ai .msg-bubble {
  background:var(--bubble-ai);
  border:1px solid var(--border);
  border-bottom-left-radius:6px;
  color:var(--text);
  box-shadow:var(--shadow);
}
.msg.user .msg-bubble {
  background:var(--bubble-user);
  color:white; border-bottom-right-radius:6px;
  box-shadow:0 2px 12px rgba(109,40,217,0.3);
}

/* ── Typing ──────────────────────────────────────────────────── */
.msg.typing { display:none; }
.msg.typing.show { display:flex; }
.typing-dots {
  background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:12px 18px;
  display:flex; align-items:center; gap:5px;
  box-shadow:var(--shadow);
}
.typing-dots span {
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  animation:dot 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay:0.2s; }
.typing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes dot {
  0%,80%,100% { transform:scale(0.7); opacity:0.5; }
  40%         { transform:scale(1); opacity:1; }
}

/* ── Trending Section ────────────────────────────────────────── */
.trending-hero {
  background:var(--surface);
  border:1px solid var(--border); border-radius:20px;
  padding:14px; overflow:hidden;
  box-shadow:var(--shadow);
}
.trending-hero-head {
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.trending-hero-head h3 {
  font-family:'Cinzel',serif; font-size:0.85rem; color:var(--text); flex:1;
}
.hot-count {
  background:rgba(234,88,12,0.1); color:var(--orange);
  font-size:0.68rem; font-weight:800; padding:3px 10px; border-radius:12px;
  border:1px solid rgba(234,88,12,0.2);
}
.trend-scroll {
  display:flex; flex-direction:row !important;
  overflow-x:auto; overflow-y:hidden;
  gap:10px; white-space:nowrap; padding-bottom:4px;
  scrollbar-width:none;
}
.trend-scroll::-webkit-scrollbar { display:none; }
.trend-chip {
  min-width:160px; flex:0 0 auto;
  background:linear-gradient(145deg, #fffbf0, #fef3c7);
  border:1.5px solid rgba(200,134,10,0.25);
  border-radius:16px; padding:12px 14px; cursor:pointer;
  transition:all 0.2s; text-align:center;
}
.trend-chip:hover {
  border-color:var(--gold); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(200,134,10,0.15);
}
.trend-chip-emoji { font-size:1.8rem; display:block; margin-bottom:4px; }
.trend-chip-name   { font-size:0.72rem; font-weight:700; color:var(--text); white-space:normal; }
.trend-chip-name-hi{ font-size:0.65rem; color:var(--muted); white-space:normal; }
.trend-chip-price  { font-size:0.7rem; font-weight:800; color:var(--gold); margin-top:4px; }

/* ── Urgency Bar ─────────────────────────────────────────────── */
.urgency-bar {
  background:linear-gradient(135deg, #7c2d12, #9a3412);
  color:#fde68a; padding:10px 16px; border-radius:14px;
  font-size:0.78rem; font-weight:700; text-align:center;
  border:1px solid rgba(234,88,12,0.4);
  animation:urgency-pulse 2.5s ease-in-out infinite;
  box-shadow:0 2px 16px rgba(234,88,12,0.2);
}
@keyframes urgency-pulse {
  0%,100% { box-shadow:0 2px 16px rgba(234,88,12,0.2); }
  50%     { box-shadow:0 4px 24px rgba(234,88,12,0.4); }
}
#countdownTimer { color:#f87171; font-weight:900; }

/* ── Category Tabs ───────────────────────────────────────────── */
.products-section { /* wrapper */ }
.products-section-head { margin-bottom:12px; margin-top:16px; }
.products-section-head h3 {
  font-family:'Cinzel',serif; font-size:0.9rem; color:var(--text);
}
.cat-tabs {
  display:flex; overflow-x:auto; gap:6px; padding-bottom:4px;
  scrollbar-width:none;
}
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
  background:var(--surface); border:1.5px solid var(--border);
  color:var(--text-dim); padding:7px 14px; border-radius:22px;
  font-size:0.73rem; font-weight:700; font-family:'Nunito',sans-serif;
  cursor:pointer; white-space:nowrap; transition:all 0.2s;
}
.cat-tab.active, .cat-tab:hover {
  background:var(--gold); border-color:var(--gold); color:#1c1410;
}

/* ── Product Grid ────────────────────────────────────────────── */
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:12px;
}
.product-card {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-top:3px solid var(--card-color, var(--gold));
  border-radius:18px; padding:14px;
  cursor:pointer; transition:all 0.22s;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.product-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(100,60,10,0.14);
  border-color:var(--card-color, var(--gold));
}
.product-card.free-card {
  border-color:var(--green); border-top-color:var(--green);
  background:linear-gradient(145deg,#f0fdf4,#dcfce7);
}
.popular-badge {
  position:absolute; top:10px; right:10px;
  background:linear-gradient(135deg,#dc2626,#ef4444);
  color:white; font-size:0.6rem; font-weight:900;
  padding:2px 8px; border-radius:8px; letter-spacing:0.05em;
}
.prod-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:8px;
}
.prod-emoji { font-size:2rem; }
.prod-price {
  font-size:0.78rem; font-weight:800; color:var(--gold);
  background:var(--gold-bg); padding:3px 8px; border-radius:8px;
  border:1px solid rgba(200,134,10,0.2);
  margin-top: 10px;
}
.product-card.free-card .prod-price {
  color:var(--green); background:var(--green-soft);
  border-color:rgba(22,163,74,0.2);
}
.prod-name    { font-size:0.85rem; font-weight:800; color:var(--text); margin-bottom:2px; }
.prod-name-hi { font-size:0.7rem; color:var(--muted); margin-bottom:6px; }
.prod-includes{ font-size:0.72rem; color:var(--text-dim); margin-bottom:6px; line-height:1.4; }
.prod-delivery{ font-size:0.68rem; color:var(--muted); font-weight:700; }

/* ── Paywall Banner ──────────────────────────────────────────── */
.paywall-banner {
  display:none;
  background:linear-gradient(145deg, #fffbf0, #fef3c7);
  border:2px solid rgba(248,196,60,0.5);
  border-radius:24px; padding:24px 20px;
  text-align:center; margin-top:8px;
  box-shadow:0 4px 32px rgba(200,134,10,0.15);
  position:relative; overflow:hidden;
}
.paywall-banner::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), #f5c842, var(--orange), var(--gold));
  background-size:200% 100%;
  animation:shimmer-bar 2s linear infinite;
}
.paywall-banner.show { display:block; animation:msgIn 0.35s ease-out; }
.pw-emoji { font-size:2.5rem; display:block; margin-bottom:8px; }
.paywall-banner h4 {
  font-family:'Cinzel',serif; font-size:1.05rem; color:var(--gold);
  margin-bottom:6px;
}
.pw-hi { font-size:0.78rem; color:var(--muted); margin-bottom:10px; }
.paywall-banner > p {
  font-size:0.85rem; color:var(--text-dim); margin-bottom:16px; line-height:1.6;
}
.pw-options { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.btn-unlock {
  background:linear-gradient(135deg, #c8860a, #d97706);
  color:white; border:none; padding:14px 20px; border-radius:14px;
  font-size:0.9rem; font-weight:800; font-family:'Nunito',sans-serif;
  cursor:pointer; transition:all 0.2s;
  box-shadow:0 4px 16px rgba(200,134,10,0.3);
}
.btn-unlock:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(200,134,10,0.4); }
.btn-talk {
  background:var(--surface); border:1.5px solid var(--border);
  color:var(--text-dim); padding:11px 20px; border-radius:14px;
  font-size:0.82rem; font-weight:700; font-family:'Nunito',sans-serif;
  cursor:pointer; transition:all 0.2s;
}
.pw-from {
  font-size:0.7rem; color:var(--muted); font-weight:600;
}

/* ── Input Area ─────────────────────────────────────────────── */
.input-area {
  position:sticky; bottom:0;
  background:rgba(253,248,240,0.97);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:10px 14px calc(10px + var(--safe-bottom));
  z-index:90;
  box-shadow:0 -2px 16px rgba(100,60,10,0.08);
}
.input-row {
  max-width:900px; margin:auto;
  display:flex; gap:8px; align-items:flex-end;
}
.input-wrap { flex:1; }
#msgInput {
  width:100%; min-height:48px; max-height:120px;
  background:var(--surface);
  border:1.5px solid var(--border); border-radius:16px;
  color:var(--text); font-size:0.88rem; font-family:'Nunito',sans-serif;
  padding:12px 16px; resize:none; outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
}
#msgInput::placeholder { color:var(--muted); }
#msgInput:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,134,10,0.12);
}
.send-btn {
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,#c8860a,#d97706);
  border:none; color:white; font-size:1.1rem;
  cursor:pointer; transition:all 0.2s;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(200,134,10,0.3);
}
.send-btn:hover { transform:scale(1.05); box-shadow:0 4px 16px rgba(200,134,10,0.4); }
.send-btn:disabled { opacity:0.5; transform:none; cursor:not-allowed; }

/* ── Sticky Unlock Float ────────────────────────────────────── */
.sticky-unlock {
  position:fixed; bottom:80px; right:16px; z-index:200;
  opacity:0; pointer-events:none;
  transform:translateY(16px);
  transition:all 0.35s ease-out;
}
.sticky-unlock.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.sticky-close {
  position:absolute; top:-8px; right:-8px;
  background:var(--text-dim); color:white;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; cursor:pointer; z-index:1;
}
.sticky-unlock-btn {
  background:linear-gradient(135deg,#c8860a,#d97706);
  color:white; border:none; padding:12px 20px; border-radius:50px;
  font-size:0.82rem; font-weight:800; font-family:'Nunito',sans-serif;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 20px rgba(200,134,10,0.45);
  animation:sticky-bounce 2.5s ease-in-out infinite;
}
@keyframes sticky-bounce {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-4px); }
}

/* ── Toast ───────────────────────────────────────────────────── */
#toast {
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(10px);
  background:rgba(28,20,16,0.9); color:white;
  padding:10px 22px; border-radius:20px; font-size:0.82rem; font-weight:600;
  opacity:0; transition:all 0.3s; z-index:500; white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Modals ──────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(28,20,16,0.7);
  backdrop-filter:blur(8px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal-overlay.open .modal-box {
  transform:translateY(0);
}
.modal-box {
  background:var(--surface);
  border-radius:28px 28px 0 0;
  padding:0 0 calc(20px + var(--safe-bottom));
  width:100%; max-width:520px;
  max-height:92vh; overflow-y:auto;
  transform:translateY(40px); transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 -8px 40px rgba(100,60,10,0.15);
}
.modal-box::-webkit-scrollbar { width:4px; }
.modal-box::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.modal-header {
  position:sticky; top:0; background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:18px 20px 14px;
  display:flex; align-items:flex-start; justify-content:space-between;
  z-index:1; border-radius:28px 28px 0 0;
}
.modal-header h3 {
  font-family:'Cinzel',serif; font-size:1rem; color:var(--text);
}
.modal-sub { font-size:0.72rem; color:var(--muted); margin-top:3px; }
.close-btn {
  background:rgba(100,60,10,0.1); border:none; color:var(--text-dim);
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:0.9rem;
  transition:all 0.2s; flex-shrink:0;
}
.close-btn:hover { background:rgba(100,60,10,0.2); }
.modal-body { padding:16px 20px; }

/* Form */
.form-group { margin-bottom:14px; }
.form-group label {
  display:block; font-size:0.78rem; font-weight:700;
  color:var(--text-dim); margin-bottom:6px;
}
.form-group input {
  width:100%; background:var(--bg2);
  border:1.5px solid var(--border); border-radius:12px;
  color:var(--text); font-size:0.88rem; font-family:'Nunito',sans-serif;
  padding:12px 14px; outline:none; transition:border-color 0.2s;
}
.form-group input:focus { border-color:var(--gold); }
.form-group input::placeholder { color:var(--muted); }
.form-group input[type="date"],
.form-group input[type="time"] { color-scheme:light; }
.form-err {
  font-size:0.72rem; color:var(--red); margin-top:4px;
  display:none;
}
.form-err.show { display:block; }

/* Report Options */
.report-options {
  display:flex; flex-direction:column; gap:6px;
  max-height:200px; overflow-y:auto;
  scrollbar-width:thin;
}
.report-options::-webkit-scrollbar { width:4px; }
.report-options::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.report-opt { cursor:pointer; }
.report-opt input { display:none; }
.report-opt-label {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:12px;
  border:1.5px solid var(--border);
  transition:all 0.18s; background:var(--bg2);
  cursor:pointer;
}
.report-opt input:checked + .report-opt-label {
  border-color:var(--gold); background:var(--gold-bg);
}
.r-emoji { font-size:1.1rem; flex-shrink:0; }
.r-name  { font-size:0.8rem; font-weight:700; color:var(--text); flex:1; }
.r-name-hi { font-size:0.7rem; color:var(--muted); }
.r-price { font-size:0.75rem; font-weight:800; color:var(--gold); flex-shrink:0; }

/* Language grid */
.lang-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.lang-opt { cursor:pointer; }
.lang-opt input { display:none; }
.lang-opt-label {
  display:block; text-align:center;
  padding:8px 6px; border-radius:10px;
  border:1.5px solid var(--border);
  font-size:0.75rem; font-weight:700; color:var(--text-dim);
  transition:all 0.18s; background:var(--bg2); cursor:pointer;
}
.lang-opt input:checked + .lang-opt-label {
  border-color:var(--gold); background:var(--gold-bg); color:var(--gold);
}

/* Pay button */
.pay-btn {
  width:100%; padding:15px; border-radius:14px; border:none;
  background:linear-gradient(135deg,#c8860a,#d97706);
  color:white; font-size:0.95rem; font-weight:800;
  font-family:'Nunito',sans-serif;
  cursor:pointer; transition:all 0.2s; margin-top:6px;
  box-shadow:0 4px 20px rgba(200,134,10,0.3);
  position:relative; overflow:hidden;
}
.pay-btn::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  transform:translateX(-100%);
  animation:pay-shimmer 2.5s ease infinite;
}
@keyframes pay-shimmer {
  0%   { transform:translateX(-100%); }
  60%,100% { transform:translateX(100%); }
}
.pay-btn:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(200,134,10,0.4); }
.pay-btn:disabled { opacity:0.6; transform:none; animation:none; cursor:not-allowed; }
.pay-btn-sub {
  font-size:0.68rem; color:var(--muted); text-align:center;
  margin-top:8px; line-height:1.5;
}
.trust-row {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; justify-content:center;
}
.trust-badge {
  background:var(--green-soft); border:1px solid rgba(22,163,74,0.2);
  color:var(--green); padding:4px 10px; border-radius:10px;
  font-size:0.65rem; font-weight:700;
}

/* Spinner */
.spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,0.3); border-top-color:white;
  border-radius:50%; animation:spin 0.7s linear infinite;
  vertical-align:middle; margin-right:6px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Talk info box */
.talk-info-box {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; padding:12px 14px; margin-bottom:14px;
}
.talk-info-row {
  display:flex; gap:8px; align-items:flex-start;
  font-size:0.78rem; color:var(--text-dim); padding:4px 0;
}
.talk-info-row > span:first-child { font-size:1rem; }

/* ── Media queries ───────────────────────────────────────────── */
@media (max-width:768px) {
  .products-grid { grid-template-columns:1fr 1fr; }
  .trend-chip { min-width:150px; }
  .msg-bubble { max-width:88%; }
}
@media (max-width:480px) {
  .products-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .product-card { padding:10px; }
  .prod-emoji { font-size:1.6rem; }
  .modal-box { max-height:95vh; }
}
/*--------------------------------------------*/
/* ═══════════════════════════════════════════════════════════
   APPEND THIS TO THE BOTTOM OF YOUR EXISTING style.css
   These are additive — they don't break existing styles.
   ═══════════════════════════════════════════════════════════ */

/* ── WhatsApp Trust Bar (replaces fake ticker) ──────────── */
.whatsapp-trust-bar {
  background: #075e54;          /* WhatsApp dark green */
  color: #fff;
  padding: 9px 16px;
  font-size: 0.82rem;
  position: sticky;
  top: 0;
  z-index: 90;
}
.wtb-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wtb-left {
  opacity: 0.95;
}
.wtb-btn {
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Nunito', sans-serif;
  transition: background 0.2s;
}
.wtb-btn:hover { background: #1ebe5d; }

/* ── Email Capture Banner ─────────────────────────────── */
.email-capture-banner {
  margin: 16px 12px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border: 1px solid rgba(139,92,246,0.4);
  border-radius: 20px;
  padding: 20px 18px;
  text-align: center;
  animation: slideUp 0.4s ease;
}
.email-capture-banner h4 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #fbbf24;
  margin-bottom: 4px;
}
.email-capture-banner .pw-hi {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}
.email-capture-banner p {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 14px;
  line-height: 1.5;
}
.email-capture-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.email-capture-row input[type="email"] {
  flex: 1;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(139,92,246,0.5);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.9rem;
  font-family: 'Nunito', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.email-capture-row input[type="email"]:focus {
  border-color: #8b5cf6;
}
.email-capture-row input[type="email"]::placeholder {
  color: rgba(255,255,255,0.4);
}
.btn-email-submit {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.btn-email-submit:hover { opacity: 0.9; }
.email-capture-err {
  color: #fca5a5;
  font-size: 0.75rem;
  margin-bottom: 8px;
  display: none;
}
.btn-skip-email {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  padding: 4px 0;
  text-decoration: underline;
  transition: color 0.2s;
}
.btn-skip-email:hover { color: rgba(255,255,255,0.7); }

/* ── Show All Reports Toggle Button ──────────────────── */
.show-all-reports-btn {
  width: 100%;
  margin-top: 8px;
  padding: 9px 14px;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}
.show-all-reports-btn:hover {
  background: var(--bg2);
  color: var(--text);
}

/* ── Remove old social-proof-bar if still present ────── */
.social-proof-bar { display: none !important; }

/* ── Paywall WhatsApp link area ───────────────────────── */
.paywall-banner a[href*="wa.me"] {
  transition: background 0.2s, color 0.2s;
}
.paywall-banner a[href*="wa.me"]:hover {
  background: rgba(37,211,102,0.1) !important;
  color: #25d366 !important;
  border-color: rgba(37,211,102,0.4) !important;
}
/* ══════════════════════════════════════════════════════════════
::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Mobile Optimizations ───────────────────── */
@media (max-width: 768px) {

  .header {
    padding: 10px 12px;
  }

  .chat-area {
    padding: 14px 10px 100px;
  }

  .products-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .msg-bubble {
    max-width: 90%;
    font-size: 0.88rem;
  }

  .email-capture-row {
    flex-direction: column;
  }

  .wtb-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {

  .products-grid {
    grid-template-columns: 1fr;
  }

  .welcome-card {
    padding: 24px 16px;
  }

  .product-card {
    border-radius: 18px;
  }

  .modal-box {
    max-height: 96vh;
  }

  .sticky-unlock {
    right: 10px;
    left: 10px;
    bottom: 84px;
  }

  .sticky-unlock-btn {
    width: 100%;
  }
}

/* ── Reduced Motion Accessibility ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}