/* ══════════════════════════════════════════
   GOLDEN VIERA — Auth Pages Shared CSS
   main.css
══════════════════════════════════════════ */

:root {
  --ivory:      #FBF9F5;
  --gold:       #FED488;
  --green:      #3A783A;
  --green-dark: #2c5c2c;
  --charcoal:   #1c1c1c;
  --input-bg:   #F0EEE9;
  --border:     #e8e3d8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Manrope', sans-serif;
  background: var(--ivory);
  color: var(--charcoal);
}

/* ── Typography ── */
.font-display { font-family: 'Noto Serif', serif; }

.gold-heading {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

/* ── Split Layout ── */
.split-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .split-layout { grid-template-columns: 1fr; }
  .panel-green  { display: none; }
}

/* ── Green Panel ── */
.panel-green {
  background: var(--green);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 64px;
}

.panel-green::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 280px; height: 280px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 10 C55 10 20 50 25 95 C30 140 60 175 100 175 C140 175 170 140 175 95 C180 50 145 10 100 10Z' fill='rgba(255,255,255,0.07)'/%3E%3Cpath d='M100 15 C65 45 55 75 60 110 C65 140 80 165 100 172' stroke='rgba(255,255,255,0.1)' stroke-width='3' fill='none'/%3E%3Cpath d='M100 15 C135 45 145 75 140 110 C135 140 120 165 100 172' stroke='rgba(255,255,255,0.07)' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat center / cover;
  pointer-events: none;
}

.panel-green .panel-inner { position: relative; z-index: 2; }

.panel-divider {
  width: 44px; height: 2px;
  background: rgba(254, 212, 136, 0.5);
  margin-bottom: 28px;
}

/* ── Ivory Form Panel ── */
.panel-ivory {
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 56px;
}

.panel-ivory .form-inner {
  max-width: 420px;
  width: 100%;
}

/* ── Inputs ── */
.gv-label {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--charcoal);
  display: block;
  margin-bottom: 6px;
}

.gv-input {
  width: 100%;
  background: var(--input-bg);
  border: none;
  outline: none;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: var(--charcoal);
  padding: 12px 16px;
  transition: box-shadow 0.2s;
}

.gv-input:focus { box-shadow: inset 0 0 0 1.5px var(--green); }
.gv-input::placeholder { color: #aaa9a0; }

.gv-field { margin-bottom: 20px; }

/* ── Input with toggle eye ── */
.input-wrap { position: relative; }
.input-wrap .eye-btn {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: #aaa; padding: 0; line-height: 0;
}
.input-wrap .eye-btn:hover { color: var(--green); }

/* ── Buttons ── */
.btn-primary {
  width: 100%; padding: 14px;
  background: var(--green); color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 11px; letter-spacing: 3px; font-weight: 600;
  border: none; cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 12px;
}
.btn-primary:hover { background: var(--green-dark); }

.btn-outline {
  width: 100%; padding: 14px;
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--charcoal);
  font-family: 'Manrope', sans-serif;
  font-size: 11px; letter-spacing: 3px; font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--gold); }

/* ── Checkbox ── */
.gv-checkbox {
  accent-color: var(--green);
  width: 14px; height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Benefit Cards (signup) ── */
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.benefit-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
}

.benefit-card svg {
  width: 28px; height: 28px;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}

.benefit-card h4 {
  font-family: 'Noto Serif', serif;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.benefit-card p {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
}

/* ── Reset Card ── */
.reset-card {
  background: #fff;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  padding: 56px 52px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 520px;
}

.reset-card::after {
  content: '';
  position: absolute; bottom: -40px; right: -30px;
  width: 160px; height: 160px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 10 C55 10 20 50 25 95 C30 140 60 175 100 175 C140 175 170 140 175 95 C180 50 145 10 100 10Z' fill='%23F0EEE9'/%3E%3C/svg%3E") no-repeat center / cover;
  pointer-events: none; opacity: 0.6;
}

/* ── CAPTCHA ── */
.captcha-box {
  background: var(--input-bg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
}

.captcha-label {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #aaa;
  display: block;
  margin-bottom: 4px;
}

.captcha-question {
  font-family: 'Noto Serif', serif;
  font-size: 16px;
  color: var(--charcoal);
  font-weight: 600;
}

.captcha-answer {
  width: 60px; text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  outline: none;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  padding: 8px;
  transition: border-color 0.2s;
}
.captcha-answer:focus { border-color: var(--green); }

:root {
  --ivory:  #FBF9F5;
  --gold:   #FED488;
  --green:  #3A783A;
  --green-dark: #2c5c2c;
  --charcoal: #1c1c1c;
}

* { box-sizing: border-box; }
body { font-family: 'Manrope', sans-serif; background-color: var(--ivory); color: var(--charcoal); }
.font-display { font-family: 'Noto Serif', serif; }

/* Nav active underline */
.nav-active {
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  color: var(--charcoal) !important;
}

/* Dots separator */
.dots::after {
  content: '· · · · · · · · · · · · ·';
  letter-spacing: 4px;
  color: var(--gold);
  font-size: 10px;
}

/* Category card hover */
.cat-card { transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.09); }

/* Product card hover */
.prod-card { transition: transform 0.25s ease; cursor: pointer; }
.prod-card:hover { transform: translateY(-4px); }
.prod-card:hover .prod-overlay { opacity: 1; }
.prod-overlay { opacity: 0; transition: opacity 0.3s ease; }

/* Quote section */
.quote-bg {
  background-color: var(--green);
  position: relative;
  overflow: hidden;
}
.quote-bg::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 60px solid rgba(255,255,255,0.05);
  top: -140px; left: -130px;
  pointer-events: none;
}
.quote-bg::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  border: 45px solid rgba(255,255,255,0.05);
  bottom: -110px; right: -90px;
  pointer-events: none;
}

/* Subscribe input */
.subscribe-input {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 12px 20px;
  outline: none;
  width: 280px;
}
.subscribe-input::placeholder { color: rgba(255,255,255,0.45); }

/* Chevrons */
.chevrons { font-size: 20px; color: var(--gold); letter-spacing: -4px; }

/* Underline accent for section titles */
.title-line {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gold);
  margin: 8px auto 0;
}