/* =============================================================================
   BOON AESTHETICS - OFFER ENQUIRY FORM MODAL
   offers/assets/offers-form.css

   The panel an offer's form opens in. Rendered into wp_footer by
   class-offers-form.php, outside every card, because a card with overflow:hidden
   would clip it and a card with a hover transform would trap a position:fixed
   child inside itself.

   DELIBERATELY LIGHT ON THE FORM ITSELF. Gravity Forms brings its own styling and
   the site's theme almost certainly adjusts it further. Restyling fields here
   would mean maintaining a third opinion about how a Boon form looks, and it
   would drift the moment anyone touches the theme. This sheet owns the panel, the
   backdrop and the heading, and lets the form be the form.

   The two exceptions are the submit button and the panel padding, both of which
   look wrong at default inside a narrow modal.
   ============================================================================= */

.boon-formlb {
  position: fixed;
  inset: 0;
  z-index: 99998;   /* just under the video lightbox; the two never coexist */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px;
  overflow-y: auto;
  background: rgba(39, 39, 39, 0.62);
  animation: boon-formlb-fade 0.18s ease;
}

.boon-formlb[hidden] { display: none; }

@keyframes boon-formlb-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .boon-formlb { animation: none; }
}

.boon-formlb__panel {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
  padding: 32px 32px 34px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(39, 39, 39, 0.55);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #272727;
}

.boon-formlb__close {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  color: #5C5C5C;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.boon-formlb__close:hover,
.boon-formlb__close:focus-visible {
  background: #FEE5DB;
  color: #272727;
}

.boon-formlb__close:focus-visible {
  outline: 2px solid #272727;
  outline-offset: 2px;
}

/* Right margin clears the close button, which sits absolutely in the corner. */
.boon-formlb__title {
  margin: 0 48px 6px 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  /* 40px on desktop, scaling down rather than wrapping to three lines on a
     phone. The floor is what a modal heading can afford at 375px wide. */
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #272727;
  text-wrap: balance;
}

/* A rule rather than a gap, so the heading reads as the panel's own and not as
   the first thing in the form. */
.boon-formlb__body {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #FEE5DB;
}

/* --------------------------------------------------------------------------
   THE TWO GRAVITY FORMS OVERRIDES

   Scoped inside .boon-formlb so nothing here can reach a form anywhere else on
   the site. If a third override becomes necessary, that is a sign the form
   should be styled in the theme instead.
-------------------------------------------------------------------------- */

/* Full width submit, matching the site's button shape. Gravity's default is a
   small left-aligned button that looks stranded at the bottom of a modal. */
.boon-formlb .gform_footer input[type="submit"],
.boon-formlb .gform_footer button[type="submit"] {
  width: 100% !important;
  padding: 14px 22px !important;
  border: 1px solid #F9A981 !important;
  border-radius: 5px !important;
  background: #F9A981 !important;
  color: #272727 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.boon-formlb .gform_footer input[type="submit"]:hover,
.boon-formlb .gform_footer button[type="submit"]:hover {
  background: #DD9D81 !important;
  border-color: #272727 !important;
}

/* Gravity pads its wrapper for a full-width page context. Inside a modal that
   pushes the first field a long way from the heading. */
.boon-formlb .gform_wrapper { margin: 0 !important; }
.boon-formlb .gform_wrapper form { margin: 0 !important; }

/* The consent checkbox on its own line above the wording, rather than beside it.
   Gravity marks the label gform-field-label--type-inline, so it intends them on
   one line, but something in the stack is rendering the label as a block and it
   drops underneath. A tick floating above a paragraph does not read as belonging
   to it, which for a consent control is the one thing it has to do.

   The two gform_hidden inputs in this container are display:none, so they never
   become flex items and cannot disturb the row. */
.boon-formlb .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.boon-formlb .ginput_container_consent input[type="checkbox"] {
  flex: 0 0 auto;
  /* Optical, not mathematical: aligns the box with the first line of text
     rather than the top of the label's line box. */
  margin: 3px 0 0;
}

.boon-formlb .gfield_consent_label {
  display: inline;
  margin: 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   MOBILE
-------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .boon-formlb { padding: 16px 12px; }

  .boon-formlb__panel {
    padding: 26px 20px 28px;
    border-radius: 16px;
  }

  /* No font-size override here: the clamp() on .boon-formlb__title already
     scales it, and a fixed value would fight it. */
}