/*
Theme Name: EcoFlex Mobile Detailing
Theme URI: https://ecoflexdetailing.com
Author: EcoFlex
Description: Custom theme for EcoFlex Mobile Detailing — flat dark design system with lime accent, LatePoint-integrated service cards, and native FAQ/Contact/About templates.
Version: 1.2.5
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ecoflex
*/

/* ==========================================================================
   Design tokens — see also assets/css/latepoint-overrides.css
   Rules: no gradients, no glass/blur. Flat solid surfaces; depth from value
   shifts and 1px hairlines only. Lime is for action/emphasis, never body text.
   ========================================================================== */
:root{
  --ink-950:#0A0E0B;
  --ink-900:#0E130F;
  --moss-850:#131A15;
  --moss-800:#182219;
  --line:rgba(190,230,190,.13);
  --line-strong:rgba(190,230,190,.24);
  --lime-400:#8BE04F;
  --lime-300:#A6EF72;
  --lime-dim:rgba(139,224,79,.14);
  --paper:#F2F7EF;
  --foam:#C6D9C6;
  --muted:#8CA18C;
  --font-display:"Hanken Grotesk","Avenir Next","Segoe UI",sans-serif;
  --font-body:"Hanken Grotesk","Avenir","Segoe UI",system-ui,sans-serif;
  --radius:6px;
  --container:1160px;
}

@font-face{
  font-family:"Hanken Grotesk";
  src:url("assets/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink-950);color:var(--paper);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{height:auto}
a{color:var(--lime-400)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--lime-300);outline-offset:2px}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display)!important;text-wrap:balance;margin:0}
body{font-family:var(--font-body)!important}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal}
/* Elementor's global `.elementor-kit-N button{display:inline-block}` overrides
   the UA `[hidden]{display:none}` rule, forcing hidden <button>s (e.g. the
   modal's unused next button) visible. Re-assert it. */
[hidden]{display:none!important}

.wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;font-weight:600;color:var(--lime-400);margin:0 0 14px;
}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:4px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .15s ease,background .15s ease;
  line-height:1.3;
}
/* Elementor's global kit injects `.elementor-kit-N button{background;color}`
   (specificity 0,1,1) on EVERY page, which ties or beats single-class button
   styles and loads after the theme — so both background and text need
   !important, or theme buttons render with Elementor's skin (invisible lime-on
   -transparent). This affects every <button>; modal controls are re-asserted
   in the booking-modal section below. */
.btn-primary,a.btn-primary,button.btn-primary{background:var(--lime-400)!important;color:var(--ink-950)!important}
.btn-primary:hover{background:var(--lime-300)!important;transform:translateY(-1px)}
.btn-ghost,a.btn-ghost{background:transparent!important;color:var(--paper)!important;border-color:var(--line-strong)!important}
.btn-ghost:hover{border-color:var(--lime-400)!important;color:var(--lime-300)!important}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn-primary:hover{transform:none}}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--ink-950);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:28px;height:72px}
.logo,.custom-logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper)}
.logo img,.custom-logo{max-height:44px;width:auto}
.logo svg{display:block}
.logo-word{font-family:var(--font-display);font-weight:700;letter-spacing:.08em;font-size:17px;line-height:1.05}
.logo-word small{display:block;font-size:8.5px;letter-spacing:.3em;color:var(--lime-400);font-weight:600}
.nav-links{display:flex;gap:26px;margin-left:auto;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.nav-links a{color:var(--foam);text-decoration:none;font-size:14.5px}
.nav-links a:hover,.nav-links .current-menu-item a,.nav-links .current_page_item a{color:var(--lime-300)}
.nav-phone{color:var(--foam);font-size:14px;text-decoration:none;white-space:nowrap}
.nav-phone:hover{color:var(--lime-300)}
.site-header .btn{padding:10px 20px;font-size:14px}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:4px;
  color:var(--paper);padding:9px 12px;cursor:pointer;font-size:16px;line-height:1;margin-left:auto;
}
@media (max-width:940px){
  .nav-links,.nav-phone{display:none}
  .nav-toggle{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:72px;left:0;right:0;
    background:var(--ink-900);border-bottom:1px solid var(--line);margin:0;padding:8px 0;
  }
  .nav-links.open li{border-top:1px solid var(--line)}
  .nav-links.open li:first-child{border-top:none}
  .nav-links.open a{display:block;padding:14px 28px}
}

