:root{
  /* Light theme */
  --bg:#f6f8fb;          /* page background */
  --card:#ffffff;        /* card/panel background */
  --muted:#475569;       /* secondary text */
  --text:#0f172a;        /* main text */

  /* ✅ Brand accents (HIGH-CONVERTING): Navy + Gold */
  --accent:#0f2a4a;      /* deep navy */
  --accent2:#d4af37;     /* warm gold */

  /* Status */
  --danger:#ef4444;

  /* Soft UI */
  --shadow: 0 14px 34px rgba(15,23,42,.12);
  --radius: 18px;

  /* ✅ Glow colors for background (LIGHT BEIGE GRADIENT) */
  --glow1: rgba(232, 213, 179, .22);  /* warm beige glow */
  --glow2: rgba(214, 190, 150, .18);  /* deeper beige glow */

  /* Borders */
  --border: rgba(15,23,42,.10);
  --border2: rgba(15,23,42,.14);

  /* ✅ Responsive typography (mobile-first) */
  --fs-badge: clamp(13px, 3.5vw, 15px);
  --fs-kicker: clamp(13px, 3.5vw, 15px);
  --fs-h1: clamp(30px, 7.2vw, 42px);
  --fs-sub: clamp(18px, 4.2vw, 24px);
  --fs-point: clamp(16px, 3.9vw, 19px);
  --fs-h3: clamp(20px, 4.6vw, 24px);
  --fs-p: clamp(15px, 4.1vw, 20px);
  --fs-label: clamp(14px, 3.6vw, 16px);
  --fs-input: clamp(16px, 4.2vw, 18px); /* min 16px prevents iOS zoom */
  --fs-btn: clamp(18px, 4.6vw, 22px);
  --fs-small: clamp(13px, 3.4vw, 15px);
  --fs-footer: clamp(13px, 3.4vw, 15px);
}

*{box-sizing:border-box}

/* Page background + text */
html,body{
  scroll-behavior:smooth;
  -webkit-text-size-adjust: 100%;
  margin:0;
  padding:0;
  font-family: 'Libre Baskerville', serif;
  background:
    radial-gradient(1100px 600px at 10% 0%, var(--glow1), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, var(--glow2), transparent 55%),
    var(--bg);
  color:var(--text);
}

a{color:inherit}

/* -------------------- WhatsApp floating button -------------------- */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.25);
  -webkit-tap-highlight-color: transparent;
}
.wa-float:hover{transform:translateY(-1px)}
.wa-float:active{transform:translateY(0)}
.wa-ico{width:29px;height:29px;display:inline-flex}
.wa-ico svg{width:29px;height:29px;fill:#fff;display:block}
.wa-text{font-weight:800;font-size:16px;letter-spacing:.2px}

@media (max-width:480px){
  .wa-float{right:14px;bottom:14px;padding:14px 16px;}
  .wa-text{font-size:15px;}
}

.container{max-width:1100px;margin:0 auto;padding:12px}
.page-pad{padding:0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo{
  width:40px;
  height:40px;
  border-radius:12px;
  background:transparent;
  box-shadow: var(--shadow);
  display:block;
  object-fit:contain;
}
.brand span{font-weight:800;letter-spacing:.2px}

/* Badge: light theme variant */
.badge{
  font-size:var(--fs-badge);
  color:#ffffff;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

.hero{display:grid;grid-template-columns: 1.2fr .8fr;gap:22px;align-items:stretch;margin-top:8px}
@media (max-width:900px){.hero{grid-template-columns:1fr}}

/* Panels/cards now truly light */
.panel{
  background:rgba(255,255,255,.85);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(8px);
}

.hero-copy{padding:28px}

.hero-media{
  margin: 14px 0 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}
.hero-media img{
  width: 100%;
  height: auto;
  display: block;
}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--muted);
  font-weight:800;font-size:var(--fs-kicker);letter-spacing:.2px
}
.kicker i{width:8px;height:8px;border-radius:999px;background:var(--accent2);display:inline-block}

h1{margin:12px 0 12px;font-size:var(--fs-h1);line-height:1.06}
@media (max-width:900px){h1{font-size:34px}}
.sub{color:var(--muted);font-size:var(--fs-sub);line-height:1.75;margin:0 0 18px}

.points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.point > div:last-child{
  flex: 1;
  text-align: right;
}
@media (max-width:650px){.points{grid-template-columns:1fr}}
.point{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:var(--fs-point);line-height:1.35}

/* Tick box matches light theme */
.tick{
  width:22px;height:22px;border-radius:8px;
  background:rgba(212,175,55,.16);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(212,175,55,.30);
}
.tick svg{width:14px;height:14px;fill:var(--accent2)}

/* Form wrapper: subtle surface */
.form-wrap{
  padding:16px;
  background:linear-gradient(180deg, rgba(15,23,42,.035), rgba(15,23,42,.02));
}
/* Reviews */
.reviews{margin-top:16px}
.reviews-title{margin:0 0 6px}
.reviews-sub{margin:0 0 14px;color:var(--muted);line-height:1.7;font-size:15px}

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

.review{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.75);
}

