/* ==========================================================================
   AIMZ Egypt — shared stylesheet
   Used by index.html, application.html and playerkit.html.
   Edit colours and type here once and all three pages follow.
   ========================================================================== */

:root{
  --navy-950:#071628;
  --navy-900:#0A1E33;
  --navy-850:#0E2740;
  --navy-800:#133455;   /* sampled from the match kit */
  --navy-700:#1B4570;
  --line:#22456E;
  --line-soft:#18314C;
  --sky:#5AA0E0;
  --sky-dim:#33699F;
  --amber:#E8A33D;
  --chalk:#F3F7FC;
  --mute:#93AAC7;
  --mute-dim:#6E86A3;
  --danger:#FF8A7A;
  --ok:#5FD3A0;
  --radius:10px;
  --maxw:1120px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{background:var(--navy-950)}
html{height:100%}

body{
  margin:0;
  min-height:100%;
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--chalk);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* The first layer keeps the top 140px flat navy so it matches the
     browser's own theme-color bar — without it the glow below met the
     chrome in a hard line across the top of a phone screen. */
  background:
    linear-gradient(180deg, var(--navy-950) 0, rgba(7,22,40,0) 140px),
    radial-gradient(1100px 600px at 18% -8%, #12395F 0%, rgba(18,57,95,0) 62%),
    var(--navy-950);
  background-repeat:no-repeat;
}

img{max-width:100%}
[hidden]{display:none!important}

h1,h2,h3,.cond{
  font-family:'Barlow Condensed','Barlow',system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:0;
  text-wrap:balance;
}

.wrap{
  --gutter:20px;
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
  padding-block:0 56px;
}

.sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- masthead ---------- */
.mast{
  display:flex;
  align-items:center;
  gap:14px;
  padding-block:22px 18px;
  border-bottom:1px solid var(--line-soft);
}
.mast-link{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
  border-radius:6px;
}
.mast-link:focus-visible{outline:2px solid var(--sky);outline-offset:4px}
.crest{height:46px;width:auto;display:block;flex:none}
.mast-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mast-txt .club{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:19px;
  letter-spacing:.11em;
  line-height:1.1;
}
.mast-txt .sub{
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute-dim);
  font-weight:600;
}
.season{
  margin-left:auto;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute-dim);
  border:1px solid var(--line-soft);
  border-radius:99px;
  padding:5px 12px;
  white-space:nowrap;
  font-weight:600;
}

/* ---------- landing page ---------- */
.hero{
  padding-block:min(11vh,90px) 34px;
  max-width:60ch;
}
.hero .eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12.5px;
  font-weight:600;
  color:var(--amber);
  margin:0 0 12px;
}
.hero h1{
  font-size:clamp(34px,6.4vw,54px);
  font-weight:700;
  line-height:1.02;
}
.hero p{
  color:var(--mute);
  font-size:16.5px;
  margin:14px 0 0;
  max-width:50ch;
}

