/**
 * Shared HubSpot form card — Apply, Booklet download, Meet Us, Events (listing + detail).
 * Loaded after hubspot-fixes.css. Styles the real HubSpot-injected DOM inside a
 * `.g_form_wrap.hs-form-card` wrapper; everything is scoped so forms elsewhere
 * (popups, program pages) keep the Webflow look.
 */

/* Card shell */
.hs-form-card {
  background: #fff;
  border: 1px solid rgba(33, 36, 73, 0.06);
  border-radius: var(--size--16px);
  padding: var(--size--40px);
  box-shadow: 0 20px 50px rgba(33, 36, 73, 0.12);
}

.hs-form-card_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--size--16px);
  margin-bottom: var(--size--24px);
}

.hs-form-card_title {
  font-family: var(--h1--font-family);
}

.hs-form-card_meta {
  opacity: 0.6;
  white-space: nowrap;
}

/* Form layout */
.hs-form-card .hs-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--size--12px);
}

.hs-form-card .hs-form fieldset,
.hs-form-card .hs-form > fieldset {
  width: 100%;
  max-width: 100% !important;
  margin: 0;
}

.hs-form-card .hs-form fieldset.form-columns-2 {
  display: flex;
  gap: var(--size--12px);
}

.hs-form-card .hs-form fieldset.form-columns-2 .hs-form-field {
  flex: 1;
  width: auto;
}

.hs-form-card .hs-form fieldset.form-columns-1 .hs-form-field {
  width: 100%;
}

/* Fields: drop the Webflow bordered-box per field, style the input itself instead */
.hs-form-card .hs-form .hs-form-field,
.hs-form-card .hs-form .hs-form-field:has(.inputs-list) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  width: auto;
  max-width: none;
}

.hs-form-card .hs-form .hs-form-field .input {
  width: 100%;
  margin: 0;
}

.hs-form-card .hs-form .hs-input {
  font-family: var(--font--primary-family);
  font-size: 1rem;
  color: var(--_themes---swatch--font-color);
  box-shadow: none;
  background: #eaeff6;
  border: 1px solid transparent;
  border-radius: var(--size--8px);
  min-height: 3.25rem;
  padding: 0 var(--size--16px);
}

.hs-form-card .hs-form .hs-input::placeholder {
  color: rgba(33, 36, 73, 0.55);
}

.hs-form-card .hs-form .hs-input:focus {
  border-color: #2eaee0;
  background: #fff;
  outline: none;
}

.hs-form-card .hs-form textarea.hs-input {
  min-height: 8rem;
  padding: var(--size--12px) var(--size--16px);
  resize: vertical;
}

.hs-form-card .hs-form select.hs-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M6 8L0 1.28148L1.14443 0L6 5.43704L10.8556 0L12 1.28148L6 8Z' fill='%232EAEE0'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.hs-form-card .hs-form .hs-fieldtype-phonenumber .input {
  display: flex;
  gap: var(--size--8px);
}

.hs-form-card .hs-form .hs-fieldtype-phonenumber select.hs-input {
  flex: 0 0 42%;
}

/* Labels (most fields use placeholders and ship an empty label) */
.hs-form-card .hs-form .hs-form-field > label:empty {
  display: none;
}

.hs-form-card .hs-form .hs-form-field > label {
  display: block;
  font-size: var(--text-small--font-size);
  font-weight: 500;
  color: var(--_themes---swatch--font-color);
  margin-bottom: var(--size--8px);
}

.hs-form-card .hs-form .hs-form-field > label .hs-form-required {
  color: #2eaee0;
}

/* "Who are you?" — HubSpot only offers checkboxes; render them as single-choice tiles.
   (hubspot-forms.ts enforces the single choice.) */
.hs-form-card .hs-form .hs-form-field:has(.inputs-list) > label {
  margin-bottom: var(--size--12px);
}

.hs-form-card .hs-form .inputs-list.multi-container {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size--12px);
}

.hs-form-card .hs-form .inputs-list > li {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
}

/* Odd third option (FR Meet Us adds "Entreprise") spans the row instead of dangling */
.hs-form-card .hs-form .inputs-list.multi-container > li:nth-child(3):last-child {
  grid-column: 1 / -1;
}

.hs-form-card .hs-form .hs-form-checkbox-display {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: #eaeff6;
  border: 1px solid transparent;
  border-radius: var(--size--8px);
  padding: var(--size--16px) 3rem var(--size--16px) var(--size--20px);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}

.hs-form-card .hs-form .hs-form-checkbox-display > input {
  position: absolute;
  opacity: 0;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  pointer-events: none;
}

.hs-form-card .hs-form .hs-form-checkbox-display > span {
  font-weight: 600;
  font-size: 1rem;
}

/* Sub-caption per option. HubSpot values are All.Student / All.Parent / All.Corporate in
   both locales; the wording follows the form's `lang` (set on the [cd-hs-form] wrapper). */
.hs-form-card .hs-form .hs-form-checkbox-display::after {
  font-size: var(--text-small--font-size);
  opacity: 0.65;
}

.hs-form-card .hs-form .hs-form-checkbox-display:has(input[value$='Student'])::after {
  content: "I'm enquiring for myself";
}

.hs-form-card.is-apply .hs-form .hs-form-checkbox-display:has(input[value$='Student'])::after {
  content: "I'm applying for myself";
}

.hs-form-card .hs-form .hs-form-checkbox-display:has(input[value$='Parent'])::after {
  content: "I'm enquiring for my child";
}

.hs-form-card .hs-form .hs-form-checkbox-display:has(input[value$='Corporate'])::after {
  content: "I'm enquiring for my company";
}

