/* jpl-light.css — the PARENT lane: registration, dashboard, add a player, ask a
   club, payment, the awareness course. Andy, 4 Sep 2026: parents must not panic
   or feel it is over-complicated, and they pay from here, so this half of the
   site is light, calm and large, like the banking and KYC screens people in the
   region already know. It still reads as JPL because the anchors do not move:
   a navy bar with the crest on top, Owners in capitals for titles, cyan for the
   one action that matters, navy text, the same words as everywhere else.
   Everything public and every working role (coach, referee, academy, league
   office) keeps the dark game feel. Load this AFTER the page's own reset. */

@font-face{font-family:'Owners';src:url('/assets/fonts/Owners-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Owners';src:url('/assets/fonts/Owners-Black.otf') format('opentype');font-weight:900;font-display:swap}

:root{
  --lt-bg:#f4f7fb;            /* off-white with a cool tint, never grey */
  --lt-card:#ffffff;
  --lt-ink:#0b1a33;           /* brand navy for text, not black */
  --lt-ink2:#4d5b73;
  --lt-line:#d9e1ec;
  --lt-cyan:#03ffff;          /* buttons and progress only */
  --lt-teal:#0a7c8a;          /* the readable cyan for text and links on white */
  --lt-teal-soft:#e6fbfd;
  --lt-navy:#0b1a33;
  --lt-ok:#0f8a4c; --lt-ok-bg:#e9f8ef;
  --lt-warn:#9a5b00; --lt-warn-bg:#fff5e5;
  --lt-err:#c0392b; --lt-err-bg:#fdecea;
  --lt-radius:16px;
  --lt-font:'Montserrat',-apple-system,system-ui,'Segoe UI',sans-serif;
  --lt-display:'Owners','Montserrat',sans-serif;
  --lt-ar:'Tajawal','Montserrat',sans-serif;
}

html.lt{background:var(--lt-bg);}
body.lt{margin:0;background:var(--lt-bg);color:var(--lt-ink);font-family:var(--lt-font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;}
[dir="rtl"] body.lt,[dir="rtl"] .lt input,[dir="rtl"] .lt select,[dir="rtl"] .lt textarea,[dir="rtl"] .lt button{font-family:var(--lt-ar);}
.lt *,.lt *::before,.lt *::after{box-sizing:border-box;}
.lt a{color:var(--lt-teal);}

/* ---- the bar: navy, crest, section name, the language switch in plain sight ---- */
.lt-bar{position:sticky;top:0;z-index:60;background:var(--lt-navy);color:#fff;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;}
.lt-bar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:var(--lt-display);font-size:15px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;}
.lt-bar-brand img{width:36px;height:36px;object-fit:contain;display:block;}
.lt-bar-brand small{display:block;font-family:var(--lt-font);font-weight:800;font-size:10.5px;letter-spacing:.22em;color:var(--lt-cyan);margin-top:2px;}
[dir="rtl"] .lt-bar-brand{font-family:var(--lt-ar);letter-spacing:0;font-weight:800;font-size:17px;}
[dir="rtl"] .lt-bar-brand small{font-family:var(--lt-ar);letter-spacing:0;font-size:13px;}
.lt-bar-crest{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.10);border:1px solid rgba(3,255,255,.55);text-decoration:none;transition:border-color .15s;}
.lt-bar-crest:hover,.lt-bar-crest:focus-visible{border-color:var(--lt-cyan);outline:none;}
.lt-bar-crest img{width:30px;height:30px;object-fit:contain;display:block;}
.lt-bar-title{font-family:var(--lt-display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#fff;}
[dir="rtl"] .lt-bar-title{font-family:var(--lt-ar);letter-spacing:0;font-weight:800;font-size:16px;}
.lt-bar-left{display:flex;align-items:center;gap:12px;}
.lt-lang{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);}
.lt-lang button{border:0;background:transparent;color:#fff;font:700 14px var(--lt-font);padding:8px 14px;min-height:40px;border-radius:999px;cursor:pointer;}
.lt-lang button.ar{font-family:var(--lt-ar);font-size:16px;font-weight:700;}
.lt-lang button[aria-pressed="true"]{background:var(--lt-cyan);color:var(--lt-navy);}
.lt-lang button:focus-visible{outline:3px solid var(--lt-cyan);outline-offset:2px;}

/* ---- page frame ---- */
.lt-main{max-width:620px;margin:0 auto;padding:22px 16px 96px;}
.lt-card{background:var(--lt-card);border:1px solid var(--lt-line);border-radius:var(--lt-radius);padding:24px 20px;box-shadow:0 10px 34px rgba(11,26,51,.06);}
@media (min-width:640px){.lt-card{padding:34px 36px;}}
.lt-card + .lt-card{margin-top:18px;}

/* the line that says, in the OTHER language, that the page can switch */
.lt-switchline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 20px;padding:12px 14px;border-radius:12px;background:var(--lt-teal-soft);border:1px solid #bfeff5;font-size:15px;line-height:1.5;}
.lt-switchline button{border:0;background:var(--lt-navy);color:#fff;font:700 14px var(--lt-font);padding:10px 16px;min-height:42px;border-radius:999px;cursor:pointer;white-space:nowrap;}
.lt-switchline.ar-text{font-family:var(--lt-ar);direction:rtl;text-align:right;}
.lt-switchline.en-text{font-family:var(--lt-font);direction:ltr;text-align:left;}
.lt-switchline.ar-text button{font-family:var(--lt-ar);font-size:16px;}

/* ---- progress + headings ---- */
.lt-progress{display:flex;gap:6px;margin:0 0 12px;}
.lt-progress span{flex:1;height:6px;border-radius:3px;background:#e3e9f2;}
.lt-progress span.active{background:var(--lt-cyan);}
.lt-progress span.done{background:var(--lt-teal);}
.lt-step-h{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lt-teal);margin:0 0 6px;}
[dir="rtl"] .lt-step-h{letter-spacing:0;font-size:15px;}
.lt h1,.lt-h1{font-family:var(--lt-display);font-size:clamp(28px,6vw,38px);line-height:1.05;text-transform:uppercase;letter-spacing:.01em;margin:0 0 10px;color:var(--lt-ink);text-wrap:balance;}
[dir="rtl"] .lt h1,[dir="rtl"] .lt-h1{font-family:var(--lt-ar);font-weight:800;letter-spacing:0;line-height:1.25;}
.lt h2,.lt-h2{font-family:var(--lt-display);font-size:clamp(20px,4vw,26px);text-transform:uppercase;letter-spacing:.02em;margin:0 0 8px;color:var(--lt-ink);}
[dir="rtl"] .lt h2,[dir="rtl"] .lt-h2{font-family:var(--lt-ar);font-weight:800;letter-spacing:0;}
.lt-sub{font-size:17px;color:var(--lt-ink2);margin:0 0 18px;line-height:1.6;}
.lt-note{background:#f1f5fa;border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.6;color:var(--lt-ink);margin:0 0 22px;}
.lt-note strong{color:var(--lt-navy);}
.lt-eyebrow{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--lt-teal);margin:0 0 6px;}
[dir="rtl"] .lt-eyebrow{letter-spacing:0;font-size:14px;}

/* ---- fields: big, one column, sentence-case labels ---- */
.lt-field{margin:0 0 18px;}
.lt-field > label,.lt-label{display:block;font-size:16px;font-weight:800;color:var(--lt-ink);margin:0 0 7px;}
.lt-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.lt-field select,.lt-field textarea,.lt-input{width:100%;min-height:58px;padding:14px 16px;border:2px solid var(--lt-line);border-radius:14px;background:#fff;color:var(--lt-ink);font-family:var(--lt-font);font-size:17px;font-weight:500;color-scheme:light;-webkit-appearance:none;appearance:none;margin:0;}
[dir="rtl"] .lt-field input,[dir="rtl"] .lt-field select,[dir="rtl"] .lt-field textarea{font-family:var(--lt-ar);}
.lt-field input::placeholder{color:#93a0b5;}
.lt-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b1a33' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px;}
[dir="rtl"] .lt-field select{background-position:left 14px center;padding-left:42px;padding-right:14px;}
.lt-field input:focus,.lt-field select:focus,.lt-field textarea:focus,.lt-input:focus{outline:none;border-color:var(--lt-teal);box-shadow:0 0 0 4px rgba(3,255,255,.35);}
.lt-field input[type="date"]{min-height:58px;}
.lt-field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.7;cursor:pointer;}
.lt-help{font-size:14px;color:var(--lt-ink2);margin-top:7px;line-height:1.55;}
.lt-help.err{color:var(--lt-err);font-weight:600;}
.lt-phone{display:flex;gap:8px;direction:ltr;}
.lt-phone select{flex:0 0 138px;width:138px;}
.lt-phone input{flex:1 1 auto;direction:ltr;}

/* ---- buttons: one cyan action, quiet ghosts ---- */
.lt-btn{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:16px 24px;border-radius:18px;border:0;background:var(--lt-cyan);color:var(--lt-navy);font-family:var(--lt-font);font-weight:800;font-size:19px;letter-spacing:0;text-transform:none;cursor:pointer;text-decoration:none;box-shadow:0 8px 20px rgba(10,124,138,.22);transition:transform .12s,filter .12s,box-shadow .12s;}
.lt-btn:hover{filter:brightness(.96);transform:translateY(-1px);box-shadow:0 12px 26px rgba(10,124,138,.28);}
.lt-btn:focus-visible{outline:3px solid var(--lt-navy);outline-offset:2px;}
.lt-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none;}
.lt-btn.ghost{background:#fff;color:var(--lt-navy);border:2px solid var(--lt-line);box-shadow:none;}
.lt-btn.outline{background:#fff;color:var(--lt-teal);border:2px solid var(--lt-teal);box-shadow:none;}
.lt-btn.navy{background:var(--lt-navy);color:#fff;}
.lt-btn.small{width:auto;min-height:48px;padding:12px 20px;font-size:15px;border-radius:14px;box-shadow:none;}
[dir="rtl"] .lt-btn{letter-spacing:0;font-family:var(--lt-ar);font-size:20px;font-weight:800;}
.lt-stack{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.lt-row{display:flex;gap:10px;flex-wrap:wrap;}
.lt-row > *{flex:1 1 150px;}

/* ---- consent rows and boxes ---- */
.lt-box{border:1px solid var(--lt-line);border-radius:12px;padding:4px 16px;margin:18px 0;background:#fbfcfe;}
.lt-check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;cursor:pointer;font-size:15.5px;line-height:1.6;color:var(--lt-ink);}
.lt-check input{width:22px;height:22px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--lt-navy);}
.lt-check a{color:var(--lt-teal);font-weight:700;}

/* ---- alerts ---- */
.lt-alert{padding:13px 15px;border-radius:12px;font-size:15px;line-height:1.55;margin:0 0 16px;border:1px solid transparent;}
.lt-alert.error{background:var(--lt-err-bg);color:var(--lt-err);border-color:#f5c6c1;}
.lt-alert.success{background:var(--lt-ok-bg);color:var(--lt-ok);border-color:#bfe8cf;}
.lt-alert.info{background:var(--lt-teal-soft);color:var(--lt-teal);border-color:#bfeff5;}
.lt-alert.warn{background:var(--lt-warn-bg);color:var(--lt-warn);border-color:#f3dcb3;}
.lt-alert a{color:inherit;font-weight:700;}

/* ---- odds and ends ---- */
.lt-link{color:var(--lt-teal);font-weight:700;text-decoration:none;}
.lt-link:hover{text-decoration:underline;}
.lt-foot{text-align:center;font-size:15px;color:var(--lt-ink2);margin-top:20px;}
.lt-otp{font-family:'Courier New',monospace!important;font-size:28px!important;letter-spacing:.5em;text-align:center;direction:ltr;}
.lt-pill{display:inline-block;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.lt-pill.ok{background:var(--lt-ok-bg);color:var(--lt-ok);} .lt-pill.wait{background:var(--lt-warn-bg);color:var(--lt-warn);} .lt-pill.no{background:var(--lt-err-bg);color:var(--lt-err);} .lt-pill.teal{background:var(--lt-teal-soft);color:var(--lt-teal);}
[dir="rtl"] .lt-pill{letter-spacing:0;}
.lt-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.lt-tile{display:block;text-decoration:none;color:var(--lt-ink);background:#fff;border:1px solid var(--lt-line);border-radius:14px;padding:18px;transition:transform .12s,box-shadow .12s;}
.lt-tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,26,51,.08);}
.lt-tile h3{font-family:var(--lt-display);font-size:17px;text-transform:uppercase;letter-spacing:.03em;margin:8px 0 4px;}
[dir="rtl"] .lt-tile h3{font-family:var(--lt-ar);font-weight:800;letter-spacing:0;}
.lt-tile p{margin:0;font-size:14.5px;color:var(--lt-ink2);line-height:1.5;}
.lt-tile .lt-ico{width:40px;height:40px;border-radius:12px;background:var(--lt-teal-soft);color:var(--lt-teal);display:grid;place-items:center;}
.lt-tile .lt-ico svg{width:22px;height:22px;}

/* ---- the shared widgets, restyled for white ---- */
.lt .jlp-stage{background:#e8eef6;border-color:var(--lt-line);}
.lt .jlp-btn{border-color:var(--lt-teal);background:#fff;color:var(--lt-teal);font-size:14px;font-weight:800;padding:12px 16px;min-height:46px;}
.lt .jlp-btn.ghost{border-color:var(--lt-line);color:var(--lt-ink2);}
.lt .jlp-note{color:var(--lt-ink2);font-size:14px;}
.lt .jlp-note.warn{color:var(--lt-warn);}
.lt .jag-dob-note{background:var(--lt-teal-soft)!important;border-color:#bfeff5!important;color:var(--lt-ink)!important;font-size:15px!important;}
.lt .jag-dob-note button{color:var(--lt-teal)!important;}

@media (prefers-reduced-motion:reduce){.lt-btn,.lt-tile{transition:none;}}