/* ---------- hero (front page) ---------- */
.hero{border-bottom:1px solid var(--line)}
/* Longhand padding only: .hero-grid sits on the same element as .wrap, and a
   shorthand here would clobber .wrap's horizontal 28px. */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;padding-top:84px;padding-bottom:84px}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;gap:40px;padding-top:64px;padding-bottom:64px}}
.hero-inner{max-width:640px}
.hero-photo{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.hero h1{font-size:clamp(38px,5.6vw,62px);line-height:1.06;font-weight:700;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--lime-400)}
.hero-inner > p{color:var(--foam);font-size:18px;max-width:52ch;margin:22px 0 34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:44px 0 0;padding:0;list-style:none}
.chips li{
  font-size:13px;color:var(--foam);border:1px solid var(--line);
  padding:7px 14px;border-radius:100px;background:var(--moss-850);
}
.chips li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--lime-400);margin-right:9px;vertical-align:2px}

/* ---------- inner page hero ---------- */
.page-hero{border-bottom:1px solid var(--line);background:var(--ink-900)}
.page-hero-inner{padding-top:56px;padding-bottom:56px}
.page-hero h1{font-size:clamp(30px,4vw,44px);font-weight:700}
.breadcrumb{color:var(--muted);font-size:13.5px;margin:10px 0 0}
.breadcrumb a{color:var(--foam);text-decoration:none}
.breadcrumb a:hover{color:var(--lime-300)}

/* ---------- sections ---------- */
.section{padding:88px 0}
.section-tight{padding:0 0 88px}
.sec-head{max-width:560px;margin-bottom:48px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1.15}
.sec-head p{color:var(--muted);margin:14px 0 0}
.foot-note{color:var(--muted);font-size:12.5px;margin-top:18px}

/* ---------- window tinting feature ---------- */
.feature{
  background:var(--moss-850);border:1px solid var(--line);border-radius:var(--radius);
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;padding:44px;
}
@media (max-width:820px){.feature{grid-template-columns:1fr;gap:28px;padding:32px}}
.feature h3{font-size:24px;font-weight:700;margin-bottom:18px}
.feature-cta{border-left:1px solid var(--line);padding-left:48px;display:flex;flex-direction:column;justify-content:center;gap:16px}
@media (max-width:820px){.feature-cta{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:24px}}
.feature-cta .from{color:var(--muted);font-size:14px}
.feature-cta .price{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--lime-300);font-variant-numeric:tabular-nums}

/* ---------- checklists ---------- */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.checks li{color:var(--foam);font-size:14.5px;padding-left:24px;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--lime-400);font-weight:700;font-size:13px}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.svc-card{
  background:var(--moss-850);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:16px;
}
.svc-card.featured{border-color:rgba(139,224,79,.45)}
.svc-img{display:block;width:calc(100% + 52px);max-width:none;height:240px;object-fit:cover;
  margin:-26px -26px 0;border-radius:6px 6px 0 0;border-bottom:1px solid var(--line);filter:saturate(.85)}
