/* =====================================================================
   WHITEMAILBOX · FUTURISTIC THEME  ·  teal / emerald (logo-derived)
   Distinct design language from ImpactLogics: green palette, dotted
   ambient field (not grid), rounder cards, emerald→teal gradients.
   Loaded last in <head> so it overrides per-page inline :root tokens.
   ===================================================================== */

/* ---- 1. Token remap : whole site recolors from here (teal/emerald) ---- */
:root{
  --bg-body:#04120e;
  --bg-section:#07190f;
  --bg-card:#0b1d17;
  --bg-card-hover:#102820;
  --bg-input:#08170f;
  --border:#173a30;
  --border-light:#1f5344;
  --accent:#20e3c2;            /* bright teal (logo wordmark) */
  --accent-hover:#4bf0d4;
  --orange:#3ddc84;            /* remapped → emerald (teal + green duo) */
  --white:#f0fbf7;
  --text:#c3ded4;
  --text-muted:#84a99b;
  --text-dim:#557368;
  --glow-cyan:rgba(32,227,194,.55);    /* teal  (var name kept for shared rules) */
  --glow-violet:rgba(61,220,132,.55);  /* emerald */
}

/* ---- 2. Ambient background : teal/emerald glows + dotted field ---- */
body{
  background:
    radial-gradient(1100px 720px at 8% -10%, rgba(32,227,194,.12), transparent 60%),
    radial-gradient(1000px 720px at 100% 0%, rgba(61,220,132,.13), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(20,180,150,.07), transparent 60%),
    var(--bg-body) !important;
  background-attachment:fixed !important;
  position:relative;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(70,230,190,.10) 1.1px, transparent 1.2px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 82% 62% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 82% 62% at 50% 0%, #000 30%, transparent 78%);
}
body>*{position:relative;z-index:1}

/* ---- 3. Typography accents ---- */
h1,h2,h3,h4,h5,h6{letter-spacing:.4px}
::selection{background:var(--accent);color:#032019}

/* ---- 4. Header : glass (teal) ---- */
.il-header{
  background:rgba(5,16,13,.74) !important;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(32,227,194,.18) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.03), 0 10px 40px -20px rgba(32,227,194,.35);
}
.il-nav a:hover,.il-nav a.active{text-shadow:0 0 18px var(--glow-cyan)}
.il-nav a.active::after,
.il-dropdown-menu{box-shadow:0 0 22px -6px var(--glow-cyan)}

/* ---- 5. Buttons : emerald→teal gradient + glow ---- */
.il-btn-accent{
  background:linear-gradient(135deg,#3ddc84 0%,#22d6b0 52%,#20e3c2 100%) !important;
  color:#04211a !important;font-weight:700;
  box-shadow:0 6px 26px -8px rgba(32,227,194,.7), inset 0 1px 0 rgba(255,255,255,.28);
  border:none;
}
.il-btn-accent:hover{
  color:#04211a !important;
  box-shadow:0 10px 34px -6px rgba(61,220,132,.75), inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateY(-2px);
}
.il-btn-outline{
  border:1px solid rgba(32,227,194,.5) !important;color:var(--accent) !important;
  background:rgba(32,227,194,.05) !important;
}
.il-btn-outline:hover{
  background:rgba(32,227,194,.15) !important;color:#eafff9 !important;
  box-shadow:0 0 24px -4px var(--glow-cyan);
}

/* ---- 6. Cards / panels : rounder, teal hover glow ---- */
.il-card,.il-form-card,.il-feature-card,.il-testimonial,.il-steps,.il-result-card{
  background:linear-gradient(180deg, rgba(16,34,28,.74), rgba(9,22,17,.74)) !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -40px rgba(0,0,0,.9);
}
.il-card:hover,.il-feature-card:hover{
  border-color:rgba(32,227,194,.55) !important;
  box-shadow:0 0 0 1px rgba(32,227,194,.2), 0 20px 50px -24px rgba(32,227,194,.38) !important;
  transform:translateY(-5px);
}
.il-result-header{
  background:linear-gradient(90deg, rgba(32,227,194,.12), rgba(61,220,132,.07)) !important;
  border-bottom:1px solid rgba(32,227,194,.2) !important;
}
.il-step-icon,.il-contact-icon{
  background:radial-gradient(circle at 30% 20%, rgba(32,227,194,.2), rgba(9,22,17,.6)) !important;
  border:1px solid rgba(32,227,194,.38) !important;
  box-shadow:0 0 22px -6px var(--glow-cyan);
}

/* ---- 7. Section labels / links glow ---- */
.il-section-label{
  border-color:rgba(32,227,194,.5) !important;
  background:rgba(32,227,194,.07);
  box-shadow:0 0 20px -6px var(--glow-cyan);
}
.il-hero-label,.il-hero h4{text-shadow:0 0 20px var(--glow-cyan)}

/* ---- 8. Inputs : glow focus ---- */
.il-input,.il-select,.il-textarea{
  background:rgba(7,20,14,.85) !important;border-radius:12px !important;
  border:1px solid var(--border) !important;
}
.il-input:focus,.il-select:focus,.il-textarea:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(32,227,194,.16), 0 0 22px -6px var(--glow-cyan) !important;
}