.routes{
  display:grid;
  grid-template-columns:1fr 1fr;     /* side by side at every width */
  gap:16px;
  padding-bottom:10px;
}
.route{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:24px 24px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(165deg,var(--navy-850),var(--navy-900));
  text-decoration:none;
  color:inherit;
  transition:border-color .2s, transform .2s, background .2s;
}
.route .ricon{
  width:48px;height:48px;
  border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:var(--navy-900);
  color:var(--sky);
  margin-bottom:4px;
  transition:.2s;
}
.route .ricon svg{width:26px;height:26px}
@media (hover:hover){
  .route:hover .ricon{border-color:var(--amber);color:var(--amber)}
}
.route .rtag{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:11.5px;
  font-weight:600;
  color:var(--mute-dim);
}
.route h2{font-size:25px;font-weight:700;line-height:1.08}
.route p{margin:0;color:var(--mute);font-size:14.5px;max-width:38ch}
.route .go{
  margin-top:auto;      /* both cards' links sit on the same line even when
                           one title wraps to two lines and the other doesn't */
  padding-top:9px;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:14px;
  color:var(--amber);
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.route .go svg{transition:transform .2s}
.route:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
@media (hover:hover){
  .route:hover{border-color:var(--amber);transform:translateY(-2px)}
  .route:hover .go svg{transform:translateX(4px)}
}

/* ---------- landing page: one screenful on a computer ----------------
   Nothing on this page is worth a scrollbar, so on a desktop the whole
   thing is fitted to the window: the spacing and the headline shrink with
   the window's HEIGHT, and the footer is pushed to the bottom. Phones are
   left alone — scrolling is normal there. */
@media (min-width:901px){
  .home .wrap{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    padding-block:0 clamp(14px,2.4vh,26px);
  }
  .home .hero{
    padding-block:clamp(14px,4.4vh,58px) clamp(14px,3vh,30px);
    max-width:58ch;
  }
  .home .hero .eyebrow{margin-bottom:clamp(6px,1.2vh,12px)}
  .home .hero h1{font-size:clamp(28px,min(5.2vw,6.6vh),52px)}
  .home .hero p{
    font-size:clamp(14px,1.9vh,16.5px);
    margin-top:clamp(8px,1.6vh,14px);
  }
  /* spare height is split above and below, so the block sits centred in the
     window instead of leaving one big gap under the cards */
  .home .hero{margin-top:auto}
  .home .routes{padding-bottom:0;margin-bottom:auto}
  .home .route{padding:clamp(14px,2.4vh,24px) 24px clamp(13px,2.2vh,22px)}
  .home .route .ricon{
    width:clamp(34px,5vh,48px);height:clamp(34px,5vh,48px);
    margin-bottom:clamp(0px,.5vh,4px);
  }
  .home .route h2{font-size:clamp(19px,2.9vh,25px)}
  .home .route p{font-size:clamp(13px,1.8vh,14.5px)}
  .home .foot{margin-top:0;padding-top:clamp(12px,2vh,18px)}
}

/* ---------- step rail ---------- */
.rail{
  display:flex;
  gap:8px;
  padding-block:22px 6px;
  list-style:none;
  margin:0;
}
.rail li{flex:1 1 0;min-width:0}
.rail button{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  background:none;
  border:0;
  border-top:2px solid var(--line-soft);
  padding:11px 0 0;
  color:var(--mute-dim);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .25s, color .25s;
}
.rail button:disabled{cursor:default}
.rail .num{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.06em;
  width:21px;height:21px;
  flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid currentColor;
  font-variant-numeric:tabular-nums;
}
.rail .lbl{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:600;
  font-size:13.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rail li[data-state="current"] button{border-top-color:var(--amber);color:var(--chalk)}
.rail li[data-state="current"] .num{background:var(--amber);border-color:var(--amber);color:var(--navy-950)}
.rail li[data-state="done"] button{border-top-color:var(--sky-dim);color:var(--mute)}
.rail li[data-state="done"] .num{border-color:var(--sky-dim);color:var(--sky)}

/* ---------- two-column form layout ---------- */
.cols{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:40px;
  align-items:start;
  padding-top:26px;
}
.cols.no-aside{grid-template-columns:minmax(0,1fr)}
.cols.no-aside .panel{max-width:820px}   /* keep fields a sane width */
.aside{position:sticky;top:20px}
.panel{min-width:0}

/* ---------- kit preview ---------- */
.kit-stage{
  position:relative;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:linear-gradient(170deg,var(--navy-850),var(--navy-900));
  padding:18px 18px 14px;
}
.kit-frame{
  position:relative;
  width:100%;
  max-width:265px;
  margin:0 auto;
  aspect-ratio:620/838;
  container-type:inline-size;
}
.kit-frame img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  max-width:100%;
  opacity:0;
  transition:opacity .3s ease;
}
.kit-frame[data-kit="home"][data-face="back"]  img[data-plate="home-back"],
.kit-frame[data-kit="home"][data-face="front"] img[data-plate="home-front"],
.kit-frame[data-kit="away"][data-face="back"]  img[data-plate="away-back"],
.kit-frame[data-kit="away"][data-face="front"] img[data-plate="away-front"]{opacity:1}

.kit-ink{
  position:absolute;
  inset:0;
  pointer-events:none;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  text-align:center;
  transition:opacity .3s ease;
  color:#EDF3FA;
  --ink-shadow:0 2px 5px rgba(0,0,0,.42);
}
.kit-frame[data-kit="away"] .kit-ink{
  color:#14141C;                       /* black print on the pink away kit */
  --ink-shadow:0 1px 4px rgba(255,255,255,.3);
}
.kit-frame[data-face="front"] .kit-ink{opacity:0}
#kitName{
  position:absolute;
  left:50%;top:17.5%;
  transform:translateX(-50%);
  width:74%;
  font-weight:700;
  /* --name-cqw is set from JS so long names shrink to fit the shoulders */
  font-size:clamp(12px, calc(var(--name-cqw, 10) * 1cqw), 40px);
  letter-spacing:var(--name-track,.1em);
  line-height:1;
  text-shadow:var(--ink-shadow);
  white-space:nowrap;
  overflow:hidden;
}
#kitNum{
  position:absolute;
  /* sits clear of the printed name above it */
  left:50%;top:28.5%;
  transform:translateX(-50%);
  font-weight:700;
  font-size:clamp(44px,24cqw,92px);
  line-height:.92;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  text-shadow:var(--ink-shadow);
}
.kit-flip{
  display:flex;
  gap:6px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.flip-sep{
  width:1px;
  height:18px;
  background:var(--line);
  margin-inline:4px;
}
.kit-flip button{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  font-size:12px;
  padding:6px 15px;
  border-radius:99px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--mute);
  cursor:pointer;
  transition:.18s;
}
.kit-flip button[aria-pressed="true"]{
  background:var(--navy-700);
  border-color:var(--sky-dim);
  color:var(--chalk);
}