.tier-tag{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.mini-badge{display:inline-block;background:var(--lime-400);color:var(--ink-950);font-family:var(--font-display);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-left:10px;vertical-align:2px}
.svc-card header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.svc-card h3{font-size:17px;font-weight:600}
.svc-card h3 a{color:var(--paper);text-decoration:none}
.svc-card h3 a:hover{color:var(--lime-300)}
.svc-card .amt{font-family:var(--font-display);font-weight:600;color:var(--lime-300);font-variant-numeric:tabular-nums;white-space:nowrap}
.svc-card .amt span{color:var(--muted);font-weight:400;font-size:12.5px;margin-right:6px}
.svc-card .btn{margin-top:auto;align-self:flex-start;padding:10px 20px;font-size:14px}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
@media (max-width:800px){.steps{grid-template-columns:1fr}}
.step{background:var(--moss-850);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);font-weight:700;color:var(--lime-400);
  display:block;font-size:14px;letter-spacing:.14em;margin-bottom:16px;
}
.step h3{font-size:18px;font-weight:600;margin-bottom:10px}
.step p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- pillars & value props ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:800px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--moss-850);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.pillar h3{font-size:18px;font-weight:600;margin-bottom:12px}
.pillar p{margin:0;color:var(--muted);font-size:14.5px}
.props{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media (max-width:800px){.props{grid-template-columns:1fr 1fr}}
.prop{padding:28px;border-left:1px solid var(--line)}
.prop:first-child{border-left:none}
@media (max-width:800px){.prop{border-top:1px solid var(--line)}.prop:nth-child(-n+2){border-top:none}.prop:nth-child(odd){border-left:none}}
.prop h3{font-size:15.5px;font-weight:600;margin-bottom:8px}
.prop p{margin:0;color:var(--muted);font-size:13.5px}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:800px){.reviews{grid-template-columns:1fr}}
.review{
  background:var(--moss-850);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:16px;margin:0;
}
.stars{color:var(--lime-400);letter-spacing:3px;font-size:13px}
.review p{margin:0;color:var(--foam);font-size:15px}
.review cite{color:var(--muted);font-style:normal;font-size:13px}

/* ---------- mission / vision (about) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:800px){.duo{grid-template-columns:1fr}}
.duo .pillar h3{color:var(--lime-300)}
.founder{color:var(--muted);font-size:13.5px;margin-top:18px}
.founder b{color:var(--foam);font-weight:600}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px}
.faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--moss-850)}
.faq + .faq{margin-top:10px}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:15.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-size:20px;line-height:1;flex-shrink:0}
.faq[open] summary::after{content:"–"}
.faq-body{padding:0 22px 20px;color:var(--foam);font-size:14.5px}
.faq-body p{margin:0}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-info h2{font-size:clamp(26px,3vw,36px);font-weight:700;margin-bottom:16px}
.contact-info p{color:var(--muted)}
.contact-phone{
  display:inline-flex;font-family:var(--font-display);font-weight:700;font-size:26px;
  color:var(--lime-300);text-decoration:none;margin-top:18px;font-variant-numeric:tabular-nums;
}
.contact-phone:hover{color:var(--lime-400)}
.contact-form{
  background:var(--moss-850);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px;display:flex;flex-direction:column;gap:18px;
}
.contact-form label{
  font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;gap:8px;
}
.contact-form input,.contact-form textarea{
  background:var(--ink-900);border:1px solid var(--line-strong);border-radius:4px;
  color:var(--paper);font-family:var(--font-body);font-size:15px;padding:12px 14px;width:100%;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--lime-400);outline:none}
.contact-form textarea{min-height:150px;resize:vertical}
.form-notice{padding:14px 16px;border-radius:4px;font-size:14.5px;border:1px solid var(--line-strong)}
.form-notice.ok{border-color:rgba(139,224,79,.5);color:var(--lime-300);background:var(--lime-dim)}
.form-notice.err{border-color:rgba(230,120,100,.5);color:#F0B4A6;background:rgba(230,120,100,.08)}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- CTA band ---------- */
.cta-band{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink-900);
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:56px;padding-bottom:56px;flex-wrap:wrap}
.cta-inner h2{font-size:clamp(24px,3vw,34px);font-weight:700;max-width:22ch}
.cta-inner .cta-sub{color:var(--muted);margin:10px 0 0;max-width:52ch}
.cta-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cta-actions .phone{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--paper);text-decoration:none;white-space:nowrap}
.cta-actions .phone:hover{color:var(--lime-300)}

