/*============================================================================================*/
/* POLAC portal overrides — applied globally to all applicant pages                          */
/*============================================================================================*/

/* ── Institution name at the top of the left panel ──────────────────────────────────────── */
/*
 * IMPORTANT: We use a flex child (order: -1) instead of position:absolute so
 * the heading never overlaps the logo on any screen size.
 * On desktop  the parent padding pushes everything down naturally.
 * On mobile   the flex column stacks: heading → logo → body text.
 */
.content-left-wrapper::before {
  content: 'Nigeria Police Academy, Wudil';
  order: -1;           /* first child in the flex column */
  width: 100%;
  font-weight: 900;
  color: #003366;
  font-size: 26px;
  text-align: center;
  padding: 8px 20px 4px;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

/* ── Left-panel wrapper ──────────────────────────────────────────────────────────────────── */
.content-left-wrapper {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 30px !important;
}

/* Push copyright to the bottom of the panel */
.content-left-wrapper > .copy {
  margin-top: auto;
}

.content-left-wrapper > a,
.content-left-wrapper > div,
.content-left-wrapper figure {
  width: 100%;
}
.content-left-wrapper figure {
  display: flex !important;
  justify-content: center !important;
}
.action-btn-row {
  justify-content: center !important;
}

/* ── Left-panel text colours ────────────────────────────────────────────────────────────── */
.content-left-wrapper h2 {
  color: #003366 !important;
  font-weight: 800 !important;
}
.content-left-wrapper p,
.content-left-wrapper .copy {
  color: #000 !important;
}

/* ── Background image ────────────────────────────────────────────────────────────────────── */
.content-left {
  background-color: transparent !important;
  background-image: url('/assets/logos/tt2-bg.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ── Step-indicator dots ─────────────────────────────────────────────────────────────────── */
.step-indicator {
  justify-content: center;
}

/* ── Wizard fills the right panel ───────────────────────────────────────────────────────── */
#wizard_container {
  width: 100% !important;
  max-width: 100% !important;
}
#middle-wizard,
.wizard-wrapper,
.wizard-branch {
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Right panel: scrollable, top-aligned ───────────────────────────────────────────────── */
.content-right {
  overflow-y: auto !important;
  align-items: flex-start !important;
  padding-top: 40px !important;
}
.content-right > #start,
.content-right .wizard {
  width: 100% !important;
}

/* ── Action buttons ─────────────────────────────────────────────────────────────────────── */
.action-btn-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Large tablets (≤ 991px): left panel becomes a compact banner above the form ─────────── */
@media (max-width: 991.98px) {

  .content-left-wrapper::before {
    font-size: 18px;
    padding: 6px 12px 2px;
  }

  .content-left-wrapper {
    padding: 16px 16px 12px !important;
  }

  /* Shrink the logo */
  .content-left-wrapper figure img {
    width: 70px !important;
    height: auto !important;
  }

  /* Shrink the heading */
  .content-left-wrapper h2 {
    font-size: 15px !important;
    margin: 6px 0 4px !important;
  }

  /* Hide the long description paragraph on tablet/mobile — saves space */
  .content-left-wrapper > p:not(.copy),
  #portal-description {
    display: none !important;
  }

  /* Countdown stays visible but compact */
  .countdown-box {
    padding: 6px 10px !important;
    min-width: 50px !important;
  }
  .count-num {
    font-size: 20px !important;
  }
  .count-label {
    font-size: 10px !important;
  }

  /* Right panel: full-width, sensible padding */
  .content-right {
    padding: 20px 15px 30px !important;
  }

  /* Full-height row not needed when stacked */
  .row-height {
    height: auto !important;
    min-height: 100vh;
  }
}

/* ── Small phones (≤ 575px): further compact ─────────────────────────────────────────────── */
@media (max-width: 575.98px) {

  .content-left-wrapper::before {
    font-size: 15px;
    padding: 4px 10px 0;
  }

  .content-left-wrapper {
    padding: 12px 10px 8px !important;
    flex-direction: row !important;        /* horizontal strip: heading | logo */
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 8px;
  }

  /* On very small screens: tiny logo next to institution name */
  .content-left-wrapper figure {
    width: auto !important;
    flex-shrink: 0;
  }
  .content-left-wrapper figure img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
  }

  /* Title inline with logo */
  .content-left-wrapper::before {
    order: 0;                              /* reset order — inline now */
    width: auto !important;
    flex: 1;
    text-align: left;
    padding: 0 8px;
    font-size: 14px;
  }

  .content-left-wrapper h2,
  .content-left-wrapper > p,
  #portal-description,
  #countdown-section {
    display: none !important;
  }

  .content-right {
    padding: 15px 10px 25px !important;
  }

  /* Wider form fields on phones */
  .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── Ensure form inputs are usable on touch devices ─────────────────────────────────────── */
@media (max-width: 991.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;   /* prevents iOS auto-zoom on focus */
    min-height: 44px;             /* minimum touch target */
  }

  .btn_1 {
    min-height: 44px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}