/* ---------- running summary card ---------- */
.meta{
  margin-top:14px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:13px 15px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.meta.standalone{margin-top:0}
.meta dl{display:flex;flex-direction:column;gap:8px;margin:0}
.meta h3{
  font-size:12px;
  letter-spacing:.13em;
  font-weight:600;
  color:var(--mute-dim);
  padding-bottom:9px;
  margin-bottom:2px;
  border-bottom:1px solid var(--line-soft);
}
.meta .row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:13px;
}
.meta dt{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--mute-dim);
  font-weight:600;
  font-size:12px;
  margin:0;
  white-space:nowrap;
}
.meta dd{
  margin:0;
  font-weight:600;
  text-align:right;
  min-width:0;
  overflow-wrap:anywhere;
}
.meta dd.empty{color:var(--mute-dim);font-weight:400}

.aside-crest{
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:linear-gradient(170deg,var(--navy-850),var(--navy-900));
  padding:26px 20px;
  text-align:center;
  margin-bottom:14px;
}
.aside-crest img{height:76px;width:auto;display:block;margin:0 auto 14px}
.aside-crest p{
  margin:0;
  color:var(--mute);
  font-size:13.5px;
  line-height:1.5;
}

/* ---------- form chrome ---------- */
.step[hidden]{display:none!important}
.step-head{margin-bottom:22px}
.step-head h2{font-size:27px;font-weight:700;line-height:1.08}
.step-head p{margin:6px 0 0;color:var(--mute);font-size:14.5px;max-width:56ch}

fieldset{border:0;margin:0 0 24px;padding:0;min-width:0}
legend{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:600;
  font-size:12.5px;
  color:var(--mute);
  padding:0;
  margin-bottom:10px;
}
.req{color:var(--amber);margin-left:3px}

/* A few fields that belong together — the two halves of an address, say —
   boxed and indented so they read as one answer rather than two. */
.group{
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:rgba(14,39,64,.34);
  padding:14px 14px 4px;
  margin-bottom:24px;
}
.group > legend{
  float:left;
  width:100%;
  margin:0 0 12px;
  color:var(--mute);
}
.group .field{margin-bottom:14px}
.group .field.last{margin-bottom:10px}
.hint{
  display:block;
  font-family:'Barlow',sans-serif;
  text-transform:none;
  letter-spacing:0;
  font-size:12.5px;
  color:var(--mute-dim);
  font-weight:400;
  margin-top:3px;
}