/* ---------- footer ---------- */
.site-footer{padding:64px 0 40px;color:var(--muted);font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
.site-footer h4{font-family:var(--font-display);color:var(--paper);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-footer ul a{color:var(--muted);text-decoration:none}
.site-footer ul a:hover{color:var(--lime-300)}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

/* ---------- generic page content ---------- */
.entry-content{max-width:820px;padding:64px 0 88px}
.entry-content a{color:var(--lime-300)}
.entry-content h2,.entry-content h3{margin:1.6em 0 .6em}
.entry-content img{max-width:100%;border-radius:var(--radius)}

/* ---------- booking modal (custom LatePoint frontend) ---------- */
/* Re-assert backgrounds for the modal's <button> controls so Elementor's
   global `.elementor-kit-N button` skin can't bleed in (see .btn note above). */
.exb-day{background:var(--moss-850)!important}
.exb-day.selected{background:var(--lime-400)!important}
.exb-slot{background:var(--moss-850)!important}
.exb-slot.selected{background:var(--lime-400)!important}
.exb-cal-nav button{background:var(--moss-850)!important}
.exb-exit{background:none!important}
.nav-toggle{background:none!important}
.exb-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(6,9,7,.85);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.exb-overlay.open{display:flex}
.exb-modal{
  background:var(--ink-900);border:1px solid var(--line-strong);border-radius:10px;
  width:min(1120px,100%);max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:1fr 320px;
  scrollbar-width:thin;scrollbar-color:var(--moss-800) transparent;
}
/* Themed scrollbar (WebKit) — subtle moss thumb, lime on hover. */
.exb-modal::-webkit-scrollbar{width:12px}
.exb-modal::-webkit-scrollbar-track{background:var(--ink-950);border-radius:0 10px 10px 0}
.exb-modal::-webkit-scrollbar-thumb{background:var(--moss-800);border-radius:10px;border:3px solid var(--ink-950)}
.exb-modal::-webkit-scrollbar-thumb:hover{background:var(--lime-400)}
@media (max-width:820px){.exb-modal{grid-template-columns:1fr;max-height:96vh}}
.exb-main{padding:32px 36px;border-right:1px solid var(--line)}
@media (max-width:820px){.exb-main{border-right:none;border-bottom:1px solid var(--line);padding:24px}}
.exb-stepper{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 26px;padding:0;list-style:none}
.exb-stepper li{
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:6px 12px;border-radius:100px;border:1px solid var(--line);
}
.exb-stepper li.active{color:var(--ink-950);background:var(--lime-400);border-color:var(--lime-400)}
.exb-stepper li.done{color:var(--lime-300);border-color:rgba(139,224,79,.4)}
.exb-panels h3{font-size:21px;font-weight:700;margin-bottom:6px}
.exb-hint{color:var(--muted);font-size:14px;margin:0 0 20px}
.exb-group-label{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:20px 0 10px}
.exb-list{display:flex;flex-direction:column;gap:10px}
.exb-opt{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--moss-850);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 18px;cursor:pointer;transition:border-color .12s ease;
}
.exb-opt:hover{border-color:var(--line-strong)}
.exb-opt.selected{border-color:var(--lime-400);background:var(--moss-800)}
.exb-opt .name{font-size:15px;color:var(--paper)}
.exb-opt .amt{font-family:var(--font-display);font-weight:600;color:var(--lime-300);font-variant-numeric:tabular-nums}
.exb-actions{margin-top:24px;display:flex;justify-content:flex-end}
.exb-actions .btn[disabled]{opacity:.45;cursor:not-allowed}
.exb-nav{display:flex;justify-content:space-between;margin-top:22px}

.exb-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.exb-cal-nav button{
  background:var(--moss-850);border:1px solid var(--line);color:var(--paper);
  border-radius:4px;padding:5px 12px;cursor:pointer;font-size:15px;margin-left:6px;
}
.exb-cal-nav button:hover{border-color:var(--lime-400)}
.exb-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.exb-dow{font-family:var(--font-display);font-size:11px;color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase}
.exb-day{
  background:var(--moss-850);border:1px solid var(--line);color:var(--foam);
  border-radius:4px;padding:9px 0;cursor:pointer;font-size:13.5px;text-align:center;
  font-variant-numeric:tabular-nums;position:relative;font-family:var(--font-body);
}
.exb-day.has-slots::after{content:"";position:absolute;left:20%;right:20%;bottom:3px;height:2px;background:var(--lime-400);border-radius:2px}
.exb-day:hover:not([disabled]){border-color:var(--lime-400)}
.exb-day.selected{background:var(--lime-400);color:var(--ink-950);border-color:var(--lime-400);font-weight:700}
.exb-day.off,.exb-day[disabled]{opacity:.32;cursor:default}
.exb-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.exb-slot{
  background:var(--moss-850);border:1px solid var(--line);color:var(--foam);
  border-radius:4px;padding:8px 14px;cursor:pointer;font-size:13.5px;font-variant-numeric:tabular-nums;
}
.exb-slot:hover{border-color:var(--lime-400)}
.exb-slot.selected{background:var(--lime-400);color:var(--ink-950);border-color:var(--lime-400);font-weight:600}
.exb-slots-label{margin-top:20px}

.exb-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.exb-form{grid-template-columns:1fr}}
.exb-form label{
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:7px;
}
.exb-form .exb-wide{grid-column:1/-1}
.exb-form input,.exb-form textarea{
  background:var(--ink-950);border:1px solid var(--line-strong);border-radius:4px;
  color:var(--paper);font-family:var(--font-body);font-size:15px;padding:11px 13px;width:100%;
}
.exb-form input:focus,.exb-form textarea:focus{border-color:var(--lime-400);outline:none}
.exb-form textarea{min-height:90px;resize:vertical}
.exb-error{color:#F0B4A6;background:rgba(230,120,100,.08);border:1px solid rgba(230,120,100,.5);
  border-radius:4px;padding:12px 14px;font-size:14px;margin-top:16px}
