/* TVS Waitlist — Landing Page
 * Light-background design matching thevitaminshots.com
 * Color palette: #FAFAF7 (warm white bg), #F1C349 (gold), #1A1A18 (near-black), #5C5B55 (mid), #E8E4D9 (line)
 * Typography: DM Serif Display (headings), Inter (body)
 * Enqueued via wp_enqueue_style — never output as inline <style>
 */

/* ── Tokens ───────────────────────────────────────────────────────────── */
.tvswl-page {
  --tvswl-brand: #F1C349;
  --tvswl-dark:  #1A1A18;
  --tvswl-mid:   #5C5B55;
  --tvswl-pale:  #FAFAF7;
  --tvswl-line:  #E8E4D9;
  --tvswl-white: #ffffff;
  --tvswl-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --tvswl-sans:  'Inter', system-ui, -apple-system, sans-serif;
  font-family: var(--tvswl-sans);
  color: var(--tvswl-dark);
  background: var(--tvswl-pale);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.tvswl-page * { box-sizing: border-box !important; }
.tvswl-page img { display: block !important; max-width: 100% !important; }

/* ── Hero — light background ──────────────────────────────────────────── */
.tvswl-hero {
  background: var(--tvswl-pale) !important;
  min-height: 88vh !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-bottom: 1px solid var(--tvswl-line) !important;
}

/* Subtle gold radial glow at bottom — adds warmth without going dark */
.tvswl-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 70% 55% at 50% 105%, rgba(241,195,73,.10) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.tvswl-hero-body {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: 280px 1fr 280px !important;
  align-items: end !important;
  position: relative !important;
  z-index: 1 !important;
  padding-top: 64px !important;
}

.tvswl-product {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  height: 100% !important;
}
.tvswl-product img {
  width: 100% !important;
  max-width: 260px !important;
  filter: drop-shadow(0 24px 48px rgba(26,26,24,.12)) !important;
  transition: transform .5s ease !important;
}
.tvswl-product img:hover { transform: translateY(-10px) !important; }

/* Hero center content */
.tvswl-center {
  text-align: center !important;
  padding: 0 32px 72px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.tvswl-badge {
  display: inline-block !important;
  border: 1.5px solid var(--tvswl-brand) !important;
  color: var(--tvswl-dark) !important;
  background: transparent !important;
  font-family: var(--tvswl-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 6px 20px !important;
  margin-bottom: 28px !important;
}

.tvswl-headline {
  font-family: var(--tvswl-serif) !important;
  font-size: clamp(38px, 5.5vw, 68px) !important;
  line-height: 1.06 !important;
  color: var(--tvswl-dark) !important;
  margin: 0 0 22px !important;
  font-weight: 400 !important;
}
.tvswl-headline em {
  font-style: italic !important;
  color: var(--tvswl-brand) !important;
}

.tvswl-sub {
  font-size: clamp(15px, 1.7vw, 17px) !important;
  color: var(--tvswl-mid) !important;
  max-width: 400px !important;
  margin: 0 auto 36px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
}

/* Spot counter */
.tvswl-counter {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 32px !important;
}
.tvswl-bar {
  width: 200px !important;
  height: 3px !important;
  background: var(--tvswl-line) !important;
  position: relative !important;
  overflow: hidden !important;
}
.tvswl-bar span {
  position: absolute !important;
  left: 0 !important; top: 0 !important; height: 100% !important;
  background: var(--tvswl-brand) !important;
  width: 0 !important;
  transition: width 1.2s cubic-bezier(.4,0,.2,1) !important;
  display: block !important;
}
.tvswl-counter-text {
  font-size: 13px !important;
  color: var(--tvswl-mid) !important;
}
.tvswl-counter-text strong {
  color: var(--tvswl-dark) !important;
  font-weight: 700 !important;
}

/* CTA button */
.tvswl-btn {
  display: inline-block !important;
  background: var(--tvswl-brand) !important;
  color: var(--tvswl-dark) !important;
  font-family: var(--tvswl-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 17px 48px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  letter-spacing: .03em !important;
  transition: filter .15s, transform .15s !important;
}
.tvswl-btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-2px) !important;
  color: var(--tvswl-dark) !important;
  background: var(--tvswl-brand) !important;
  text-decoration: none !important;
}

/* ── Offer strip — gold on white ──────────────────────────────────────── */
.tvswl-offer {
  background: var(--tvswl-brand) !important;
}
.tvswl-offer-inner {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}
.tvswl-offer-item {
  padding: 26px 32px !important;
  border-right: 1px solid rgba(26,26,24,.12) !important;
}
.tvswl-offer-item:last-child { border-right: none !important; }
.tvswl-offer-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(26,26,24,.5) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin: 0 0 5px !important;
}
.tvswl-offer-value {
  font-family: var(--tvswl-serif) !important;
  font-size: 21px !important;
  color: var(--tvswl-dark) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.tvswl-offer-value small {
  font-size: 14px !important;
  font-family: var(--tvswl-sans) !important;
  font-weight: 400 !important;
}
.tvswl-offer-link {
  display: inline-block !important;
  margin-top: 10px !important;
  color: var(--tvswl-dark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(26,26,24,.4) !important;
  padding-bottom: 1px !important;
}
.tvswl-offer-link:hover { color: var(--tvswl-dark) !important; opacity: .7 !important; }

/* ── Body section — light, spacious ──────────────────────────────────── */
.tvswl-body {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 100px 40px !important;
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 80px !important;
  align-items: center !important;
}
.tvswl-body-text {}
.tvswl-section-lede {
  font-family: var(--tvswl-serif) !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  line-height: 1.15 !important;
  color: var(--tvswl-dark) !important;
  margin: 0 0 22px !important;
  font-weight: 400 !important;
}
.tvswl-section-body {
  font-size: 15px !important;
  color: var(--tvswl-mid) !important;
  line-height: 1.8 !important;
  max-width: 520px !important;
  margin: 0 0 22px !important;
}
.tvswl-benefits {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
}
.tvswl-benefits li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 13px !important;
  font-size: 15px !important;
  color: var(--tvswl-dark) !important;
  line-height: 1.55 !important;
}
.tvswl-benefits li::before {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  background: var(--tvswl-brand) !important;
  display: block !important;
  margin-top: 3px !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 0, 82% 0, 46% 75%) !important;
}

/* Body visual */
.tvswl-body-visual {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  gap: 16px !important;
}
.tvswl-body-visual::before {
  content: '' !important;
  position: absolute !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  background: rgba(241,195,73,.08) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.tvswl-body-visual img {
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 16px 32px rgba(26,26,24,.10)) !important;
}
.tvswl-bv-shots { width: 130px !important; }
.tvswl-bv-glam  { width: 170px !important; }

/* Divider */
.tvswl-divider {
  height: 1px !important;
  background: var(--tvswl-line) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* ── Form visuals (images shown above form) ───────────────────────────── */
.tvswl-form-visuals {
  display: flex !important;
  gap: 14px !important;
  margin: 0 0 28px !important;
}
.tvswl-fv {
  flex: 1 !important;
  margin: 0 !important;
  text-align: center !important;
  background: var(--tvswl-white) !important;
  border: 1px solid var(--tvswl-line) !important;
  padding: 14px 10px !important;
}
.tvswl-fv img {
  width: 100% !important;
  max-width: 100px !important;
  height: auto !important;
  margin: 0 auto 10px !important;
  display: block !important;
}
.tvswl-fv figcaption {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tvswl-dark) !important;
  line-height: 1.4 !important;
}
.tvswl-fv figcaption span {
  font-weight: 400 !important;
  color: var(--tvswl-mid) !important;
  font-size: 11px !important;
  display: block !important;
}

/* ── Form section — light background ─────────────────────────────────── */
.tvswl-form-section {
  background: var(--tvswl-white) !important;
  padding: 96px 40px !important;
  border-top: 1px solid var(--tvswl-line) !important;
  border-bottom: 1px solid var(--tvswl-line) !important;
  position: relative !important;
}
.tvswl-form-wrap {
  max-width: 560px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}
.tvswl-form-kicker {
  font-size: 12px !important;
  color: var(--tvswl-brand) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
  display: block !important;
}
.tvswl-form-heading {
  font-family: var(--tvswl-serif) !important;
  font-size: clamp(28px, 4vw, 46px) !important;
  color: var(--tvswl-dark) !important;
  line-height: 1.08 !important;
  margin: 0 0 14px !important;
  font-weight: 400 !important;
}
.tvswl-form-sub {
  font-size: 15px !important;
  color: var(--tvswl-mid) !important;
  line-height: 1.7 !important;
  margin: 0 0 36px !important;
  font-weight: 300 !important;
}
.tvswl-form { display: flex !important; flex-direction: column !important; gap: 14px !important; }

.tvswl-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
.tvswl-field { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.tvswl-field label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--tvswl-mid) !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

/* Inputs — dark text on white/light background */
.tvswl-field input {
  background: var(--tvswl-pale) !important;
  border: 1.5px solid var(--tvswl-line) !important;
  color: var(--tvswl-dark) !important;
  font-family: var(--tvswl-sans) !important;
  font-size: 15px !important;
  padding: 13px 15px !important;
  outline: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  transition: border-color .15s, background .15s !important;
  -webkit-text-fill-color: var(--tvswl-dark) !important;
}
.tvswl-field input::placeholder {
  color: rgba(26,26,24,.35) !important;
  opacity: 1 !important;
}
.tvswl-field input:focus {
  border-color: var(--tvswl-brand) !important;
  background: #fffef8 !important;
  color: var(--tvswl-dark) !important;
  -webkit-text-fill-color: var(--tvswl-dark) !important;
}
/* Chrome autofill — light version */
.tvswl-field input:-webkit-autofill,
.tvswl-field input:-webkit-autofill:hover,
.tvswl-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tvswl-dark) !important;
  -webkit-box-shadow: 0 0 0 1000px #FAFAF7 inset !important;
  caret-color: var(--tvswl-dark) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

