/* ============================================================
   Tekkers Football Academy — shared styles (dark dashboard)
   ============================================================ */
@font-face { font-family:'Northbank-Forward'; src:url('/fonts/Northbank-Forward.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Northbank-N5Bold'; src:url('/fonts/Northbank-N5Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Northbank-N5';     src:url('/fonts/Northbank-N5.ttf')     format('truetype'); font-display:swap; }
@font-face { font-family:'Chapman-Bold';     src:url('/fonts/Chapman-Bold.ttf')     format('truetype'); font-display:swap; }
@font-face { font-family:'Chapman-SemiBold'; src:url('/fonts/Chapman-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Chapman-Regular';  src:url('/fonts/Chapman-Regular.ttf')  format('truetype'); font-display:swap; }

:root{
  --bg:#0a1a3c; --surface:#16263f; --line:#27375a;
  --text:#ffffff; --muted:#8a93a8; --red:#e8000d; --blue:#0a59d0; --wa:#25d366;
  --f-display:'Northbank-Forward', system-ui, sans-serif;
  --f-bold:'Northbank-N5Bold', system-ui, sans-serif;
  --f-n5:'Northbank-N5', system-ui, sans-serif;
  --f-cb:'Chapman-Bold', Georgia, serif;
  --f-csb:'Chapman-SemiBold', Georgia, serif;
  --f-cr:'Chapman-Regular', Georgia, serif;
  --wrap:1180px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }
body{
  color:var(--text); font-family:var(--f-cr); -webkit-font-smoothing:antialiased; line-height:1.5;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(232,0,13,.13), transparent 60%),
    radial-gradient(1100px 700px at 100% -6%, rgba(12,52,140,.55), transparent 62%),
    radial-gradient(900px 700px at 50% 120%, rgba(10,40,108,.40), transparent 60%),
    var(--bg);
  background-attachment:fixed; min-height:100vh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.tfa-signin,.tfa-burger,.tfa-tile,.tfa-foot-wa,.tfa-foot-link,.tfa-menu-link,.tfa-hero-cta{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.inactive{ pointer-events:none; opacity:.25; }
.tfa-wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 18px; }

/* ---- Nav ---- */
.tfa-nav{ position:sticky; top:0; z-index:50; background:linear-gradient(180deg,#061230 0%, rgba(6,18,48,.80) 100%); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
.tfa-topstrip{ position:relative; background:var(--red); color:#fff; font-family:var(--f-n5); text-transform:uppercase; letter-spacing:1.4px; font-size:11px; padding:6px 14px; display:flex; align-items:center; justify-content:center; gap:10px; }
.tfa-topstrip .tfa-strip-label{ text-align:center; }
.tfa-eacademy{ position:absolute; right:14px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:5px; min-height:34px; color:#fff; white-space:nowrap; font-weight:bold; }
.tfa-eacademy:hover{ opacity:.85; }
@media (max-width:600px){ .tfa-topstrip .tfa-strip-label{ display:none; } .tfa-topstrip{ justify-content:center; } .tfa-eacademy{ position:static; transform:none; } }
.tfa-nav-inner{ max-width:var(--wrap); margin:0 auto; padding:8px 18px; display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.tfa-logo img{ height:clamp(34px,8vw,52px); width:auto; }
.tfa-nav-right{ display:flex; align-items:center; gap:10px; }
.tfa-signin{ display:inline-flex; align-items:center; justify-content:center; line-height:1; min-height:48px; padding:0 20px; background:var(--red); color:#fff; border-radius:10px; font-family:var(--f-n5); text-transform:uppercase; letter-spacing:1px; font-size:clamp(12px,1.5vw,14px); box-shadow:0 6px 18px rgba(232,0,13,.32); }
.tfa-signin:hover{ filter:brightness(1.08); }
.tfa-burger{ width:48px; height:48px; padding:13px; background:transparent; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; }
.tfa-burger span{ display:block; height:2.5px; background:#fff; border-radius:2px; }
.tfa-burger:hover{ border-color:var(--red); }

/* ---- Slide-out menu ---- */
.tfa-menu{ position:fixed; inset:0; z-index:1000; background:rgba(4,6,12,.72); opacity:0; visibility:hidden; transition:opacity .2s ease; }
.tfa-menu.is-open{ opacity:1; visibility:visible; }
.tfa-menu-panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background:#0b1120; border-left:1px solid var(--line); padding:64px 22px 24px; display:flex; flex-direction:column; gap:2px; transform:translateX(100%); transition:transform .22s ease; overflow-y:auto; }
.tfa-menu.is-open .tfa-menu-panel{ transform:translateX(0); }
.tfa-menu-close{ position:absolute; top:14px; right:16px; width:44px; height:44px; background:transparent; border:0; color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.tfa-menu-link{ display:flex; align-items:center; min-height:56px; font-family:var(--f-bold); text-transform:uppercase; letter-spacing:.5px; font-size:18px; color:#fff; border-bottom:1px solid #182338; }
.tfa-menu-ico{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-right:14px; color:var(--red); flex:0 0 26px; }
.tfa-menu-ico svg{ width:23px; height:23px; }
.tfa-menu-cta .tfa-menu-ico{ width:0; margin:0; }
.tfa-menu-link:hover{ color:var(--red); }
.tfa-menu-cta{ margin-top:18px; justify-content:center; line-height:1; background:var(--red); border-radius:10px; border-bottom:0; }
.tfa-menu-cta:hover{ color:#fff; filter:brightness(1.08); }

/* ---- Hero (editable photo + overlaid text) ---- */
.tfa-hero{ position:relative; max-width:var(--wrap); margin:16px auto 0; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#06163a center 16%/cover no-repeat; min-height:clamp(370px,64vw,560px); display:flex; align-items:flex-end; }
.tfa-hero::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,11,26,.10) 0%, rgba(6,11,26,.40) 45%, rgba(8,11,22,.94) 100%); }
.tfa-hero-inner{ position:relative; z-index:2; padding:clamp(20px,4vw,40px); }
.tfa-hero-eyebrow{ font-family:var(--f-n5); text-transform:uppercase; letter-spacing:3px; font-size:clamp(11px,1.6vw,14px); color:#cdd5e6; }
.tfa-hero h1{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(26px,5.4vw,52px); line-height:.99; margin:10px 0 0; color:#fff; }
.tfa-hero-sub{ font-family:var(--f-csb); color:#cdd5e6; margin-top:10px; font-size:clamp(13px,1.8vw,16px); }
.tfa-hero-cta{ display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1; min-height:52px; padding:0 26px; margin-top:18px; background:var(--red); color:#fff; border-radius:10px; font-family:var(--f-n5); text-transform:uppercase; letter-spacing:1px; font-size:14px; box-shadow:0 8px 22px rgba(232,0,13,.32); }
.tfa-hero-cta:hover{ filter:brightness(1.08); }

/* ---- Dashboard cards ---- */
.tfa-tiles{ display:grid; gap:16px; padding:22px 0 6px; grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .tfa-tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){
  .tfa-tiles{ grid-template-columns:repeat(2,1fr); gap:12px; padding:18px 0 4px; }
  .tfa-tile-body{ padding:13px 14px 15px; }
  .tfa-tile-body .bar{ width:30px; margin-bottom:7px; }
  .tfa-tile-title{ font-size:16px; }
  .tfa-tile-sub{ display:none; }
}
.tfa-tile{ position:relative; display:block; overflow:hidden; aspect-ratio:1/1; border-radius:16px; border:1px solid var(--line); background:var(--surface) center 16%/cover no-repeat; box-shadow:0 10px 26px rgba(0,0,0,.45); transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tfa-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,18,42,0) 38%, rgba(8,18,42,.55) 66%, rgba(9,20,48,.94) 100%); }
.tfa-tile-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px 18px; }
.tfa-tile-body .bar{ display:block; width:36px; height:4px; background:var(--red); border-radius:2px; margin-bottom:9px; }
.tfa-tile-ico{ display:none; }
.tfa-tile-ico svg{ width:34px; height:34px; }
.tfa-tile-title{ display:block; font-family:var(--f-bold); text-transform:uppercase; letter-spacing:.5px; font-size:clamp(18px,3vw,23px); }
.tfa-tile-sub{ display:block; font-family:var(--f-csb); color:#cfd6e6; font-size:clamp(12px,1.6vw,14px); margin-top:3px; }
.tfa-tile:hover{ transform:translateY(-4px); border-color:rgba(232,0,13,.75); box-shadow:0 16px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(232,0,13,.35); }
.tfa-tile:active{ transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce){ .tfa-tile, .tfa-tile:hover, .tfa-tile:active{ transform:none; } }

/* ---- Partners (mono on dark, no heading) ---- */
.tfa-sponsors{ margin-top:30px; padding:26px 0 22px; border-top:1px solid var(--line); }
.tfa-sponsors img{ width:100%; max-width:100%; margin:0 auto; height:auto; opacity:1; }

/* ---- Advert zone ---- */
.tfa-ads{ max-width:var(--wrap); margin:24px auto 0; padding:0 18px; display:flex; flex-direction:column; gap:14px; }
.tfa-ads.is-empty{ display:none; }
.tfa-ad{ position:relative; display:block; border-radius:12px; overflow:hidden; }
.tfa-ad.is-empty{ display:none; }
.tfa-ad-tag{ position:absolute; top:6px; left:6px; z-index:2; font-family:var(--f-cr); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.5); padding:2px 6px; border-radius:2px; }
.tfa-ad-sponsor{ border:1px solid var(--line); background:#fff; }
.tfa-ad-sponsor img{ width:100%; height:auto; display:block; }
.tfa-ad-google{ text-align:center; }

/* ---- Footer ---- */
.tfa-footer{ background:#08152e; color:#fff; margin-top:28px; padding:32px 0 22px; border-top:1px solid var(--line); }
.tfa-foot-grid{ display:flex; flex-wrap:wrap; gap:30px; }
.tfa-foot-h{ font-family:var(--f-bold); text-transform:uppercase; font-size:13px; letter-spacing:1px; margin:0 0 10px; color:#fff; }
.tfa-foot-wa{ display:flex; align-items:center; gap:8px; min-height:54px; color:#fff; font-family:var(--f-csb); font-size:15px; }
.tfa-foot-wa .dot{ width:10px; height:10px; border-radius:50%; background:var(--wa); }
.tfa-foot-link{ display:block; min-height:48px; line-height:48px; font-family:var(--f-csb); font-size:15px; color:#aab2c5; }
.tfa-foot-link:hover{ color:#fff; }
.tfa-foot-legal{ display:flex; flex-wrap:wrap; gap:6px 18px; border-top:1px solid #131c30; margin-top:22px; padding-top:18px; }
.tfa-foot-legal a{ font-family:var(--f-n5); text-transform:uppercase; letter-spacing:.5px; font-size:12px; color:#7d869a; min-height:40px; display:inline-flex; align-items:center; }
.tfa-foot-legal a:hover{ color:#fff; }
.tfa-foot-base{ margin-top:6px; font-family:var(--f-cr); font-size:12px; color:#6f7890; }
.tfa-foot-base strong{ color:#cfd6e6; font-family:var(--f-csb); }

.tfa-foot-social{ display:flex; gap:12px; margin-top:16px; }
.tfa-foot-soc{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); color:#cfd6e6; background:rgba(255,255,255,.03); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tfa-foot-soc svg{ width:21px; height:21px; }
.tfa-foot-soc:hover{ color:#fff; border-color:var(--red); background:rgba(232,0,13,.12); }

/* ---- Shared basket ---- */
.tfa-basket-btn{ position:relative; width:48px; height:48px; padding:11px; background:transparent; border:1px solid var(--line); border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tfa-basket-btn:hover{ border-color:var(--red); }
.tfa-basket-btn svg{ width:22px; height:22px; }
.tfa-basket-count{ position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:11px; background:var(--red); color:#fff; font-family:var(--f-bold); font-size:11px; line-height:20px; text-align:center; box-shadow:0 4px 10px rgba(232,0,13,.4); transform:scale(0); transition:transform .15s ease; }
.tfa-basket-count.on{ transform:scale(1); }

.tfa-bk-panel{ position:fixed; inset:0; z-index:120; visibility:hidden; }
.tfa-bk-panel.is-open{ visibility:visible; }
.tfa-bk-scrim{ position:absolute; inset:0; background:rgba(3,9,24,.62); opacity:0; transition:opacity .22s ease; }
.tfa-bk-panel.is-open .tfa-bk-scrim{ opacity:1; }
.tfa-bk-sheet{ position:absolute; top:0; right:0; height:100%; width:min(92vw,420px); background:var(--bg); border-left:1px solid var(--line); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .24s ease; }
.tfa-bk-panel.is-open .tfa-bk-sheet{ transform:translateX(0); }
.tfa-bk-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); font-family:var(--f-display); text-transform:uppercase; letter-spacing:1px; font-size:20px; color:#fff; }
.tfa-bk-close{ width:40px; height:40px; border:0; background:transparent; color:#fff; font-size:28px; line-height:1; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tfa-bk-body{ flex:1; overflow-y:auto; padding:14px 16px; -webkit-overflow-scrolling:touch; }
.tfa-bk-empty{ font-family:var(--f-cr); color:var(--muted); text-align:center; padding:60px 20px; }
.tfa-bk-group{ margin-bottom:18px; }
.tfa-bk-gh{ font-family:var(--f-n5); text-transform:uppercase; letter-spacing:1.4px; font-size:12px; color:var(--muted); margin:6px 2px 10px; }
.tfa-bk-line{ display:flex; align-items:flex-start; gap:12px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; }
.tfa-bk-info{ flex:1; min-width:0; }
.tfa-bk-title{ font-family:var(--f-cb); color:#fff; font-size:15px; }
.tfa-bk-sub{ font-family:var(--f-cr); color:var(--muted); font-size:13px; margin-top:3px; }
.tfa-bk-end{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.tfa-bk-qty{ font-family:var(--f-bold); color:#cdd5e6; font-size:13px; }
.tfa-bk-amt{ font-family:var(--f-cb); color:#fff; font-size:14px; white-space:nowrap; }
.tfa-bk-amt.muted{ color:var(--muted); font-family:var(--f-cr); }
.tfa-bk-rm{ width:30px; height:30px; flex:0 0 30px; border:1px solid var(--line); background:transparent; color:#fff; border-radius:8px; font-size:18px; line-height:1; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tfa-bk-rm:hover{ border-color:var(--red); color:var(--red); }
.tfa-bk-manage{ display:inline-block; margin:4px 2px 0; font-family:var(--f-n5); text-transform:uppercase; letter-spacing:.6px; font-size:12px; color:var(--blue); }
.tfa-bk-foot{ padding:14px 16px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.tfa-bk-totrow{ display:flex; justify-content:space-between; font-family:var(--f-csb); color:#fff; font-size:15px; margin-bottom:8px; }
.tfa-bk-wa{ display:block; width:100%; min-height:54px; margin-top:8px; border:0; border-radius:12px; background:var(--wa); color:#062b16; font-family:var(--f-n5); text-transform:uppercase; letter-spacing:.8px; font-size:14px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tfa-bk-wa:hover{ filter:brightness(1.05); }
.tfa-bk-note{ font-family:var(--f-cr); color:var(--muted); font-size:11.5px; line-height:1.45; margin-top:12px; }

/* ---- Footer compliance ---- */
.tfa-foot-compliance{ display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:center; align-items:center; text-align:center; font-family:var(--f-cr); color:var(--muted); font-size:11.5px; line-height:1.5; padding:12px 0 4px; margin-top:14px; border-top:1px solid var(--line); }
.tfa-foot-compliance strong{ color:#cdd5e6; font-family:var(--f-csb); font-weight:normal; }

/* ---- Basket checkout ---- */
.tfa-bk-co{ display:block; width:100%; min-height:54px; margin-top:8px; border:0; border-radius:12px; background:var(--red); color:#fff; font-family:var(--f-n5); text-transform:uppercase; letter-spacing:.8px; font-size:14px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tfa-bk-co:hover{ filter:brightness(1.06); }
.tfa-bk-back{ background:transparent; border:0; color:#cdd5e6; font-family:var(--f-n5); text-transform:uppercase; letter-spacing:.6px; font-size:12px; padding:2px 0 12px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tfa-pay-h{ font-family:var(--f-display); text-transform:uppercase; font-size:21px; color:#fff; margin-bottom:6px; }
.tfa-pay-sub{ font-family:var(--f-cr); color:var(--muted); font-size:12.5px; line-height:1.5; margin-bottom:14px; }
.tfa-bk-method{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px; }
.tfa-bk-method.selected{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset; }
.tfa-bk-method.inactive{ opacity:.5; pointer-events:none; }
.tfa-bk-method .m-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tfa-bk-method .m-name{ font-family:var(--f-cb); color:#fff; font-size:17px; }
.m-badge{ font-family:var(--f-n5); text-transform:uppercase; letter-spacing:.5px; font-size:11px; padding:4px 9px; border-radius:20px; white-space:nowrap; }
.m-badge.ok{ background:rgba(37,211,102,.16); color:#5ef0a0; }
.m-badge.info{ background:rgba(10,89,208,.18); color:#8fb6ff; }
.m-badge.rec{ background:rgba(232,0,13,.16); color:#ff8a93; }
.tfa-bk-method .m-desc{ font-family:var(--f-cr); color:var(--muted); font-size:12.5px; line-height:1.45; margin:8px 0 12px; }
.tfa-bk-method .m-qr{ display:block; width:190px; max-width:72%; height:auto; background:#fff; border-radius:12px; padding:8px; margin:0 auto 12px; }
.tfa-bk-method .m-tot{ display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.05); border-radius:10px; padding:11px 13px; font-family:var(--f-cb); color:#fff; font-size:15px; margin-bottom:12px; }
.tfa-bk-method .m-go{ display:block; width:100%; min-height:52px; border:0; border-radius:11px; background:var(--red); color:#fff; font-family:var(--f-n5); text-transform:uppercase; letter-spacing:.7px; font-size:14px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tfa-bk-method .m-soon{ text-align:center; font-family:var(--f-n5); text-transform:uppercase; letter-spacing:.6px; font-size:12px; color:var(--muted); padding:10px 0 2px; }