/* area cards — picked first, they filter the branches below */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.area{position:relative}
.area input{position:absolute;opacity:0;width:1px;height:1px}
.area > span{
  display:flex;
  flex-direction:column;
  gap:5px;
  height:100%;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--navy-900);
  cursor:pointer;
  transition:border-color .18s, background .18s;
}
.area .aname{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:20px;
  letter-spacing:.05em;
  line-height:1.1;
}
.area input:checked + span{
  border-color:var(--amber);
  background:linear-gradient(160deg,#16375A,#102B48);
}
.area input:focus-visible + span{outline:2px solid var(--sky);outline-offset:2px}
@media (hover:hover){.area > span:hover{border-color:var(--sky-dim)}}

/* branch cards */
.branches{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.branch{position:relative}
.branch input{position:absolute;opacity:0;width:1px;height:1px}
.branch > span{
  display:flex;
  flex-direction:column;
  gap:3px;
  height:100%;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--navy-900);
  cursor:pointer;
  transition:border-color .18s, background .18s;
}
.branch .bname{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:17px;
  letter-spacing:.04em;
  line-height:1.12;
}
.branch .bzone{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  font-size:11.5px;
  letter-spacing:.13em;
  color:var(--mute-dim);
  font-weight:600;
}
.branch input:checked + span{
  border-color:var(--amber);
  background:linear-gradient(160deg,#16375A,#102B48);
}
.branch input:checked + span .bzone{color:var(--amber)}
.branch input:focus-visible + span{outline:2px solid var(--sky);outline-offset:2px}
@media (hover:hover){.branch > span:hover{border-color:var(--sky-dim)}}

/* text fields */
.field{margin-bottom:18px}
.field label{
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:600;
  font-size:12.5px;
  color:var(--mute);
  margin-bottom:6px;
}
input[type="text"],input[type="date"],input[type="tel"],input[type="email"],textarea{
  width:100%;
  padding:11px 13px;
  background:var(--navy-900);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--chalk);
  font:500 15px/1.4 'Barlow',sans-serif;
  transition:border-color .18s;
  -webkit-appearance:none;
  appearance:none;
  min-width:0;
}
textarea{resize:vertical;min-height:84px;line-height:1.5}

select{
  width:100%;
  padding:11px 36px 11px 13px;
  background-color:var(--navy-900);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2393AAC7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--chalk);
  font:500 15px/1.4 'Barlow',sans-serif;
  transition:border-color .18s;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  min-width:0;
}
select:focus{outline:none;border-color:var(--sky)}
select:focus-visible{outline:2px solid var(--sky);outline-offset:1px}
select:invalid,select.placeholder{color:var(--mute-dim);font-weight:400}
select option{background:var(--navy-900);color:var(--chalk)}
@media (hover:hover){select:hover{border-color:var(--sky-dim)}}
input::placeholder,textarea::placeholder{color:var(--mute-dim);font-weight:400}
input:focus,textarea:focus{outline:none;border-color:var(--sky)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--sky);outline-offset:1px}
input[type="date"]{color-scheme:dark}
.mono-in{
  font-family:'Barlow Condensed',sans-serif!important;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700!important;
  font-size:17px!important;
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.counter{
  font-size:11.5px;
  color:var(--mute-dim);
  margin-top:5px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

/* size chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip > span{
  display:block;
  min-width:44px;
  text-align:center;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--navy-900);
  cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  font-weight:600;
  font-size:15px;
  letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  transition:.16s;
}
.chip input:checked + span{
  background:var(--amber);
  border-color:var(--amber);
  color:var(--navy-950);
  font-weight:700;
}
.chip input:focus-visible + span{outline:2px solid var(--sky);outline-offset:2px}
@media (hover:hover){.chip > span:hover{border-color:var(--sky-dim)}}

.size-band{display:flex;flex-direction:column;gap:9px}
.band-row{display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap}
.band-tag{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.13em;
  color:var(--mute-dim);
  font-weight:600;
  padding-top:11px;
  width:48px;
  flex:none;
}

/* wide radio options */
.stack{display:grid;gap:9px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt > span{
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--navy-900);
  cursor:pointer;
  transition:.18s;
}
.opt > span::before{
  content:"";
  width:15px;height:15px;
  border-radius:50%;
  border:1.5px solid var(--line);
  flex:none;
  transition:.18s;
}
.opt input:checked + span{border-color:var(--amber);background:linear-gradient(160deg,#16375A,#102B48)}
.opt input:checked + span::before{border-color:var(--amber);border-width:4.5px}
.opt input:focus-visible + span{outline:2px solid var(--sky);outline-offset:2px}
.opt .otitle{font-weight:600;font-size:14.5px}
.opt .onote{color:var(--mute-dim);font-size:12.5px;margin-left:auto;text-align:right}
@media (hover:hover){.opt > span:hover{border-color:var(--sky-dim)}}

/* review block */
.review{
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:22px;
}
.review h3{
  font-size:12.5px;
  letter-spacing:.13em;
  font-weight:600;
  color:var(--mute);
  padding:12px 16px;
  background:var(--navy-900);
  border-bottom:1px solid var(--line-soft);
}
.review dl{margin:0;padding:6px 16px 14px}
.review .row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  border-bottom:1px solid rgba(34,69,110,.35);
  font-size:14px;
}
.review .row:last-child{border-bottom:0}
.review dt{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--mute-dim);
  font-weight:600;
  font-size:12.5px;
  margin:0;
  flex:none;
}
.review dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}

/* buttons */
.actions{
  display:flex;
  gap:10px;
  align-items:center;
  padding-top:6px;
  flex-wrap:wrap;
}
.btn{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:700;
  font-size:15px;
  padding:12px 26px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  transition:.18s;
  line-height:1.2;
  text-decoration:none;
  display:inline-block;
}
.btn-primary{background:var(--amber);color:var(--navy-950)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--mute)}
.btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
@media (hover:hover){
  .btn-primary:not([disabled]):hover{background:#F2B355}
  .btn-ghost:not([disabled]):hover{border-color:var(--sky-dim);color:var(--chalk)}
}

.err{
  color:var(--danger);
  font-size:13.5px;
  font-weight:500;
  margin:0 0 14px;
  padding:10px 13px;
  border:1px solid rgba(255,138,122,.32);
  border-radius:8px;
  background:rgba(255,138,122,.07);
}
.err[hidden]{display:none!important}

/* success */
/* The tick and the thank-you line sit above both columns, so the card that
   carries the image starts level with the box on the left. */
/* once the form is submitted the "five short steps" note is stale, so the
   summary box becomes the top box in the left column */
body.is-done .aside-crest{display:none}

.done-head{
  padding:30px 0 4px;
  max-width:62ch;
}
.done-head h2{font-size:32px;font-weight:700}
.done-head p{color:var(--mute);margin:10px 0 0;font-size:15.5px}

.done{
  text-align:left;
  padding:0 0 30px;
  max-width:560px;
}
.done-head .tick{
  width:62px;height:62px;
  margin:0 0 20px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(95,211,160,.11);
  border:1.5px solid rgba(95,211,160,.42);
}
.done-head .tick svg{display:block}
.done-head .num-badge{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  margin-top:20px;
  padding:9px 18px;
  border:1px solid var(--line);
  border-radius:99px;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:13px;
  color:var(--mute);
  font-weight:600;
}
.done-head .num-badge b{color:var(--chalk);font-size:16px;letter-spacing:.06em}
.done .actions{justify-content:flex-start;margin-top:26px}

/* ---------- what happens next, on the thank-you screens ---------- */
.after{margin-top:0;text-align:left}
/* the wizard focuses each step's heading so it is announced on arrival —
   that must not paint a box around it */
.step-head h2[tabindex]:focus,
.step-head h2[tabindex]:focus-visible{outline:none}

.after-card{
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--navy-900);
}
.after-card h3{
  font-size:12.5px;
  letter-spacing:.13em;
  font-weight:600;
  color:var(--mute);
  padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
}
.after-sub{
  font-size:12px;
  letter-spacing:.13em;
  font-weight:600;
  color:var(--mute-dim);
  padding:4px 16px 10px;
  margin:0;
}
.after-img{
  display:block;
  position:relative;
  background:var(--navy-950);
  line-height:0;
  text-decoration:none;
}
.after-img img{width:100%;height:auto;display:block}
/* .bleed-card lets a card whose whole point is one big image run to the
   edges of a phone screen instead of stopping at the page gutter. */
