/* Register page — Page.cshtml (/elaaregistration) + Register/Index.cshtml */

.register-body {
  margin: 0;
  min-height: 100vh;
  background-color: #F3F4F6;
}

/* Scope page typography/color to the form composition so global nav/footer keep theme styles */
.register-page {
   width: 100%;
  min-height: calc(100vh - 120px);
  padding: 48px 0px 64px;
  /* background-color: #F3F4F6; */
  color: #161616;
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
  box-sizing: border-box;
}

html.rtl .register-page,
html[lang="ar"] .register-page {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
}

/* Single split card: green sidebar + white form, flush, shared height */
.register-page__card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
   overflow: hidden;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow:
    0px 1px 2px 0px #1018280D,
    0px 1px 3px 0px #1018280D;
  border: 1px solid var(--bs-gray-300);

  }

/* Green brand panel — right in RTL, left in LTR (DOM order + direction) */
.register-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 34%;
  max-width: 380px;
  min-width: 240px;
  align-self: stretch;
  padding: 48px 40px;
  overflow: hidden;
  background-color: #074D31;
  color: #ffffff;
}

.register-sidebar__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(36px, 3.5vw, 56px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.register-sidebar__pattern {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 55%;
  background-image: url("../Images/patterns/register-with-us.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Form panel — adjacent to sidebar inside the shared card */
.register-form-panel {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  justify-content: stretch;
  min-width: 0;
  padding: 0;
  background-color: #ffffff;
}

.register-form-card {
  width: 100%;
  max-width: none;
  padding: 40px 48px 48px;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.register-form-intro {
  margin: 0 0 32px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #6C737F;
}

.register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.register-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.register-field--full {
  grid-column: 1 / -1;
}

.register-field label,
.register-field .umbraco-forms-label,
.register-field .control-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #384250;
}

.register-field .form-control,
.register-field select.form-control {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-size: 1rem;
  line-height: 1.5;
  color: #161616;
  background-color: #ffffff;
  border: 1px solid var(--bs-gray-300);
  border-radius: 8px;
  box-shadow: none;
  appearance: auto;
}

.register-field .form-control:focus,
.register-field select.form-control:focus {
  border-color: #074D31;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(7, 77, 49, 0.15);
}

.register-field .form-control::placeholder {
  color: #9DA4AE;
}

/* Surface Register form (asp-validation-for) — not scoped to .umbraco-forms-form */
.register-field .field-validation-valid {
  display: none;
}

.register-field .field-validation-error,
.register-field .text-danger.field-validation-error,
.register-field span[data-valmsg-for].field-validation-error {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: #e74133 !important;
}

.register-field .text-danger:not(:empty) {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: #e74133 !important;
}

.register-page .validation-summary-valid {
  display: none;
}

.register-page .validation-summary-errors,
.register-validation-summary.validation-summary-errors {
  display: block;
  margin: 0 0 20px;
  padding: 12px 16px;
  font-size: 0.875rem;
  color: #e74133 !important;
  background-color: #FEF3F2;
  border: 1px solid #FECDCA;
  border-radius: 8px;
}

.register-page .validation-summary-errors ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.register-section-title {
  margin: 28px 0 16px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #14573A;
}

.register-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-top: 28px;
}

.register-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background-color: #074D31;
  color: #ffffff !important;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.register-submit:hover {
  background-color: #085D3A;
}

.register-success {
  margin: 0;
  padding: 24px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  color: #14573A;
  text-align: center;
}

/* Datepicker above sticky header / form card */
.datepicker-dropdown {
  z-index: 2000 !important;
}

/* --------------------------------------------------------------------------
   Umbraco Forms — ElaaRegistration on /elaaregistration (Page.cshtml)
   Scoped so other forms keep Master / default theme styles.
   -------------------------------------------------------------------------- */

.register-page .umbraco-forms-form,
.register-page .umbraco-forms-form.elaaregistration {
  color: #161616;
}

.register-page .umbraco-forms-form .umbraco-forms-page,
.register-page .umbraco-forms-form .umbraco-forms-fieldset,
.register-page .umbraco-forms-form .row-fluid {
  width: 100%;
  max-width: none;
}

.register-page .umbraco-forms-form legend,
.register-page .umbraco-forms-form .umbraco-forms-caption {
  margin: 0 0 24px;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #14573A;
  border: none;
}

/* Prefer 2-column field layout inside form containers */
.register-page .umbraco-forms-form .umbraco-forms-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  padding: 0;
}

