/* Phase 2 customer pages: G5 choose course, G6 confirm, G7 booked, G8 coupon, coupon list, scan.
   G5–G8 mockups are 941 px wide → --g = 1 mockup pixel (G1–G3 use --u, 896 px). Loaded after app.css. */
.phone{--g:calc(100cqw / 941)}
.hero-g{background-color:#0b5424;background-size:100% auto;background-position:top center;background-repeat:no-repeat}
.g5h{background-image:url(../img/hero_g5.jpg);aspect-ratio:941/392}
.g6h{background-image:url(../img/hero_g6.jpg);aspect-ratio:941/392}
.g7h{background-image:url(../img/hero_g7.jpg);aspect-ratio:941/398}
.g8h{background-image:url(../img/hero_g8.jpg);aspect-ratio:941/285}
.p-golf .menu summary,.p-golf_confirm .menu summary,.p-golf_booked .menu summary,.p-coupon .menu summary,.p-coupons .menu summary,.p-scan .menu summary{left:calc(832*var(--g));top:calc(20*var(--g));width:calc(84*var(--g));height:calc(70*var(--g))}
.g-tag{position:absolute;left:calc(68*var(--g));top:calc(146*var(--g));min-width:calc(244*var(--g));height:calc(56*var(--g));display:inline-flex;align-items:center;justify-content:center;padding:0 calc(26*var(--g));border:calc(3*var(--g)) solid #fff;border-radius:calc(30*var(--g));color:#fff;font-weight:600;font-size:calc(31*var(--g));white-space:nowrap}
.g6h .g-tag{left:calc(66*var(--g));top:calc(156*var(--g));min-width:calc(320*var(--g));background:rgba(4,60,24,.85)}
.g-title{position:absolute;left:calc(70*var(--g));top:calc(202*var(--g));margin:0;color:#fff;font-weight:800;font-style:italic;font-size:calc(70*var(--g));line-height:1.2;white-space:nowrap;text-shadow:0 calc(3*var(--g)) calc(10*var(--g)) rgba(0,40,10,.35)}
.g6h .g-title{left:calc(62*var(--g));top:calc(214*var(--g));font-size:calc(64*var(--g))}
.g-title em{color:var(--lime)}
.g-sub{position:absolute;left:calc(76*var(--g));top:calc(288*var(--g));margin:0;color:#fff;font-size:calc(31*var(--g));text-shadow:0 1px 4px rgba(0,0,0,.4);white-space:nowrap}
.g6h .g-sub{left:calc(62*var(--g));top:calc(292*var(--g))}
.g8back{position:absolute;left:calc(44*var(--g));top:calc(150*var(--g));width:calc(70*var(--g));height:calc(80*var(--g))}
.g8title{position:absolute;left:calc(130*var(--g));top:calc(140*var(--g));margin:0;color:#fff;font-weight:800;font-style:italic;font-size:calc(56*var(--g));line-height:1.25;white-space:nowrap}
.g8title em{color:var(--lime)}
.g8sub{position:absolute;left:calc(135*var(--g));top:calc(218*var(--g));margin:0;color:#fff;font-size:calc(29*var(--g));white-space:nowrap;max-width:calc(520*var(--g));overflow:hidden;text-overflow:ellipsis}
.gp{position:relative;padding:calc(10*var(--g)) calc(30*var(--g)) calc(240*var(--g))}
.gp .soon{margin-top:calc(20*var(--g))}

/* course card (G5) */
.ccard{display:block;position:relative;background:#fff;border:calc(3*var(--g)) solid transparent;border-radius:calc(30*var(--g));box-shadow:0 calc(4*var(--g)) calc(18*var(--g)) rgba(20,60,30,.1);margin-bottom:calc(22*var(--g));padding:calc(14*var(--g));cursor:pointer}
.ccard input{position:absolute;opacity:0;pointer-events:none}
.ccard:has(input:checked){border-color:#7ccf4f;background:linear-gradient(180deg,#f4fbef,#fff)}
.ccard:has(input:focus-visible){box-shadow:0 0 0 3px rgba(58,166,74,.35)}
.ccard.full{opacity:.6;cursor:not-allowed}
.cc-top{display:flex;align-items:center;gap:calc(22*var(--g))}
.cc-top img,.cc-noimg{display:block;width:calc(364*var(--g));height:calc(180*var(--g));border-radius:calc(20*var(--g));object-fit:cover;flex:none;background:linear-gradient(135deg,#bfe3a6,#1d7a35)}
.cc-tx{flex:1;min-width:0}
.cc-tx b{display:flex;gap:calc(10*var(--g));align-items:flex-start;font-size:calc(38*var(--g));line-height:1.2;color:#13301b;font-weight:700}
.cc-tx b svg{flex:none;width:calc(46*var(--g));height:calc(46*var(--g));color:#d32f2f;margin-top:calc(4*var(--g))}
.cc-tx small{display:block;margin-top:calc(10*var(--g));font-size:calc(25*var(--g));color:#6b746e;line-height:1.4;padding-left:calc(56*var(--g))}
.cc-radio{flex:none;width:calc(54*var(--g));height:calc(54*var(--g));border-radius:50%;border:calc(3*var(--g)) solid #8a8a8a;display:grid;place-items:center;color:transparent}
.cc-radio svg{width:calc(32*var(--g));height:calc(32*var(--g))}
.ccard:has(input:checked) .cc-radio{background:#1f9a3a;border-color:#1f9a3a;color:#fff}
.cc-stats{display:flex;margin-top:calc(16*var(--g));border-top:calc(2*var(--g)) solid #e6ece7;padding-top:calc(14*var(--g))}
.cc-stats>span{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(14*var(--g))}
.cc-stats>span+span{border-left:calc(2*var(--g)) solid #e6ece7}
.cc-stats svg{width:calc(56*var(--g));height:calc(56*var(--g));color:#1d7a35}
.cc-stats small{display:block;font-size:calc(24*var(--g));color:#3d4741}
.cc-stats b{display:block;font-size:calc(38*var(--g));color:#127a33;font-weight:700;line-height:1.15}
.period{display:flex;align-items:center;justify-content:space-between;gap:calc(14*var(--g));background:#fbfde9;border:calc(2*var(--g)) solid #d7ef7a;border-radius:calc(22*var(--g));padding:calc(16*var(--g)) calc(20*var(--g));margin:calc(6*var(--g)) 0 calc(10*var(--g))}
.period>span{display:flex;gap:calc(14*var(--g));align-items:center}
.period svg{width:calc(56*var(--g));height:calc(56*var(--g));color:#1d7a35;flex:none}
.period b{display:block;font-size:calc(27*var(--g));color:#13301b}
.period small{display:block;font-size:calc(22*var(--g));color:#3d4741}
.period em{font-style:normal;font-weight:700;color:#0f6b2d;background:#e4f5b9;border-radius:calc(20*var(--g));padding:calc(10*var(--g)) calc(18*var(--g));font-size:calc(27*var(--g));white-space:nowrap}
.gp .lab{margin-top:calc(18*var(--g))}
.sel.date{margin-left:0;width:100%;display:flex;align-items:center;padding-left:calc(26*var(--g))}
.sel.date>svg:first-child{position:static;transform:none;width:calc(36*var(--g));height:calc(36*var(--g));color:#2b3530;flex:none}
.sel.date select{padding-left:calc(16*var(--g))}
.gp .btn-g.big{margin-top:calc(34*var(--g))}

/* G6 */
.g6card{background:#fff;border-radius:calc(30*var(--g));box-shadow:0 calc(4*var(--g)) calc(18*var(--g)) rgba(20,60,30,.1);padding:calc(18*var(--g))}
.conds{background:#ecf7e8;border-radius:calc(26*var(--g));padding:calc(20*var(--g)) calc(26*var(--g));margin-top:calc(22*var(--g))}
.conds h2{display:flex;align-items:center;gap:calc(12*var(--g));margin:0 0 calc(10*var(--g));font-size:calc(34*var(--g));color:#13301b}
.conds h2 svg{width:calc(44*var(--g));height:calc(44*var(--g));color:#1d7a35}
.conds ul{list-style:none;margin:0;padding:0}
.conds li{display:flex;gap:calc(14*var(--g));align-items:flex-start;font-size:calc(26*var(--g));line-height:1.45;color:#1f2a24;margin:calc(6*var(--g)) 0}
.conds li i{flex:none;width:calc(32*var(--g));height:calc(32*var(--g));border-radius:50%;background:#1f9a3a;color:#fff;display:grid;place-items:center;margin-top:calc(3*var(--g))}
.conds li i svg{width:calc(20*var(--g));height:calc(20*var(--g))}
.btn-o.back{margin:calc(26*var(--g)) auto 0;width:86%;height:calc(90*var(--g));font-size:calc(34*var(--g))}
.btn-o.back svg{width:calc(36*var(--g));height:calc(36*var(--g))}

/* G7 */
.g7{margin-top:calc(-14*var(--g))}
.g7card{background:#fff;border-radius:calc(40*var(--g));box-shadow:0 calc(-4*var(--g)) calc(30*var(--g)) rgba(10,60,20,.12);padding:calc(30*var(--g)) calc(30*var(--g)) calc(40*var(--g));text-align:center}
.g7ticket{display:block;width:calc(425*var(--g));height:auto;margin:0 auto;mix-blend-mode:multiply}
.g7card h1{margin:calc(4*var(--g)) 0 0;font-size:calc(74*var(--g));font-style:italic;font-weight:800;color:#0f3d1e}
.g7card .muted{font-size:calc(34*var(--g));margin:calc(14*var(--g)) 0}
.g7hold{display:inline-flex;align-items:center;gap:calc(16*var(--g));background:linear-gradient(180deg,#f3ff8f,#e3f75a);border-radius:calc(46*var(--g));padding:calc(10*var(--g)) calc(40*var(--g));color:#0d4a26}
.g7hold svg{width:calc(70*var(--g));height:calc(70*var(--g))}
.g7hold b{font-size:calc(72*var(--g))}
.g7until{font-size:calc(25*var(--g));color:#3d4741;margin:calc(10*var(--g)) 0 calc(18*var(--g))}
.g7no{display:flex;align-items:center;justify-content:space-between;border:calc(3*var(--g)) solid #cfe98a;border-radius:calc(22*var(--g));padding:calc(10*var(--g)) calc(14*var(--g)) calc(10*var(--g)) calc(20*var(--g));font-size:calc(30*var(--g));font-weight:600;color:#13301b}
.g7no span{display:flex;align-items:center;gap:calc(12*var(--g))}
.g7no svg{width:calc(44*var(--g));height:calc(44*var(--g));color:#1d7a35}
.g7no b{background:#e4f5b9;border-radius:calc(18*var(--g));padding:calc(4*var(--g)) calc(30*var(--g));font-size:calc(46*var(--g));color:#0f6b2d;letter-spacing:calc(2*var(--g))}
.g7card .btn-o{margin-top:calc(22*var(--g))}

/* G8 + coupon list */
.g8c .cc-tx b{font-size:calc(40*var(--g))}
.state{display:inline-flex;align-items:center;gap:calc(8*var(--g));margin-top:calc(14*var(--g));border-radius:calc(30*var(--g));padding:calc(8*var(--g)) calc(28*var(--g));font-size:calc(32*var(--g));font-weight:700;white-space:nowrap}
.state svg{width:calc(28*var(--g));height:calc(28*var(--g))}
.s-active{background:linear-gradient(90deg,#2fa340,#0f6b2d);color:#fff}
.s-used{background:#e0ecff;color:#1d4ed8}
.s-expired{background:#fde7e7;color:var(--red)}
.s-cancelled{background:#eceff1;color:#6b7280}
.kvs{background:#fff;border-radius:calc(26*var(--g));box-shadow:0 calc(4*var(--g)) calc(18*var(--g)) rgba(20,60,30,.08);padding:calc(6*var(--g)) calc(26*var(--g));margin-top:calc(20*var(--g))}
.kvs div{display:flex;align-items:center;gap:calc(16*var(--g));padding:calc(16*var(--g)) 0;font-size:calc(28*var(--g));color:#1f2a24}
.kvs div+div{border-top:calc(2*var(--g)) solid #eef2ef}
.kvs svg{width:calc(42*var(--g));height:calc(42*var(--g));color:#1d7a35;flex:none}
.kvs span{flex:0 0 calc(250*var(--g))}
.kvs b{flex:1;font-weight:600;color:#13301b;text-align:left;min-width:0;overflow-wrap:anywhere}
.kvs b.hl{color:#14702f;font-size:calc(34*var(--g));font-weight:700}
.kvs b.pill{flex:0 1 auto;background:#e4f5b9;border-radius:calc(20*var(--g));padding:calc(6*var(--g)) calc(18*var(--g));color:#14702f;font-weight:700}
.kvs.small div{padding:calc(10*var(--g)) 0;font-size:calc(25*var(--g))}
.note-box{background:#ecf7e8;border-radius:calc(22*var(--g));padding:calc(18*var(--g)) calc(24*var(--g));margin-top:calc(24*var(--g));font-size:calc(25*var(--g));color:#1f2a24}
.note-box b{display:flex;align-items:center;gap:calc(12*var(--g));font-size:calc(28*var(--g))}
.note-box b svg{width:calc(38*var(--g));height:calc(38*var(--g))}
.note-box ul{margin:calc(6*var(--g)) 0 0;padding-left:calc(70*var(--g))}
.clist{display:flex;align-items:center;gap:calc(18*var(--g));background:#fff;border-radius:calc(24*var(--g));box-shadow:0 calc(3*var(--g)) calc(14*var(--g)) rgba(20,60,30,.08);padding:calc(14*var(--g));margin-top:calc(16*var(--g));text-decoration:none;color:inherit}
.clist img,.clist .cc-noimg{width:calc(150*var(--g));height:calc(110*var(--g));border-radius:calc(16*var(--g));object-fit:cover;flex:none}
.cl-tx{flex:1;min-width:0}
.cl-tx b{display:block;font-size:calc(30*var(--g))}
.cl-tx small{display:block;font-size:calc(23*var(--g));color:#6b746e;margin-top:calc(4*var(--g))}
.clist .state{margin:0;font-size:calc(23*var(--g))}

/* scan */
.cam{position:relative;margin-top:calc(22*var(--g));height:calc(470*var(--g));border-radius:calc(30*var(--g));background:#111a14;overflow:hidden;display:grid;place-items:center}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam:after{content:"";position:absolute;inset:calc(70*var(--g)) calc(200*var(--g));border:calc(5*var(--g)) solid var(--lime);border-radius:calc(26*var(--g));pointer-events:none}
.cam[hidden],.manual[hidden]{display:none}
.cam-start{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--g));background:none;border:0;color:#e8f0ea;font:inherit;font-size:calc(30*var(--g));cursor:pointer}
.cam-start[hidden]{display:none}
.cam-start svg{width:calc(80*var(--g));height:calc(80*var(--g))}
.gps{font-size:calc(23*var(--g));color:#6b746e;margin:calc(8*var(--g)) calc(6*var(--g)) 0;min-height:1.2em}
.manual{margin-top:calc(14*var(--g))}
.manual>label{display:block;font-size:calc(26*var(--g));color:#3d4741;margin-bottom:calc(8*var(--g))}
.manual-row{display:flex;gap:calc(14*var(--g))}
.manual-row input{flex:1;min-width:0;height:calc(80*var(--g));min-height:40px;border:calc(2.4*var(--g)) solid #cfd8d3;border-radius:calc(24*var(--g));padding:0 calc(22*var(--g));font:inherit;font-size:max(16px,calc(32*var(--g)));letter-spacing:1px}
.manual-row .btn-o.sm{flex:none}
.manual .photo{display:inline-flex;align-items:center;gap:calc(10*var(--g));margin-top:calc(14*var(--g));color:#0f6b2d;font-weight:600;cursor:pointer;font-size:calc(26*var(--g))}
.photo input{position:absolute;opacity:0;width:1px;height:1px}
.photo svg{width:calc(36*var(--g));height:calc(36*var(--g))}
.res{border-radius:calc(24*var(--g));padding:calc(18*var(--g)) calc(22*var(--g));margin-top:calc(20*var(--g));font-size:calc(26*var(--g))}
.res b{display:block;font-size:calc(30*var(--g));margin-bottom:calc(6*var(--g))}
.res.ok{background:#e6f6e9;border:calc(3*var(--g)) solid #2f9e45;color:#0b5424}
.res.bad{background:#fff1e3;border:calc(3*var(--g)) solid #e0740b;color:#7a3a00}
.res.done{background:linear-gradient(135deg,#0b5424,#1f9a3a);color:#fff;text-align:center;padding:calc(40*var(--g)) calc(20*var(--g))}
.res.done b{font-size:calc(52*var(--g))}
.res.done .btn-o{margin-top:calc(16*var(--g))}
.chk{padding:calc(3*var(--g)) 0}
.chk.y{color:#0b5424}
.chk.n{color:#b3261e;font-weight:600}
.small-note{font-size:calc(23*var(--g))}
#use[hidden],#usenote[hidden]{display:none}