.exb-paynote{margin-top:14px;text-align:right}

.exb-done{text-align:center;padding:28px 0}
.exb-done-mark{
  width:56px;height:56px;border-radius:50%;background:var(--lime-400);color:var(--ink-950);
  font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.exb-done .exb-actions{justify-content:center}
.exb-code{color:var(--foam);margin-top:6px}
.exb-code strong{color:var(--lime-300);font-family:var(--font-display)}

.exb-side{padding:32px 26px;background:var(--moss-850);display:flex;flex-direction:column}
@media (max-width:820px){.exb-side{padding:24px}}
.exb-side h4{font-family:var(--font-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.exb-sum-service{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--paper)}
.exb-sum-meta{color:var(--muted);font-size:13px;margin:4px 0 20px}
.exb-sum-lines{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);padding-top:16px;font-size:14px}
.exb-line{display:flex;justify-content:space-between;gap:12px;color:var(--foam)}
.exb-line .v{font-variant-numeric:tabular-nums}
.exb-line.total{border-top:1px solid var(--line-strong);padding-top:11px;margin-top:5px;
  font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--paper)}
.exb-line.total .v{color:var(--lime-300)}
.exb-help{margin-top:auto;padding-top:24px;font-size:13px;color:var(--muted)}
.exb-help a{color:var(--foam)}
.exb-exit{
  background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;
  margin-top:12px;padding:4px 0;font-family:var(--font-body);text-align:left;
}
.exb-exit:hover{color:var(--paper)}

/* ---------- 404 ---------- */
.error-404{padding:120px 0;text-align:left;max-width:640px}
.error-404 h1{font-size:clamp(34px,5vw,52px)}
.error-404 p{color:var(--muted)}

/* ---------- live chat widget ---------- */
.exc-launcher{
  position:fixed;right:24px;bottom:24px;left:auto;z-index:90;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--lime-400);color:var(--ink-950);border:none;
  border-radius:100px;padding:11px 17px 11px 14px;
  font-family:var(--font-display);font-weight:600;font-size:14px;line-height:1.2;
  text-transform:none!important;letter-spacing:normal!important;box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.exc-launcher:hover{background:var(--lime-300)}
.exc-launcher svg{display:block}
.exc-launcher.hidden{display:none}

