/* ==========================================================================
   Auto Spa service pages — PPF (3217), Detailing (3284),
   Ceramic Coating (3278), Window Tinting (3194)

   All four were duplicated from one another and still share section IDs
   (f0f6ada hero, 6d3bc31 tabs, 4b39650 advantages, fc4f495 closing copy,
   6aad367 "Restyling Services", 2a7f513 spacer). One sheet therefore covers
   all four, scoped to body.eg-spa which the mu-plugin adds.

   These were the last white pages on the site. Tokens, panel treatment,
   hairline grids, eyebrow scale and button idiom come from eg-account.css /
   eg-fleet.css / eg-storage.css so this reads as the same system.

   Colour rules carry !important: the theme, WooCommerce, Essential Addons and
   Elementor all enqueue later in the document than the child theme, and
   Elementor's per-element CSS is generated against element IDs.
   ========================================================================== */

body.eg-spa {
  --eg-bg:      #0A0A0A;
  --eg-panel:   #111111;
  --eg-panel-2: #151515;
  --eg-line:    rgba(255,255,255,.10);
  --eg-line-2:  rgba(255,255,255,.18);
  --eg-ink:     #FFFFFF;
  --eg-body:    #C9C9C9;
  --eg-mute:    #8E8E8E;
  --eg-lime:    #BDFF3E;
}

/* ---- shell ------------------------------------------------------------- */
body.eg-spa,
body.eg-spa #main,
body.eg-spa #main-content,
body.eg-spa .site-main,
body.eg-spa .page-content { background: var(--eg-bg) !important; }

body.eg-spa #main .elementor-section,
body.eg-spa #main .elementor-container,
body.eg-spa #main .elementor-column,
body.eg-spa #main .elementor-widget-wrap { background-color: transparent !important; }

body.eg-spa { overflow-x: hidden; }
body.eg-spa #main img { max-width: 100%; height: auto; }

/* ---- type -------------------------------------------------------------- */
body.eg-spa #main h1, body.eg-spa #main h2, body.eg-spa #main h3,
body.eg-spa #main h4, body.eg-spa #main h5, body.eg-spa #main h6,
body.eg-spa #main .elementor-heading-title,
body.eg-spa #main .dbl-title, body.eg-spa #main .dbl__title { color: var(--eg-ink) !important; }

body.eg-spa #main p, body.eg-spa #main li,
body.eg-spa #main .elementor-widget-text-editor,
body.eg-spa #main .elementor-text-editor { color: var(--eg-body) !important; }

body.eg-spa #main .dbl__subtitle {
  color: var(--eg-lime) !important;
  background: transparent !important;
  letter-spacing: .22em; text-transform: uppercase;
  font-size: 11px !important; font-weight: 700;
}
body.eg-spa #main .dbl__subtitle:after,
body.eg-spa #main .dbl__subtitle:before { display: none !important; }

/* Catch-all so nothing inherits the near-black the theme assumes a white page
   would provide. No !important, so the explicit rules above still win. */
body.eg-spa #main, body.eg-spa #main div, body.eg-spa #main span,
body.eg-spa #main label, body.eg-spa #main strong { color: var(--eg-body); }

/* ---- hero -------------------------------------------------------------- */
body.eg-spa #main .elementor-element-f0f6ada { padding-top: 54px !important; }
body.eg-spa #main .elementor-element-f0f6ada .dbl-title,
body.eg-spa #main .elementor-element-f0f6ada .dbl__title {
  font-size: 44px !important; line-height: 1.12; letter-spacing: -.01em;
}
body.eg-spa #main .elementor-element-f0f6ada .elementor-widget-text-editor p {
  font-size: 16.5px !important; line-height: 1.68; max-width: 780px;
}

/* ---- package tabs ------------------------------------------------------ */
body.eg-spa #main .eael-advance-tabs .eael-tabs-nav > ul {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--eg-line); border: 1px solid var(--eg-line);
  margin: 0 0 0 !important; padding: 0 !important;
}
body.eg-spa #main .eael-advance-tabs .eael-tabs-nav > ul li {
  flex: 1 1 0; min-width: 150px; margin: 0 !important; border: 0 !important;
  background: var(--eg-panel) !important; color: var(--eg-mute) !important;
  border-radius: 0 !important; padding: 17px 20px !important;
  text-align: center; transition: background .25s, color .25s;
}
body.eg-spa #main .eael-advance-tabs .eael-tabs-nav > ul li .eael-tab-title {
  font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: .16em; text-transform: uppercase; color: inherit !important;
}
body.eg-spa #main .eael-advance-tabs .eael-tabs-nav > ul li:hover { background: var(--eg-panel-2) !important; color: var(--eg-ink) !important; }
body.eg-spa #main .eael-advance-tabs .eael-tabs-nav > ul li.active,
body.eg-spa #main .eael-advance-tabs .eael-tabs-nav > ul li.active .eael-tab-title {
  background: var(--eg-lime) !important; color: #0A0A0A !important;
}
body.eg-spa #main .eael-advance-tabs .eael-tabs-content {
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-line); border-top: 0;
  padding: 34px 32px !important;
}
body.eg-spa #main .eael-advance-tabs .eael-tabs-content > div { background: transparent !important; }