@media (max-width:560px){
  .after-card.bleed-card{
    margin-inline:calc(var(--gutter) * -1);
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  /* the card moved out to the screen edge, so its own text has to move
     back in by the same amount to keep its margin */
  .after-card.bleed-card > h3,
  .after-card.bleed-card .tap{
    padding-inline:calc(16px + var(--gutter));
  }
}
/* Caption strip under the image — kept off the artwork so it can never
   sit on top of a logo or a headline. */
.after-img .tap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:11.5px;
  font-weight:600;
  color:var(--mute);
  background:var(--navy-900);
  border-top:1px solid var(--line-soft);
  padding:8px 11px;
  line-height:1.2;
}
@media (hover:hover){
  .after-img:hover .tap{color:var(--amber)}
}

.after-price{
  margin:0;
  padding:14px 16px 4px;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  font-size:21px;
  color:var(--amber);
}
.after-list{
  margin:0;
  padding:8px 16px 18px;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 16px;
  font-size:13.5px;
  color:var(--mute);
}
.after-list li{position:relative;padding-left:15px}
.after-list li::before{
  content:"";
  position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;
  background:var(--sky-dim);
}


.pay-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line-soft);
  border-top:1px solid var(--line-soft);
}
/* Every way of paying is offered on the same terms, so every card is built
   the same: logo on top, what it is underneath, and a "Pay now" line only
   on the ones that actually open something. */