.register-page .umbraco-forms-form .umbraco-forms-container[class*="col-"] {
  flex: none;
  max-width: none;
}

/* Do not use [class*="umbraco-forms-field"] — it also matches fieldset/wrapper
   classes and can override Umbraco Forms conditional hide (display:none / .umbraco-forms-hidden). */
.register-page .umbraco-forms-form .umbraco-forms-field:not(.umbraco-forms-hidden) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  float: none;
  clear: none;
}

.register-page .umbraco-forms-form .umbraco-forms-hidden,
.register-page .umbraco-forms-form .umbraco-forms-field.umbraco-forms-hidden,
.register-page .umbraco-forms-form .umbraco-forms-fieldset.umbraco-forms-hidden {
  display: none !important;
}

/* Full-width: checkboxes, consent, recaptcha, textarea, file upload.
   Umbraco Multiple Choice alias → .multiplechoice on the field wrapper. */
.register-page .umbraco-forms-form .checkbox,
.register-page .umbraco-forms-form .checkboxlist,
.register-page .umbraco-forms-form .multiplechoice,
.register-page .umbraco-forms-form .radiobuttonlist,
.register-page .umbraco-forms-form .data-consent,
.register-page .umbraco-forms-form .dataconsent,
.register-page .umbraco-forms-form .recaptcha,
.register-page .umbraco-forms-form .recaptcha2,
.register-page .umbraco-forms-form .recaptcha3,
.register-page .umbraco-forms-form .textarea,
.register-page .umbraco-forms-form .fileupload,
.register-page .umbraco-forms-form .umbraco-forms-field.checkbox,
.register-page .umbraco-forms-form .umbraco-forms-field.checkboxlist,
.register-page .umbraco-forms-form .umbraco-forms-field.multiplechoice,
.register-page .umbraco-forms-form .umbraco-forms-field.radiobuttonlist,
.register-page .umbraco-forms-form .umbraco-forms-field.data-consent,
.register-page .umbraco-forms-form .umbraco-forms-field.dataconsent,
.register-page .umbraco-forms-form .umbraco-forms-field.textarea,
.register-page .umbraco-forms-form .umbraco-forms-field.fileupload {
  grid-column: 1 / -1;
}

.register-page .umbraco-forms-form .umbraco-forms-label {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #384250;
  float: none;
  width: auto;
}

.register-page .umbraco-forms-form .umbraco-forms-indicator {
  color: #B42318;
}

/* .register-page .umbraco-forms-form .umbraco-forms-tooltip,
.register-page .umbraco-forms-form .help-block {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  z-index: 1;
  margin: 0;
  max-width: 55%;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #6C737F;
  text-align: end;
}

/* Leave room so the label doesn’t collide with the absolute tooltip */
.register-page .umbraco-forms-form .umbraco-forms-field:has(.umbraco-forms-tooltip) .umbraco-forms-label,
.register-page .umbraco-forms-form .umbraco-forms-field:has(.help-block) .umbraco-forms-label {
  padding-inline-end: 0.75rem;
  max-width: 45%;
} */

.register-page .umbraco-forms-form .umbraco-forms-field-wrapper {
  width: 100%;
}

