/* ==========================================================================
   BPoint Home — Hero + quote form
   ========================================================================== */

.bp-home .heroA { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.bp-home .heroA .radial-glow { background: radial-gradient(820px 520px at 88% -8%, rgba(120, 140, 165, .34), transparent 60%); }
.bp-home .heroA .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bp-home .heroA::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(95deg, rgba(8, 25, 50, .97) 0%, rgba(8, 25, 50, .86) 42%, rgba(8, 25, 50, .60) 100%);
}
.bp-home .heroA .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 72px;
}
.bp-home .heroA h1 { font-size: clamp(36px,4.4vw,60px); color: #fff; font-weight: 700; line-height: 1.14; margin-top: 20px; }
.bp-home .heroA h1 .hl { color: var(--blue-bright); }
.bp-home .heroA .sub { font-size: 16px; color: #b8c6df; max-width: 540px; margin-top: 18px; }
.bp-home .heroA .sub.mt14 { margin-top: 14px; }
.bp-home .heroA .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.bp-home .heroA .hero-assure { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.bp-home .heroA .ha { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #cdd9ee; }
.bp-home .heroA .ha [data-icon] { width: 16px; height: 16px; color: var(--blue-bright); }

/* ---------- Quote card ---------- */
.bp-home .quote-card {
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--ink-text);
}
.bp-home .qc-header { background: var(--navy); padding: 24px 28px 20px; position: relative; }
.bp-home .qc-header::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .08); }
.bp-home .qc-header h3 { color: #fff; font-size: 19px; }
.bp-home .qc-sub { font-size: 13.5px; color: #9fb0c9; margin-top: 6px; }
.bp-home .qc-sub.mt9 { margin-top: 9px; }
.bp-home .qc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .1);
  color: #d0fce8;
  font-weight: 700;
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 999px;
  margin-top: 14px;
  white-space: nowrap;
}
.bp-home .qc-badge [data-icon] { width: 13px; height: 13px; }
.bp-home .qc-body { padding: 24px 28px 22px; }
.bp-home .qc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.bp-home .qc-row.full { grid-template-columns: 1fr; }
.bp-home .qc-row.mt13 { margin-top: 13px; }
.bp-home .qc-body .field label { color: var(--navy); }
.bp-home .qc-body .field .opt { color: var(--slate-3); font-weight: 400; }
.bp-home .qc-body textarea { min-height: 68px; }
.bp-home .qc-submit { padding: 0 28px 26px; }
.bp-home .qc-submit .btn { width: 100%; }
.bp-home .qc-submit .form-note { margin-top: 12px; }

.bp-home .form-ok { display: none; padding: 36px 28px; text-align: center; }
.bp-home .form-ok.show { display: block; }
.bp-home .form-ok .ok-ico {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ecfdf3;
  color: #15803d;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.bp-home .form-ok .ok-ico [data-icon] { width: 30px; height: 30px; }
.bp-home .form-ok .ok-text { color: var(--slate); margin-top: 10px; }

@media (max-width: 980px) {
  .bp-home .heroA .wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .bp-home .heroA .wrap { padding-top: 52px; padding-bottom: 60px; }
  .bp-home .qc-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gravity Forms inside the hero quote card
   The card already has its own "Get a quote" heading in .qc-header, so the
   form's own title/description are suppressed to avoid a duplicate heading.
   Fields are restyled to match the .field styles used elsewhere.
   ========================================================================== */

/* Safety net: the shortcode already passes title="false", but this keeps
   the layout correct if the form is ever re-enabled with a title. */
.bp-home .quote-card .gform_heading { display: none; }

.bp-home .quote-card .gform_wrapper {
  margin: 0;
  /* Bottom spacing is supplied by .qc-privacy below the form. */
  padding: 24px 28px 0;
}

.bp-home .quote-card .gform_wrapper form { margin: 0; }

/* Field list */
.bp-home .quote-card .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-home .quote-card .gfield {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  /* Lay each cell out as a column so the label, input and any validation
     message stack predictably. align-self:start stops a cell stretching to
     the row height, which is what made paired fields (e.g. Email + Suburb)
     misalign when only one of them showed a two-line error message. */
  display: flex;
  flex-direction: column;
  align-self: start;
}
.bp-home .quote-card .gfield > .ginput_container { margin: 0; }
.bp-home .quote-card .gfield::before,
.bp-home .quote-card .gfield::marker { content: none; }

/* Column spans follow the width set on each field in Gravity Forms:
   "Half" sits in one column, "Full" spans both. Textareas always span. */
body .bp-home .quote-card .gfield--width-half,
body .bp-home .quote-card .gform_wrapper li.gfield.gfield_error { 
    grid-column: auto;
    width: 100% !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
.bp-home .quote-card .gfield--type-textarea,
.bp-home .quote-card .gfield--type-captcha,
.bp-home .quote-card .gfield--width-full { grid-column: 1 / -1; }

/* Labels */
/* Label — wireframe: 13px, display font, 600, navy, 6px below. */
.bp-home .quote-card .gfield_label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 6px;
  display: block;
}
.bp-home .quote-card .gform-field-label__text { font: inherit; color: inherit; }
.bp-home .quote-card .gfield_required,
.bp-home .quote-card .gfield_required_asterisk {
  color: #dc2626;
  font-weight: 600;
  margin-left: 2px;
}

/* GF's sublabels and descriptions sit tight to the input. */
.bp-home .quote-card .ginput_container,
body .bp-home .gform_wrapper .top_label div.ginput_container { margin: 0 !important; }
.bp-home .quote-card .gfield_description {
  font-size: 12px;
  color: var(--slate-2);
  padding: 4px 0 0;
  margin: 0;
}

/* Inputs — mirror the .field input styles */
.bp-home .quote-card .gform_wrapper input[type="text"],
.bp-home .quote-card .gform_wrapper input[type="email"],
.bp-home .quote-card .gform_wrapper input[type="tel"],
.bp-home .quote-card .gform_wrapper input[type="number"],
.bp-home .quote-card .gform_wrapper select,
.bp-home .quote-card .gform_wrapper textarea {
  font-family: var(--body);
  font-size: 15px !important;
  /* Wireframe: 13px 14px. Flatsome sets its own padding/height on form
     controls, so this is stated explicitly rather than inherited. */
  padding: 13px 14px !important;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm) !important;
  background-color: #fff;
  color: var(--ink-text);
  transition: .15s;
  width: 100%;
  margin: 0;
  box-shadow: none;
  line-height: 1.4;
  height: auto;
  min-height: 0;
}

/* Select: Flatsome supplies the dropdown arrow as a background-image and
   removes the native one with appearance:none. Using the `background`
   shorthand above would wipe that image out, so selects keep their own
   rule: background-color only, plus room on the right for the arrow. */
.bp-home .quote-card .gform_wrapper select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f1f33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px top 50%;
  background-size: auto 16px;
  padding-right: 38px;
  cursor: pointer;
}
.bp-home .quote-card .gform_wrapper textarea { resize: vertical; height: 84px; }
.bp-home .quote-card .gform_wrapper input:focus,
.bp-home .quote-card .gform_wrapper select:focus,
.bp-home .quote-card .gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(65, 85, 107, .18);
}

