/* ==========================================================================
   ACSIS LOGIN — LAYOUT & TYPOGRAPHY REFINEMENT
   --------------------------------------------------------------------------
   Loaded AFTER style.css. Colours, gradients and the dark panel are the
   existing theme and are deliberately left untouched. This file only corrects
   sizing, padding, type scale and responsive behaviour.

   The three structural bugs it fixes:
     1. .image-area .content had `height: 100px` with `padding: 170px 0`, so
        its content overflowed its own box.
     2. .sign-area had a fixed `height: 566px`, so the OTP tabs and the
        admission CTA overflowed or were clipped.
     3. The two columns had unrelated fixed heights (600px vs 566px) plus a
        17px nudge, so they never lined up.
   ========================================================================== */

:root {
  --auth-radius: 12px;
  --auth-pad-y: clamp(2rem, 4vw, 3rem);
  --auth-pad-x: clamp(1.5rem, 4vw, 3.5rem);
  --auth-field-h: 46px;
  --auth-gap: 18px;
}

/* --- Page shell ---------------------------------------------------------- */
.auth-main {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
}

.auth-main .container {
  width: 100%;
}

/* Both columns are now driven by content, and stretch to match each other. */
.auth-main .slideIn {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Left panel ---------------------------------------------------------- */
.image-area {
  /* Was a hard 600px. Content decides; the minimum keeps the visual weight. */
  display: flex;
  height: auto;
  min-height: 560px;
}

/* The original rule was `height: 100px; padding: 170px 0`, which is why the
   text spilled out of the panel. Centre it properly instead. */
.image-area .content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  padding: var(--auth-pad-y) clamp(1.25rem, 3vw, 2.25rem);
  width: 100%;
}

/* The panel sits on a dark gradient overlay, so everything inside it is white.
   style.css only coloured `.address p`; the rest inherited `body { color:#000 }`
   and the markup patched it with inline `color:#000000` — black on a dark
   gradient. Colouring the whole panel once removes the need for either. */
.image-area .content,
.image-area .content h2,
.image-area .content p,
.image-area .content li {
  color: #fff;
}

.image-area .image-hader,
.image-area .image-header {
  padding-bottom: 18px;
}

/* The typed headline: the original inline rule rotated it 25° in 3D and also
   targeted a class name that does not exist in the markup. */
.image-area .image-hader h2,
.image-area .image-header h2 {
  display: inline-block;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  margin: 0;
  transform: none;
  white-space: normal;
}

.image-area .image-hader h2:before,
.image-area .image-header h2:before {
  left: 50%;
  transform: translateX(-50%);
}

.image-area .center img {
  height: auto;
  margin: 18px auto 0;
  max-height: 72px;
  width: auto;
}

.content .address p {
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 34ch;
  padding-bottom: 0;
}

.image-area .app-name {
  margin-top: 22px;
}

.image-area .app-name h2 {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.35;
  margin: 0;
}

.image-area .underline {
  margin: 12px auto 0;
}

.image-area .content > p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 16px auto 0;
  max-width: 40ch;
}

.f-social-links {
  margin-top: 26px;
}

.f-social-links a {
  display: inline-block;
  padding: 8px 10px;
}

/* --- Right panel (form) -------------------------------------------------- */
.sign-area {
  /* Was `height: 566px` — the OTP tabs and admission CTA overflowed it. */
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  margin-top: 0;
  min-height: 560px;
  padding: var(--auth-pad-y) var(--auth-pad-x);
}

/* The decorative notch was pinned at `top: 213px`, which only lined up at one
   content height. Centre it so it tracks the panel. */
.sign-area::before {
  top: 50%;
  transform: translateY(-50%);
}

.sign-area .sign-hader {
  padding-bottom: 26px;
  padding-top: 0;
}

.sign-area .sign-hader img {
  height: auto;
  margin-bottom: 14px;
  max-height: 58px;
  width: auto;
}

.sign-area .sign-hader h2 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.sign-area .sign-hader p {
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 10px auto 0;
  max-width: 36ch;
}

/* --- Fields -------------------------------------------------------------- */
.sign-area .form-group {
  margin-bottom: var(--auth-gap);
}

input.form-control,
.input-group-icon input.form-control {
  font-size: 0.95rem;
  height: var(--auth-field-h);
  line-height: 1.4;
}

/* The icon is absolutely positioned over the field, so the text needs room
   to clear it. The original 38px was tight against a 1.2rem font. */
.input-group-icon .input-group-addon + input.form-control {
  padding-left: 46px;
  padding-right: 16px;
}

.input-group-icon .input-group-addon span.icon {
  align-items: center;
  display: flex;
  font-size: 0.95rem;
  padding: 0 14px;
}

.form-control:focus {
  border-color: #6f6f6f;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  outline: none;
}

.sign-area .error {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 6px 4px 0;
}

/* --- Actions ------------------------------------------------------------- */
.forgot-text {
  font-size: 0.82rem;
  gap: 12px;
  padding: 4px 2px 2px;
}

.btn-round {
  font-size: 0.92rem;
  font-weight: 600;
  height: 46px;
  letter-spacing: 0.01em;
  margin-top: 20px;
}

.btn-round:focus-visible {
  outline: 3px solid #7f7f7f;
  outline-offset: 2px;
}

/* --- Tabs ---------------------------------------------------------------- */
.sign-area .nav-tabs {
  margin-bottom: 20px;
}

.sign-area .nav-tabs > li > a {
  font-size: 0.86rem;
  padding: 9px 14px;
}

.sign-area .tab-content {
  margin-top: 0 !important;
}

/* --- Secondary blocks ---------------------------------------------------- */
.auth-admission-cta {
  margin-top: 22px;
  padding: 16px 18px;
}

.auth-admission-cta p {
  font-size: 0.8rem;
  line-height: 1.55;
  margin-bottom: 14px;
}

.auth-admission-cta .btn-round {
  margin-top: 0;
}

.auth-admission-cta a.auth-admission-link {
  display: inline-block;
  font-size: 0.79rem;
  margin-top: 12px;
}

.sign-footer p {
  font-size: 0.78rem;
  line-height: 1.55;
  margin-top: 24px !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
  .sign-area::before {
    top: 50%;
  }
}

@media (max-width: 991px) {
  /* Stacked: the notch points at nothing, and the panels square off. */
  .auth-main .slideIn {
    display: block;
  }

  .image-area,
  .sign-area {
    border-radius: var(--auth-radius);
    min-height: 0;
  }

  .image-area {
    margin-bottom: 18px;
  }

  .image-area .content {
    padding: clamp(2rem, 6vw, 2.75rem) 1.5rem;
  }

  .sign-area {
    padding: clamp(2rem, 6vw, 2.75rem) clamp(1.25rem, 5vw, 2.25rem);
  }
}

@media (max-width: 575px) {
  :root {
    --auth-field-h: 44px;
    --auth-gap: 15px;
  }

  .auth-main {
    padding: 1rem 0.75rem;
  }

  .image-area .content > p,
  .content .address p {
    max-width: none;
  }

  /* Two stacked links read better than a squeezed row at this width. */
  .forgot-text {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .slideIn {
    animation: none !important;
  }
}