/* ==========================================================================
   Endless Vehicle Storage — page 3289
   Everything is scoped to body.eg-storage, added by eg-storage-assets.php.

   The page was the last significant one still on the theme's white treatment.
   Tokens, panel treatment, hairline rules, eyebrow scale and button idiom are
   lifted from eg-account.css / eg-fleet.css so this reads as the same system
   rather than a fourth dialect.

   Colour rules carry !important because the theme, WooCommerce and Elementor all
   enqueue later in the document than the child theme; the sheet is also enqueued
   at priority 9999 so it prints last, but the widget-level Elementor CSS is
   generated per element ID and still wins on specificity without it.
   ========================================================================== */

body.eg-storage {
  --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;
}

/* ---- page shell -------------------------------------------------------- */
body.eg-storage,
body.eg-storage #main,
body.eg-storage #main-content,
body.eg-storage .site-main,
body.eg-storage .page-content {
  background: var(--eg-bg) !important;
}
/* Elementor paints section backgrounds white on this page; clear them so the
   shell shows through, then re-apply panel colour only where we want it. */
body.eg-storage #main .elementor-section,
body.eg-storage #main .elementor-container,
body.eg-storage #main .elementor-column,
body.eg-storage #main .elementor-widget-wrap {
  background-color: transparent !important;
}

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

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

/* The theme's eyebrow paints a pale slab behind itself via :after. */
body.eg-storage #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-storage #main .dbl__subtitle:after,
body.eg-storage #main .dbl__subtitle:before { display: none !important; }

body.eg-storage #main a { color: var(--eg-lime); }

/* ---- the theme's info boxes become panels ------------------------------ */
body.eg-storage #main .wgl-info-box,
body.eg-storage #main .eael-infobox,
body.eg-storage #main .info-box_wrapper {
  background: var(--eg-panel) !important;
  border: 1px solid var(--eg-line) !important;
  border-radius: 0 !important;
  padding: 26px 24px !important;
  height: 100%;
}
body.eg-storage #main .wgl-info-box .info-box_title,
body.eg-storage #main .eael-infobox .title { color: var(--eg-ink) !important; }
body.eg-storage #main .wgl-info-box p,
body.eg-storage #main .eael-infobox p { color: var(--eg-body) !important; }

/* ---- shared button idiom ----------------------------------------------- */
body.eg-storage .eg-st-btn {
  display: inline-block;
  padding: 15px 30px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background-color .25s, color .25s, border-color .25s;
}
body.eg-storage .eg-st-btn--primary {
  background: var(--eg-lime) !important;
  color: #0A0A0A !important;
  border-color: var(--eg-lime) !important;
}
body.eg-storage .eg-st-btn--primary:hover {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0A0A0A !important;
}
body.eg-storage .eg-st-btn--ghost {
  background: transparent !important;
  color: var(--eg-ink) !important;
  border-color: var(--eg-line-2) !important;
}
body.eg-storage .eg-st-btn--ghost:hover { border-color: var(--eg-lime) !important; color: var(--eg-lime) !important; }

/* The theme's own buttons already on the page. It paints the fill with
   .wgl-button:after { background-color: inherit }, so colouring only the
   element leaves the visible fill unchanged — both must be set. */
body.eg-storage #main .wgl-button,
body.eg-storage #main .wgl-button:after {
  background-color: var(--eg-lime) !important;
  border-color: var(--eg-lime) !important;
  border-radius: 0 !important;
}
body.eg-storage #main .wgl-button .wgl-button-text,
body.eg-storage #main .wgl-button .button-content-wrapper { color: #0A0A0A !important; }
body.eg-storage #main .wgl-button:hover,
body.eg-storage #main .wgl-button:hover:after { background-color: #FFFFFF !important; border-color: #FFFFFF !important; }

body.eg-storage .eg-st-eyebrow {
  color: var(--eg-lime) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* ==========================================================================
   The offer block
   ========================================================================== */
body.eg-storage .eg-st-offer {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  background: var(--eg-panel);
  border: 1px solid var(--eg-line);
  border-top: 3px solid var(--eg-lime);
  padding: 44px 40px;
  margin: 0 0 10px;
}
body.eg-storage .eg-st-offer__head { min-width: 0; }
body.eg-storage .eg-st-offer__price {
  margin: 0 0 10px !important;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
body.eg-storage .eg-st-offer__amount {
  font-size: 68px;
  font-weight: 800;
  color: var(--eg-lime) !important;
  letter-spacing: -.02em;
}
body.eg-storage .eg-st-offer__per {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eg-mute) !important;
}
body.eg-storage .eg-st-offer__terms {
  color: var(--eg-ink) !important;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px !important;
  padding-top: 18px;
  border-top: 1px solid var(--eg-line);
}
body.eg-storage .eg-st-offer__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--eg-line);
  border: 1px solid var(--eg-line);
}
body.eg-storage .eg-st-offer__item {
  background: var(--eg-panel-2);
  padding: 20px 22px;
  margin: 0 !important;
  list-style: none !important;
}
body.eg-storage .eg-st-offer__item-t {
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--eg-ink) !important;
  margin: 0 0 7px !important;
}
body.eg-storage .eg-st-offer__item-b {
  font-size: 13.5px !important;
  line-height: 1.62;
  color: var(--eg-body) !important;
  margin: 0 !important;
}