.hs-form-card .hs-form .hs-form-checkbox-display:lang(fr):has(input[value$='Student'])::after {
  content: 'Je me renseigne pour moi-même';
}

.hs-form-card.is-apply
  .hs-form
  .hs-form-checkbox-display:lang(fr):has(input[value$='Student'])::after {
  content: 'Je candidate pour moi-même';
}

.hs-form-card .hs-form .hs-form-checkbox-display:lang(fr):has(input[value$='Parent'])::after {
  content: 'Je me renseigne pour mon enfant';
}

.hs-form-card .hs-form .hs-form-checkbox-display:lang(fr):has(input[value$='Corporate'])::after {
  content: 'Je me renseigne pour mon entreprise';
}

/* Radio-style indicator */
.hs-form-card .hs-form .hs-form-checkbox-display::before {
  content: '';
  position: absolute;
  right: var(--size--16px);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(33, 36, 73, 0.3);
  background: #fff;
  transition: all 0.15s;
}

.hs-form-card .hs-form .hs-form-checkbox-display:hover {
  background: #fff;
  border-color: rgba(33, 36, 73, 0.18);
}

.hs-form-card .hs-form .hs-form-checkbox-display:has(input:focus-visible) {
  outline: 2px solid #2eaee0;
  outline-offset: 2px;
}

.hs-form-card .hs-form .hs-form-checkbox-display:has(input:checked) {
  background: #fff;
  border-color: #2eaee0;
  box-shadow: 0 0 0 1px #2eaee0;
}

.hs-form-card .hs-form .hs-form-checkbox-display:has(input:checked)::before {
  border-color: #2eaee0;
  background: #2eaee0
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center / 12px no-repeat;
}

.hs-form-card
  .hs-form
  .hs-form-field:has(.inputs-list):has(.hs-error-msgs)
  .hs-form-checkbox-display {
  background: rgba(239, 96, 81, 0.08);
  border-color: #ef6051;
}

.hs-form-card
  .hs-form
  .hs-form-field:has(.inputs-list):has(.hs-error-msgs)
  .hs-form-checkbox-display:has(input:checked) {
  background: #fff;
  border-color: #2eaee0;
}

/* Plain consent checkbox stays a checkbox */
.hs-form-card .hs-form .hs-form-booleancheckbox > label {
  display: flex;
  align-items: center;
  gap: var(--size--8px);
}

.hs-form-card .hs-form .hs-form-booleancheckbox > label > span {
  font-weight: 400;
}

/* Errors */
.hs-form-card .hs-form .hs-form-field:has(.hs-error-msgs) {
  padding-bottom: 0;
}

.hs-form-card .hs-form .hs-error-msgs {
  position: static;
  display: block;
  margin: var(--size--8px) 0 0;
  padding: 0 var(--size--4px);
  list-style: none;
  height: auto;
  line-height: 1.3;
}

.hs-form-card .hs-form .hs-error-msgs > li {
  display: block;
  margin: 0;
  padding: 0;
}

.hs-form-card .hs-form .hs-error-msg {
  display: block;
  color: #ef6051;
  font-size: var(--text-small--font-size);
  font-weight: 400;
  margin: 0;
}

.hs-form-card .hs-form .hs-input.error,
.hs-form-card .hs-form .hs-input.invalid {
  background: rgba(239, 96, 81, 0.08);
  border-color: #ef6051;
}

.hs-form-card .hs-form .hs-input.error:focus {
  background: #fff;
  border-color: #ef6051;
}

.hs-form-card .hs-form .hs_error_rollup {
  display: none;
}

.hs-form-card .hs-form .legal-consent-container {
  width: 100%;
  font-size: var(--text-small--font-size);
  line-height: 1.4;
}

.hs-form-card .hs-form .legal-consent-container p {
  margin: 0;
}

/* Submit */
.hs-form-card .hs-form .hs_submit {
  width: 100%;
}

.hs-form-card .hs-form .hs_submit .actions {
  width: 100%;
  margin: 0;
  padding: 0;
}

.hs-form-card .hs-form .hs_submit .hs-button {
  width: 100% !important;
  display: block;
  min-height: 3.5rem;
  background: #2eaee0;
  color: #fff;
  border: 0;
  border-radius: var(--size--8px);
  margin-top: var(--size--8px);
  font-family: var(--font--primary-family);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.hs-form-card .hs-form .hs_submit .hs-button:hover {
  background: #212449;
}

/* Multi-step follow-ups (Apply, Booklet) sit under a divider once revealed. Target the
   step containers themselves — on /booklet/download the outer .g_form_secondary is an
   always-present wrapper, so a border on it would show as a stray line on load. */
.hs-form-card [cd-form='secondary'],
.hs-form-card [cd-form='tertiary'] {
  margin-top: var(--size--24px);
  padding-top: var(--size--24px);
  border-top: 1px solid rgba(33, 36, 73, 0.1);
}

.hs-form-card .g_form_hubspot {
  padding-top: 0;
}

/* Stacked layout (tablet and below): the page heading sits right above the card, so the
   card's own title would repeat it. Keep the page heading, drop the card header. */
@media screen and (max-width: 991px) {
  .hs-form-card_head {
    display: none;
  }
}

/* On phones the form pages hide the spacer between heading and form (.hidden-mobile, 568px),
   so give the card its own breathing room there. */
@media screen and (max-width: 568px) {
  .form_section .form_form > .hs-form-card {
    margin-top: var(--size--32px);
  }
}

@media screen and (max-width: 767px) {
  .hs-form-card {
    padding: var(--size--24px);
  }

  .hs-form-card .hs-form fieldset.form-columns-2 {
    flex-direction: column;
  }

  .hs-form-card .hs-form .inputs-list.multi-container {
    grid-template-columns: 1fr;
  }
}