/* Feature checkmark rows inside a package panel. */
body.eg-spa #main .eael-tabs-content .wgl-info-box,
body.eg-spa #main .eael-tabs-content .eael-infobox {
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--eg-line) !important;
  padding: 16px 0 !important; margin: 0 !important;
}
body.eg-spa #main .eael-tabs-content .wgl-info-box .info-box_title,
body.eg-spa #main .eael-tabs-content .eael-infobox .title { color: var(--eg-ink) !important; font-size: 15px !important; }
body.eg-spa #main .eael-tabs-content .wgl-info-box i,
body.eg-spa #main .eael-tabs-content .eael-infobox i { color: var(--eg-lime) !important; }

/* ---- the "why there is no price list" note ----------------------------- */
body.eg-spa #main .eg-quote-note {
  background: var(--eg-panel);
  border: 1px solid var(--eg-line);
  border-left: 3px solid var(--eg-lime);
  color: var(--eg-body) !important;
  padding: 20px 24px !important;
  margin: 26px 0 0 !important;
  font-size: 15px !important; line-height: 1.66;
}
body.eg-spa #main .eg-quote-note strong { color: var(--eg-ink) !important; }

/* ---- advantages list --------------------------------------------------- */
body.eg-spa #main .elementor-element-4b39650 .elementor-widget-heading .elementor-heading-title {
  font-size: 30px !important; line-height: 1.2; margin-bottom: 18px !important;
}
body.eg-spa #main .elementor-element-4b39650 ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
body.eg-spa #main .elementor-element-4b39650 ul li {
  position: relative; padding: 11px 0 11px 26px !important; margin: 0 !important;
  border-bottom: 1px solid var(--eg-line);
  color: var(--eg-body) !important; font-size: 15px !important; line-height: 1.6;
  list-style: none !important;
}
body.eg-spa #main .elementor-element-4b39650 ul li::marker { content: "" !important; }
body.eg-spa #main .elementor-element-4b39650 ul li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 9px; height: 2px; background: var(--eg-lime);
}

/* ---- closing copy block ------------------------------------------------ */
body.eg-spa #main .elementor-element-fc4f495 {
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-line);
  border-top: 3px solid var(--eg-lime);
  padding: 32px 34px !important;
}
body.eg-spa #main .elementor-element-fc4f495 p { margin: 0 !important; font-size: 15.5px !important; line-height: 1.7; }

/* ---- "Restyling Services" cross-links ---------------------------------
   These cards were already dark with readable white text — the one part of the
   old page that worked. Only the section heading and card chrome are adjusted. */
body.eg-spa #main .elementor-element-6aad367 .elementor-heading-title {
  font-size: 28px !important; letter-spacing: -.01em;
}
body.eg-spa #main .wgl-info-box.info-box_layout_1,
body.eg-spa #main .restyling-card { border: 1px solid var(--eg-line) !important; }

/* ---- contact form at the foot ------------------------------------------ */
body.eg-spa #main .wpforms-field-label,
body.eg-spa #main .wpforms-field-sublabel { color: var(--eg-mute) !important; }
body.eg-spa #main .wpforms-field input[type="text"],
body.eg-spa #main .wpforms-field input[type="email"],
body.eg-spa #main .wpforms-field input[type="tel"],
body.eg-spa #main .wpforms-field select,
body.eg-spa #main .wpforms-field textarea {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--eg-line-2) !important;
  border-radius: 0 !important; color: var(--eg-ink) !important;
}
body.eg-spa #main .wpforms-field input::placeholder,
body.eg-spa #main .wpforms-field textarea::placeholder { color: #6E6E6E !important; }
body.eg-spa #main .wpforms-image-choices-item,
body.eg-spa #main .wpforms-image-choices-item label,
body.eg-spa #main .wpforms-image-choices-item label *,
body.eg-spa #main .wpforms-field-label-inline,
body.eg-spa #main .wpforms-field-label-inline * { color: #EDEDED !important; }
body.eg-spa #main .wpforms-submit {
  background: var(--eg-lime) !important; color: #0A0A0A !important;
  border: 0 !important; border-radius: 0 !important;
  font-weight: 800 !important; letter-spacing: .16em; text-transform: uppercase;
}
body.eg-spa #main .wpforms-submit:hover { background: #FFFFFF !important; }

