/* =============== Fonts & Variables =============== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Montserrat:wght@400;700&display=swap');

:root{
  /* Light (default) */
  --bg:#ffffff; --ink:#0a0f0d; --muted:#1d3a32; --brand:#00e676;
  --card:#f5f7f8; --line:rgba(0,0,0,.12); --field:#eef3f1;

  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Dark theme */
:root[data-theme="dark"]{
  --bg:#0a0f0d; --ink:#eafff6; --muted:#aefbe0; --brand:#00e676;
  --card:#0f2a24; --line:rgba(255,255,255,.08); --field:#0c201c;
}

/* Respect OS when no explicit choice */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0a0f0d; --ink:#eafff6; --muted:#aefbe0; --brand:#00e676;
    --card:#0f2a24; --line:rgba(255,255,255,.08); --field:#0c201c;
  }
}

/* =============== Base =============== */
html{ scroll-behavior:smooth; }
*{ box-sizing:border-box; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Orbitron', 'Montserrat', sans-serif;
  line-height:1.5; overflow-x:hidden; /* prevent page slider */
}

/* Optional: make body copy a bit more readable if you prefer Montserrat for paragraphs */
/*
p, label, input, textarea, button, a, small, strong, em, span{
  font-family:'Montserrat', sans-serif;
}
*/

h1,h2,h3,h4,h5,h6,
p,a,label,input,textarea,button{
  font-family:'Orbitron','Montserrat',sans-serif;
}

/* Links */
a{ color:var(--muted); text-decoration:none; }
a:hover{ color:var(--brand); }

/* Containers */
.container,.wrap{ max-width:1100px; margin:0 auto; padding:0 20px; }

/* Cards/Buttons */
.card,.promo-card,.contact-card,.info-card,.plan{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}

.btn,.cta-button,.top-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid transparent;
  text-decoration:none; font-weight:800; line-height:1; cursor:pointer;
}
.btn-primary,.cta-button{ background:var(--brand); color:#00351f; }
.btn-ghost{ background:var(--card); color:var(--muted); border-color:var(--line); }

/* =============== Header / Hero =============== */
.site-header{ position:relative; }
.header-image{ width:100%; height:auto; display:block; }
.header-content{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:20px;
}
.logo-top{ height:64px; width:64px; border-radius:10px; object-fit:cover; margin-bottom:10px; }
.tagline{ margin:.4rem 0 1rem; color:var(--muted); }

/* Charging animation */
.header-content h1.charge{
  font-size:clamp(1.4rem,5vw,2.4rem); line-height:1.15; margin:0;
  letter-spacing:.5px; white-space:pre-wrap; display:inline-flex; align-items:center; gap:.15em;
}
.header-content h1.charge span{
  display:inline-block; color:#9fffbf;
  text-shadow:0 0 6px rgba(0,255,120,.35); animation:chargePulse 1.2s ease-in-out infinite;
}
.header-content h1.charge .battery{ margin-left:.1em; text-shadow:0 0 6px rgba(0,255,120,.35); }
@keyframes chargePulse{
  0%{ color:#9fffbf; text-shadow:0 0 6px rgba(0,255,120,.35); }
  35%{ color:#00ff75; text-shadow:0 0 12px rgba(0,255,120,.65),0 0 24px rgba(0,255,120,.45); }
  55%{ color:#c6ffd9; text-shadow:0 0 18px rgba(0,255,120,.85),0 0 36px rgba(0,255,120,.55); }
  100%{ color:#9fffbf; text-shadow:0 0 6px rgba(0,255,120,.35); }
}

@media (max-width:768px){
  .site-header{ padding-top:72px; }
  .logo-top{ margin-bottom:12px; }
}

/* =============== Top controls / Quick menu =============== */
.top-controls{
  position:fixed; top:12px; left:12px; right:12px; z-index:4000;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  /* pointer-events removed so buttons are clickable without extra overrides */
}
.top-left,.top-right{ display:flex; align-items:center; gap:10px; }

.options-btn{
  width:44px; height:42px; border-radius:12px; border:none; cursor:pointer;
  background:#013e33; color:#e0fff2; font-size:22px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.options-btn:hover{ background:#015b4a; }
.options-btn[aria-expanded="true"]{ background:#02745f; }

/* Dropdown */
.quick-menu{
  position:absolute; /* sits under the button on desktop */
  top:60px; right:0; z-index:3999;
  background:var(--card); color:var(--ink);
  border-radius:12px; padding:8px; border:1px solid var(--line);
  min-width:230px;
}
.quick-menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:var(--muted); font-weight:700; text-decoration:none;
}
.quick-menu a:hover{ background:rgba(0,230,118,.08); color:var(--brand); }
.quick-menu hr{ height:1px; border:none; margin:6px; background:var(--line); }

@media (max-width:480px){
  .top-left,.top-right{ gap:8px; }
  .quick-menu{ right:10px; min-width:200px; }
}

/* =============== Forms =============== */
.quote-form .field{ margin-bottom:14px; }
.quote-form input,.quote-form textarea{
  width:100%; padding:12px; border-radius:10px; border:1px solid var(--line);
  background:var(--field); color:var(--ink);
}
.quote-form textarea{ min-height:120px; }

/* ✅ Center the privacy checkbox + label (mobile & desktop) */
.field.privacy-check,
.privacy-check{
  display:flex; align-items:center; justify-content:center;
  gap:8px; text-align:center; margin:10px 0;
}
.privacy-check input[type="checkbox"]{ margin:0; width:16px; height:16px; }
.field.privacy-check label{ margin:0; font-size:.95rem; color:var(--ink); }

/* =============== Contact & Footer =============== */
.contact{ padding:32px 0 18px; }

.footer{
  background:#07110f; padding:18px 0; text-align:center;
}
.footer img.logo-bottom{
  height:46px; width:46px; border-radius:10px; object-fit:cover;
}
.footer p{ color:var(--muted); font-weight:700; }

/* =============== WhatsApp FAB =============== */
.whatsapp-chat{
  position:fixed; bottom:20px; right:20px; background:#25d366; color:#fff;
  padding:10px 16px; border-radius:50px; font-size:16px; font-weight:700;
  text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.whatsapp-chat:hover{ transform:translateY(-4px) scale(1.02); }
.whatsapp-chat .chat-logo{
  width:34px; height:34px; border-radius:50%;
  object-fit:cover; border:2px solid rgba(255,255,255,.85); background:#fff;
}

/* =============== Theme toggle (optional) =============== */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.theme-toggle:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.theme-toggle__icon{ font-size:18px; line-height:1; }
/* Make .btn-ghost text black in light mode */
.light .btn-ghost {
  color: #000 !important;
}