/**
 * @file
 * Styles for the online PIN purchase form (#1308).
 *
 * Consumes the tpemis_ui design tokens (tpemis_ui/tokens, attached by the
 * form alongside tpemis_ui/webform) so the buy-pin flow matches the standard
 * TpEMIS form UI. Every colour comes from a --tp-* variable with a plain
 * fallback for token-less contexts (e.g. maintenance themes).
 */

/* NIN input: uppercase display so the applicant sees the normalised value
 * they will submit. The JS behaviour also forces uppercase on input; the CSS
 * alone handles the case where JavaScript is disabled. */
.tpemis-nin-input {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: monospace;
  font-size: 1.1em;
  max-width: 12ch;
}

/* Legal notice at the top of the form. */
.tpemis-pin-notice {
  margin-bottom: 1.5rem;
}

/* Fieldsets provide visual grouping without extra visual weight. The header
 * bar (legend) below bleeds to these edges, so top padding is dropped and the
 * corners are clipped so the navy bar's square top aligns with the card. */
#tpemis-online-pin-purchase-form fieldset {
  /* Inner padding as a variable so the full-bleed legend below can stay in
     sync; it shrinks on small screens so the fields use more of the width. */
  --pp-pad: 1.25rem;
  border: 1px solid var(--tp-color-border-default, #e3e8ef);
  border-radius: var(--tp-border-radius-lg, 16px);
  padding: 0 var(--pp-pad) 1.5rem;
  margin-bottom: 1.5rem;
  /* Distinct white card on the grey page (#1380 design). */
  background: var(--tp-color-surface-default, #fff);
  box-shadow: 0 1px 3px rgba(20, 24, 50, 0.06);
}
@media (max-width: 640px) {
  #tpemis-online-pin-purchase-form fieldset {
    --pp-pad: 0.85rem;
  }
}
@media (max-width: 460px) {
  #tpemis-online-pin-purchase-form fieldset {
    --pp-pad: 0.65rem;
  }
}

#tpemis-online-pin-purchase-form fieldset legend {
  font-weight: 600;
  padding: 0 0.5rem;
}

#tpemis-online-pin-purchase-form fieldset > .fieldset-description {
  color: var(--tp-color-text-default, #555);
  opacity: 0.85;
  font-size: 0.9em;
  margin-bottom: 0.75rem;
}

/* Select dropdown arrow: this form is not a webform, so the webform chevron
 * does not reach it and the native arrow crowded the text on narrow screens.
 * Draw a custom chevron and reserve room for it so it is always clearly
 * visible and never overlaps the option text. */
#tpemis-online-pin-purchase-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1l7 7 7-7' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 14px 9px;
}

/* Stepper (#1308): 7 steps, completed steps are clickable buttons.
 * Every item — circle steps, the active step and the clickable pills — is a
 * uniform single-line chip of the same height, laid out with flex-wrap so
 * the row folds cleanly on narrow screens. Connector lines are omitted on
 * purpose: they cannot survive wrapping without misalignment. */
