/* ─────────────────────────────────────────────────────────────────────────
   GNLAB — Light theme
   Load AFTER styles.css on any page to switch from dark navy/gold → white/teal.
   All other styling comes from styles.css; this file only overrides variables
   and fixes the handful of hardcoded colour values that bypass CSS variables.
───────────────────────────────────────────────────────────────────────── */

:root {
  --bg:          #ffffff;
  --bg-card:     #f7f9f8;
  --bg-alt:      #f0f4f3;
  --bg-light:    #e8efed;

  --gold:        #6b9b91;
  --gold-light:  #7fb3a8;
  --gold-dim:    #4a7a70;

  /* In the dark theme --white is used as the primary text colour on dark bg.
     On a white background it becomes the dark text colour instead. */
  --white:       #1a2e2b;
  --text:        #2d4845;
  --text-muted:  #557470;
  --text-dim:    #85aaa5;

  --border:      #ccdeda;
  --border-gold: rgba(107,155,145,0.3);
  --shadow:      0 4px 24px rgba(0,0,0,0.08);
  --shadow-gold: 0 0 30px rgba(107,155,145,0.15);
}

/* ── Button + badge text must stay white on teal background ──
   styles.css hardcodes color:#080c14 on .btn-primary, so !important needed */
.btn-primary        { color: #ffffff !important; }
.pricing-badge      { color: #ffffff; }
.step-dot.done      { color: #ffffff; }

/* ── Logo image sizing (used on all pages) ───────────────── */
.nav-logo-img    { height: 44px; width: auto; display: block; }
.footer-logo-img { height: 90px; width: 90px; display: block; margin-bottom: 14px; border-radius: 50%; }
@media (max-width: 768px) {
  .nav-logo-img  { height: 36px !important; width: auto !important; }
}

/* ── Nav ───────────────────────────────────────────────────── */
.nav.scrolled {
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid var(--border);
}
.nav-links.open { background: #ffffff; }
.hamburger span { background: var(--white); }

/* ── Pricing cards: push buttons to same row height ─────── */
/* Cards sit in a CSS grid (equal height), but the feature list
   has different item counts. flex column + flex:1 on features
   pushes both buttons to the same vertical position.          */
.pricing-card   { display: flex; flex-direction: column; }
.pricing-features { flex: 1; }

/* ── Checkout: plan-option selected state (hardcoded rgba) ── */
.plan-option.selected {
  background: rgba(107,155,145,0.06);
}

/* ── Steps 01–06 numbers ─────────────────────────────────── */
/* styles.css uses rgba(201,168,76,0.15) — near-invisible on white.
   Override to teal at a readable opacity.                     */
.step-num { color: rgba(107,155,145,0.55) !important; }

/* ── Questionnaire: form inputs & file drop area ─────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
input::placeholder,
textarea::placeholder { color: var(--text-dim); }

.file-drop {
  background: var(--bg-card);
  border-color: var(--border);
}

/* ── Order status timeline ───────────────────────────────── */
.status-page,
.status-header   { background: var(--bg); }
.status-card     { background: var(--bg-card); border-color: var(--border); }

/* ── Privacy / Terms page scaffolds ─────────────────────── */
.legal-page      { background: var(--bg); color: var(--text); }
.legal-card      { background: var(--bg-card); border-color: var(--border); }

/* ── Success page ────────────────────────────────────────── */
.success-page    { background: var(--bg); }
.success-card    { background: var(--bg-card); border-color: var(--border); }

/* ── 404 page ────────────────────────────────────────────── */
.nf-page         { background: var(--bg); }

/* ── Flatpickr calendar — light theme ───────────────────── */
/* The calendar renders outside the page flow; force white bg so
   var(--white) text (now dark teal) is readable against it.   */
.flatpickr-calendar {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}
.flatpickr-months,
.flatpickr-months .flatpickr-month {
  background: var(--bg-alt) !important;
}
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: var(--bg-alt) !important;
}
.flatpickr-innerContainer { background: #ffffff !important; }