/* Page-specific Leads UI rules. */
.ef-body {
    --cne-green: var(--color-primary);
    margin:0;
    background-color: var(--color-bg-subtle);
    font-family: var(--font-family-base);
    color: var(--color-text-body);
    overflow-x: hidden;
  }

  .ef-page {
    min-height:100vh;
    min-height:100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:var(--space-6);
    box-sizing: border-box;
  }

  .ef-card {
    background-color: var(--color-white);
    box-shadow:var(--shadow-lg);
    border-radius:var(--radius-xl);
    width:100%;
    min-width:0;
    max-width:var(--ui-len-rem-70);
    display: grid;
    grid-template-columns:minmax(0, 48%) minmax(0, 52%);
    border:var(--ui-len-rem-0-0625) solid var(--color-border);
    overflow: hidden;
  }

  .ef-media {
    background-color: var(--color-surface-muted);
    background-image: url("../../img/school_photo.webp");
    background-size:cover;
    background-position:left center;
    background-repeat: no-repeat;
    min-height:100%;
  }

  .ef-form-panel {
    padding:clamp(var(--space-6), 4vw, var(--space-12));
    min-width:0;
  }

  .ef-school-logo {
    display: block;
    height:var(--ui-len-rem-2-75);
    max-width:min(var(--ui-len-rem-11-25), 100%);
    width:auto;
    object-fit: contain;
    object-position: left center;
    margin-bottom:var(--space-2);
  }

  .ef-school-name {
    margin:0 0 var(--space-2);
    font-size:var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-link);
    text-transform: uppercase;
    letter-spacing:var(--ui-len-em-0-04);
    overflow-wrap: anywhere;
  }

  .ef-title {
    margin:0 0 var(--space-2);
    font-size:clamp(var(--ui-len-rem-1-75), 3vw, var(--font-size-h2));
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
  }

  .ef-subtitle {
    margin:0 0 var(--space-5);
    font-size:var(--font-size-body-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }

  .ef-form-row {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:var(--space-4);
  }

  .form-group {
    min-width:0;
  }
  #guardianRelationshipField[hidden] { display:none !important; }

  /* Keep entered values and placeholders aligned with the central project
     theme even on browsers with strong native input defaults. */
  .ef-form-panel .ef-control {
    display: block;
    width:100%;
    min-width:0;
    max-width:100%;
    color: var(--color-text-body);
    background-color: var(--color-white);
    border-color: var(--color-border-strong);
    caret-color: var(--color-primary);
  }

  .ef-form-panel .ef-control::placeholder {
    color: var(--color-text-disabled);
    opacity: 1;
  }

  .ef-phone-wrap,
  .ef-phone-wrap .iti {
    width:100%;
  }

  .ef-phone-error {
    display: block;
    margin-top:var(--space-2);
    color: var(--color-danger);
    font-size:var(--font-size-small);
    line-height:1.35;
  }

  .ef-form-panel textarea.ef-control {
    min-height:var(--ui-len-rem-7);
    resize: vertical;
  }

  /* The textarea is much taller than a single input, so the icon must be
     pinned near the top (aligned with the first line of typed text) rather
     than centered in the whole box. */
  .ef-form-panel .rb-input-icon-group--textarea > .rb-input-icon {
    top:0.9rem;
    transform: none;
  }

  .ef-form-panel input:-webkit-autofill,
  .ef-form-panel input:-webkit-autofill:hover,
  .ef-form-panel input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text-body);
    box-shadow:0 0 0 var(--ui-len-rem-62-5) var(--color-white) inset;
    transition: background-color 9999s ease-out 0s;
  }

  .ef-form-panel .btn-block {
    align-items: center;
    justify-content: center;
    min-height:var(--ui-len-rem-3);
  }

  .ef-message {
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-md);
    font-size:var(--font-size-body-sm);
    margin-bottom:var(--space-4);
  }

  .ef-message--success {
    background-color: var(--color-success-bg);
    color: var(--color-primary-700);
  }

  .ef-message--error {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
  }

  .ef-loader {
    display: flex;
    justify-content: center;
    margin-top:var(--space-4);
  }

  /* The [hidden] attribute is toggled from JS (loader.hidden = true/false);
     an explicit display rule on .ef-loader itself would otherwise outrank
     the browser's default [hidden]{display:none} and keep the spinner
     visible even while "hidden" is set. */
  .ef-loader[hidden] {
    display: none;
  }

  .ef-spinner {
    display: inline-block;
    width:var(--ui-len-rem-2);
    height:var(--ui-len-rem-2);
    border-radius:var(--radius-circle);
    border:var(--ui-len-rem-0-25) solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    animation: ef-spin 0.8s linear infinite;
  }

  @keyframes ef-spin {
    to { transform:rotate(360deg); }
  }

  /* Tablet: avoid squeezing the form into half of a narrow screen. */
  @media (max-width: 56.25rem) {
    .ef-card {
      grid-template-columns:minmax(0, 1fr);
      max-width:var(--ui-len-rem-42-5);
    }

    .ef-media {
      min-height:clamp(var(--ui-len-rem-16-25), 48vw, var(--ui-len-rem-26-25));
      background-size:contain;
      background-position:center;
    }

    .ef-form-panel {
      padding:var(--space-8);
    }
  }

  /* Phone: prioritize the form, stack fields, and prevent iOS input zoom. */
  @media (max-width: 40rem) {
    .ef-page {
      align-items: flex-start;
      padding:var(--space-4);
    }

    .ef-card {
      max-width:var(--ui-len-rem-32-5);
    }

    .ef-media {
      display: none;
    }

    .ef-form-panel {
      padding:var(--space-6);
    }

    .ef-form-row {
      grid-template-columns:minmax(0, 1fr);
      gap:0;
    }

    .ef-form-panel .ef-control,
    .ef-form-panel .rb-select-toggle,
    .ef-form-panel .dropdown-item {
      font-size:var(--form-control-font-size);
    }
  }

  @media (max-width: 23.75rem) {
    .ef-page {
      padding:var(--space-3);
    }

    .ef-form-panel {
      padding:var(--space-5);
    }

    .ef-school-name {
      font-size:var(--font-size-small);
    }

    .ef-title {
      font-size:var(--ui-len-rem-1-625);
    }
  }

  @media (max-height: 47.5rem) and (min-width: 56.3125rem) {
    .ef-page {
      align-items: flex-start;
    }
  }