*{box-sizing:border-box}
:root{--ink:#111413;--muted:#6f7673;--line:#e6e8e7;--paper:#fbfbfa}
html{touch-action:manipulation}
body{margin:0;touch-action:manipulation;font:16px/1.5 var(--font,system-ui);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
.jn{max-width:460px;margin:0 auto;padding:0 24px max(40px,env(safe-area-inset-bottom))}
.jn h1{margin:0;line-height:1.1}

/* hlavička vo farbe Wallet karty so zaoblenými spodnými rohmi: podnik, ukážka karty, jedna veta o odmene */
.jn-hero{margin:0 -24px;padding:max(28px,env(safe-area-inset-top)) 24px 36px;background:var(--hero);color:var(--on-hero);border-radius:0 0 32px 32px}
.jn-pass{margin:0}
.jn-pass .lc-card{box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 16%,transparent),0 24px 50px -24px rgba(0,0,0,.55)}
.jn-hero h1{margin-top:32px;font-size:28px;font-weight:700;letter-spacing:-.02em}
.jn-lead{margin:8px 0 0;font-size:15.5px;opacity:.8}
.jn-lead b{font-weight:600}

/* formulár bez rámčekov, len čiary */
.jn-form{margin-top:32px}
.jn-notice{display:grid;gap:4px;margin:0 0 24px;padding:16px 18px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14.5px;color:var(--muted)}
.jn-notice b,.jn-notice strong{color:var(--ink)}
.jn-notice strong{word-break:break-all}
.jn-notice .jn-btn{margin-top:12px;text-align:center;text-decoration:none;font-size:16px}
/* polia: pokojné, jasné ohraničenie; chyba sa plynulo rozbalí pod poľom */
.jn-f{--bad:#c4321f;--bad-ring:rgba(196,50,31,.12)}
.jn-field{display:grid;margin-bottom:16px}
.jn-field>label,.jn-label{margin-bottom:7px;font-size:13px;font-weight:600;color:var(--muted)}
.jn-label small{font-weight:400}
.jn-field input:not([type=checkbox]),.jn-bday select{font:inherit;font-size:17px;height:52px;padding:0 15px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit;width:100%;outline:none;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none}
.jn-field input::placeholder{color:#b4b9b7}
.jn-field input:not([type=checkbox]):hover,.jn-bday select:hover{border-color:#d3d7d5}
.jn-field input:not([type=checkbox]):focus,.jn-bday select:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(17,20,19,.07)}
.jn-field.is-bad input:not([type=checkbox]),.jn-field.is-bad select{border-color:var(--bad)}
.jn-field.is-bad input:not([type=checkbox]):focus,.jn-field.is-bad select:focus{box-shadow:0 0 0 4px var(--bad-ring)}
.jn-bday{display:grid;grid-template-columns:1fr 1.6fr;gap:8px}
.jn-bday select{padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236f7673' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 15px center;cursor:pointer}
.jn-bday select:invalid,.jn-bday select:has(option[value='']:checked){color:#9aa09d}
.jn-help{margin-top:7px;font-size:12.5px;color:#9aa09d}

/* rozbaľovanie hlášky cez grid 0fr → 1fr: žiadne poskakovanie obsahu */
.jn-msg,.jn-hint{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .22s cubic-bezier(.2,.7,.3,1),opacity .18s}
.jn-msg>p,.jn-hint>p{overflow:hidden;min-height:0;margin:0}
.jn-msg p{display:flex;gap:7px;align-items:flex-start;padding-top:8px;color:var(--bad);font-size:13.5px;line-height:1.4;font-weight:500}
.jn-msg svg{flex:none;width:15px;height:15px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.jn-field.is-bad>.jn-msg,.jn-msg.is-on,.jn-hint.is-on{grid-template-rows:1fr;opacity:1}
.jn-hint p{padding-top:8px;font-size:13.5px;color:var(--muted)}
.jn-hint button{padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent);text-underline-offset:3px;cursor:pointer}
.jn-field.is-bad~.jn-help,.jn-field.is-bad .jn-help{display:none}
.jn-general{transition:grid-template-rows .22s cubic-bezier(.2,.7,.3,1),opacity .18s,margin .22s}
.jn-general.is-on{margin-top:14px}
.jn-general p{padding:12px 14px;border-radius:12px;background:#fdf1ef}

/* zaškrtávacie políčka vlastné, aby boli rovnaké na iPhone aj Androide */
.jn-checks{display:grid;gap:12px;margin:22px 0 4px}
.jn-consent{margin:0}
.jn-check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.jn-check input{flex:none;width:20px;height:20px;margin:0;border:1.5px solid #c9cecb;border-radius:6px;background:#fff center/12px no-repeat;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .15s,border-color .15s,box-shadow .15s}
.jn-check input:checked{background-color:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E")}
.jn-check input:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(17,20,19,.1)}
.jn-consent.is-bad .jn-check input{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-ring)}
.jn-consent .jn-msg p{padding-left:31px}
.jn-consent .jn-msg svg{display:none}
.jn-check a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}

/* odoslanie: tlačidlo ostane na mieste, text vymení točiace sa koliesko */
.jn-submit{margin-top:24px}
.jn-btn{position:relative;display:block;width:100%;margin-top:24px;border:0;border-radius:12px;height:54px;padding:0 16px;font:inherit;font-size:16px;font-weight:600;background:var(--ink);color:#fff;cursor:pointer;transition:transform .12s,opacity .2s;-webkit-tap-highlight-color:transparent}
.jn-submit .jn-btn,.jn-submit .jn-wallet{margin-top:0}
.jn-btn:active{transform:scale(.985)}
.jn-btn[hidden],.jn-wallet[hidden],.jn-done[hidden]{display:none}
.jn-notice .jn-btn{display:grid;place-items:center;height:auto;padding:15px}
.jn-wallet{position:relative;display:flex;justify-content:center;width:100%;margin-top:24px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.jn-wallet img{display:block;height:52px;width:auto;max-width:100%;transition:opacity .2s}
.jn-wallet:active{transform:scale(.98)}
.jn-spin{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:0;pointer-events:none}
.jn-wallet .jn-spin{color:var(--ink)}
.is-busy .jn-spin{opacity:1;animation:jn-spin .7s linear infinite}
.is-busy .jn-btn-label{opacity:0}
.is-busy .jn-wallet img{opacity:.25}
.is-busy button{cursor:progress}
@keyframes jn-spin{to{transform:rotate(360deg)}}

/* hotovo: kruh s fajkou sa dokreslí, potom Wallet */
.jn-done{display:grid;justify-items:center;gap:6px;padding:12px 0 8px;text-align:center;outline:none;animation:jn-in .35s cubic-bezier(.2,.7,.3,1)}
.jn-done h2{margin:14px 0 0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.jn-done p{margin:0;max-width:32ch;font-size:15px;color:var(--muted)}
.jn-done p strong{color:var(--ink);word-break:break-all}
.jn-done .jn-wallet{margin-top:18px}
.jn-done-ico{width:60px;height:60px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.jn-done-ico circle{fill:var(--brand);stroke:none;transform-origin:center;animation:jn-pop .4s cubic-bezier(.3,1.4,.5,1)}
.jn-done-ico path{stroke:var(--on-brand);stroke-width:3.2;stroke-dasharray:40;stroke-dashoffset:40;animation:jn-draw .35s .18s ease-out forwards}
.jn-done-ico.is-mail path{stroke-width:2.2;stroke-dasharray:120;stroke-dashoffset:120;animation-duration:.6s}
.jn-link{margin-top:14px;padding:6px;border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;cursor:pointer}
@keyframes jn-in{from{opacity:0;transform:translateY(8px)}}
@keyframes jn-pop{from{transform:scale(.6);opacity:0}}
@keyframes jn-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.jn-msg,.jn-hint,.jn-done,.jn-done-ico circle{transition:none;animation:none}.jn-done-ico path{animation:none;stroke-dashoffset:0}}

/* odmeny: tichý zoznam s tenkými čiarami, cena vpravo */
.jn-rewards{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.jn-rewards h2{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.jn-rewards ul{list-style:none;margin:0;padding:0}
.jn-rewards li{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.jn-rewards li:last-child{border-bottom:0}
.jn-r-name{display:grid;gap:2px;min-width:0}
.jn-r-name b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.jn-r-name small{font-size:13.5px;color:var(--muted)}
.jn-r-cost{display:grid;justify-items:end;flex:none;line-height:1.1}
.jn-r-cost b{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.jn-r-cost small{font-size:11.5px;color:var(--muted)}