/* ==========================================================================
   How it works
   ========================================================================== */
body.eg-storage .eg-st-how {
  border-top: 1px solid var(--eg-line);
  padding-top: 44px;
  margin-top: 44px;
}
body.eg-storage .eg-st-how__h {
  font-size: 34px !important;
  line-height: 1.18;
  margin: 0 0 34px !important;
  color: var(--eg-ink) !important;
}
body.eg-storage .eg-st-how__list {
  list-style: none !important;
  margin: 0 0 34px !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--eg-line);
  border: 1px solid var(--eg-line);
}
body.eg-storage .eg-st-how__step {
  background: var(--eg-panel);
  padding: 26px 24px;
  margin: 0 !important;
  list-style: none !important;
}
body.eg-storage .eg-st-how__n {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--eg-lime) !important;
  margin-bottom: 12px;
}
body.eg-storage .eg-st-how__t {
  font-size: 17px !important;
  margin: 0 0 9px !important;
  color: var(--eg-ink) !important;
}
body.eg-storage .eg-st-how__b {
  font-size: 14px !important;
  line-height: 1.65;
  color: var(--eg-body) !important;
  margin: 0 !important;
}
body.eg-storage .eg-st-how__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Form section at the foot of the page
   ========================================================================== */
body.eg-storage #main .wpforms-container,
body.eg-storage #main .wpforms-form { max-width: 100%; }
body.eg-storage #main .wpforms-field-label,
body.eg-storage #main .wpforms-field-sublabel { color: var(--eg-mute) !important; }
body.eg-storage #main .wpforms-field input[type="text"],
body.eg-storage #main .wpforms-field input[type="email"],
body.eg-storage #main .wpforms-field input[type="tel"],
body.eg-storage #main .wpforms-field select,
body.eg-storage #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-storage #main .wpforms-field input::placeholder,
body.eg-storage #main .wpforms-field textarea::placeholder { color: #6E6E6E !important; }
body.eg-storage #main .wpforms-field-radio label,
body.eg-storage #main .wpforms-field-checkbox label,
body.eg-storage #main .wpforms-field-label-inline,
body.eg-storage #main .wpforms-field-description { color: #EDEDED !important; }
body.eg-storage #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-storage #main .wpforms-submit:hover { background: #FFFFFF !important; }

/* The contact details block beside the form. */
body.eg-storage #main .eael-infobox .infobox-icon-wrap i,
body.eg-storage #main .wgl-info-box .info-box_icon i { color: var(--eg-lime) !important; }

/* ==========================================================================
   Overflow guard
   The testimonial carousel used to push document scrollWidth to 1530px inside a
   1440px viewport, and 41 elements past the right edge at mobile. That section is
   removed, but any slider left on the page must never widen the document again.
   ========================================================================== */
body.eg-storage { overflow-x: hidden; }
body.eg-storage #main .slick-list,
body.eg-storage #main .slick-slider { max-width: 100% !important; overflow: hidden !important; }
body.eg-storage #main img { max-width: 100%; height: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  body.eg-storage .eg-st-offer { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 34px 28px; }
  body.eg-storage .eg-st-how__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body.eg-storage .eg-st-offer { padding: 28px 20px; }
  body.eg-storage .eg-st-offer__amount { font-size: 52px; }
  body.eg-storage .eg-st-offer__list { grid-template-columns: minmax(0, 1fr); }
  body.eg-storage .eg-st-how__list { grid-template-columns: minmax(0, 1fr); }
  body.eg-storage .eg-st-how__h { font-size: 26px !important; }
  body.eg-storage .eg-st-btn { display: block; text-align: center; }
  body.eg-storage .eg-st-how__cta { flex-direction: column; }
}

/* ==========================================================================
   Corrections after first render
   ========================================================================== */

/* 1. The four "Why Choose" boxes carry their panel background on the COLUMN
      (data-settings background_background:classic), and the blanket
      transparency above stripped it, leaving bare text on black. Put the panel
      back on the populated wrapper so the boxes read as cards again. */
body.eg-storage #main .elementor-element-dccaf21 .elementor-widget-wrap.elementor-element-populated {
  background-color: var(--eg-panel) !important;
  border: 1px solid var(--eg-line) !important;
  padding: 30px 26px !important;
  height: 100%;
}
body.eg-storage #main .elementor-element-dccaf21 .elementor-column { display: flex; }
body.eg-storage #main .elementor-element-dccaf21 h3,
body.eg-storage #main .elementor-element-dccaf21 .elementor-heading-title {
  color: var(--eg-lime) !important;
  font-size: 19px !important;
  line-height: 1.25;
  margin-bottom: 12px !important;
}

