/* GD Electronic — online order / checkout pages. Mobile-first. Loaded only on order.html + order-success.html */
.ohero{padding:40px 0 48px}
@media (min-width:860px){.ohero{padding:56px 0 64px}}
.ohero h1{max-width:820px}

/* stepper */
.ostepper{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.ostepper li{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#c6d1e6;font-size:.85rem;font-weight:600;transition:background .3s,border-color .3s,color .3s}
.ostepper li b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-family:var(--font-head);font-size:.8rem;transition:background .3s,color .3s,transform .3s}
.ostepper li.is-done{border-color:rgba(31,168,85,.55);color:#fff}
.ostepper li.is-done b{background:var(--wa);transform:scale(1.08)}
.ostepper li.is-done b::before{content:"✓"}
.ostepper li.is-done b span{display:none}

/* layout */
.osec{padding:32px 0 72px}
@media (min-width:860px){.osec{padding:56px 0 96px}}
.ogrid{display:grid;gap:24px;align-items:start}
@media (min-width:980px){.ogrid{grid-template-columns:minmax(0,1fr) 380px;gap:32px}}
.omain{display:grid;gap:24px;min-width:0}
.ostep{margin:0;min-width:0;border:1px solid var(--silver-200);border-radius:20px;padding:20px 16px 22px;background:#fff;box-shadow:var(--shadow)}
@media (min-width:640px){.ostep{padding:28px}}
.ostep legend{float:left;width:100%;padding:0;margin:0 0 18px;display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:700;font-size:1.2rem;color:var(--navy-900);letter-spacing:-.01em}
.ostep > :not(legend){clear:both}
.ostep__n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy-900);color:var(--amber);font-size:1rem;transition:background .3s,transform .3s}
.ostep.is-done .ostep__n{background:var(--wa);color:#fff}
.ostep__sub{display:block;font-family:var(--font-body);font-weight:500;font-size:.85rem;color:var(--muted);letter-spacing:0}

/* entrance motion (CSS only; content visible without JS / with reduced motion) */
html.motion .ostep,html.motion .osum{animation:oIn .7s cubic-bezier(.2,.8,.2,1) both}
html.motion .ostep:nth-child(2){animation-delay:.08s}
html.motion .ostep:nth-child(3){animation-delay:.16s}
html.motion .osum{animation-delay:.12s}
@keyframes oIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
html.safe .ostep,html.safe .osum{opacity:1}

/* TV size options */
.tvopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){.tvopts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tvopt{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;border:2px solid var(--silver-200);border-radius:16px;background:var(--silver-100);cursor:pointer;text-align:center;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.tvopt:hover{border-color:var(--blue-500);transform:translateY(-2px)}
.tvopt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tvopt__tv{width:100%;height:56px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px}
.tvopt__tv span{display:block;aspect-ratio:16/9;border:3px solid var(--navy-900);border-radius:4px;background:linear-gradient(135deg,var(--blue-600),var(--navy-800));position:relative;overflow:hidden;transition:box-shadow .3s}
.tvopt__tv span::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%)}
.tvopt strong{font-family:var(--font-head);font-size:1.5rem;line-height:1;color:var(--navy-900)}
.tvopt__name{font-size:.78rem;color:var(--muted)}
.tvopt__price{font-weight:800;font-size:1.05rem;color:var(--blue-700);font-variant-numeric:tabular-nums}
.tvopt__tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tvopt__tick svg{width:13px;height:13px}
.tvopt:has(input:checked){border-color:var(--blue-600);background:#fff;box-shadow:0 0 0 4px rgba(29,91,216,.14),var(--shadow)}
.tvopt.is-on{border-color:var(--blue-600);background:#fff;box-shadow:0 0 0 4px rgba(29,91,216,.14),var(--shadow)}
.tvopt:has(input:checked) .tvopt__tick,.tvopt.is-on .tvopt__tick{transform:scale(1)}
.tvopt:has(input:checked) .tvopt__tv span,.tvopt.is-on .tvopt__tv span{box-shadow:0 8px 22px rgba(59,123,255,.45)}
html.motion .tvopt.is-on .tvopt__tv span::after{animation:oShine 1s .05s ease-out}
@keyframes oShine{to{transform:translateX(120%)}}
.tvopt:has(input:focus-visible){outline:3px solid var(--amber);outline-offset:2px}
.tvopts-note{margin:14px 0 0;font-size:.88rem;color:var(--muted)}

/* payment options */
.payopts{display:grid;gap:12px}
@media (min-width:700px){.payopts{grid-template-columns:1fr 1fr}}
.payopt{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px;border:2px solid var(--silver-200);border-radius:16px;background:var(--silver-100);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.payopt:hover{border-color:var(--blue-500)}
.payopt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.payopt__dot{flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;border:2px solid var(--silver-300);background:#fff;display:grid;place-items:center;transition:border-color .2s}
.payopt__dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue-600);transform:scale(0);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.payopt:has(input:checked),.payopt.is-on{border-color:var(--blue-600);background:#fff;box-shadow:0 0 0 4px rgba(29,91,216,.14)}
.payopt:has(input:checked) .payopt__dot,.payopt.is-on .payopt__dot{border-color:var(--blue-600)}
.payopt:has(input:checked) .payopt__dot::after,.payopt.is-on .payopt__dot::after{transform:scale(1)}
.payopt:has(input:focus-visible){outline:3px solid var(--amber);outline-offset:2px}
.payopt__t{display:block;font-weight:700;color:var(--navy-900)}
.payopt__amt{display:block;font-family:var(--font-head);font-weight:800;font-size:1.45rem;color:var(--blue-700);margin:2px 0;font-variant-numeric:tabular-nums}
.payopt__s{display:block;font-size:.86rem;color:var(--muted)}
.payopt[hidden]{display:none}

/* details fields */
.ofields{display:grid;gap:14px}
@media (min-width:600px){.ofields{grid-template-columns:1fr 1fr}.ofields .field--full{grid-column:1/-1}}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:#d92d20;background:#fff5f4}
.field .err{display:block;font-size:.8rem;color:#b42318;font-weight:600;margin-top:4px}
.field .err:empty{display:none}
.ofields .fl input[type=date]{padding-right:14px}

/* summary */
.oside{min-width:0}
@media (min-width:980px){.oside{position:sticky;top:88px}}
.osum{border-radius:20px;padding:22px 18px;background:#fff;box-shadow:var(--shadow-lg);border:1px solid var(--silver-200)}
@media (min-width:640px){.osum{padding:26px}}
.osum h2{font-size:1.25rem;margin-bottom:14px}
.osum__tv{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:linear-gradient(135deg,var(--navy-900),var(--navy-950));color:#c6d1e6;margin-bottom:14px}
.osum__scr{flex:none;width:76px;aspect-ratio:16/9;border:3px solid #24375f;border-radius:5px;background:linear-gradient(135deg,var(--blue-600),var(--navy-800));display:grid;place-items:center;font-family:var(--font-head);font-weight:800;color:#fff;font-size:.95rem;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.osum__scr.pop{transform:scale(1.12)}
.osum__tv strong{display:block;color:#fff;font-family:var(--font-head);font-size:1.05rem}
.osum__tv small{font-size:.8rem;color:#9fb0cf}
.osum__rows{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.95rem}
.osum__rows li{display:flex;justify-content:space-between;gap:12px}
.osum__rows span:first-child{color:var(--muted)}
.osum__rows b{font-variant-numeric:tabular-nums;color:var(--navy-900)}
.osum__rows .free b{color:var(--wa-dark)}
.osum__total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:14px 0 4px;padding-top:14px;border-top:1px dashed var(--silver-300)}
.osum__total span{font-weight:700;color:var(--navy-900)}
.osum__total b{font-family:var(--font-head);font-size:1.7rem;color:var(--navy-900);font-variant-numeric:tabular-nums}
.osum__bal{font-size:.85rem;color:var(--muted);margin:0 0 14px;min-height:1.3em}
.oconsent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted);margin:6px 0 4px;cursor:pointer}
.oconsent input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--blue-600)}
.oconsent.has-err{color:#b42318}
.opay{margin-top:12px;font-size:1.05rem;min-height:56px}
.opay[disabled]{opacity:.7;cursor:progress;transform:none}
.opay .spin{border-color:rgba(42,26,0,.25);border-top-color:var(--amber-ink)}
.omsg{margin:12px 0 0;padding:12px 14px;border-radius:12px;font-size:.9rem;line-height:1.45}
.omsg:empty{display:none}
.omsg--err{background:#fff5f4;color:#912018;border:1px solid #fecdca}
.omsg--info{background:var(--blue-50);color:var(--navy-900);border:1px solid #c9d7ff}
.omsg .btn{margin-top:10px}
.otrust{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--silver-200);display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;font-size:.8rem;color:var(--muted)}
.otrust li{display:flex;gap:8px;align-items:center;line-height:1.3}
.otrust svg{flex:none;width:18px;height:18px;color:var(--blue-600)}
.owa{margin-top:14px;text-align:center;font-size:.88rem;color:var(--muted)}
.owa a{font-weight:700;color:var(--wa-dark)}
.oinfo{margin-top:14px;padding:14px;border-radius:14px;background:var(--silver-100);font-size:.85rem;color:var(--muted)}
.oinfo p{margin:0 0 6px}.oinfo p:last-child{margin:0}
.oinfo strong{color:var(--navy-900)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* success page */
.osucc{padding:56px 0 72px;text-align:center}
.osucc .wrap{max-width:720px}
.oid{display:inline-flex;align-items:center;gap:10px;margin:8px 0 20px;padding:10px 18px;border-radius:999px;background:var(--navy-900);color:#fff;font-family:var(--font-head);font-weight:700;letter-spacing:.04em;font-size:1.05rem}
.oid small{font-family:var(--font-body);font-weight:600;color:#9fb0cf;letter-spacing:0;font-size:.8rem}
.onext{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;text-align:left}
@media (min-width:700px){.onext{grid-template-columns:repeat(3,1fr)}}
.onext li{padding:20px;border-radius:16px;border:1px solid var(--silver-200);background:#fff;box-shadow:var(--shadow)}
.onext b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy-900);color:var(--amber);font-family:var(--font-head);margin-bottom:10px}
.onext h2{font-size:1.05rem;margin-bottom:4px}
.onext p{margin:0;font-size:.92rem;color:var(--muted)}
html.motion .onext li{animation:oIn .7s cubic-bezier(.2,.8,.2,1) both}
html.motion .onext li:nth-child(1){animation-delay:1.1s}
html.motion .onext li:nth-child(2){animation-delay:1.25s}
html.motion .onext li:nth-child(3){animation-delay:1.4s}
@media (prefers-reduced-motion:reduce){.ostep,.osum,.onext li{animation:none!important}}
.ofields input[type=date] ~ .fl__ok{display:none}