/* Validation */
.bp-home .quote-card .gfield_error input,
.bp-home .quote-card .gfield_error select,
.bp-home .quote-card .gfield_error textarea { border-color: #dc2626; }
.bp-home .quote-card .gfield_validation_message,
.bp-home .quote-card .validation_message {
  font-size: 12px;
  line-height: 1.4;
  color: #dc2626;
  background: none;
  border: 0;
  padding: 4px 0 0;
  margin: 0;
  /* Messages sit below the input and must not stretch the grid row. */
  flex: 0 0 auto;
  position: relative !important;
  padding-top: 5px !important;
}
.bp-home .quote-card .gform_validation_errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-sm)  !important;;
  padding: 12px 14px;
  margin: 0 0 16px;
  box-shadow: none;
}
.bp-home .quote-card .gform_validation_errors h2 {
  font-size: 14px;
  color: #dc2626;
  margin: 0;
}

/* Submit button — reuse the site button style.
   Gravity Forms renders a <button class="gform_button button">, so Flatsome's
   own .button rules apply too; every one of them is reset here. */
.bp-home .quote-card .gform_footer {
  padding: 18px 0 0;
  margin: 5px 0 0 !important;
  display: block;
}
.bp-home .quote-card .gform_footer .gform_button,
.bp-home .quote-card .gform_footer button[type="submit"],
.bp-home .quote-card .gform_footer input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: var(--r)  !important;
  border: 1.5px solid transparent;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  transition: .18s ease;
  /* Reset Flatsome's .button base (min-height:2.5em, line-height:2.4em,
     padding:0 1.2em, margin-right:1em, text-transform). */
  min-height: 0;
  min-width: 0;
  margin: 0;
  text-transform: none;
  box-shadow: 0 8px 20px -8px rgba(15, 31, 51, .4);
  text-shadow: none;
}
.bp-home .quote-card .gform_footer .gform_button:hover,
.bp-home .quote-card .gform_footer button[type="submit"]:hover,
.bp-home .quote-card .gform_footer input[type="submit"]:hover {
  background: var(--blue-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(15, 31, 51, .5);
}

/* Privacy note under the form */
.bp-home .quote-card .qc-privacy { padding: 15px 28px 26px; }
.bp-home .quote-card .qc-privacy .form-note { margin: 0; }

/* Confirmation message after submit */
.bp-home .quote-card .gform_confirmation_message {
  padding: 32px 28px;
  text-align: center;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .bp-home .quote-card .gform_fields { grid-template-columns: 1fr; }
  .bp-home .quote-card .gform_wrapper { padding: 20px 18px 0; }
  .bp-home .quote-card .qc-privacy { padding: 10px 18px 22px; }
}