/* Override _Master.cshtml beige form inputs (max-width / brown borders) */
.register-page .umbraco-forms-form input.text,
.register-page .umbraco-forms-form input[type="text"],
.register-page .umbraco-forms-form input[type="email"],
.register-page .umbraco-forms-form input[type="tel"],
.register-page .umbraco-forms-form input[type="number"],
.register-page .umbraco-forms-form input[type="password"],
.register-page .umbraco-forms-form input[type="date"],
.register-page .umbraco-forms-form textarea,
.register-page .umbraco-forms-form select,
.register-page .umbraco-forms-form .umbraco-forms-textbox,
.register-page .umbraco-forms-form .umbraco-forms-input,
.register-page .umbraco-forms-form .datepicker {
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px;
  padding: 10px 14px !important;
  font-size: 1rem;
  line-height: 1.5;
  color: #161616 !important;
  background-color: #ffffff !important;
  border: 1px solid var(--bs-gray-300) !important;
  border-radius: 8px;
  box-shadow: none;
  appearance: auto;
}

.register-page .umbraco-forms-form textarea {
  min-height: 96px;
  resize: vertical;
}

.register-page .umbraco-forms-form input.text:focus,
.register-page .umbraco-forms-form input[type="text"]:focus,
.register-page .umbraco-forms-form input[type="email"]:focus,
.register-page .umbraco-forms-form input[type="tel"]:focus,
.register-page .umbraco-forms-form input[type="password"]:focus,
.register-page .umbraco-forms-form textarea:focus,
.register-page .umbraco-forms-form select:focus,
.register-page .umbraco-forms-form .datepicker:focus {
  border-color: #074D31 !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(7, 77, 49, 0.15);
}

/* Checkbox/radio lists: flat markup is input + label + br.
   Use a 2-col grid so each input+label pair is one full-width row. */
.register-page .umbraco-forms-form span.checkboxlist,
.register-page .umbraco-forms-form span.radiobuttonlist,
.register-page .umbraco-forms-form .checkboxlist,
.register-page .umbraco-forms-form .radiobuttonlist,
.register-page .umbraco-forms-form span.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 12px;
  align-items: start;
  float: none;
  padding: 0;
  width: 100%;
}

.register-page .umbraco-forms-form span.checkboxlist > br,
.register-page .umbraco-forms-form span.radiobuttonlist > br,
.register-page .umbraco-forms-form .checkboxlist > br,
.register-page .umbraco-forms-form .radiobuttonlist > br {
  display: none;
}

.register-page .umbraco-forms-form span.checkboxlist > input[type="checkbox"],
.register-page .umbraco-forms-form span.radiobuttonlist > input[type="radio"],
.register-page .umbraco-forms-form .checkboxlist > input[type="checkbox"],
.register-page .umbraco-forms-form .radiobuttonlist > input[type="radio"] {
  grid-column: 1;
  justify-self: start;
  margin: 0.2em 0 0;
  margin-inline-end: 0;
}

.register-page .umbraco-forms-form span.checkboxlist > label,
.register-page .umbraco-forms-form span.radiobuttonlist > label,
.register-page .umbraco-forms-form .checkboxlist > label,
.register-page .umbraco-forms-form .radiobuttonlist > label {
  grid-column: 2;
  float: none;
  clear: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #384250;
}

.register-page .umbraco-forms-form span.checkbox label,
.register-page .umbraco-forms-form .checkbox label {
  float: none;
  clear: none;
  display: inline;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #384250;
}

.register-page .umbraco-forms-form span.checkboxlist input[type="checkbox"],
.register-page .umbraco-forms-form span.radiobuttonlist input[type="radio"],
.register-page .umbraco-forms-form span.checkbox input[type="checkbox"],
.register-page .umbraco-forms-form input[type="checkbox"],
.register-page .umbraco-forms-form input[type="radio"] {
  width: auto !important;
  max-width: none !important;
  min-height: auto;
  margin-inline-end: 8px;
  padding: 0 !important;
  accent-color: #074D31;
  background: transparent !important;
  border: none !important;
  box-shadow: none;
}

/* Grid list options already use column-gap — avoid double spacing */
.register-page .umbraco-forms-form span.checkboxlist > input[type="checkbox"],
.register-page .umbraco-forms-form span.radiobuttonlist > input[type="radio"],
.register-page .umbraco-forms-form .checkboxlist > input[type="checkbox"],
.register-page .umbraco-forms-form .radiobuttonlist > input[type="radio"] {
  margin-inline-end: 0;
}