.pay{
  background:var(--navy-900);
  padding:16px 14px 14px;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:9px;
  align-content:start;
  justify-items:start;
  min-height:124px;
}
.pay-logo-slot{
  height:30px;
  display:flex;
  align-items:center;
}
/* logos vary from wide wordmarks to near-square lockups, so bound both
   dimensions and let each sit as large as it can in the same box */
.pay-logo{
  height:auto;width:auto;
  max-height:30px;max-width:118px;
  object-fit:contain;display:block;
}
.pay-name{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:700;
  font-size:17px;
  color:var(--chalk);
}
.pay-detail{font-size:12.5px;color:var(--mute-dim);line-height:1.35}
.pay.is-link{text-decoration:none;transition:.18s}
.pay.is-link .pay-detail{color:var(--mute-dim)}
.pay-go{
  align-self:end;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:700;
  font-size:13px;
  color:var(--amber);
}
.pay-go svg{transition:transform .2s}
@media (hover:hover){
  .pay.is-link:hover .pay-go svg{transform:translateX(4px)}
}
.pay.is-link:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}
@media (hover:hover){
  .pay.is-link:hover{background:var(--navy-850)}
}

/* ---------- bank transfer details ----------
   Sits under the payment options, because it only matters once someone has
   picked InstaPay. Built as label-and-value rows rather than a paragraph so
   the account number can be read back a digit at a time, and copied in one
   tap rather than transcribed. */
.bank{
  border-top:1px solid var(--line-soft);
  background:var(--navy-900);
}
.bank-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  font-size:13.5px;
}
.bank-row + .bank-row{border-top:1px solid var(--line-soft)}
.bank-k{
  flex:none;
  min-width:116px;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  font-size:12px;
  color:var(--mute-dim);
}
.bank-v{
  flex:1 1 auto;
  font-weight:700;
  color:var(--chalk);
  overflow-wrap:anywhere;
}
/* the account number reads as digits, not as a word */
.bank-v.num{
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  font-size:15px;
}
.bank-copy{
  flex:none;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  font-size:12px;
  padding:7px 13px;
  border-radius:7px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--mute);
  cursor:pointer;
  transition:.18s;
  white-space:nowrap;
}
.bank-copy.ok{border-color:var(--ok);color:var(--ok)}
.bank-copy:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
@media (hover:hover){
  .bank-copy:hover{border-color:var(--sky-dim);color:var(--chalk)}
  .bank-copy.ok:hover{border-color:var(--ok);color:var(--ok)}
}
@media (max-width:460px){
  .bank-k{min-width:0;flex:1 1 auto}
  .bank-v{flex:0 1 auto;text-align:right}
}

/* footer */
.foot{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
  color:var(--mute-dim);
  font-size:12.5px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.foot a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line)}
@media (hover:hover){.foot a:hover{color:var(--chalk)}}