.exc-panel{
  position:fixed;right:24px;bottom:24px;left:auto;z-index:91;
  width:min(370px,calc(100vw - 32px));height:min(560px,calc(100vh - 48px));
  background:var(--ink-900);border:1px solid var(--line-strong);border-radius:14px;
  display:none;flex-direction:column;overflow:hidden;box-shadow:0 12px 44px rgba(0,0,0,.5);
}
.exc-panel.open{display:flex}
@media (max-width:520px){
  .exc-launcher{right:16px;bottom:16px}
  .exc-panel{right:8px;left:8px;bottom:8px;width:auto;height:calc(100vh - 16px)}
}
/* neutralize Elementor's global button bleed inside the widget */
.exc-panel button{min-height:0;line-height:1.35;text-transform:none!important;letter-spacing:normal!important;box-shadow:none!important;font-family:var(--font-body)}

.exc-head{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--line);background:var(--ink-950);flex:0 0 auto}
.exc-head .exc-title{font-family:var(--font-display);font-weight:700;font-size:14.5px;line-height:1.2}
.exc-head .exc-sub{color:var(--muted);font-size:11.5px}
.exc-head .exc-dot{width:8px;height:8px;border-radius:50%;background:var(--lime-400);flex-shrink:0}
.exc-head .exc-close{margin-left:auto;background:none!important;border:none!important;color:var(--muted);
  font-size:24px;line-height:1;padding:0;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.exc-head .exc-close:hover{color:var(--paper)}

.exc-scroll{flex:1 1 auto;overflow-y:auto;min-height:0;display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:var(--moss-800) transparent}
.exc-scroll::-webkit-scrollbar{width:8px}
.exc-scroll::-webkit-scrollbar-thumb{background:var(--moss-800);border-radius:8px}

.exc-msgs{display:flex;flex-direction:column;gap:9px;padding:16px 16px 6px}
.exc-msg{max-width:84%;padding:9px 13px;border-radius:13px;font-size:14px;line-height:1.45;word-wrap:break-word}
.exc-msg.bot{background:var(--moss-850);border:1px solid var(--line);color:var(--paper);align-self:flex-start;border-bottom-left-radius:4px}
.exc-msg.user{background:var(--lime-400);color:var(--ink-950);align-self:flex-end;border-bottom-right-radius:4px}
.exc-msg.note{background:transparent;border:1px dashed var(--line-strong);color:var(--muted);font-size:12.5px;align-self:stretch;max-width:100%;text-align:center}
.exc-typing{align-self:flex-start;display:flex;gap:4px;padding:11px 13px;background:var(--moss-850);border:1px solid var(--line);border-radius:13px;border-bottom-left-radius:4px}
.exc-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:excb 1s infinite}
.exc-typing span:nth-child(2){animation-delay:.15s}.exc-typing span:nth-child(3){animation-delay:.3s}
@keyframes excb{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.exc-typing span{animation:none}}

.exc-chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 16px 16px}
.exc-chips .exc-chip{
  background:var(--moss-850);border:1px solid var(--line-strong);color:var(--paper);
  border-radius:100px;padding:7px 13px;cursor:pointer;font-size:12.5px;text-align:left;
  min-height:0;line-height:1.35;text-transform:none!important;letter-spacing:normal!important;font-family:var(--font-body);
}
.exc-chips .exc-chip:hover{border-color:var(--lime-400);color:var(--lime-300)}
.exc-chips .exc-chip .exc-price{color:var(--lime-300);font-variant-numeric:tabular-nums;margin-left:6px}
.exc-chips .exc-chip.primary{background:var(--lime-400);color:var(--ink-950);border-color:var(--lime-400);font-weight:600}
.exc-chips .exc-chip.primary:hover{background:var(--lime-300);color:var(--ink-950)}
.exc-chips .exc-chip.ghost{background:transparent}

.exc-input{display:none;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--ink-950);flex:0 0 auto}
.exc-input.show{display:flex}
.exc-input input{flex:1;background:var(--moss-850);border:1px solid var(--line-strong);border-radius:100px;
  color:var(--paper);font-family:var(--font-body);font-size:14px;padding:10px 15px}