/* The four repeated "GET STARTED" links rendered as bare lime text. Give them a
   button affordance so they read as the action they are. */
body.eg-storage #main .elementor-element-dccaf21 .elementor-widget-button a,
body.eg-storage #main .elementor-element-dccaf21 a.elementor-button {
  display: inline-block;
  padding: 11px 20px !important;
  border: 1px solid var(--eg-line-2) !important;
  background: transparent !important;
  color: var(--eg-ink) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 0 !important;
}
body.eg-storage #main .elementor-element-dccaf21 .elementor-widget-button a:hover {
  border-color: var(--eg-lime) !important;
  color: var(--eg-lime) !important;
}

/* 2. The how-it-works <ol> printed the browser's own 1. 2. 3. markers alongside
      the designed 01/02/03. list-style alone was not enough — suppress the
      marker pseudo-element explicitly, and any counter the theme may attach. */
body.eg-storage .eg-st-how__list,
body.eg-storage .eg-st-how__step {
  list-style: none !important;
  list-style-type: none !important;
}
body.eg-storage .eg-st-how__step::marker { content: "" !important; }
body.eg-storage .eg-st-how__step::before { content: none !important; display: none !important; }
body.eg-storage .eg-st-offer__item::marker { content: "" !important; }
body.eg-storage .eg-st-offer__item::before { content: none !important; display: none !important; }

/* ==========================================================================
   Contrast fixes — measured, not guessed
   A programmatic sweep found 13 leaf text nodes rendering rgb(0,0,0) on the
   rgb(10,10,10) page: the theme's working-hours widget and WPForms' image-choice
   labels. Both set their own colour, so they never inherited the page defaults.
   This is the same black-on-black class of defect that has come up repeatedly on
   this site — anything that colours itself needs naming explicitly.
   ========================================================================== */

/* Theme working-hours widget in the contact block. */
body.eg-storage #main .wgl-working-hours,
body.eg-storage #main .wgl-working-hours *,
body.eg-storage #main .working-item,
body.eg-storage #main .working-item_hours { color: var(--eg-body) !important; }
body.eg-storage #main .working-item_day { color: var(--eg-ink) !important; }
body.eg-storage #main .working-item { border-bottom: 1px solid var(--eg-line) !important; padding: 8px 0; }

/* WPForms image-choice labels — the text sits in nested spans that carry their
   own colour, so targeting the label alone was not enough. */
body.eg-storage #main .wpforms-image-choices-item,
body.eg-storage #main .wpforms-image-choices-item label,
body.eg-storage #main .wpforms-image-choices-item label *,
body.eg-storage #main .wpforms-image-choices-label,
body.eg-storage #main .wpforms-field-label-inline,
body.eg-storage #main .wpforms-field-label-inline * { color: #EDEDED !important; }
body.eg-storage #main .wpforms-image-choices-item.wpforms-selected label,
body.eg-storage #main .wpforms-image-choices-item.wpforms-selected label * { color: var(--eg-lime) !important; }

/* The contact block's address/email/phone info boxes. */
body.eg-storage #main .eael-infobox .eael-infobox-content,
body.eg-storage #main .eael-infobox p,
body.eg-storage #main .eael-infobox a,
body.eg-storage #main .info-box_description { color: var(--eg-body) !important; }
body.eg-storage #main .eael-infobox .title,
body.eg-storage #main .eael-infobox h1, body.eg-storage #main .eael-infobox h2,
body.eg-storage #main .eael-infobox h3, body.eg-storage #main .eael-infobox h4 { color: var(--eg-ink) !important; }

/* Catch-all: anything the theme leaves uncoloured inherits a readable default
   rather than the near-black it assumes a white page would provide. Deliberately
   WITHOUT !important so the explicit rules above still win. */
body.eg-storage #main,
body.eg-storage #main div,
body.eg-storage #main span,
body.eg-storage #main label,
body.eg-storage #main strong { color: var(--eg-body); }

/* The hero's two theme buttons sit in inline-width widget wrappers that overlap
   once the row is narrower than the pair. Let them wrap with a real gap. */
body.eg-storage #main .elementor-element-831966b .elementor-widget-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
body.eg-storage #main .elementor-element-831966b .elementor-widget-wgl-double-headings,
body.eg-storage #main .elementor-element-831966b .elementor-widget-text-editor { flex: 1 1 100%; }
body.eg-storage #main .elementor-element-831966b .elementor-widget-wgl-button { margin: 0 !important; }
@media (max-width: 560px) {
  body.eg-storage #main .elementor-element-831966b .elementor-widget-wgl-button { flex: 1 1 100%; }
  body.eg-storage #main .elementor-element-831966b .wgl-button { width: 100%; text-align: center; }
}