/* ---- 9. Page banner : teal/emerald gradient + glow ---- */
.il-page-banner{
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(32,227,194,.16), transparent 70%),
    radial-gradient(700px 240px at 90% 100%, rgba(61,220,132,.15), transparent 70%),
    var(--bg-section) !important;
  border-bottom:1px solid rgba(32,227,194,.2) !important;
}
.il-page-banner h1{text-shadow:0 0 40px rgba(32,227,194,.42)}

/* ---- 10. Hero overlay tint toward teal ---- */
.il-hero::before{
  background:linear-gradient(120deg, rgba(4,18,14,.9) 0%, rgba(6,26,20,.72) 45%, rgba(8,30,22,.62) 100%) !important;
}

/* ---- 11. Footer ---- */
.il-footer{
  background:linear-gradient(180deg, #05130f, #03100b) !important;
  border-top:1px solid rgba(32,227,194,.15) !important;
}
.il-footer-socials a:hover{
  background:linear-gradient(135deg,#20e3c2,#3ddc84) !important;
  border-color:transparent !important;box-shadow:0 0 20px -4px var(--glow-cyan);
}

/* ---- 12. Legacy result markup ---- */
.il-history-dot{box-shadow:0 0 14px var(--glow-cyan)}
.il-latest-update{
  background:rgba(32,227,194,.07) !important;
  border-left:3px solid var(--accent) !important;
  box-shadow:inset 0 0 30px -12px var(--glow-cyan);
}

/* ---- 13. Scrollbar ---- */
::-webkit-scrollbar-thumb{background:linear-gradient(#20e3c2,#3ddc84) !important;border-radius:6px}

/* ---- 13b. Tracking search "console" (only the two tracking forms) ---- */
form[action="realtime-tracking.php"]{position:relative}
form[action="realtime-tracking.php"] input[type="text"]{
  font-family:var(--font-display),monospace !important;
  text-transform:uppercase;letter-spacing:5px !important;text-align:center;
  font-size:17px !important;padding:18px 16px !important;
  background:rgba(5,16,11,.9) !important;
  border:1px solid rgba(32,227,194,.38) !important;
  box-shadow:inset 0 0 26px -12px var(--glow-cyan);
}
form[action="realtime-tracking.php"] input[type="text"]::placeholder{
  letter-spacing:3px;color:var(--text-dim);
}
form[action="realtime-tracking.php"] input[type="text"]:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(32,227,194,.16),0 0 30px -6px var(--glow-cyan) !important;
}

/* ---- 14. Motion ---- */
@keyframes fx-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:no-preference){
  .il-btn-accent{transition:all .25s ease}
}