/* branch phone numbers — a real tel: link, so a phone dials on tap */
.foot-call{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
/* the numbers live in this span, so the spacing has to be set on it */
#footContacts{display:inline-flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.foot-tel{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  color:var(--chalk)!important;
  border-bottom:0!important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.foot-tel-name{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:11px;
  font-weight:700;
  color:var(--amber);
}
.foot-dot{color:var(--mute-dim)}
@media (hover:hover){.foot-tel:hover{color:var(--amber)!important}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cols{grid-template-columns:1fr;gap:20px;padding-top:20px}

  .aside{position:static;order:-1}

  /* On the kit step only, the jersey stays pinned to the top of a phone
     screen so the name and number are in view while they are typed. */
  .aside.is-pinned{
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:5;
    background:var(--navy-950);
    margin-inline:calc(var(--gutter) * -1);
    padding:8px var(--gutter) 10px;
    border-bottom:1px solid var(--line-soft);
  }
  .kit-stage{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:14px;
    align-items:center;
    padding:10px 12px;
  }
  .kit-frame{max-width:100px}
  .kit-flip{
    margin-top:0;padding-top:0;border-top:0;
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
  }
  .flip-sep{display:none}
  .meta,.aside-crest{display:none}
  .aside-plain{display:none}        /* nothing worth pinning on that page */
}
@media (max-width:560px){
  .wrap{--gutter:16px}
  .branches{grid-template-columns:1fr}
  .areas{grid-template-columns:1fr}
  .row2,.row3{grid-template-columns:1fr;gap:0}
  .step-head h2{font-size:23px}
  .rail .lbl{display:none}
  .rail button{justify-content:center;padding-top:10px}
  .btn{flex:1 1 auto;text-align:center}
  .mast-txt .club{font-size:17px}
  .season{display:none}
  .band-row{flex-direction:column;gap:6px}
  .band-tag{width:auto;padding-top:0}

  /* two cards abreast on a phone: tighter, and the body copy steps aside
     so both fit without becoming unreadably narrow */
  .routes{gap:10px}
  .route{padding:16px 13px 15px;gap:7px}
  .route .ricon{width:38px;height:38px;border-radius:10px;margin-bottom:2px}
  .route .ricon svg{width:21px;height:21px}
  .route h2{font-size:19px}
  .route .rtag{font-size:10px;letter-spacing:.13em}
  .route p{display:none}
  .route .go{font-size:12px;letter-spacing:.07em;padding-top:3px;gap:5px}
  .route .go svg{width:12px;height:10px}

  /* the includes list and the payment options stay two abreast on a
     phone — stacked, they turned the thank-you screen into a long scroll */
  .after-list{gap:6px 12px;font-size:13px}
  .pay{padding:13px 11px 12px;min-height:112px;gap:7px}
  .pay-logo-slot{height:26px}
  .pay-logo{max-height:26px;max-width:96px}
  .pay-name{font-size:15.5px}
  .pay-detail{font-size:12px}
  .done{padding:4px 0 24px;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* ==========================================================================
   SIZE CHART
   --------------------------------------------------------------------------
   The measurements for the match kit, opened from the button beside the size
   legend. Same navy, same Barlow Condensed headings, same amber accent as the
   rest of the form — it reads as part of the page, not a pasted-in image.
   ========================================================================== */

.size-legend{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.size-legend .hint{flex-basis:100%; order:3}

.chart-btn{
  display:inline-flex; align-items:center; gap:8px;
  font:600 13px/1 'Barlow',sans-serif; letter-spacing:.02em;
  padding:9px 15px; border-radius:99px; cursor:pointer;
  color:#20160A; border:0;
  background:linear-gradient(180deg,#F3B558,var(--amber));
  box-shadow:0 8px 18px -10px rgba(232,163,61,.9);
  transition:.15s;
}
.chart-btn svg{display:block}
.chart-btn:hover{filter:brightness(1.07)}
.chart-btn:focus-visible{outline:2px solid var(--sky); outline-offset:3px}

/* ---------- the panel ---------- */
.chart-back{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(4,12,22,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:20px; overflow-y:auto; overscroll-behavior:contain;
}
.chart-back.open{display:grid; place-items:center}
.chart{
  width:100%; max-width:560px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--navy-850),var(--navy-900));
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 40px 90px -46px #000;
}
.chart::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--amber),var(--sky));
}
.chart-head{
  display:flex; align-items:center; gap:13px;
  padding:20px 20px 16px; border-bottom:1px solid var(--line-soft);
}
.chart-head img{height:40px; width:auto; display:block; flex:none}
.chart-head .t{flex:1; min-width:0}
.chart-head h3{
  font-family:'Barlow Condensed','Barlow',sans-serif; text-transform:uppercase;
  letter-spacing:.05em; font-size:21px; margin:0; color:var(--chalk);
}
.chart-head p{margin:2px 0 0; font-size:12.5px; color:var(--mute-dim)}
.chart-x{
  flex:none; width:34px; height:34px; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--mute);
  display:grid; place-items:center; transition:.15s;
}
.chart-x:hover{border-color:var(--sky); color:var(--chalk)}

