/* ============================================================
   Ultimate Bathrooms — Gravity Forms styling
   Matches the landing page navy/silver/paper palette and the
   Manrope (display) + Inter (body) typography pairing.
   ============================================================ */

/* ---------- Spacing utility classes ---------- */
.margin-bottom-xs { margin-bottom: 10px; }
.margin-bottom-s  { margin-bottom: 20px; }
.margin-bottom-m  { margin-bottom: 30px; }
.margin-bottom-l  { margin-bottom: 40px; }
.margin-bottom-xl { margin-bottom: 50px; }

/* ---------- Footer alignment ---------- */
.gform_wrapper.gravity-theme .gform_footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Submit button ----------
   Matches site .btn-secondary + .btn-large styling.
   Navy #243d5b, 10px vertical padding, Bricks defaults for horizontal
   padding/font-size on desktop, with the mobile overrides at 767px. */
body .gform_wrapper .gform_footer input[type=submit] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #243d5b;
  color: #ffffff;
  border: 1px solid #243d5b;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  line-height: 1.4;
  font-size: 17px;
  text-transform: uppercase;
  font-family: inherit;
   padding-left: 25px;
        padding-right: 25px;
        letter-spacing: 1.2px;
    }
}
}
body .gform_wrapper .gform_footer input[type=submit]:hover {
  background-color: #1a2d44;
  border-color: #1a2d44;
}
body .gform_wrapper .gform_footer input[type=submit]:focus {
  outline: 2px solid #6E7886;
  outline-offset: 3px;
}
@media (max-width: 767px) {
  body .gform_wrapper .gform_footer input[type=submit] {
    font-size: 16px;
    padding-left: 25px;
    padding-right: 25px;
  }
}

/* ---------- Reset Webkit appearance on inputs ---------- */
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
  -webkit-appearance: none;
  border-radius: 0;
}

/* ---------- Placeholder colour ---------- */
::-webkit-input-placeholder { color: #9CA3AF !important; }
:-moz-placeholder          { opacity: 1; color: #9CA3AF !important; }
::-moz-placeholder         { opacity: 1; color: #9CA3AF !important; }
:-ms-input-placeholder     { color: #9CA3AF !important; }
input:-moz-placeholder     { color: #9CA3AF !important; }

/* ---------- Hide the "Required *" legend ---------- */
p.gform_required_legend {
  display: none;
}

/* ---------- Text inputs, textarea, select ----------
   Square corners, hairline border in navy at low opacity to match
   the landing page's --hairline pattern. Inter font, slightly tighter
   padding than the original. */
body .gform_wrapper input[type=text],
body .gform_wrapper input[type=email],
body .gform_wrapper input[type=tel],
body .gform_wrapper input[type=number],
body .gform_wrapper input[type=url],
body .gform_wrapper textarea,
body .gform_wrapper select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(36, 61, 91, 0.18);   /* --hairline, slightly stronger */
  border-radius: 0;                            /* Square */
  padding: 14px 16px;
  font-size: 15px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1A1A1A;                              /* --ink */
  line-height: 1.4;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

body .gform_wrapper textarea {
  min-height: 140px;
  resize: vertical;
}

/* ---------- Focus state ----------
   Navy border, subtle silver focus ring. No red ring. */
body .gform_wrapper input[type=text]:focus,
body .gform_wrapper input[type=email]:focus,
body .gform_wrapper input[type=tel]:focus,
body .gform_wrapper input[type=number]:focus,
body .gform_wrapper input[type=url]:focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper select:focus {
  border-color: #243d5b;                        /* --navy */
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 205, 211, 0.4); /* silver-bright at 40% */
}

/* ---------- Placeholder in inputs (modern selector) ---------- */
body .gform_wrapper ::placeholder {
  color: #9CA3AF;
  opacity: 1;
}

/* ---------- Field labels ----------
   Small caps brass-coloured labels match the eyebrow pattern from
   the landing page rather than bold sentence-case labels. */
body .gform_wrapper .gfield_label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #5A5A5A;                              /* --ink-muted */
  display: block;
}

/* Required asterisk - keep subtle */
body .gform_wrapper .gfield_required {
  color: #6E7886;                              /* --brass */
  margin-left: 4px;
}

/* ---------- Field spacing ---------- */
body .gform_wrapper .gfield {
  margin-bottom: 20px;
}

/* ---------- Description text under labels ---------- */
body .gform_wrapper .gfield_description {
  font-size: 13px;
  color: #5A5A5A;
  margin-top: 6px;
  line-height: 1.5;
}

/* ---------- Select dropdown arrow ----------
   Native select arrows look inconsistent across browsers. Replace
   with a custom chevron in navy. */
body .gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d5b' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 44px;
}

/* ---------- Checkboxes and radios ----------
   Custom-styled to match the navy palette. */
body .gform_wrapper .gfield_checkbox label,
body .gform_wrapper .gfield_radio label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: #1A1A1A;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 16px;
}

body .gform_wrapper input[type="checkbox"],
body .gform_wrapper input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #243d5b;                       /* --navy */
  cursor: pointer;
}