.exc-input input:focus{border-color:var(--lime-400);outline:none}
.exc-input button{background:var(--lime-400);color:var(--ink-950);border:none;border-radius:50%;
  width:38px;height:38px;cursor:pointer;font-size:17px;flex:0 0 auto}
.exc-input button:hover{background:var(--lime-300)}

/* persistent footer — call / leave details always reachable */
.exc-foot{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line);background:var(--ink-950);flex:0 0 auto}
.exc-foot a,.exc-foot button{flex:1;background:none;border:1px solid var(--line-strong);border-radius:8px;
  color:var(--foam);font-size:12px;padding:8px 6px;text-align:center;text-decoration:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;font-family:var(--font-body)}
.exc-foot a:hover,.exc-foot button:hover{border-color:var(--lime-400);color:var(--lime-300)}

/* voice-call state */
.exc-voice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:36px 22px;text-align:center;flex:1}
.exc-voice-orb{width:76px;height:76px;border-radius:50%;background:var(--moss-800);border:2px solid var(--lime-400);
  display:flex;align-items:center;justify-content:center;color:var(--lime-400);font-size:30px}
.exc-voice-orb.live{animation:excpulse 1.4s ease-in-out infinite}
@keyframes excpulse{0%,100%{box-shadow:0 0 0 0 rgba(139,224,79,.35)}50%{box-shadow:0 0 0 14px rgba(139,224,79,0)}}
@media (prefers-reduced-motion:reduce){.exc-voice-orb.live{animation:none}}
.exc-voice h4{font-family:var(--font-display);font-size:16px;font-weight:700}
.exc-voice p{color:var(--muted);font-size:13.5px;margin:0;max-width:26ch}
.exc-voice .exc-chip{background:var(--lime-400);color:var(--ink-950);border:none;border-radius:100px;padding:9px 18px;cursor:pointer;font-weight:600;font-size:13.5px}
.exc-voice .exc-hangup{background:#C0392B;color:#fff}
.exc-voice .exc-hangup:hover{background:#E04A3A;color:#fff}

/* chat contact/voice overlay — covers the chat but preserves it underneath */
.exc-overlay{position:absolute;inset:0;z-index:6;background:var(--ink-900);display:flex;flex-direction:column;border-radius:14px}
.exc-overlay-head{padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.exc-overlay-back{background:none!important;border:none!important;color:var(--foam)!important;font-size:13.5px;cursor:pointer;padding:4px 2px;font-family:var(--font-body);text-transform:none!important;letter-spacing:normal!important}
.exc-overlay-back:hover{color:var(--lime-300)!important}
.exc-overlay-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px 22px;text-align:center;min-height:0}
.exc-overlay-menu{display:flex;flex-direction:column;align-items:center;gap:11px;width:100%}
.exc-overlay-menu h4{font-family:var(--font-display);font-size:16px;font-weight:700;margin:0}
.exc-overlay-menu p{color:var(--muted);font-size:13px;margin:0 0 6px}
.exc-overlay-menu .exc-chip,.exc-voice .exc-chip{width:100%;max-width:280px;justify-content:center;text-align:center;padding:11px 16px;font-size:14px;text-decoration:none;display:flex;align-items:center}

/* overlay button colours (outside .exc-chips scope, so style explicitly) */
.exc-overlay-body .exc-chip{background:var(--moss-850);border:1px solid var(--line-strong);color:var(--paper)!important;border-radius:100px;font-family:var(--font-body)}
.exc-overlay-body .exc-chip:hover{border-color:var(--lime-400);color:var(--lime-300)!important}
.exc-overlay-body .exc-chip.primary{background:var(--lime-400);border-color:var(--lime-400);color:var(--ink-950)!important;font-weight:600}
.exc-overlay-body .exc-chip.primary:hover{background:var(--lime-300);color:var(--ink-950)!important}
.exc-overlay-body .exc-chip.exc-hangup{background:#C0392B;border-color:#C0392B;color:#fff!important}
.exc-overlay-body .exc-chip.exc-hangup:hover{background:#E04A3A;color:#fff!important}