/* ----------------------------------------------------
   Shligal theme stylesheet — High contrast v2
   Fixes grey on black visibility in builder, summary,
   hero preview, labels, and small text.
   ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg: #0e1116;
  --bg-elev: #1a2230;     /* brighter than before for cards */
  --bg-elev-2: #121a26;
  --text: #f2f6fb;        /* main body text */
  --text-soft: #d9e2ec;   /* paragraphs */
  --muted: #b8c7d9;       /* secondary labels */
  --primary: #3d7eff;
  --accent: #8a5cff;
  --ring: 0 0 0 .35rem rgba(61,126,255,.35);
  --radius: 14px;
}

html, body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}

/* Typography */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5, h6{
  color: #fff;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

p{ color: var(--text-soft); line-height: 1.7; }
.small, small{ color: var(--muted) !important; }
.text-soft{ color: var(--text-soft) !important; }
.text-muted, .muted{ color: #cdd6e1 !important; } /* brighter than bootstrap */

/* Layout */
.section{ padding: 96px 0; }
.anchor{ scroll-margin-top: 80px; }
.divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); }

/* Navbar */
.navbar{ background: var(--bg-elev); border-bottom: 1px solid rgba(255,255,255,.08); }
.navbar .nav-link{ color:#d9e2ec !important; }
.navbar .nav-link:hover, .navbar .nav-link.active{ color:#fff !important; }

/* Buttons */
.btn-primary{ background: linear-gradient(90deg, var(--primary), var(--accent)); border:0; font-weight:600; letter-spacing:.3px; }
.btn-primary:focus{ box-shadow: var(--ring); }
.btn-outline-light{ border-color: rgba(255,255,255,.45); color:#f2f6fb; }
.btn-outline-light:hover{ color:#0b1222; background:#fff; }

/* Cards */
.card{ background: var(--bg-elev); border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.card p{ color:#e9eff6; }

/* Chips and icons */
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .65rem; border-radius:999px; background:#111827; border:1px solid rgba(255,255,255,.12); color:#cdd9e5; font-size:.85rem; }
.icon-32{ width:32px;height:32px;display:inline-grid;place-items:center;border-radius:10px;background:#16254a;border:1px solid rgba(255,255,255,.12) }

/* Hero */
.gradient-hero{ background: radial-gradient(1200px 600px at 10% -10%, rgba(61,126,255,.22), transparent 60%), radial-gradient(800px 500px at 110% 10%, rgba(138,92,255,.20), transparent 60%), linear-gradient(180deg, #0e1116, #121722); }
.hero-preview{ background: linear-gradient(160deg, #122042 0%, #1b2a50 60%, #131e38 100%); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius); color:#ffffff; }
.hero-preview .ratio{ background: radial-gradient(140px 140px at 70% 20%, rgba(61,126,255,.45), transparent 60%); }
.hero-preview p, .hero-preview small{ color:#ffffff !important; }

/* Forms, labels, and inputs — high contrast */
label, .form-label, .form-check-label{ color: #f2f6fb !important; font-weight: 500; }
.form-control, .form-select{ background:#0f141a; border:1px solid rgba(255,255,255,.18); color:#f2f6fb; border-radius:10px; }
.form-control:focus, .form-select:focus{ border-color: var(--primary); box-shadow: var(--ring); }
.form-check-input{ border-color:#9bb4ff; background-color: transparent; }
.form-check-input:checked{ background-color: var(--primary); border-color: var(--primary); }

/* Range sliders */
.form-range{ height: 2rem; }
.form-range::-webkit-slider-runnable-track{ background:#d5dceb; height:6px; border-radius:999px; }
.form-range::-moz-range-track{ background:#d5dceb; height:6px; border-radius:999px; }
.form-range::-webkit-slider-thumb{ margin-top:-6px; width:18px; height:18px; border-radius:50%; background: var(--primary); border:none; }
.form-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background: var(--primary); border:none; }

/* Pricing and summary */
.price-xl{ font-size: 2.2rem; font-weight: 800; color:#ffffff; }
.progress{ background:#0f141a; }
.progress-bar{ background: linear-gradient(90deg, var(--primary), var(--accent)); }
#summaryList, #miniLines{ color:#e8eef6 !important; }
#setupBadge, #monthBadge{ color:#ffffff; }

/* Sticky quote */
.sticky-quote{ position: sticky; top: 90px; }

/* Contract preview */
#contractPreview h5, #contractPreview h6{ color:#ffffff; }
#contractPreview ul, #contractPreview ol{ color: #e1e8f0; }

/* Footer */
footer{ border-top:1px solid rgba(255,255,255,.10); }
footer a{ color:#d6deea; text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width: 991.98px){ .section{ padding: 72px 0; } .price-xl{ font-size: 1.9rem; } }

/* --- Hard overrides for anything still grey/faded --- */
.form-check-label{ color:#f2f6fb !important; opacity:1 !important; }
.form-check .form-check-input ~ .form-check-label{ opacity:1 !important; }
.card .small, .card small{ color:#e8eef6 !important; opacity:1 !important; }
#summaryList, #miniLines, #setupBadge, #monthBadge, #setupTotal, #monthTotal{ color:#ffffff !important; opacity:1 !important; filter:none !important; }
.card, .card *{ text-shadow: none; }


/* ===== WHITE MODE OVERRIDES — make (almost) everything white for max contrast ===== */
html, body { color: #ffffff !important; }

/* General text elements */
p, span, li, label, .form-label, .form-check-label, .lead,
.small, small, .text-muted, .muted, .text-soft, .text-secondary,
.nav-link, .card, .card p, .card small, .card li,
#summaryList, #miniLines, #setupBadge, #monthBadge, #setupTotal, #monthTotal {
  color: #ffffff !important; opacity: 1 !important; filter: none !important;
}

/* Bootstrap utility classes that used to force grey */
[class^="text-"], [class*=" text-"] { color: #ffffff !important; }

/* Inputs */
.form-control, .form-select { color: #ffffff !important; }
.form-control::placeholder { color: #f1f1f1 !important; opacity: .95; }

/* Keep button states sensible */
.btn-primary { color: #ffffff !important; }
.btn-outline-light { color: #ffffff !important; }
.btn-outline-light:hover { color: #0b1222 !important; background: #ffffff !important; }