/* Single consent/checkbox: keep input + label on one full-width row */
.register-page .umbraco-forms-form .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper,
.register-page .umbraco-forms-form .umbraco-forms-field.data-consent .umbraco-forms-field-wrapper,
.register-page .umbraco-forms-form .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.register-page .umbraco-forms-form .umbraco-forms-field.dataconsent .umbraco-forms-field-wrapper > label,
.register-page .umbraco-forms-form .umbraco-forms-field.data-consent .umbraco-forms-field-wrapper > label,
.register-page .umbraco-forms-form .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper > label {
  flex: 1 1 auto;
  float: none;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #384250;
}

.register-page .umbraco-forms-form .umbraco-forms-navigation {
  margin-top: 28px;
  float: none;
  width: 100%;
}

.register-page .umbraco-forms-form .umbraco-forms-navigation .col-md-12,
.register-page .umbraco-forms-form .umbraco-forms-navigation [class*="col-"] {
  width: 100%;
  max-width: none;
  padding: 0;
  float: none;
}

.register-page .umbraco-forms-form .umbraco-forms-navigation .btn,
.register-page .umbraco-forms-form .umbraco-forms-navigation input[type="submit"],
.register-page .umbraco-forms-form .umbraco-forms-navigation .btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background-color: #074D31 !important;
  color: #ffffff !important;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s ease;
  box-shadow: none;
}

.register-page .umbraco-forms-form .umbraco-forms-navigation .btn:hover,
.register-page .umbraco-forms-form .umbraco-forms-navigation input[type="submit"]:hover,
.register-page .umbraco-forms-form .umbraco-forms-navigation .btn.primary:hover {
  background-color: #085D3A !important;
  color: #ffffff !important;
  box-shadow: none;
}

.register-page .umbraco-forms-form .umbraco-forms-navigation .btn.prev {
  margin-bottom: 12px;
  background-color: #ffffff !important;
  color: #074D31 !important;
  border: 1px solid var(--bs-gray-300) !important;
}

.register-page .umbraco-forms-form span.contourError,
.register-page .umbraco-forms-form span.field-validation-error,
.register-page .umbraco-forms-form .field-validation-error {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: #e74133 !important;
}

.register-page .umbraco-forms-form input.input-validation-error,
.register-page .umbraco-forms-form textarea.input-validation-error,
.register-page .umbraco-forms-form select.input-validation-error,
.register-field .input-validation-error {
  border-color: #e74133 !important;
}

.register-page .umbraco-forms-form .umbraco-forms-submitmessage,
.register-page .umbraco-forms-submitmessage {
  margin: 0;
  padding: 24px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  color: #14573A;
  text-align: center;
}

/* Grid editors sometimes wrap the form — keep them transparent / full-width */
.register-page .register-form-card .umb-grid,
.register-page .register-form-card .grid-section,
.register-page .register-form-card .grid-row,
.register-page .register-form-card .grid-row .box,
.register-page .register-form-card .umb-grid .container,
.register-page .register-form-card .umb-grid .row,
.register-page .register-form-card .umb-grid [class*="col-"],
.register-page .register-form-card .umb-grid .column {
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  float: none;
  background: transparent;
  box-shadow: none;
  border: none;
}

@media (max-width: 991.98px) {
  .register-page {
    min-height: 0;
    padding: 24px 16px 48px;
  }

  .register-page__card {
    flex-direction: column;
  }

  .register-sidebar {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    min-height: 200px;
    padding: 32px 24px 100px;
  }

  .register-sidebar__pattern {
    height: 40%;
    background-position: bottom right;
  }

  html[dir="ltr"] .register-sidebar__pattern,
  html:not(.rtl):not([lang="ar"]) .register-sidebar__pattern {
    background-position: bottom left;
  }

  .register-form-card {
    padding: 28px 20px 32px;
  }

  .register-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .register-page .umbraco-forms-form .umbraco-forms-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}