.review-avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid var(--border2);
  flex:0 0 auto;
}

.review-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.review-name{font-weight:900}
.review-stars{color:var(--accent2);letter-spacing:1px;font-size:14px}
.review-text{color:var(--muted);line-height:1.7;font-size:15px}

html[dir="rtl"] .review{flex-direction:row-reverse}
html[dir="rtl"] .review-head{flex-direction:row-reverse}

/* Order form background override (light) */
.order-form{
  background: linear-gradient(
    180deg,
    #fff7dc 0%,
    #fff4c5 100%
  );
}

/* Benefit explanation block */
.benefit-explain{margin:22px 0}
.benefit-list{margin:10px 0 0;padding-inline-start:18px;color:var(--muted);line-height:1.75;font-size:15px}
.benefit-list li{margin:6px 0}

/* Prostate education card (between forms) */
.prostate-card{margin:16px 0}
.prostate-grid{display:flex;gap:16px;align-items:center}
.prostate-media{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.prostate-ill{width:150px;max-width:42vw;height:auto;display:block}
.prostate-text h3{margin:0 0 8px}
.prostate-text p{margin:0;color:var(--muted);line-height:1.75;font-size:15px}
.prostate-list{margin-top:10px}
@media (max-width:900px){.prostate-grid{flex-direction:column;align-items:flex-start}.prostate-ill{width:160px}}
html[dir="rtl"] .prostate-grid{flex-direction:row-reverse}
@media (max-width:900px){html[dir="rtl"] .prostate-grid{flex-direction:column}}

.form-title{
  font-weight:900;
  font-size:34px;
  margin:0 0 8px;
  color:#075b90;
  text-align:center;
}
.form-note{color:var(--muted);font-size:13px;margin:0 0 14px;line-height:1.35}
.right-note{font-size: 17px;}

.grid{display:grid;grid-template-columns:1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:var(--fs-label);color:var(--muted);font-weight:800}

/* Inputs: light + clean */
input, select{
  background:rgba(255,255,255,.92);
  border:1px solid var(--border2);
  color:var(--text);
  padding:12px 12px;
  border-radius:14px;
  outline:none;
  font-size:var(--fs-input);
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

input:focus, select:focus{
  border-color: rgba(15,42,74,.45);
  box-shadow: 0 0 0 4px rgba(15,42,74,.12);
}

/* Placeholder color (helps “light” look) */
input::placeholder{
  color: rgba(71,85,105,.55);
  font-size: 14px;
  font-weight: 400;
}
select{color:var(--text)}

.err{display:none;color:var(--danger);font-size:12px;font-weight:800}

/* CTA button: soft Navy→Gold (same structure, just new colors) */
.btn{
  cursor:pointer;
  border:none;
  width:100%;
  padding:9px 14px;
  border-radius:14px;
  font-weight:950;
  letter-spacing:.2px;

  background:#075b90;

  color:#ffffff;
  font-size:var(--fs-btn);
  box-shadow: 0 8px 20px rgba(7,91,144,.35);
}
.btn:active{transform:translateY(1px)}

.small{font-size:var(--fs-small);color:var(--muted);margin:10px 0 0;line-height:1.35}

.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.card{padding:18px}
.card h3{margin:0 0 8px;font-size:21px}
.card p{margin:0;color:var(--muted);line-height:1.75;font-size:17px}

/* ✅ Green check on the LEFT of the card title (works with RTL) */
.card-check h3{
  display:flex;
  align-items:center;
  gap:10px;
}
.card-check h3::after{
  content:"✓";
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#00C853;
  color:#fff;
  font-size:14px;
  font-weight:900;
  flex:0 0 22px;
}

.footer{
  margin:26px 0 10px;
  color:var(--muted);
  font-size:var(--fs-footer);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between
}
.footer a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

.hr{height:1px;background:rgba(15,23,42,.10);margin:18px 0}
.center{display:flex;align-items:center;justify-content:center;text-align:center}

.ty{padding:40px 18px}
.ty h2{font-size:30px;margin:0 0 10px}
.ty p{margin:0;color:var(--muted);line-height:1.6}
.ty .box{
  margin-top:18px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  max-width:560px;
  width:100%;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.kv{display:grid;grid-template-columns:140px 1fr;gap:10px; text-align:left}
.kv div{padding:8px 0;border-bottom:1px solid rgba(15,23,42,.10)}
.kv div:nth-last-child(-n+2){border-bottom:none}
.kv .k{color:var(--muted);font-weight:900}
.kv .v{font-weight:900}

/* ---------- RTL helpers ---------- */
.nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.product-area{display:flex;align-items:center;justify-content:center;padding:8px 4px 2px}
.bottle{
  width:min(260px, 100%);
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 36px rgba(15,23,42,.18));
}

/* RTL adjustments without changing the overall theme */
html[dir="rtl"] body{letter-spacing:0}
html[dir="rtl"] .brand{flex-direction:row-reverse}
html[dir="rtl"] .kicker{flex-direction:row-reverse}
html[dir="rtl"] .point{flex-direction:row-reverse}
html[dir="rtl"] .tick{flex:0 0 auto}
html[dir="rtl"] .kv{direction:rtl;text-align:right;grid-template-columns:1fr 140px}
html[dir="rtl"] .footer{flex-direction:row-reverse}

/* -------------------- Stacked images (homepage) -------------------- */
.stacked-images{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:12px 0 14px;
}
.stacked-images img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}

/* Mobile: images flush (no gaps), full-bleed, start from top */
@media (max-width:700px){
  .container{max-width:none;padding:0}
  .page-pad{padding:10px}

  .stacked-images{
    gap:0;
    margin:0;
  }
  .stacked-images img{
    width:100vw;
    max-width:100%;
    border-radius:0;
    border:none;
    box-shadow:none;
  }
}
.pack-radios{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pack-option{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  background:transparent;   /* remove white */
  border:none;              /* remove border */
  padding:3px 0;            /* minimal spacing */
}

.pack-option input{
  accent-color:#075b90;     /* your blue */
  width:16px;
  height:16px;
}

.pack-option span{
  font-size:var(--fs-label);
}
.pack-option{
  font-weight:500;   /* normal weight */
}
.field > label{
  display:block;
  margin-bottom:2px;
}
#orderFormTop .field:nth-of-type(3),
#orderFormBottom .field:nth-of-type(3){
  margin-top:14px;
}
#nameTop,
#phoneTop,
#nameBottom,
#phoneBottom{
  padding:10px 12px;   /* reduced from 12px */
}
.order-form .btn{
  margin-top:16px;
}
#orderFormTop .field:nth-of-type(2),
#orderFormBottom .field:nth-of-type(2){
  margin-top:6px;
}