/* ==========================================================================
   YMCA SA — MyWaitlist Lead Form (Widget 1163) custom styles
   Deploy to: form.ymcasa-dns.com/elcform.css
   ========================================================================== */

/* Font stack */
body, input, select, textarea, button, .btn {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Container resets */
#enquiry-widget.container {
  padding: 0 !important;
  width: 100% !important;
}
#enquiry-widget form {
  padding: 0 !important;
  margin: 0 !important;
}

/* Two-column grid on the main form wrapper */
form > div.col-xs-6.col-md-offset-4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 12px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
  padding: 0 !important;
}

/* Neutralise inner Bootstrap column widths so each field fills its grid cell */
form > div.col-xs-6 > div.row > div.col-xs-6,
form > div.col-xs-6 > div.row > div.col-xs-4,
form > div.col-xs-6 > div.row > div[class*="col-"] {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* Row resets */
form > div.col-xs-6 > div.row {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide rows that contain no visible form control.
   Replaces :empty (which fails due to whitespace text nodes inside
   Razor-rendered empty row wrappers on MyWaitlist). */
form > div.col-xs-6 > div.row:not(:has(input:not([type="hidden"]), select, textarea, button)) {
  display: none !important;
}

/* Remove the spacer <br> above the button */
form > div.col-xs-6 > br {
  display: none !important;
}

/* Full-width rows for Comments and the submit button */
form > div.col-xs-6 > div.row:has(#Comments) {
  grid-column: 1 / -1 !important;
}
form > div.col-xs-6 > div.row:has(#next) {
  grid-column: 1 / -1 !important;
}

/* Form group reset (needed for absolutely positioned icon) */
#enquiry-widget .form-group {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}
#enquiry-widget .form-control {
  margin-bottom: 0 !important;
}

/* Text inputs and textarea */
#enquiry-widget input[type="text"],
#enquiry-widget input[type="email"],
#enquiry-widget input[type="tel"],
#enquiry-widget input[type="date"],
#enquiry-widget input[type="number"],
#enquiry-widget textarea {
  border: 1.5px solid #d0d0d0 !important;
  border-radius: 4px !important;
  padding: 12px 14px 12px 40px !important;
  font-size: 15px !important;
  color: #333333 !important;
  background-color: #ffffff !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.5 !important;
}

/* Select (extra right padding for native arrow, matching left padding for icon) */
#enquiry-widget select,
select.form-control {
  border: 1.5px solid #d0d0d0 !important;
  border-radius: 4px !important;
  padding: 12px 30px 12px 40px !important;
  font-size: 15px !important;
  color: #333333 !important;
  background-color: #ffffff !important;
  width: 100% !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Select placeholder colour — match text input placeholders.
   MyWaitlist applies class "not_chosen" to the select until a real
   option is picked, then removes it so the darker #333 takes over. */
#enquiry-widget select.not_chosen {
  color: #999999 !important;
}
#enquiry-widget select.not_chosen option:first-child {
  color: #999999 !important;
}
#enquiry-widget select option {
  color: #333333 !important;
}

/* Focus state — YMCA red */
#enquiry-widget input:focus,
#enquiry-widget select:focus,
#enquiry-widget textarea:focus {
  border-color: #ED1C24 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(237, 28, 36, 0.1) !important;
}

/* Textarea sizing */
#enquiry-widget textarea {
  min-height: 56px !important;
  max-height: 90px !important;
  resize: vertical !important;
}

/* Placeholder text */
#enquiry-widget ::placeholder {
  color: #999999 !important;
  font-size: 14px !important;
}

/* Left-side field icons (MyWaitlist's img.adjust) */
#enquiry-widget img.adjust {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Primary button */
#enquiry-widget .btn,
#enquiry-widget .btn-primary {
  background-color: #ED1C24 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 16px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  width: 100% !important;
  cursor: pointer !important;
  margin-top: 4px !important;
  display: block !important;
}
#enquiry-widget .btn:hover {
  background-color: #c8101a !important;
}

/* Mobile: stack to single column below 600px */
@media (max-width: 600px) {
  form > div.col-xs-6.col-md-offset-4 {
    grid-template-columns: 1fr !important;
  }
  form > div.col-xs-6 > div.row:has(#Comments),
  form > div.col-xs-6 > div.row:has(#next) {
    grid-column: 1 / -1 !important;
  }
}