/* ===========================================================================
   Mirna Luka — Fluent Forms bridge.

   The two forms (see mu-plugins/mirna-forms.php) are ports of markup this site
   already had a design for, so this file adds as little as possible:

     - every field carries the ORIGINAL container class ("contact-formfield",
       "rd-form__row"), so the purchased template's stylesheet and the theme's
       own rules keep styling them exactly as they styled the static markup;
     - the submit button carries `.rr-btn-primary.ml-btn`, so it IS the site's
       button — the template's letter-morph JS finds it and splits the label;
     - what remains here is the layout Fluent Forms has no idea about (the
       contact page's two-column grid), the controls the template never had to
       cover (textarea, FF's own labels), and undoing FF's skin.

   Loaded after fluentform-public-default.css on purpose: FF's `.ff-default
   .ff-el-form-control` sits at the same specificity as the template's
   `.contact-area-contact-page .contact-formfield input`, so source order is what
   decides the tie. See ml_page_has_form() / the enqueue in functions.php.
   =========================================================================== */

/* Fluent Forms wraps the fields in a <fieldset> with a visually-hidden <legend>.
   The legend is taken out of flow so it can never occupy a grid cell. */
.ml-ff .frm-fluent-form legend.ff_screen_reader_title {
  position: absolute;
}

/* FF's own vertical rhythm — both layouts below set their own spacing. */
.ml-ff .frm-fluent-form .ff-el-group {
  margin-bottom: 0;
}

/* Undo the FF skin on every control: the theme owns the look. */
.ml-ff .frm-fluent-form .ff-el-form-control {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  font-family: inherit;
  line-height: inherit;
  max-width: 100%;
}
.ml-ff .frm-fluent-form .ff-el-form-control:focus {
  box-shadow: none;
  outline: none;
}

/* ---------------------------------------------------------------------------
   CONTACT PAGE — #contact__form (contact/page.tsx)

   The original markup was `.contact-formwrap`, a two-column grid with the
   message spanning both. FF has no wrapper of its own to hang that on, so the
   grid goes on the fieldset, which is the element that actually holds the
   fields. Gaps track the template's own responsive ladder (style.css).
   --------------------------------------------------------------------------- */
.ml-ff--contact .frm-fluent-form fieldset {
  display: grid;
  gap: 65px 95px;
  grid-template-columns: repeat(2, 1fr);
}
.ml-ff--contact .frm-fluent-form .contact-formfield.message,
.ml-ff--contact .frm-fluent-form .ff_submit_btn_wrapper {
  grid-column: span 2;
}

@media only screen and (max-width: 1399px) {
  .ml-ff--contact .frm-fluent-form fieldset { gap: 40px 40px; }
}
@media only screen and (max-width: 1199px) {
  .ml-ff--contact .frm-fluent-form fieldset { gap: 30px 30px; }
}
@media only screen and (max-width: 767px) {
  .ml-ff--contact .frm-fluent-form fieldset { grid-template-columns: repeat(1, 1fr); }
  .ml-ff--contact .frm-fluent-form .contact-formfield.message,
  .ml-ff--contact .frm-fluent-form .ff_submit_btn_wrapper { grid-column: auto; }
}

/* The template styled `input` only — the message is a textarea, so it needs the
   same underline treatment stated once here. */
.ml-ff--contact .frm-fluent-form .ff-el-form-control {
  height: 40px;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.54px;
  color: var(--primary);
  border-bottom: 1px solid var(--primary);
  transition: all 0.5s;
}
.ml-ff--contact .frm-fluent-form textarea.ff-el-form-control {
  height: auto;
  min-height: 80px;
  padding-bottom: 10px;
  line-height: 1.5;
  resize: vertical;
}
.ml-ff--contact .frm-fluent-form .ff-el-form-control::placeholder {
  color: var(--primary);
  opacity: 1;
}

/* The template bundle swaps the <select> for its own .nice-select markup, which
   style.css already dresses. Only the hidden original needs saying. */
.ml-ff--contact .frm-fluent-form select.ff-el-form-control {
  height: 40px;
}

/* The submit sits in .submit-btn, which the template already spaces; FF's own
   left-align class would otherwise add nothing but confusion. */
.ml-ff--contact .frm-fluent-form .ff_submit_btn_wrapper {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   BOOKING CARD — the residence rail (BookingCard.tsx)

   The card is a dark island (.theme-always-dark), the fields carry
   .rd-field__input, and the wrapper carries .rd-form — so `.rd-form
   .rd-field__input` in ml-theme.css already owns them, down to the masked
   Phosphor glyph on the native date picker. What is left is FF's label block,
   which stands in for the old <span class="rd-field__label">.
   --------------------------------------------------------------------------- */
.ml-ff--booking .frm-fluent-form .ff-el-group {
  margin-bottom: 14px;
}
.ml-ff--booking .frm-fluent-form .ff-el-input--label {
  margin-bottom: 6px;
}
.ml-ff--booking .frm-fluent-form .ff-el-input--label label {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-3);
  text-transform: uppercase;
  color: var(--text-body);
}
/* The card's fields keep the theme underline; the blanket border reset above is
   for the contact page, which restates its own. */
.ml-ff--booking .frm-fluent-form .ff-el-form-control {
  border-bottom: 1px solid var(--line-strong);
}
.ml-ff--booking .frm-fluent-form .ff-el-form-control:focus {
  border-bottom-color: var(--text-title);
}

/* No red asterisk: the original card marked nothing, and a danger-red glyph on a
   dark luxury card reads as an error before anything has gone wrong. Required
   fields still validate — see the rules in mu-plugins/mirna-forms.php. */
.ml-ff--booking .frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
  content: none;
}
.ml-ff--booking .frm-fluent-form .ff_submit_btn_wrapper {
  margin-bottom: 0;
}
.ml-ff--booking .frm-fluent-form .ff-btn-submit.rd-form__submit {
  margin-top: 18px;
}

/* ---------------------------------------------------------------------------
   Validation + confirmation, shared.
   --------------------------------------------------------------------------- */
.ml-ff .frm-fluent-form .ff-el-is-error .ff-el-form-control {
  border-bottom-color: var(--fluentform-danger, #dc3545);
}
.ml-ff .frm-fluent-form .error.text-danger {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

/* FF's success card is a bordered box on a white background; here it reads as
   the quiet confirmation note the React versions showed in place. */
.ml-ff .ff-message-success {
  margin-top: 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.ml-ff .ff-message-success p {
  margin: 0;
  color: inherit;
}
.ml-ff--contact .ff-message-success {
  padding-top: 0;
  border-top: 0;
  font-size: 18px;
  color: var(--primary);
}