/* Endless Garage — Elementor popup styling (site-wide).

   IMPORTANT: the modal shell rule below (.elementor-popup-modal
   .dialog-widget-content) is GLOBAL — it darkens every popup on the site, not
   just the membership waitlist. The text/field rules were originally scoped to
   .elementor-3406, which meant every OTHER popup (Auto Spa, Service Vehicle,
   Vehicle Storage, Pickup Request) rendered with a black background but its
   original dark text — black-on-black and completely unreadable. If the shell
   is styled globally, the contents must be too. Keep these in lockstep.

   The popup previously rendered as a plain white box with a black button, which
   broke the black/lime treatment at the exact moment of conversion, and on a
   390px viewport its submit button sat below the fold inside a fixed-height
   modal with no scroll affordance. */

/* ---- modal shell ---- */
.elementor-popup-modal .dialog-widget-content,
.elementor-popup-modal .dialog-message {
  background-color: #0A0A0A !important;
  border-radius: 0 !important;
}
.elementor-popup-modal .dialog-widget-content {
  border: 1px solid rgba(189, 255, 62, .28) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .78) !important;
  overflow: hidden;
}
/* hairline of brand colour across the top */
.elementor-popup-modal .dialog-widget-content::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #BDFF3E 0%, rgba(189,255,62,.15) 100%);
}
.elementor-popup-modal .dialog-close-button {
  color: #BDFF3E !important;
  opacity: .85;
  transition: .3s;
}
.elementor-popup-modal .dialog-close-button:hover { opacity: 1; transform: rotate(90deg); }