/* ---------- Error styling ----------
   Subtle: navy-leaning rather than alarming red. The form lives on
   a calm luxury site; aggressive error states feel jarring. Keep a
   small accent of warning red only for the error message itself. */
body .gform_wrapper .gfield_error input,
body .gform_wrapper .gfield_error textarea,
body .gform_wrapper .gfield_error select {
  border-color: #C0392B;
  background-color: #FFF8F7;
}

body .gform_wrapper .validation_message,
body .gform_wrapper .gfield_validation_message {
  font-family: 'Inter', sans-serif;
  color: #C0392B;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 400;
}

/* Form-level error banner */
body .gform_wrapper .gform_validation_errors {
  background: #FFF8F7;
  border: 1px solid #C0392B;
  border-radius: 0;
  padding: 16px 20px;
  margin-bottom: 24px;
}
body .gform_wrapper .gform_validation_errors h2 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #C0392B;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
body .gform_wrapper .gform_validation_errors a {
  color: #C0392B;
  text-decoration: underline;
}

/* ---------- Confirmation message after submit ---------- */
body .gform_confirmation_message {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1A1A1A;
  background: #F4F1EC;                         /* --bone */
  border-left: 3px solid #243d5b;              /* --navy */
  padding: 24px 28px;
}

/* ---------- Form 1 specific overrides ----------
   These were in the original CSS - kept verbatim. */
body #gform_wrapper_1 .gform_fields {
  row-gap: 0 !important;
  grid-row-gap: 0 !important;
  grid-column-gap: 3% !important;
}
body #gform_wrapper_1.gravity-theme .gform_footer,
body #gform_wrapper_1.gravity-theme .gform_page_footer {
  padding: 0 !important;
}

/* ---------- Multi-column field width fixes ----------
   When fields are placed side-by-side (half-width), Gravity uses
   gfield--width-half etc. Make sure they respect the column gap. */
body .gform_wrapper .gfield--width-half,
body .gform_wrapper .gfield--width-third,
body .gform_wrapper .gfield--width-quarter {
  margin-bottom: 20px;
}

/* ---------- Honeypot / spam protection - keep hidden ---------- */
body .gform_wrapper .gform_validation_container,
body .gform_wrapper .gform_fields .gform_validation_container,
body .gform_wrapper li.gform_validation_container {
  display: none !important;
  position: absolute !important;
  left: -9000px;
}

/* ---------- Progress indicator (multi-step forms) ----------
   Only relevant if the form has multiple pages, but worth styling. */
body .gform_wrapper .gf_progressbar_wrapper {
  margin-bottom: 32px;
}
body .gform_wrapper .gf_progressbar {
  background: rgba(36, 61, 91, 0.08);
  height: 4px;
  border-radius: 0;
  overflow: hidden;
}
body .gform_wrapper .gf_progressbar_percentage {
  background: #243d5b;
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 0;
}
body .gform_wrapper .gf_progressbar_title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A5A5A;
  font-weight: 500;
  margin-bottom: 10px;
}

/* ---------- Section breaks ---------- */
body .gform_wrapper .gsection {
  border-bottom: 1px solid rgba(36, 61, 91, 0.12);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
body .gform_wrapper .gsection_title {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #243d5b;
  margin-bottom: 4px;
}
body .gform_wrapper .gsection_description {
  font-size: 14px;
  color: #5A5A5A;
  line-height: 1.6;
}