/*
 * Fluent Forms styled to match the original HubSpot forms.
 *
 * IMPORTANT: the rendered <form> carries class "frm-fluent-form", NOT
 * "fluentform" - selectors written against .fluentform never match anything.
 * Both are included below for safety across versions.
 *
 * Values mirror the originals in template_main.min.css:
 *   .hs-form-field    -> margin-bottom: 1.234rem
 *   form label        -> .875rem
 *   .hs-form-required -> hidden (the original hid required asterisks)
 *   form .hs-button   -> transparent, 1px white border, 16px 30px padding
 *
 * These rules are deliberately self-sufficient: the column layout does not
 * rely on Fluent Forms' own public stylesheet being present, since the cells
 * ship inline flex-basis values but the container was not being made flex.
 */

/* --- column layout ---------------------------------------------------------
   Written with high specificity and !important deliberately: the computed
   value was resolving to `display:block` despite a matching class selector,
   so something in the stack out-specifies a plain .ff-t-container rule.
   The cells already carry inline flex-basis:50%, so the container only needs
   to actually BE a flex container for the two-up layout to work. */
form.frm-fluent-form div.ff-t-container,
form.frm-fluent-form div.ff-column-container,
div.ff-t-container.ff-column-container{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  gap:0 16px;
  width:100%;
  box-sizing:border-box;
}
form.frm-fluent-form div.ff-t-cell,
div.ff-t-container.ff-column-container > div.ff-t-cell{
  flex-grow:1 !important;
  flex-shrink:1 !important;
  min-width:0 !important;   /* allow shrinking rather than forcing a wrap */
  float:none !important;    /* HubSpot's grid CSS floats anything grid-like */
  box-sizing:border-box;
  /* stretch to the row height so the label block below can absorb the
     difference when one column's label wraps onto a second line */
  display:flex;
  flex-direction:column;
}

/* Keep the inputs of a two-column row on the same baseline even when one
   label wraps: the label block grows to fill the leftover height, pushing
   its input down to match the taller column. */
form.frm-fluent-form div.ff-t-cell > div.ff-el-group,
div.ff-t-container.ff-column-container > div.ff-t-cell > div.ff-el-group{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  margin-bottom:1.234rem;
}
form.frm-fluent-form div.ff-t-cell > div.ff-el-group > div.ff-el-input--label,
div.ff-t-container.ff-column-container > div.ff-t-cell > div.ff-el-group > div.ff-el-input--label{
  flex:1 0 auto;
  display:flex;
  align-items:flex-start;
}
/* stack on genuinely narrow screens only */
@media (max-width:480px){
  form.frm-fluent-form div.ff-t-container,
  form.frm-fluent-form div.ff-column-container,
  div.ff-t-container.ff-column-container{
    display:block !important;
  }
  form.frm-fluent-form div.ff-t-cell,
  div.ff-t-container.ff-column-container > div.ff-t-cell{
    flex-basis:auto !important;
    width:100% !important;
  }
}

/* --- field groups + labels ------------------------------------------------- */
.frm-fluent-form .ff-el-group,
.fluentform .ff-el-group{margin-bottom:1.234rem}
.frm-fluent-form .ff-el-input--label label,
.fluentform .ff-el-input--label label{
  font-size:.875rem;font-weight:400;line-height:1.4;margin-bottom:.4rem;color:inherit;
}
/* the original hid required asterisks */
.frm-fluent-form .ff-el-is-required.asterisk-right label:after,
.frm-fluent-form .ff-el-is-required.asterisk-left label:before,
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before{display:none}

/* --- inputs ---------------------------------------------------------------- */
.frm-fluent-form .ff-el-form-control,
.fluentform .ff-el-form-control{
  background-color:#fff;
  border:1px solid #bbb;
  border-radius:3px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.07);
  color:#494a52;
  font-size:.875rem;
  padding:.7rem;
  width:100%;
  max-width:100%;
  height:auto;
  line-height:1.4;
  box-sizing:border-box;
}
.frm-fluent-form .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus{
  border-color:#122142;outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.07);
}
.frm-fluent-form textarea.ff-el-form-control,
.fluentform textarea.ff-el-form-control{min-height:120px}

/* --- submit button --------------------------------------------------------- */
.frm-fluent-form .ff-btn-submit,
.fluentform .ff-btn-submit{
  background-color:#000;
  border:1px solid #000;
  border-radius:0;
  color:#fff;
  cursor:pointer;
  font-size:.92rem;
  font-weight:400;
  line-height:1.1;
  padding:16px 30px;
  height:auto;
  width:auto;
  text-align:center;
  transition:all .15s linear;
  box-shadow:none;
}
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus,
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus{
  background-color:#fff;border-color:#000;color:#000;outline:none;
}

/* --- validation + confirmation --------------------------------------------- */
.frm-fluent-form .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-is-error .ff-el-form-control{border-color:#c0392b}
.frm-fluent-form .error.text-danger,
.fluentform .error.text-danger{font-size:.8rem;margin-top:.25rem}
.ff-message-success{padding:1rem 0;font-size:1rem}