/* ---- headings inside the popup ---- */
.elementor-popup-modal .dbl__subtitle {
  color: #BDFF3E !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px !important;
  font-weight: 700;
}
.elementor-popup-modal .dbl__subtitle:after { display: none !important; }  /* lime slab collided with descenders */
.elementor-popup-modal .dbl-title,
.elementor-popup-modal h1, .elementor-popup-modal h2, .elementor-popup-modal h3, .elementor-popup-modal h4 {
  color: #FFFFFF !important;
}
.elementor-popup-modal p, .elementor-popup-modal .elementor-widget-text-editor { color: #C7C7C7 !important; }

/* WPForms wraps the name field in a <fieldset>; some themes leave the default
   border/padding on it, which draws a stray box around the two name inputs. */
.elementor-popup-modal .wpforms-field fieldset {
  border: 0 !important; margin: 0 !important; padding: 0 !important; min-width: 0;
}
.elementor-popup-modal .wpforms-field legend.wpforms-field-label {
  float: none !important; width: auto !important; display: block !important; padding: 0 !important;
}

/* ---- form layout ----
   NOTE: WPForms' own stylesheets are enqueued LONG after this file (byte ~270k
   vs ~18k in the document), so any layout property here without !important is
   overridden by wpforms-full.min.css. That is what broke the name row into a
   diagonal. Layout properties below are deliberately !important. */
.elementor-popup-modal .wpforms-form { max-width: 100%; }
.elementor-popup-modal .wpforms-field { padding: 0 !important; margin: 0 0 20px !important; }

/* Two-up name row: WPForms uses percentage columns with a right margin, which
   left the second column short of the field above it. Use a real grid so the
   name inputs align exactly with email, phone and the textarea. */
.elementor-popup-modal .wpforms-field-name .wpforms-field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  max-width: 100% !important;
  float: none !important;
}
.elementor-popup-modal .wpforms-field-row-block {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Sublabels are hidden in the form config now that placeholders carry the
   meaning; belt-and-braces so FIRST/LAST can never render under the inputs. */
.elementor-popup-modal .wpforms-field-sublabel { display: none !important; }

/* ---- WPForms: dark, minimal, generous hit targets ---- */
.elementor-popup-modal .wpforms-field-label,
.elementor-popup-modal .wpforms-field-sublabel {
  color: #9A9A9A !important;
  font-size: 11px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700 !important;
  margin-bottom: 7px;
}
.elementor-popup-modal .wpforms-required-label { color: #BDFF3E !important; }

.elementor-popup-modal .wpforms-field input[type="text"],
.elementor-popup-modal .wpforms-field input[type="email"],
.elementor-popup-modal .wpforms-field input[type="tel"],
.elementor-popup-modal .wpforms-field select,
.elementor-popup-modal .wpforms-field textarea {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  height: 50px;
  padding: 0 16px !important;
  font-size: 15px !important;
  transition: border-color .25s, background .25s;
}
.elementor-popup-modal .wpforms-field textarea {
  height: auto; min-height: 104px; padding: 14px 16px !important; line-height: 1.6; resize: vertical;
}
/* every control shares one width so the column edges line up */
.elementor-popup-modal .wpforms-field input[type="text"],
.elementor-popup-modal .wpforms-field input[type="email"],
.elementor-popup-modal .wpforms-field input[type="tel"],
.elementor-popup-modal .wpforms-field textarea,
.elementor-popup-modal .wpforms-field-row-block input,
.elementor-popup-modal .wpforms-field-medium,
.elementor-popup-modal .wpforms-field-large { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

/* hide the character counter: the textarea has no limit set, so WPForms
   rendered a meaningless "0 of 0 max characters" */
.elementor-popup-modal .wpforms-field-limit-text { display: none !important; }
.elementor-popup-modal .wpforms-field input::placeholder,
.elementor-popup-modal .wpforms-field textarea::placeholder { color: #6E6E6E !important; }
.elementor-popup-modal .wpforms-field input:focus,
.elementor-popup-modal .wpforms-field select:focus,
.elementor-popup-modal .wpforms-field textarea:focus {
  border-color: #BDFF3E !important;
  background: rgba(189, 255, 62, .06) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* mark the optional field so it doesn't read as another hurdle */
.elementor-popup-modal .wpforms-field-textarea > .wpforms-field-label:after {
  content: " (optional)";
  color: #6E6E6E;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 400;
}

/* ---- submit ---- */
.elementor-popup-modal .wpforms-submit,
.elementor-popup-modal button[type="submit"] {
  width: 100%;
  background: #BDFF3E !important;
  color: #0A0A0A !important;
  border: none !important;
  border-radius: 0 !important;
  height: 54px;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s;
}
.elementor-popup-modal .wpforms-submit:hover,
.elementor-popup-modal button[type="submit"]:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}

/* ---- validation ---- */
.elementor-popup-modal .wpforms-error {
  color: #FF6B6B !important;
  font-size: 12px !important;
  letter-spacing: .04em;
  text-transform: none;
}
.elementor-popup-modal input.wpforms-error, .elementor-popup-modal select.wpforms-error {
  border-color: #FF6B6B !important;
}
.elementor-popup-modal .wpforms-confirmation-container-full {
  background: rgba(189,255,62,.08) !important;
  border: 1px solid rgba(189,255,62,.4) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}

/* ---- mobile: the submit button used to sit ~47px below the fold ---- */
@media (max-width: 767px) {
  .elementor-popup-modal .dialog-widget-content {
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 92vw !important;
  }
  .elementor-popup-modal .elementor-section > .elementor-container { padding: 0 4px; }
  .elementor-popup-modal .wpforms-field { margin-bottom: 14px !important; }
  .elementor-popup-modal .wpforms-field-name .wpforms-field-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .elementor-popup-modal .wpforms-field textarea { min-height: 84px; }
  .elementor-popup-modal .wpforms-field input,
  .elementor-popup-modal .wpforms-field select { height: 46px; }
  .elementor-popup-modal .wpforms-submit { height: 50px; }
  /* tighten vertical rhythm so the CTA is reachable without hunting */
  .elementor-popup-modal .elementor-widget:not(:last-child) { margin-bottom: 10px !important; }
}


/* ---- catch-all contents for every popup ----
   Anything not explicitly coloured inherits theme defaults that assume a LIGHT
   background, so it renders near-black on these dark modals. */
.elementor-popup-modal h1, .elementor-popup-modal h2, .elementor-popup-modal h3,
.elementor-popup-modal h4, .elementor-popup-modal h5, .elementor-popup-modal h6,
.elementor-popup-modal .dbl-title, .elementor-popup-modal .dbl__title,
.elementor-popup-modal .elementor-heading-title { color: #FFFFFF !important; }

.elementor-popup-modal p, .elementor-popup-modal li, .elementor-popup-modal span,
.elementor-popup-modal .elementor-widget-text-editor { color: #C7C7C7; }

/* eyebrow/subtitle: the theme paints a pale slab behind it via :after */
.elementor-popup-modal .dbl__subtitle { color: #BDFF3E !important; background: transparent !important; }
.elementor-popup-modal .dbl__subtitle:after,
.elementor-popup-modal .dbl__subtitle:before { display: none !important; }

/* WPForms choice lists (radio/checkbox/image) — these were black on black */
.elementor-popup-modal .wpforms-field-radio label,
.elementor-popup-modal .wpforms-field-checkbox label,
.elementor-popup-modal .wpforms-image-choices-label,
.elementor-popup-modal .wpforms-field-label-inline,
.elementor-popup-modal .wpforms-field-description { color: #EDEDED !important; }
.elementor-popup-modal .wpforms-field-radio input:checked + label,
.elementor-popup-modal .wpforms-image-choices-item.wpforms-selected label { color: #BDFF3E !important; }

/* intl-tel-input country dropdown renders on white by default */
.elementor-popup-modal .iti__country-list { background: #141414 !important; color: #EDEDED !important; }
.elementor-popup-modal .iti__country:hover { background: rgba(189,255,62,.12) !important; }
.elementor-popup-modal .iti__country-name,
.elementor-popup-modal .iti__dial-code { color: #EDEDED !important; }