/* GoSky waiver kiosk — slick, lean, full-page (iPad + pen). */
:root{
  --bg:#020202; --surface:#0f1217; --field:#0a0c0e;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  /* brighter border for input controls — readable on a reflective screen in sunlight */
  --field-bd:rgba(255,255,255,.42);
  --t1:#f4f6f9; --t2:#9aa3af; --t3:#5f6772;
  --orange:#FF6100; --orange-2:#ff7e2f;
  --green:#27c98a; --red:#ff5d5d;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
*:not(input):not(textarea){ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
html{height:100%;}
body{
  margin:0; min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--t1); background:var(--bg);
  -webkit-text-size-adjust:100%; line-height:1.55;
}

/* header — centered logo that merges with the bg (screen blend drops its black box) */
.topbar{display:flex; justify-content:center; align-items:center; padding:26px 24px 6px;}
.logo{height:96px; width:auto; display:block; pointer-events:none;}
.loc-name{display:none;}

/* full-page flow — the page scrolls, never an inner box */
.stage{display:flex; justify-content:center; padding:18px 22px 90px;}
.step{display:none; width:100%; max-width:680px; animation:fade .4s ease;}
.step.is-active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* no card — content sits straight on the background; the filled fields carry it */
.card{background:transparent; border:0; border-radius:0; padding:0; box-shadow:none;}

/* hero steps (code / done) sit a little lower, centered */
.code-card,.done-card{max-width:460px; margin:8vh auto 0; padding:0; text-align:center;}

h1.big{font-size:32px; font-weight:800; letter-spacing:-.6px; margin:0 0 10px;}
.lead{font-size:16.5px; color:var(--t2); margin:0 0 26px;}
.ttl{font-size:25px; font-weight:800; letter-spacing:-.4px; margin:0 0 6px;}
.sub{font-size:15px; color:var(--t2); margin:0 0 26px;}
.hint{font-size:13px; color:var(--t3); margin:20px 0 0;}
.err{color:var(--red); font-size:14px; min-height:18px; margin:10px 0 0; font-weight:600;}
section.is-active .err:empty{margin:0;}

/* code entry */
.code-input{width:100%; margin:8px 0 2px; text-align:center; font-size:44px; font-weight:800;
  letter-spacing:16px; text-indent:16px; text-transform:uppercase; color:var(--t1);
  background:var(--field); border:1.5px solid var(--field-bd); border-radius:16px; padding:20px 10px;
  outline:none; transition:border-color .15s, box-shadow .15s;}
.code-input:focus{border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,97,0,.18);}
.code-input::placeholder{color:#2c333d;}

/* buttons */
.btn-primary{appearance:none; border:none; cursor:pointer; font-weight:700; font-size:16px; color:#fff;
  background:var(--orange); padding:16px 28px; border-radius:14px;
  transition:background .15s, transform .07s, opacity .15s;}
.btn-primary:hover{background:var(--orange-2);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary:disabled{opacity:.35; cursor:not-allowed;}
.btn-primary.lg{width:100%; font-size:17px; padding:18px;}
.btn-ghost{appearance:none; cursor:pointer; font-weight:600; font-size:15px; color:var(--t2);
  background:transparent; border:1px solid var(--line-2); padding:15px 24px; border-radius:14px;}
.btn-ghost:hover{color:var(--t1); border-color:var(--t3);}

.row-btns{display:flex; gap:12px; align-items:center; margin-top:34px;}
.row-btns.center{justify-content:center;}
.row-btns .btn-primary{flex:1;}

/* forms — filled fields, neatly aligned in a 2-up grid */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px 18px; margin-top:4px;}
.fld{display:flex; flex-direction:column; gap:8px; min-width:0;}
.fld.span2{grid-column:1 / -1;}
.fld>span{font-size:11.5px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.07em;}
.fld input{
  width:100%; font-family:inherit; font-size:16px; line-height:1.2; color:var(--t1);
  background:var(--field); border:1.5px solid var(--field-bd); border-radius:12px; padding:14px 14px;
  outline:none; transition:border-color .15s, box-shadow .15s, background .15s;}
.fld input::placeholder{color:var(--t3);}
.fld input:focus{border-color:var(--orange); background:#0f1216;
  box-shadow:0 0 0 3px rgba(255,97,0,.16);}

/* section divider (emergency contact, etc.) */
.sec-head{margin:30px 0 14px; padding-top:24px; border-top:1px solid var(--line);
  font-size:15px; font-weight:700; color:var(--t1);}
.sec-req{color:var(--t3); font-weight:500; font-size:12.5px;}

/* waiver clauses — full flow, every clause visible, the PAGE scrolls */
.clauses{display:flex; flex-direction:column; gap:12px; margin-top:10px;}
.clause{display:flex; gap:16px; padding:18px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; cursor:pointer;
  transition:border-color .15s, background .15s;}
.clause:hover{border-color:var(--line-2);}
.clause.checked{border-color:rgba(255,97,0,.5); background:rgba(255,97,0,.06);}
.clause .box{flex-shrink:0; width:26px; height:26px; border-radius:8px; border:2px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900;
  color:transparent; transition:all .15s; margin-top:1px;}
.clause.checked .box{border-color:var(--orange); background:var(--orange); color:#fff;}
.clause .txt{font-size:14px; line-height:1.6; color:var(--t2);}
.clause .txt b{color:var(--t1); font-weight:700;}
.clause .txt ul{margin:7px 0 0; padding-left:18px;}
.clause .txt ul.cl-list li{margin:3px 0;}

/* agreement preamble (above the clauses) and the closing certification (below) */
.waiver-intro{font-size:13.5px; line-height:1.65; color:var(--t2); margin:12px 0 4px;}
.waiver-certify{font-size:13px; line-height:1.6; font-weight:700; color:var(--t1);
  margin:16px 0 0; padding:16px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px;}

/* guardian group — subtle, not boxy */
.guardian-block{margin-top:26px; padding:20px; border:1px solid rgba(255,97,0,.45); border-radius:16px; background:rgba(255,97,0,.05);}
.gb-ttl{font-weight:700; font-size:15px;}
.gb-req{color:var(--orange); font-weight:600; font-size:12.5px;}
.gb-txt{font-size:13px; color:var(--t2); margin:5px 0 14px;}

/* signature */
.sign-block{margin-top:30px;}
.sign-hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.sign-hd>span{font-size:12px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.06em;}
.btn-clear{appearance:none; border:1px solid var(--line-2); background:transparent; color:var(--t2);
  font-weight:600; font-size:13px; padding:8px 16px; border-radius:10px; cursor:pointer;}
.btn-clear:hover{color:var(--t1);}
.sign-wrap{position:relative; background:#f6f8fb; border-radius:16px; height:210px; overflow:hidden; touch-action:none;}
#sigPad{display:block; width:100%; height:100%; touch-action:none;}
.sign-line{position:absolute; left:26px; right:26px; bottom:44px; height:2px; background:#cdd3db;}
.sign-name{margin-top:10px; font-size:13px; color:var(--t3);}

/* done */
.check{width:94px; height:94px; margin:0 auto 24px;}
.check svg{width:100%; height:100%; display:block; overflow:visible;}
.check-bg{fill:none; stroke:var(--green); stroke-width:2.5; opacity:.9; transform-origin:center;}
.check-mark{fill:none; stroke:var(--green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34; stroke-dashoffset:34;}
.check.play .check-bg{animation:check-ring .45s cubic-bezier(.2,.7,.3,1) both;}
.check.play .check-mark{animation:check-draw .42s .22s ease forwards;}
@keyframes check-ring{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:.9;}}
@keyframes check-draw{to{stroke-dashoffset:0;}}
.done-count{margin-top:30px; font-size:14px; font-weight:600; color:var(--t3); font-variant-numeric:tabular-nums;}

/* overlay */
.overlay{position:fixed; inset:0; z-index:10; background:rgba(6,8,11,.78); backdrop-filter:blur(4px);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:18px;}
.overlay.on{display:flex;}
.spinner{width:52px; height:52px; border-radius:50%; border:4px solid rgba(255,255,255,.12);
  border-top-color:var(--orange); animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ov-msg{font-size:15px; color:var(--t2); font-weight:600;}

.idle-dlg{position:fixed; inset:0; z-index:20; background:rgba(2,2,2,.82); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:24px;}
.idle-dlg.on{display:flex;}
.idle-card{width:100%; max-width:380px; text-align:center; background:var(--surface);
  border:1px solid var(--line-2); border-radius:18px; padding:34px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);}
.idle-ttl{margin:0; font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--t1);}
.idle-msg{margin:12px 0 24px; font-size:14.5px; line-height:1.5; color:var(--t2);}
.idle-card .btn-primary{width:100%;}

/* native selects — dark, matched to the inputs, with a chevron */
.fld-sel{width:100%; font-family:inherit; font-size:16px; line-height:1.2; color:var(--t1);
  background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa3af' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1.5px solid var(--field-bd); border-radius:12px; padding:14px 38px 14px 14px;
  -webkit-appearance:none; appearance:none; outline:none; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background-color .15s;}
.fld-sel:focus{border-color:var(--orange); background-color:#0f1216; box-shadow:0 0 0 3px rgba(255,97,0,.16);}
.fld-sel option{background:#0a0c0e; color:var(--t1);}
.fld-sel:invalid,.fld-sel:has(option[value=""]:checked){color:var(--t3);}

/* DOB — three side-by-side dropdowns */
.dob-row{display:grid; grid-template-columns:1.4fr 1fr 1.1fr; gap:8px;}
.dob-row .fld-sel{padding-right:30px; background-position:right 10px center;}

/* phone — country-code dropdown + number */
.phone-row{display:flex; gap:8px;}
.phone-cc{flex:0 0 270px; width:270px; text-overflow:ellipsis;}
.phone-num{flex:1; min-width:0; font-family:inherit; font-size:16px; line-height:1.2; color:var(--t1);
  background:var(--field); border:1.5px solid var(--field-bd); border-radius:12px; padding:14px;
  outline:none; transition:border-color .15s, box-shadow .15s, background .15s;}
.phone-num::placeholder{color:var(--t3);}
.phone-num:focus{border-color:var(--orange); background:#0f1216; box-shadow:0 0 0 3px rgba(255,97,0,.16);}

/* signature too-small warning */
.sign-warn{margin-top:10px; font-size:13px; font-weight:600; color:var(--red);}

@media (max-width:640px){
  .grid2{grid-template-columns:1fr;}
  h1.big{font-size:26px;}
  .logo{height:78px;}
  .topbar{padding:18px 18px 4px;}
}