.tvswl-note {
  font-size: 11px !important;
  color: rgba(26,26,24,.4) !important;
  margin: 3px 0 0 !important;
}
.tvswl-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  cursor: pointer !important;
}
.tvswl-consent input {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  margin-top: 3px !important;
  accent-color: var(--tvswl-brand) !important;
  background: var(--tvswl-pale) !important;
  border: 1.5px solid var(--tvswl-line) !important;
}
.tvswl-consent span {
  font-size: 13px !important;
  color: var(--tvswl-mid) !important;
  line-height: 1.55 !important;
}

/* Submit button */
.tvswl-submit {
  width: 100% !important;
  padding: 18px !important;
  background: var(--tvswl-brand) !important;
  color: var(--tvswl-dark) !important;
  border: none !important;
  font-family: var(--tvswl-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  letter-spacing: .03em !important;
  transition: filter .15s, transform .15s !important;
}
.tvswl-submit:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  color: var(--tvswl-dark) !important;
  background: var(--tvswl-brand) !important;
}
.tvswl-submit:disabled { opacity: .5 !important; cursor: default !important; transform: none !important; }

/* Messages */
.tvswl-message { padding: 13px 15px !important; font-size: 14px !important; line-height: 1.5 !important; display: none !important; }
.tvswl-message.success {
  display: block !important;
  background: rgba(241,195,73,.12) !important;
  border: 1.5px solid rgba(241,195,73,.4) !important;
  color: var(--tvswl-dark) !important;
}
.tvswl-message.error {
  display: block !important;
  background: #fff5f5 !important;
  border: 1.5px solid #f5c6c6 !important;
  color: #8a0000 !important;
}

