/**
 * @file
 * Styles for the online PIN purchase page (/apply/buy-pin).
 *
 * Provides:
 *  - A full-width outer wrapper (.tp-pin-purchase) centred inside the
 *    portal content canvas.
 *  - A narrow inner container (.tp-pin-purchase__inner, max 640 px) that
 *    keeps the purchase form readable on large viewports.
 *  - A three-step horizontal progress bar with a connecting line drawn via
 *    a CSS ::before pseudo-element.
 *  - A white card-style form container with a subtle shadow.
 *
 * Design tokens used:
 *  --tp-color-primary (#1b3a6b) -- active step circle fill.
 *  --sp, --sp0-5, --sp1, --sp1-5, --sp2, --sp3 -- spacing scale.
 *  --color--gray-90, --color--gray-70, --color--gray-45, --color--gray-20,
 *  --color--gray-5 -- neutral palette.
 *
 * Responsive strategy: mobile-first. The progress bar remains horizontal
 * at all sizes where space allows (the flex items have a minimum width so
 * they do not crush below ~200 px). Form padding reduces on narrow screens.
 *
 * !important usage: one instance on fieldset legend to override Olivero's
 * opinionated legend float that breaks the fieldset card layout inside the
 * purchase form.
 */

/* Outer wrapper: full-width, light surface background, vertical padding. */
.tp-pin-purchase {
  width: 100%;
  padding: var(--sp3, 3.375rem) var(--sp, 1.125rem);
}

/* Centred column for the progress bar and the form. Widened to match the
 * #1380 design, which uses a broad card so the seven-step indicator sits on a
 * single row and fields have room to breathe; it still narrows fluidly below
 * this width on smaller viewports. */
.tp-pin-purchase__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Progress bar -------------------------------------------------------- */

/* Flex row. The ::before pseudo-element draws the horizontal connecting line
   that sits behind the step circles at vertical midpoint. */
.tp-pin-purchase__progress {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp2, 2.25rem);
  margin-bottom: var(--sp3, 3.375rem);
}

/* Horizontal connector line. Sits behind the circles (z-index 0). Spans the
   full width of the progress bar and is centred vertically on the circles
   (16 px = half the 32 px circle height). */
.tp-pin-purchase__progress::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color--gray-90, #e3e8ef);
  z-index: 0;
}

/* Individual step: column layout so the number sits above the label. */
.tp-pin-purchase__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp0-5, 0.5625rem);
}

/* Step circle. 32 x 32 px, inactive state uses mid-gray. */
.tp-pin-purchase__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color--gray-90, #e3e8ef);
  color: var(--color--gray-45, #6b7890);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
}

/* Active step circle uses the brand primary colour. */
.tp-pin-purchase__step--active .tp-pin-purchase__step-num {
  background: var(--tp-color-primary, #1b3a6b);
  color: #fff;
}

/* Step label below the circle. */
.tp-pin-purchase__step-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color--gray-45, #6b7890);
  text-align: center;
  white-space: nowrap;
}