.chart-body{padding:18px 20px 22px}
.chart-band{
  font-family:'Barlow Condensed','Barlow',sans-serif; text-transform:uppercase;
  letter-spacing:.11em; font-size:12px; font-weight:600; color:var(--amber);
  margin:0 0 9px;
}
.chart-band + .chart-band{margin-top:0}
.chart-grid + .chart-band{margin-top:22px}

/* Both tables are laid out on the same fixed grid — same label column, same
   column width per size — so size 6 and size S start at exactly the same
   place. Left to itself a table divides its width among its own columns, and
   the two bands have different numbers of sizes, so they would never line up.
   The adult table is simply shorter, which is the honest result. */
/* Both bands are laid out on one grid: the adult table carries empty cells
   so it has the same number of columns as the junior one. Equal columns in
   both tables means size 4 and size S start in the same place, and when the
   width gets tight the two shrink together instead of one shrinking alone. */
.chart-grid{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0}
.chart-grid th,.chart-grid td{
  padding:9px 4px; text-align:center; font-size:14px;
  border-bottom:1px solid var(--line-soft);
}
.chart-grid th:first-child,.chart-grid td:first-child{width:88px}
/* the spare cells exist only to hold the grid open */
.chart-grid th.pad,.chart-grid td.pad{border-bottom:0; background:transparent}
.chart-grid thead th{
  font-family:'Barlow Condensed','Barlow',sans-serif; font-weight:700;
  font-size:16px; letter-spacing:.04em; color:var(--chalk);
  background:var(--navy-800); border-bottom:1px solid var(--line);
}
.chart-grid thead th:first-child,
.chart-grid tbody th{
  text-align:left; padding-left:12px; white-space:nowrap;
  font:600 11.5px/1.3 'Barlow',sans-serif; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mute-dim); background:transparent;
}
.chart-grid thead th:first-child{border-radius:9px 0 0 0}
.chart-grid thead th:last-child{border-radius:0 9px 0 0}
.chart-grid tbody td{color:var(--chalk); font-weight:600; font-variant-numeric:tabular-nums}
.chart-grid tbody tr:last-child th,
.chart-grid tbody tr:last-child td{border-bottom:0}

.chart-note{
  margin:18px 0 0; padding:12px 14px; border-radius:10px;
  background:var(--navy-950); border:1px solid var(--line-soft);
  font-size:12.5px; line-height:1.55; color:var(--mute);
}
.chart-note b{color:var(--chalk); font-weight:600}

@media (max-width:560px){
  .chart-back{padding:12px}
  .chart-head{padding:16px 15px 13px}
  .chart-body{padding:15px 12px 18px}
  .chart-grid th,.chart-grid td{padding:8px 2px; font-size:12.5px}
  .chart-grid th:first-child,.chart-grid td:first-child{width:50px}
  .chart-grid thead th{font-size:14px}
  .chart-grid thead th:first-child,.chart-grid tbody th{padding-left:7px; font-size:10px; letter-spacing:.05em}
}
@media (prefers-reduced-motion:reduce){ .chart-btn{transition:none} }

/* ---------- the sizes panel ----------
   Match kit, t-shirt and hoodie sit in one panel under a single heading, with
   one Size chart button beside that heading. One chart covers all three, so
   one button beside the group says that more clearly than three buttons each
   appearing to belong to the field next to it. */
.sizes-block{
  margin:0 0 24px;
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:var(--navy-900);
  padding:4px 18px 2px;
}
.sizes-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 0 14px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:20px;
}
.sizes-head h3{
  margin:0;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:.09em;
  font-size:19px; font-weight:700; color:var(--chalk);
}
.sizes-block fieldset:last-of-type{margin-bottom:20px}

@media (max-width:560px){
  .sizes-block{padding:2px 13px}
  .sizes-head{gap:10px; padding:14px 0 12px; margin-bottom:16px}
  .sizes-head h3{font-size:17px}
}