.tp-pp-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  /* Standalone white card matching the #1380 design (was a subtle grey box). */
  padding: 1rem 1.25rem;
  border: 1px solid var(--tp-color-border-default, #e3e8ef);
  border-radius: var(--tp-border-radius-lg, 16px);
  background: var(--tp-color-surface-default, #fff);
  box-shadow: 0 1px 3px rgba(20, 24, 50, 0.06);
}

.tp-pp-stepper__step {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--tp-border-radius-pill, 999px);
  background: transparent;
  color: var(--tp-color-text-default, #333);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.tp-pp-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--tp-color-border-default, #bbb);
  background: var(--tp-color-surface-default, #fff);
  font-weight: 600;
  font-size: 0.75rem;
}

.tp-pp-stepper__label {
  line-height: 1.2;
}

.tp-pp-stepper__step--active {
  background: var(--tp-color-brand-primary, #005a9c);
  border-color: var(--tp-color-brand-primary, #005a9c);
  color: #fff;
}

.tp-pp-stepper__step--active .tp-pp-stepper__num {
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
  color: #fff;
}

.tp-pp-stepper__step--done .tp-pp-stepper__num {
  background: var(--tp-color-success, #2e7d32);
  border-color: var(--tp-color-success, #2e7d32);
  color: #fff;
}

/* Clickable (visited) steps: same chip metrics as the inert items so the
 * row stays perfectly aligned; only the affordance differs. */
button.tp-pp-stepper__step--clickable,
input.tp-pp-stepper__step--clickable {
  cursor: pointer;
  height: 2.25rem;
  padding: 0 0.75rem;
  margin: 0;
  border-radius: var(--tp-border-radius-pill, 999px);
  background: var(--tp-color-surface-default, #fff);
  border: 1px solid var(--tp-color-border-default, #ccc);
  color: var(--tp-color-brand-primary, #005a9c);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

button.tp-pp-stepper__step--clickable:hover,
input.tp-pp-stepper__step--clickable:hover {
  background: var(--tp-color-brand-primary-light, #e8f1f8);
  border-color: var(--tp-color-brand-primary, #005a9c);
}

/* Chevron separators between steps (#1380 design). The separator nodes exist
 * in the markup; render them as a light ">" glyph on wider screens so the
 * stepper reads as a connected sequence, and hide them once the row wraps on
 * narrow screens (a stray chevron at a wrap point looks broken). Scoped with
 * the form id so it wins over the theme's page-level connector-line styling. */
#tpemis-online-pin-purchase-form .tp-pp-stepper__sep {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0 0.1rem;
  background: none;
  color: var(--tp-color-text-muted, #9aa4b2);
  line-height: 1;
}
#tpemis-online-pin-purchase-form .tp-pp-stepper__sep::before {
  content: '\203A';
  font-size: 1.1rem;
  font-weight: 400;
}
@media (max-width: 640px) {
  #tpemis-online-pin-purchase-form .tp-pp-stepper__sep {
    display: none;
  }
}

@media (max-width: 480px) {
  .tp-pp-stepper {
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
  }

  .tp-pp-stepper__step,
  button.tp-pp-stepper__step--clickable,
  input.tp-pp-stepper__step--clickable {
    height: 2rem;
    padding: 0 0.55rem;
    font-size: 0.78rem;
  }

  /* On the smallest screens the labels of future steps give way to the
   * numbers alone; the active and visited steps keep their labels. */
  .tp-pp-stepper__step:not(.tp-pp-stepper__step--active):not(.tp-pp-stepper__step--done) .tp-pp-stepper__label {
    display: none;
  }
}

/* Step indicator container (#1380 design). Form-id scoped so it wins over both
 * the module and theme base .tp-pp-stepper rules (whose load order otherwise
 * decides the layout). A single, neat row: the seven steps are spread across
 * the full card width with space-between; the card has an even border and
 * padding. On narrow screens it scrolls horizontally rather than wrapping. */
#tpemis-online-pin-purchase-form .tp-pp-stepper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tp-spacing-2, 0.5rem);
  margin: 0 0 var(--tp-spacing-6, 1.5rem);
  padding: var(--tp-spacing-4, 1rem) var(--tp-spacing-5, 1.5rem);
  border: 1px solid var(--tp-color-border-default, #e3e8ef);
  border-radius: var(--tp-border-radius-lg, 16px);
  background: var(--tp-color-surface-default, #fff);
  box-shadow: 0 1px 3px rgba(20, 24, 50, 0.06);
}
#tpemis-online-pin-purchase-form .tp-pp-stepper__sep {
  align-self: center;
  flex: 0 0 auto;
}
/* MD and below: the full seven-step row with labels does not fit neatly, so
 * collapse the indicator to just the numbered/checked circles - no labels, no
 * chevrons. The compact circles sit on ONE line at these widths and wrap to at
 * most two lines on the very narrowest screens (they never shrink, clip, or
 * side-scroll). The current step is named by the fieldset header below. */
@media (max-width: 1024px) {
  #tpemis-online-pin-purchase-form .tp-pp-stepper {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tp-spacing-2, 0.5rem);
    padding: var(--tp-spacing-3, 0.75rem);
    overflow: visible;
  }
  #tpemis-online-pin-purchase-form .tp-pp-stepper__step .tp-pp-stepper__label {
    display: none;
  }
  #tpemis-online-pin-purchase-form .tp-pp-stepper__sep {
    display: none;
  }
  /* Slightly smaller circles so all seven fit one line down to ~300px. */
  #tpemis-online-pin-purchase-form .tp-pp-stepper__num {
    width: 1.5rem;
    height: 1.5rem;
  }
  /* Completed steps are inputs whose label is the button text; show only the
     green check circle by collapsing the text and pinning the circle centre. */
  #tpemis-online-pin-purchase-form input.tp-pp-stepper__step--clickable,
  #tpemis-online-pin-purchase-form button.tp-pp-stepper__step--clickable {
    width: 1.5rem;
    padding: 0;
    font-size: 0;
    background-position: center;
    background-size: 1.5rem 1.5rem;
  }
}

/* Step indicator per the #1380 design: every step is a plain circle with its
 * label INLINE beside it; only the circle colour changes between states
 * (upcoming = grey, active = navy, done = green). The circle shape never
 * changes - no pill/box around the active step. Form-id scoped so these win
 * over both the module and theme base stepper rules. */
#tpemis-online-pin-purchase-form .tp-pp-stepper__step {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  /* Never shrink: shrinking squashed circles and truncated labels, and on very
     narrow screens collapsed the whole row. If the row is wider than the card
     the container scrolls (see the mobile rules below) instead. */
  flex: 0 0 auto;
  background: transparent;
  color: var(--tp-color-text-muted, #5b6473);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
#tpemis-online-pin-purchase-form .tp-pp-stepper__num {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--tp-color-border-default, #d4dae3);
  background: var(--tp-color-surface-subtle, #eef1f5);
  color: var(--tp-color-text-muted, #5b6473);
  font-size: 0.78rem;
  font-weight: 700;
}
#tpemis-online-pin-purchase-form .tp-pp-stepper__label {
  line-height: 1.1;
}
/* Active: navy filled circle + navy label. */
#tpemis-online-pin-purchase-form .tp-pp-stepper__step--active {
  color: var(--tp-color-brand-primary, #1b3a6b);
}
#tpemis-online-pin-purchase-form .tp-pp-stepper__step--active .tp-pp-stepper__num {
  background: var(--tp-color-brand-primary, #1b3a6b);
  border-color: var(--tp-color-brand-primary, #1b3a6b);
  color: #fff;
}
/* Completed: green filled circle + green label. */
#tpemis-online-pin-purchase-form .tp-pp-stepper__step--done {
  color: var(--tp-color-success, #2e7d32);
}
#tpemis-online-pin-purchase-form .tp-pp-stepper__step--done .tp-pp-stepper__num {
  background: var(--tp-color-success, #2e7d32);
  border-color: var(--tp-color-success, #2e7d32);
  color: #fff;
}
/* Visited (completed, clickable) steps: a green check circle followed by the
 * label - matching the design (#1380). The clickable variant is an
 * <input>/<button> that cannot hold child elements, so the check circle is
 * drawn as a left-aligned SVG background and the label is the button text; the
 * padding leaves room for the circle so it lines up with the other steps. */
#tpemis-online-pin-purchase-form button.tp-pp-stepper__step--clickable,
#tpemis-online-pin-purchase-form input.tp-pp-stepper__step--clickable {
  height: 1.6rem;
  margin: 0;
  padding: 0 0 0 2.05rem;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232e7d32'/%3E%3Cpath d='M7 12.4l3.2 3.2L17 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center;
  background-size: 1.6rem 1.6rem;
  color: var(--tp-color-success, #2e7d32);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6rem;
  cursor: pointer;
  text-decoration: none;
}
#tpemis-online-pin-purchase-form button.tp-pp-stepper__step--clickable:hover,
#tpemis-online-pin-purchase-form input.tp-pp-stepper__step--clickable:hover {
  text-decoration: underline;
}

/* Price notice on the Instruction and Purchase steps. */
.tp-pp-price-notice {
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--tp-color-info, #005a9c);
  background: var(--tp-color-surface-subtle, #f2f7fb);
  border-radius: var(--tp-border-radius-sm, 3px);
}

/* Preview (review) table. */
.tp-pp-review__table {
  width: 100%;
  border-collapse: collapse;
}

.tp-pp-review__table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--tp-color-border-default, #eee);
}

.tp-pp-review__table tr td:first-child {
  font-weight: 600;
  width: 35%;
}

.tp-pp-review__disclaimer {
  margin-top: 0.75rem;
  color: var(--tp-color-danger, #b71c1c);
}

/* Academic year banner. */
.tp-pp-year-banner {
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--tp-border-radius-sm, 3px);
  background: var(--tp-color-surface-subtle, #f7f7f7);
  border: 1px solid var(--tp-color-border-default, #e0e0e0);
  display: inline-block;
}

/* Section-header bar (#1380 design). Each step's fieldset title renders as a
 * full-width brand-navy header bar with a leading document icon, matching the
 * mockup. The base theme paints the legend slate with white label text; here
 * we recolour it to brand navy and prepend the icon. Scoped to the purchase
 * form id so no other fieldsets on the site are affected. */
#tpemis-online-pin-purchase-form fieldset > legend {
  display: block;
  /* Full-bleed header: span the fieldset padding box border-to-border. It
   * widens by twice the fieldset inline padding (--pp-pad) and pulls out by
   * that amount each side (<legend> shrink-wraps by default, hence the explicit
   * width). Using the variable keeps it in sync when the padding shrinks on
   * small screens. Rounded top corners match the card so no overflow-clip is
   * needed (which would risk clipping a select/date popup on later steps). */
  box-sizing: border-box;
  width: calc(100% + 2 * var(--pp-pad, 1.25rem));
  margin: 0 calc(-1 * var(--pp-pad, 1.25rem)) 1rem;
  padding: 0.75rem var(--pp-pad, 1.25rem);
  background: var(--tp-color-brand-primary, #1b3a6b);
  border-radius: var(--tp-border-radius-lg, 16px) var(--tp-border-radius-lg, 16px) 0 0;
}
#tpemis-online-pin-purchase-form fieldset > legend .fieldset__label,
#tpemis-online-pin-purchase-form fieldset > legend {
  color: var(--tp-color-text-on-primary, #fff);
}
/* The label text carries the icon so it sits beside the words, not the bar. */
#tpemis-online-pin-purchase-form fieldset > legend .fieldset__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
#tpemis-online-pin-purchase-form fieldset > legend .fieldset__label::before {
  content: '';
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E") center / contain no-repeat;
}