/* Active step label is darker and bold. */
.tp-pin-purchase__step--active .tp-pin-purchase__step-label {
  color: var(--color--gray-5, #1a2230);
  font-weight: 600;
}

/* Separator line between step nodes. flex: 1 so it fills available space;
   align-self: center keeps it at mid-height of the step circles. The visual
   connector is handled by the ::before pseudo on the parent, so this element
   is purely a flex spacer rendered as a thin rule. */
.tp-pin-purchase__sep {
  flex: 1;
  height: 2px;
  background: var(--color--gray-90, #e3e8ef);
  align-self: center;
  position: relative;
  z-index: 0;
}

/* ---- Academic year banner ------------------------------------------------ */

/* Shown on every step so the applicant always knows which intake they are
   purchasing a PIN for. Placed above the fieldset content. */
.tp-pp-year-banner {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tp-color-primary, #1b3a6b);
  background: #f0f4fb;
  border-left: 3px solid var(--tp-color-primary, #1b3a6b);
  border-radius: 0 4px 4px 0;
  padding: 0.5rem 0.875rem;
  margin-bottom: var(--sp1, 1.125rem);
}

/* ---- PIN cost notice ----------------------------------------------------- */

/* Shown after the applicant selects an application type. */
.tp-pp-price-notice {
  font-size: 0.9375rem;
  color: #1a3a1a;
  background: #e8f5e9;
  border-left: 3px solid #2e7d32;
  border-radius: 0 4px 4px 0;
  padding: 0.5rem 0.875rem;
  margin-bottom: var(--sp1, 1.125rem);
}

/* ---- Payment method instructions ----------------------------------------- */

/* Shown after the applicant selects a payment method. */
.tp-pp-pm-instructions {
  margin-top: var(--sp1, 1.125rem);
}

/* ---- Messages ------------------------------------------------------------ */

/* Small gap between messages block and the form card. */
.tp-pin-purchase__messages {
  margin-bottom: var(--sp1-5, 1.6875rem);
}

/* ---- Form card ----------------------------------------------------------- */

/* The form area is a transparent stack on the grey page (#1380 design): the
 * stepper and the section fieldset are each their own white card, rather than
 * one big wrapping card. */
.tp-pin-purchase__form {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Override Olivero's fieldset legend float which prevents fieldsets from
 * rendering as clean card-like sections inside the narrow form container.
 * The !important is required here because Olivero's fieldset.css sets
 * float: left on legend with high specificity. */
.tp-pin-purchase__form fieldset legend {
  float: none !important;
}

/* ---- Responsive: reduce padding so the form expands on MD/SM/XS ------------
 * The horizontal gutters stacked (.tp-main + .tp-pin-purchase + fieldset) and
 * squeezed the form on tablets/phones. Below MD, drop the outer wrapper's
 * inline padding and tighten the shared .tp-main gutter on the buy-pin page
 * (scoped via :has so other pages are unaffected) so fields use the width. */
@media (max-width: 1024px) {
  .tp-pin-purchase {
    padding: var(--sp2, 2.25rem) 0;
  }
  .tp-main:has(.tp-pin-purchase) {
    padding-inline: var(--sp0-5, 0.5625rem);
  }
}
@media (max-width: 640px) {
  .tp-pin-purchase {
    padding: var(--sp1, 1.125rem) 0;
  }
  .tp-main:has(.tp-pin-purchase) {
    padding-inline: 0.35rem;
  }
}

/* ==========================================================================
   Form-internal four-step stepper (.tp-pp-stepper)
   Rendered by OnlinePinPurchaseForm::buildStepIndicator() inside the form
   card. Smaller and less prominent than the page-level three-step indicator.
   ========================================================================== */

.tp-pp-stepper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--sp2, 2.25rem);
  padding: var(--sp1, 1.125rem) 0;
  border-bottom: 1px solid var(--color--gray-90, #e3e8ef);
}

/* Individual step node: circle above label. */
.tp-pp-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  min-width: 56px;
}

/* Circle. Default (future) state is light gray. */
.tp-pp-stepper__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color--gray-90, #e3e8ef);
  color: var(--color--gray-45, #6b7890);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

/* Active step: brand primary fill. */
.tp-pp-stepper__step--active .tp-pp-stepper__num {
  background: var(--tp-color-primary, #1b3a6b);
  color: #fff;
}

/* Completed step: accent green-ish fill (reuse brand accent with opacity). */
.tp-pp-stepper__step--done .tp-pp-stepper__num {
  background: #2e7d32;
  color: #fff;
}

/* Step label. */
.tp-pp-stepper__label {
  font-size: 0.6875rem;
  color: var(--color--gray-45, #6b7890);
  text-align: center;
  white-space: nowrap;
}

.tp-pp-stepper__step--active .tp-pp-stepper__label {
  color: var(--tp-color-primary, #1b3a6b);
  font-weight: 600;
}

.tp-pp-stepper__step--done .tp-pp-stepper__label {
  color: #2e7d32;
}

/* Separator line between step nodes. flex: 1 fills the gap.
   align-self: flex-start + margin-top: 13px places the 2px line at the
   vertical centre of the 28px circles (14px from top - 1px line half = 13px).
   This is more reliable than align-self: center, which centres on the full
   step height (circle + label gap + label) and lands below the circles. */
.tp-pp-stepper__sep {
  flex: 1;
  height: 2px;
  background: var(--color--gray-90, #e3e8ef);
  align-self: flex-start;
  margin-top: 13px;
  min-width: 12px;
}

/* ==========================================================================
   Review summary table (step 4)
   ========================================================================== */

.tp-pp-review {
  margin-top: var(--sp2, 2.25rem);
  border-top: 1px solid var(--color--gray-90, #e3e8ef);
  padding-top: var(--sp1-5, 1.6875rem);
}

.tp-pp-review__heading {
  font-size: 1rem;
  margin: 0 0 var(--sp1, 1.125rem);
  color: var(--tp-color-primary, #1b3a6b);
}

.tp-pp-review__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tp-pp-review__table td {
  padding: 0.375rem 0.5rem;
  vertical-align: top;
  border-bottom: 1px solid var(--color--gray-90, #e3e8ef);
}

.tp-pp-review__table td:first-child {
  width: 40%;
  font-weight: 600;
  color: var(--color--gray-45, #6b7890);
  white-space: nowrap;
}

.tp-pp-review__disclaimer {
  margin-top: var(--sp1, 1.125rem);
  font-size: 0.8125rem;
  color: var(--color--gray-20, #2d3748);
  padding: var(--sp0-5, 0.5625rem) var(--sp1, 1.125rem);
  background: #fff8e1;
  border-left: 3px solid var(--tp-color-brand-accent, #e8a020);
  border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   Navigation button row (Back + Next / Submit)
   ========================================================================== */

/* On mobile, stack Back below Next so the primary action is thumb-reachable
   at the bottom of the screen. On wider screens, keep them side by side. */
.tp-pin-purchase__form .form-actions {
  display: flex;
  flex-direction: row;
  gap: var(--sp1, 1.125rem);
  margin-top: var(--sp2, 2.25rem);
}

@media (max-width: 480px) {
  .tp-pin-purchase__form .form-actions {
    flex-direction: column-reverse;
  }

  .tp-pin-purchase__form .form-actions .button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Tighten stepper on small phones. */
  .tp-pp-stepper__step {
    min-width: 44px;
  }

  .tp-pp-stepper__label {
    font-size: 0.625rem;
  }

  .tp-pp-review__table td:first-child {
    width: 45%;
  }
}