/* Theme widgets in the contact block that colour themselves. */
body.eg-spa #main .wgl-working-hours,
body.eg-spa #main .wgl-working-hours *,
body.eg-spa #main .working-item_hours { color: var(--eg-body) !important; }
body.eg-spa #main .working-item_day { color: var(--eg-ink) !important; }
body.eg-spa #main .working-item { border-bottom: 1px solid var(--eg-line) !important; padding: 8px 0; }
body.eg-spa #main .eael-infobox .eael-infobox-content,
body.eg-spa #main .eael-infobox p, body.eg-spa #main .eael-infobox a { color: var(--eg-body) !important; }
body.eg-spa #main .eael-infobox .title { color: var(--eg-ink) !important; }
body.eg-spa #main .eael-infobox i, body.eg-spa #main .wgl-info-box i { color: var(--eg-lime) !important; }

/* ---- buttons ----------------------------------------------------------- */
body.eg-spa #main .wgl-button,
body.eg-spa #main .wgl-button:after {
  background-color: var(--eg-lime) !important;
  border-color: var(--eg-lime) !important;
  border-radius: 0 !important;
}
body.eg-spa #main .wgl-button .wgl-button-text,
body.eg-spa #main .wgl-button .button-content-wrapper { color: #0A0A0A !important; }
body.eg-spa #main .wgl-button:hover,
body.eg-spa #main .wgl-button:hover:after { background-color: #FFFFFF !important; border-color: #FFFFFF !important; }
body.eg-spa #main .eg-quote-cta .wgl-button { white-space: normal !important; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  body.eg-spa #main .elementor-element-f0f6ada .dbl-title { font-size: 34px !important; }
  body.eg-spa #main .eael-advance-tabs .eael-tabs-content { padding: 26px 22px !important; }
}
@media (max-width: 720px) {
  body.eg-spa #main .elementor-element-f0f6ada .dbl-title { font-size: 28px !important; }
  body.eg-spa #main .eael-advance-tabs .eael-tabs-nav > ul li { flex: 1 1 100%; min-width: 0; }
  body.eg-spa #main .elementor-element-fc4f495 { padding: 24px 20px !important; }
  body.eg-spa #main .eg-quote-note { padding: 16px 18px !important; }
}

/* ---- /auto-spa/ hub page ---------------------------------------------
   Landing page above the four service pages. Shares this stylesheet because
   the hub is registered into eg_autospa_pages via the filter in
   eg-autospa-quote.php, so it already loads here.                        */
.eg-hub{max-width:1200px;margin:0 auto;padding:8px 0 10px}
.eg-hub__head{max-width:820px;margin:0 0 42px}
.eg-hub__eyebrow{color:#BDFF3E;font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 14px}
.eg-hub__h{color:#FFFFFF;font-size:38px;line-height:1.14;font-weight:800;margin:0 0 16px}
.eg-hub__lead{color:#C9C9C9;font-size:17px;line-height:1.72;margin:0}

.eg-hub__grid{list-style:none;margin:0 0 46px;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.eg-hub__card{background:#111111;border:1px solid rgba(255,255,255,.10);
  border-top:3px solid #BDFF3E;padding:32px 30px 28px;display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s}
.eg-hub__card:hover{border-color:rgba(189,255,62,.45);transform:translateY(-3px)}
.eg-hub__k{color:#8E8E8E;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 12px}
.eg-hub__t{margin:0 0 12px;font-size:24px;line-height:1.22;font-weight:800}
.eg-hub__t a{color:#FFFFFF;text-decoration:none}
.eg-hub__t a:hover{color:#BDFF3E}
.eg-hub__b{color:#C9C9C9;font-size:15.5px;line-height:1.7;margin:0 0 18px}
.eg-hub__pk{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.eg-hub__pk li{color:#C9C9C9;font-size:12px;font-weight:600;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.18);padding:5px 11px;white-space:nowrap}
.eg-hub__go{margin-top:auto;color:#BDFF3E;font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.eg-hub__go:hover{color:#FFFFFF}

.eg-hub__note{background:#111111;border:1px solid rgba(255,255,255,.10);
  border-left:3px solid #BDFF3E;padding:30px 32px 28px}
.eg-hub__nh{color:#BDFF3E;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 12px}
.eg-hub__nb{color:#C9C9C9;font-size:16px;line-height:1.72;margin:0 0 22px;max-width:820px}
.eg-hub__cta{margin:0}
.eg-hub__btn{display:inline-block;background:#BDFF3E;color:#0A0A0A;border:0;border-radius:0;
  padding:15px 30px;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;cursor:pointer}
.eg-hub__btn:hover{background:#FFFFFF;color:#0A0A0A}

@media (max-width:900px){
  .eg-hub__grid{grid-template-columns:1fr}
  .eg-hub__h{font-size:29px}
}