/* Guarantee row */
.tvswl-guarantee {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
.tvswl-lock {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 1.5px solid var(--tvswl-line) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  color: var(--tvswl-mid) !important;
}
.tvswl-guarantee span {
  font-size: 12px !important;
  color: var(--tvswl-mid) !important;
  line-height: 1.55 !important;
}

/* ── Celebration popup ────────────────────────────────────────────────── */
@keyframes tvswl-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── Hide admin-preview banners (email preference plugins) ───────────── */
.email-preferences-admin-preview,
.ep-admin-notice,
[class*="admin-preview"],
.wpe-admin-preview { display: none !important; }

/* ── Theme override: kill black hover colors everywhere on the page ───── */
.tvswl-page a { text-decoration: none !important; }
.tvswl-page a:hover { text-decoration: none !important; color: var(--tvswl-brand) !important; }
.tvswl-page a.tvswl-btn,
.tvswl-page a.tvswl-btn:hover,
.tvswl-page a.tvswl-btn:visited { color: var(--tvswl-dark) !important; background: var(--tvswl-brand) !important; }
.tvswl-page button { color: inherit !important; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .tvswl-hero-body { grid-template-columns: 160px 1fr 160px !important; }
  .tvswl-product img { max-width: 160px !important; }
}
@media (max-width: 700px) {
  .tvswl-hero-body { grid-template-columns: 1fr !important; align-items: center !important; padding-top: 40px !important; }
  .tvswl-product { display: none !important; }
  .tvswl-center { padding: 0 20px 56px !important; justify-content: center !important; }
  .tvswl-offer-inner { grid-template-columns: 1fr !important; }
  .tvswl-offer-item { border-right: none !important; border-bottom: 1px solid rgba(26,26,24,.12) !important; }
  .tvswl-offer-item:last-child { border-bottom: none !important; }
  .tvswl-body { grid-template-columns: 1fr !important; padding: 60px 24px !important; gap: 0 !important; }
  .tvswl-body-visual { display: none !important; }
  .tvswl-form-section { padding: 60px 24px !important; }
  .tvswl-row { grid-template-columns: 1fr !important; }
  .tvswl-form-visuals { flex-direction: column !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tvswl-page * { transition: none !important; animation: none !important; }
}
