/* Onboarding / objednávka kartičiek (order.html): krokový sprievodca —
úvodné prihlásenie, telefón s náhľadom vľavo, nastavenia vpravo,
indikátor postupu a lišta Späť / Pokračovať. */
/* Tokeny, písma a polia (.field, .grid-2, .msg) sú v admin_base.html.
Tu je len rozloženie onboardingu. Čiernobiele: farbu má iba náhľad. */
body.onboarding .wrap { max-width: 1180px; }
body.onboarding .topbar { margin-bottom: 28px; }
/* Prihlásený má vľavo bočný panel (236 px) — menšie odsadenie od neho
a na notebookoch užší telefón. Zlom na jeden stĺpec ostáva 900 px
(onboarding.js, admin.css) — preto min-width: tieto selektory sú
silnejšie a prebili by mobilné pravidlá. */
@media (min-width: 901px) {
body.onboarding.has-sidebar { padding-left: calc(var(--sidebar-w) + 56px); padding-right: 32px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
.wz-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
}
body.onboarding .msg.err {
background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px;
font-size: 13.5px; line-height: 1.5;
}
body.onboarding .msg.err a { color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob { --ease: cubic-bezier(.23, 1, .32, 1); --r: 14px; }
/* ---- rozloženie: telefón vľavo (sticky), nastavenia vpravo ---- */
.wz-grid {
display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "preview main";
gap: 64px; align-items: start;
}
.wz-grid[hidden] { display: none; }
.wz-main { grid-area: main; min-width: 0; max-width: 680px; }
/* ---- hlavička: postup ---- */
.wz-head { margin-bottom: 36px; }
.wz-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wz-progress li {
display: flex; flex-direction: column; gap: 10px; min-width: 0;
font: 600 10.5px var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
transition: color .3s var(--ease), opacity .3s var(--ease);
}
.wz-progress-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-progress-bar { position: relative; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wz-progress-bar::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink);
/* --fill = podiel hotových mikrokrokov sekcie (onboarding.js paintProgress) */
transform: scaleX(var(--fill, 0)); transform-origin: left; transition: transform .45s var(--ease);
}
.wz-progress li.is-current { color: var(--ink); }
.wz-progress li.is-done { color: var(--muted); }
/* Existujúci podnik: Vzhľad a program sa preskočia. */
.wz-progress li.is-skipped { opacity: .35; }
.wz-progress li.is-skipped .wz-progress-bar { background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
.wz-count { margin: 14px 0 0; font: 500 12px var(--font-mono); color: var(--muted); }
/* ---- krok ---- */
.wz-step[hidden] { display: none; }
.wz-step.is-entering { animation: wz-in .28s var(--ease) both; }
@keyframes wz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wz-step h1, .wz-auth h1 {
font: 600 clamp(28px, 3.4vw, 40px)/1.08 var(--font-head); letter-spacing: -.025em; margin: 0 0 12px; outline: none;
}
.wz-lead { margin: 0 0 32px; color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 560px; }
.wz-section { margin-top: 32px; }
.wz-row { display: flex; flex-wrap: wrap; gap: 0 40px; }
.wz-hint { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.wz-optional { margin-left: 6px; font-weight: 500; letter-spacing: .1em; color: var(--faint); }
/* ---- spodná lišta Späť / Pokračovať ---- */
/* Plávajúce tlačidlá: lišta sama je priehľadná a nezachytáva kliky — obsah
pod ňou ostáva klikateľný, nepriehľadné sú len tlačidlá. */
.wz-nav {
position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
margin-top: 40px; padding: 16px 0 22px; pointer-events: none;
}
.wz-nav > * { pointer-events: auto; }
.wz-back {
display: inline-flex; align-items: center; gap: 4px; padding: 12px 18px 12px 12px;
border: 1px solid var(--line-strong); border-radius: 999px; background: #1d1d1d; color: var(--ink);
box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
font: 500 14.5px var(--font-body); cursor: pointer; transition: border-color .15s ease, transform 140ms var(--ease);
}
.wz-back:hover { border-color: var(--ink); }
.wz-back:active { transform: scale(.97); }
.wz-back[hidden], .wz-cta[hidden] { display: none; }
.wz-back svg, .wz-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wz-cta {
margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 24px 14px 28px; border: 0; border-radius: 999px; cursor: pointer;
background: var(--ink); color: var(--bg); font: 600 15px var(--font-body);
box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
transition: transform 140ms var(--ease), box-shadow .2s ease;
}
.wz-cta:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .4); }
.wz-cta:active { transform: scale(.97); }
.wz-cta svg { transition: transform .2s var(--ease); }
.wz-cta:hover svg { transform: translateX(2px); }
.wz-back:focus-visible, .wz-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* posledný krok: CTA je tlačidlo platby v kroku, v lište len Späť */
.wz-nav.is-last { margin-top: 24px; position: static; }
.wz-nav.is-last .wz-back { box-shadow: none; }
/* ---- 0: prihlásenie ---- */
.wz-auth {
max-width: 440px; margin: 24px auto 64px; padding: 36px 32px 28px;
border: 1px solid var(--line-strong); border-radius: 24px;
background: rgba(29, 29, 29, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
animation: wz-in .32s var(--ease) both;
}
.wz-auth[hidden] { display: none; }
.wz-auth-logo { display: block; width: 40px; height: 40px; border-radius: 10px; margin-bottom: 22px; }
.wz-auth h1 { font-size: 30px; }
.wz-auth .wz-lead { margin-bottom: 24px; font-size: 14.5px; }
.wz-auth-biz {
display: flex; gap: 10px; align-items: center; margin: -6px 0 22px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; line-height: 1.4; color: var(--muted);
}
.wz-auth-biz[hidden] { display: none; }
.wz-auth-biz svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.wz-auth-biz strong { color: var(--ink); font-weight: 600; }
.wz-google {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 18px;
border-radius: 999px; background: #fff; color: #1f1f1f; font: 600 15px var(--font-body); text-decoration: none;
transition: transform 140ms var(--ease), box-shadow .2s ease;
}
.wz-google svg { width: 20px; height: 20px; flex: none; }
.wz-google:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
.wz-google:active { transform: scale(.98); }
.wz-google:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wz-or {
display: flex; align-items: center; gap: 12px; margin: 22px 0 16px;
font: 600 10.5px var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.wz-or::before, .wz-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wz-auth .field { margin-bottom: 12px; }
.wz-cta-block { width: 100%; margin: 4px 0 0; padding: 14px 18px; box-shadow: none; }
/* S Google je e-mail druhá voľba — obrysové tlačidlo. */
.wz-google ~ .wz-cta-block { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.wz-google ~ .wz-cta-block:hover { border-color: var(--ink); box-shadow: none; }
.wz-auth-alt { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.wz-auth-alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.wz-auth-fine {
margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
font-size: 12px; line-height: 1.5; color: var(--faint); text-align: center;
}
/* ---- spoločné prvky ---- */
.ob-sub { font: 600 10.5px var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 32px 0 12px; }
.ob-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ob-btn {
padding: 11px 18px; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer;
background: var(--ink); color: var(--bg); font: 500 14.5px var(--font-body);
transition: transform 140ms var(--ease), background-color .15s ease, color .15s ease;
}
.ob-btn[hidden] { display: none; }
.ob-btn:active { transform: scale(.97); }
.ob-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.ob-btn-ghost:hover { border-color: var(--ink); }
.ob-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-inline-error { color: var(--danger); font-size: 13px; margin: 10px 0 0; }
.ob-inline-error[hidden] { display: none; }
body.onboarding .field input.missing, .wz-custom-num input.missing { border-color: var(--danger); }
/* ---- 1: vyhľadávanie podniku ---- */
.wz-biz-pick[hidden] { display: none; }
.ob-own { margin-bottom: 18px; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip {
padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
color: var(--ink); font: 500 13.5px var(--font-body); cursor: pointer; transition: border-color .15s ease;
}
.ob-chip:hover, .ob-chip:focus-visible { border-color: var(--ink); outline: none; }
.ob-search { position: relative; }
.ob-search[hidden] { display: none; }
.ob-search input {
width: 100%; padding: 17px 44px 17px 48px; border: 1px solid var(--line-strong); border-radius: 14px;
background: var(--surface); color: var(--ink); font: 400 16.5px var(--font-body);
transition: border-color .15s ease, box-shadow .15s ease;
}
.ob-search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.ob-search-icon { position: absolute; left: 17px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.ob-spinner {
position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
border: 1.5px solid var(--line-strong); border-top-color: var(--ink); animation: ob-spin .7s linear infinite;
}
.ob-spinner[hidden] { display: none; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-results { list-style: none; margin: 8px 0 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.ob-results[hidden] { display: none; }
.ob-result { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.ob-result b { font-weight: 500; font-size: 14.5px; }
.ob-result span { font-size: 12.5px; color: var(--muted); }
.ob-result:hover, .ob-result[aria-selected="true"] { background: var(--surface-2); }
.ob-status { margin: 10px 0 0; font-size: 13px; color: var(--muted); min-height: 0; }
.ob-status:empty { display: none; }
.ob-confirm {
margin-top: 12px; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--surface);
animation: ob-in .3s var(--ease) both;
}
@keyframes ob-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ob-confirm[hidden] { display: none; }
.ob-confirm-media { position: relative; aspect-ratio: 600 / 200; background: #111; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.ob-confirm-media[hidden] { display: none; }
.ob-confirm-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-confirm-media img[hidden] { display: none; }
/* tmavý prechod dole, aby bol popisok autora čitateľný na každej fotke */
.ob-confirm-media:has(img:not([hidden]))::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.ob-confirm-credit { position: absolute; z-index: 1; left: 12px; bottom: 9px; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .78); }
.ob-confirm-credit[hidden] { display: none; }
.ob-confirm-credit a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.ob-confirm-placeholder { width: 64px; height: 40px; fill: none; stroke: #3a3a3a; stroke-width: 1.4; stroke-linejoin: round; }
.ob-confirm-body { padding: 16px 18px 18px; }
.ob-confirm-body h3 { font: 600 20px var(--font-head); margin: 0 0 4px; }
.ob-confirm-addr { margin: 0; color: var(--muted); font-size: 13.5px; }
.ob-confirm-addr:empty { display: none; }
.wz-chosen-tag {
display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
font: 600 10px var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
/* Vybraný podnik: menšia fotka, zelená fajka, len „Zmeniť podnik“. */
.ob-confirm.is-chosen { animation: none; }
.ob-confirm.is-chosen .ob-confirm-media { aspect-ratio: 600 / 140; }
.ob-confirm.is-chosen .wz-chosen-tag { color: var(--ok); }
.ob-confirm.is-chosen .wz-chosen-tag::before {
content: ""; width: 8px; height: 4px; margin: -3px 2px 0 1px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
.ob-confirm.is-chosen .ob-actions { margin-top: 12px; }
.ob-rating { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13.5px; }
.ob-rating[hidden] { display: none; }
.ob-stars { --pct: 0%; position: relative; font-size: 15px; letter-spacing: 2px; color: var(--line-strong); }
.ob-stars::before { content: "★★★★★"; }
.ob-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--pct); overflow: hidden; color: var(--ink); white-space: nowrap; }
.ob-manual { margin-top: 4px; }
.ob-manual[hidden] { display: none; }
/* ---- 1: typ podniku (pill-tlačidlá s ikonou) ---- */
.wz-section[hidden], .ob-fieldset[hidden] { display: none; }
/* ---- 1: kam karta vedie ---- */
.ob-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ob-product {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; color: var(--ink);
cursor: pointer; font-family: inherit; transition: border-color .15s ease, transform 140ms var(--ease);
}
.ob-product:hover { border-color: var(--muted); }
.ob-product:active { transform: scale(.98); }
.ob-product[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ob-product:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-product-art { width: 100%; height: 74px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; margin-bottom: 6px; }
.ob-mini-card {
width: 70px; height: 44px; border-radius: 5px; background: #0a0a0a; border: 1px solid #333;
display: grid; place-items: center; transform: rotate(-6deg); transition: transform .3s var(--ease);
}
.ob-product:hover .ob-mini-card, .ob-product[aria-checked="true"] .ob-mini-card { transform: rotate(0) translateY(-2px); }
.ob-mini-mark { color: #fafafa; font: 700 17px var(--font-head); }
.ob-mini-mark svg { width: 20px; height: 20px; fill: none; stroke: #fafafa; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ob-product-name { font: 600 15px var(--font-head); }
.ob-product-hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ob-tag { position: absolute; top: 10px; right: 10px; font: 600 9.5px var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ob-url { margin-top: 16px; }
.ob-url[hidden] { display: none; }
/* ---- 2: vzhľad ---- */
.ob-fieldset { border: 0; padding: 0; margin: 32px 0 0; min-width: 0; }
.ob-fieldset .hint { display: block; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.ob-fieldset .hint[hidden] { display: none; }
.wz-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wz-asset { min-width: 0; }
.ob-drop {
position: relative; display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 14px; cursor: pointer;
border: 1px dashed var(--line-strong); border-radius: 12px; transition: border-color .15s ease, background-color .15s ease;
}
.ob-drop:hover, .ob-drop.is-over { border-color: var(--ink); background: var(--surface); }
.ob-drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ob-drop img { flex: none; width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--surface-2); }
.ob-drop img[hidden] { display: none; }
/* Banner je široký — náhľad ako pás, orezaný, nie zmenšený do štvorca. */
.ob-drop-wide img { width: 84px; height: 48px; object-fit: cover; }
.ob-drop-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); }
.ob-drop-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ob-drop.has-file .ob-drop-icon { display: none; }
.ob-drop-text { min-width: 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ob-drop-text strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.ob-pro-hint { margin: 28px 0 0; font-size: 12.5px; color: var(--muted); }
#theme-field[hidden] { display: none; }
/* Šablóny podľa typu podniku (looks.LOOKS) a kartičky (looks.CARD_LOOKS) */
.ob-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ob-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ob-look, .ob-card-look {
display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px; overflow: hidden; text-align: left; cursor: pointer;
background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px;
font: inherit; transition: border-color .15s ease, transform 140ms var(--ease);
}
.ob-look:hover, .ob-card-look:hover { border-color: var(--muted); }
.ob-look:active, .ob-card-look:active { transform: scale(.98); }
.ob-look[aria-checked="true"], .ob-card-look[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ob-look:focus-visible, .ob-card-look:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-look-art { display: block; aspect-ratio: 3 / 1; background: var(--line); }
.ob-look-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ob-look-color { display: grid; place-items: center; width: 100%; height: 100%; }
.ob-look-color span { width: 38%; height: 26%; border-radius: 999px; }
/* „Bez šablóny“: čistá plocha s pilulkou vo farbe podniku. */
.ob-look-blank { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #1b1b1b 0 8px, #202020 8px 16px); }
.ob-look-blank span { width: 38%; height: 26%; border-radius: 999px; }
.ob-look-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px 0; font: 600 13.5px var(--font-head); }
.ob-look-dots { display: inline-flex; gap: 3px; }
.ob-look-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.ob-look-note { padding: 0 10px; font-size: 12px; line-height: 1.35; color: var(--muted); }
/* Miniatúra kartičky (card-thumbs.css, tie isté ako v nastaveniach). Všetky
v rade rovnako vysoké: karta sa natiahne, spodok (polia, pás) ide dole. */
.ob-card-thumb { display: flex; flex-direction: column; min-height: 150px; margin: 8px 8px 2px; }
.ob-card-thumb > span { flex: 1; }
.ob-card-thumb .clp-panel-bottom, .ob-card-thumb .cl-gpass .clp-strip { margin-top: auto; }
/* Guličky klasickej kartičky vo farbe podniku (Wallet má vlastnú --clp-label). */
.ob-card-thumb .cl-mock .cl-dots i.on { background: var(--ob-accent); border-color: var(--ob-accent); }
/* Krok Vzhľad karty: tri rady šablón (na webe / ako Apple / ako Google
Wallet), každý posúvateľný do strany; odporúčané majú „Pre vás“. */
.ob-card-group[hidden] { display: none; }
.ob-card-group .ob-label { display: block; margin-bottom: 10px; }
.ob-cards-row {
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 164px;
overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.ob-cards-row > * { scroll-snap-align: start; }
/* Apple a Google Wallet (po jednom rozložení) vedľa seba. */
.ob-card-wallets { display: grid; grid-template-columns: repeat(2, 164px); gap: 24px 16px; margin-top: 32px; }
.ob-card-wallets > .ob-card-group { margin-top: 0; }
.ob-card-wallets .ob-cards-row { overflow: visible; padding-bottom: 2px; grid-auto-columns: 1fr; }
@media (max-width: 420px) { .ob-card-wallets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; } }
.ob-card-look { position: relative; }
.ob-card-badge {
position: absolute; top: 6px; right: 6px; z-index: 2; padding: 2px 7px; border-radius: 999px;
background: var(--ink); color: var(--bg); font: 600 10px/1.4 var(--font-body);
}
/* Hodnotenie: farba hviezdičiek / vybraného smajlíka. „Predvolená“ má
farbu z onboarding.js (zlatá alebo farba podniku), vlastná ukáže zvolenú. */
.ob-color-auto span {
background: linear-gradient(180deg, #ffc93c, #f5a00f); color: #fff;
font: 700 9.5px var(--font-body); letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
#rating-color-more.is-on span { background: var(--c, conic-gradient(#e0292b, #f59e0b, #16a34a, #2563eb, #9333ea, #e0292b)); }
/* ---- 3: vernostný program ---- */
.ob-ptypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ob-ptype {
position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; cursor: pointer;
border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color .15s ease, transform 140ms var(--ease);
}
.ob-ptype input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ob-ptype:hover { border-color: var(--muted); }
.ob-ptype:active { transform: scale(.98); }
.ob-ptype:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ob-ptype:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-ptype-icon svg { width: 24px; height: 24px; color: var(--ink); }
.ob-ptype-name { font: 600 15px var(--font-head); }
.ob-ptype-desc { font-size: 13px; color: var(--muted); line-height: 1.45; }
.ob-ptype-none { justify-content: center; border-style: dashed; }
.ob-ptype-badge {
position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 999px;
background: var(--ink); color: var(--bg); font: 600 10px var(--font-label); letter-spacing: .06em;
}
.ob-ptype-badge[hidden] { display: none; }
.ob-ptype-note[hidden], .ob-cashback[hidden], .ob-reward-part[hidden], .ob-tiers[hidden] { display: none; }
.ob-loyalty-fields { margin-top: 8px; }
.ob-loyalty-fields[hidden] { display: none; }
.ob-loyalty-fields .field { margin-bottom: 0; }
.ob-chips-sm { margin-top: 10px; }
.ob-chips-sm .ob-chip { padding: 5px 11px; font-size: 12.5px; }
.ob-label-gap { margin-top: 20px; }
#progress-field[hidden] { display: none; }
#progress-field .hint { display: block; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.ob-tiers .hint, .ob-cashback .hint, .ob-ptype-note { display: block; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ob-stamps { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-stamps[hidden], #lbl-stamp[hidden] { display: none; }
.ob-stamp { position: relative; cursor: pointer; }
.ob-stamp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ob-stamp-dot {
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
border: 2px solid var(--line-strong); color: var(--muted);
transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform 140ms var(--ease);
}
.ob-stamp-dot svg { width: 62%; height: 62%; }
.ob-stamp:hover .ob-stamp-dot { border-color: var(--muted); color: var(--ink); }
.ob-stamp:active .ob-stamp-dot { transform: scale(.94); }
.ob-stamp input:checked + .ob-stamp-dot { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ob-stamp input:focus-visible + .ob-stamp-dot { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Vlastná ikonka („+“): nahratý obrázok v dlaždici, vybraná ako ostatné. */
.ob-stamp-own .ob-stamp-dot { border-style: dashed; font: 500 20px/1 var(--font-body); }
.ob-stamp-own .ob-stamp-dot img { width: 72%; height: 72%; object-fit: contain; }
.ob-stamp-own.has-file .ob-stamp-dot { border-style: solid; border-color: var(--ink); background: var(--ink); }
.ob-stamp-own input:focus-visible + .ob-stamp-dot { outline: 2px solid var(--ink); outline-offset: 2px; }
.pvw-dots i img { width: 70%; height: 70%; object-fit: contain; }
/* ---- 4: plán ---- */
.ob-plan li[hidden] { display: none; }
.ob-plan-note { margin: 12px 0 0; font-size: 13px; color: var(--ink); padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.ob-plan-note[hidden] { display: none; }
.ob-qty-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--r); }
.ob-qty-row .hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ob-qty-row .ob-label { margin-bottom: 4px; }
.ob-qty { display: flex; align-items: center; gap: 4px; }
.ob-qty input {
width: 46px; text-align: center; font: 500 17px var(--font-mono); padding: 6px 0; border: 0;
background: transparent; color: var(--ink); -moz-appearance: textfield;
}
.ob-qty input:focus { outline: 1px solid var(--line-strong); border-radius: 6px; }
.ob-qty input::-webkit-inner-spin-button, .ob-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ob-qty-btn {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent;
color: var(--ink); font: 400 18px var(--font-mono); cursor: pointer; transition: border-color .15s ease, transform 140ms var(--ease);
}
.ob-qty-btn:hover { border-color: var(--ink); }
.ob-qty-btn:active { transform: scale(.94); }
.ob-billing {
position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 24px 0 14px; padding: 4px;
border: 1px solid var(--line-strong); border-radius: 999px; isolation: isolate;
}
.ob-billing-btn {
position: relative; z-index: 1; padding: 9px 18px; border: 0; background: none; cursor: pointer; border-radius: 999px;
font: 600 12.5px var(--font-body); color: var(--muted); transition: color .2s var(--ease); white-space: nowrap;
}
.ob-billing-btn[aria-pressed="true"] { color: var(--bg); }
.ob-billing-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-save { font: 600 10px var(--font-label); letter-spacing: .08em; opacity: .7; margin-left: 4px; }
/* Úzky mobil: „2 mesiace zadarmo“ pod „Ročne“, inak prepínač pretečie. */
@media (max-width: 480px) {
.ob-save { display: block; margin: 1px 0 0; }
}
.ob-billing-thumb {
position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
background: var(--ink); transition: transform .28s var(--ease);
}
.ob-billing.is-year .ob-billing-thumb { transform: translateX(100%); }
.ob-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
#card-contact[hidden], .ob-fine[hidden], .js-cards-only[hidden], .ob-billing[hidden] { display: none; }
.ob-billing + .ob-plans { margin-top: 0; }
/* Bez kariet je „Len kartičky“ skryté — ostávajú dva plány. */
@media (min-width: 641px) {
.ob-plans:has(> #plan-free[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ob-plan {
position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; cursor: pointer;
border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color .15s ease, opacity .2s ease;
}
.ob-plan[hidden] { display: none; }
.ob-plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ob-plan:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ob-plan:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-plan-name { font: 600 18px var(--font-head); }
.ob-plan-price { font: 400 12.5px var(--font-mono); color: var(--muted); }
.ob-plan-price strong { font: 700 15px var(--font-mono); color: var(--ink); }
.ob-plan ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.ob-plan li { padding-left: 18px; position: relative; }
.ob-plan li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 4px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
.ob-plan li strong { color: var(--ink); font-weight: 600; }
.ob-plan-badge { position: absolute; top: 14px; right: 14px; font: 600 9.5px var(--font-label); letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.ob-plan:has(input:disabled) { opacity: .4; cursor: not-allowed; }
/* Doživotná licencia — add-on pod plánmi (zaškrtávacie políčko, cena, odrážky). */
.ob-addon {
position: relative; display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 14px 16px;
border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer;
background: color-mix(in srgb, var(--ink) 3%, transparent);
transition: border-color .15s ease, background-color .15s ease;
}
.ob-addon[hidden] { display: none; }
.ob-addon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ob-addon-box {
flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--line-strong); border-radius: 6px;
display: grid; place-items: center; transition: background-color .15s ease, border-color .15s ease;
}
.ob-addon-box::after {
content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
transform: rotate(-45deg) scale(.6); opacity: 0; transition: opacity .15s ease, transform .15s ease;
}
.ob-addon:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ob-addon:has(input:checked) .ob-addon-box { background: var(--ink); border-color: var(--ink); }
.ob-addon:has(input:checked) .ob-addon-box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.ob-addon:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.ob-addon-body { min-width: 0; flex: 1; }
.ob-addon-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ob-addon-name { font: 600 15px var(--font-head); }
.ob-addon-price { font: 700 15px var(--font-mono); }
.ob-addon-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.ob-addon ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ob-addon li { padding-left: 18px; position: relative; }
.ob-addon li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 4px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
/* Info o účte (sekcia Kontakt tu už nie je). */
.wz-account {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 12px 14px;
border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; color: var(--muted);
}
.wz-account:has(#account-text:empty) { display: none; }
.wz-account svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.6; }
.wz-account strong { color: var(--ink); font-weight: 600; }
.wz-account .ob-link { margin: 0 0 0 auto; }
/* Zhrnutie nastavení z krokov 1–3. */
.wz-recap { margin: 0; display: grid; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wz-recap:empty { display: none; }
.wz-recap > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.wz-recap > div:first-child { border-top: 0; }
.wz-recap dt { padding-top: 3px; font: 600 10px var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.wz-recap dd { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; line-height: 1.45; }
.wz-recap dd span { min-width: 0; overflow-wrap: anywhere; }
.wz-edit { flex: none; margin: 0; font-size: 12.5px; }
.ob-summary { margin: 24px 0 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.ob-summary > .muted { font-size: 13px; margin: 0; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; padding: 4px 0; }
.sum-row small { font: 400 11px var(--font-mono); color: var(--muted); margin-left: 6px; }
.sum-row > span:last-child { font: 500 13.5px var(--font-mono); white-space: nowrap; }
.sum-row.total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; }
.sum-row.total > span:last-child { font: 700 20px var(--font-mono); }
.sum-row.vat { font-size: 12px; color: var(--muted); padding-top: 0; }
.sum-row.vat > span:last-child { font-size: 12px; }
.sum-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.consents { display: grid; gap: 10px; margin: 0 0 16px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--muted); cursor: pointer; }
.consent[hidden] { display: none; }
.consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.consent a { color: var(--ink); text-decoration: underline; }
#client-error { margin: 0 0 14px; padding: 11px 12px; }
#client-error[hidden] { display: none; }
.ob-pay {
width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 18px;
border: 0; border-radius: 999px; cursor: pointer; background: var(--ink); color: var(--bg);
font: 600 15.5px var(--font-body);
transition: transform 140ms var(--ease), box-shadow .2s ease;
box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}
.ob-pay:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .4); }
.ob-pay:active { transform: scale(.98); }
.ob-pay[disabled] { background: #2a2a2a; color: #777; cursor: not-allowed; box-shadow: none; transform: none; }
.pay-amount:not(:empty)::before { content: "\00a0·\00a0"; }
.ob-fine { margin: 12px 0 0; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--faint); }
.ob-fine a { color: var(--muted); }
/* firma + našepkávanie obce */
.switch { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 36px; height: 20px; border-radius: 999px; border: 1px solid var(--line-strong); position: relative; flex: none; transition: background .2s ease, border-color .2s ease; }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .2s var(--ease), background .2s ease; }
.switch input:checked + .switch-track { background: var(--ink); border-color: var(--ink); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); background: var(--bg); }
.switch input:focus-visible + .switch-track { outline: 1px solid var(--ink); outline-offset: 2px; }
.switch-label { font: 600 11px var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.company-fields { padding: 16px 16px 2px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 16px; }
.company-fields .hint { display: block; margin: 0 0 14px; }
/* kam poslať karty */
.ob-delivery { margin: 0 0 18px; }
.ob-delivery-title { display: block; font: 600 10.5px var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ob-delivery-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .2s ease; }
.ob-delivery-opt:has(input:checked) { border-color: var(--ink); }
.ob-delivery-opt[hidden] { display: none; }
.ob-delivery-opt input { margin: 3px 0 0; accent-color: var(--ink); flex: none; }
.ob-delivery-opt b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.ob-delivery-addr { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ob-delivery-addr:empty { display: none; }
.ob-delivery-fields { padding: 16px 16px 2px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 8px; }
.ob-delivery-row { display: grid; grid-template-columns: 120px 1fr; gap: 0 16px; }
@media (max-width: 560px) { .ob-delivery-row { grid-template-columns: 1fr; } }
.ac { position: relative; }
.ac-list {
position: absolute; z-index: 25; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .5); max-height: 290px; overflow-y: auto;
}
.ac-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.ac-item span { font: 400 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
.ac-item:hover, .ac-item[aria-selected="true"] { background: var(--surface-2); }
/* ---- náhľad: telefón vľavo ---- */
.ob-preview { grid-area: preview; position: sticky; top: 24px; }
/* Bez obalu: telefón, prepínač a popis ležia priamo na pozadí stránky.
Mobilný vysúvací panel (≤ 900 px) má vlastné pozadie nižšie. */
.pv-inner { position: relative; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.pv-caption { display: block; text-align: center; font: 600 10px var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 12px; }
/* telefón — iPhone 15 Pro ako na landing page (.ph-frame v site.css):
titánový rám, čierny lem (::before), odlesk skla (::after), Dynamic
Island a bočné tlačidlá. Obrazovka, iframe s formulárom a karta do
Wallet (#pv-wallet) sú vnútri. */
/* Telefón sa zmestí do okna celý už pri načítaní: --pv-rest = všetko nad
a pod ním (odsadenie stránky, hlavička, prepínač, popis, odsadenia
panela), ,488 = pomer strán .device. Mobil má vlastné hodnoty nižšie. */
.ob-preview { --pv-rest: 300px; }
.device {
position: relative; margin: 0 auto; width: min(100%, max(230px, calc((100vh - var(--pv-rest)) * .488))); aspect-ratio: 71.6 / 146.6;
border-radius: 16% / 7.8%;
background: linear-gradient(135deg, #8d8983 0%, #d9d5cf 14%, #77736e 32%, #c7c3bd 55%, #6e6a65 78%, #b9b5af 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 0 2.5px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .5);
filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
}
.device::before {
content: ""; position: absolute; inset: .5% 1.1%; border-radius: 15.2% / 7.35%;
background: #050505; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.device::after {
content: ""; position: absolute; z-index: 4; inset: 1.76% 3.6%; border-radius: 13.4% / 6.26%;
background: linear-gradient(115deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 34%);
pointer-events: none;
}
.dev-btn { position: absolute; width: 1.6%; border-radius: 2px; background: linear-gradient(90deg, #5d5955, #bdb9b3 55%, #7d7974); }
.dev-btn-action { left: -1.1%; top: 17%; height: 4.2%; }
.dev-btn-vol-up { left: -1.1%; top: 24.5%; height: 7.6%; }
.dev-btn-vol-down { left: -1.1%; top: 34%; height: 7.6%; }
.dev-btn-power { right: -1.1%; top: 27%; height: 11%; background: linear-gradient(270deg, #5d5955, #bdb9b3 55%, #7d7974); }
.device-screen {
position: absolute; z-index: 1; inset: 1.76% 3.6%; border-radius: 13.4% / 6.26%;
overflow: hidden; background: #FCF9F2; transition: background .25s ease;
container-type: inline-size;
}
.device.is-dark .device-screen { background: #141213; }
.device.is-wallet .device-screen { background: #f2f2f7; }
.device.is-wallet.is-dark .device-screen { background: #141213; }
.device-status {
position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 3;
display: grid; grid-template-columns: 1fr 34% 1fr; align-items: center;
font: 600 12.5px/1 -apple-system, 'SF Pro Text', system-ui, sans-serif;
color: #111; pointer-events: none; transition: color .25s ease;
}
.device.is-dark .device-status { color: #f4efe8; }
.device-time { justify-self: center; }
.device-island { justify-self: center; width: 100%; height: 25px; border-radius: 999px; background: #000; }
.device-icons { grid-column: 3; justify-self: center; display: flex; gap: 4px; align-items: center; }
.device-icons svg { height: 9px; width: auto; display: block; }
.device-icons .device-battery { height: 11px; }
.device-battery text { fill: #FCF9F2; font-family: inherit; }
.device.is-dark .device-battery text { fill: #141213; }
.device-frame { position: absolute; top: 40px; left: 0; width: 100%; height: calc(100% - 40px); border: 0; display: block; background: transparent; transition: opacity .2s ease; }
/* kým telefón nedostane farby z formulára (onboarding.js showFrame) */
.device-frame.is-loading { opacity: 0; transition: none; }
.device.is-wallet .device-frame { visibility: hidden; }
.device-home { position: absolute; bottom: 7px; left: 50%; width: 34%; height: 4px; transform: translateX(-50%); border-radius: 4px; background: rgba(0, 0, 0, .35); z-index: 3; pointer-events: none; }
.device.is-dark .device-home { background: rgba(255, 255, 255, .45); }
.pv-note { margin: 14px 0 0; text-align: center; font-size: 11.5px; line-height: 1.5; color: #8a8a8a; }
/* zmena pohľadu (Web / Apple / Google): obsah obrazovky sa jemne vymení */
.device.is-switching .device-frame, .device.is-switching .pvw:not([hidden]) { animation: pv-swap .3s var(--ease) both; }
@keyframes pv-swap { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
/* ---- karta do Apple / Google Wallet (onboarding.js renderWallet) ----
Rozmery v cqw (šírka obrazovky telefónu), aby karta rástla s telefónom.
Rozloženie ako templates/wallet_phone.html (náhľad v nastaveniach). */
.pvw {
position: absolute; inset: 0; padding-top: 40px; overflow: hidden; z-index: 2;
font-family: 'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
color: #1f1f1f; text-align: left;
}
.pvw[hidden] { display: none; }
.pvw img { display: block; }
.pvw-f { min-width: 0; }
.pvw-f span { display: block; font-size: 2.7cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.pvw-f b { display: block; margin-top: .4cqw; font-size: 4.4cqw; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.pvw-r { text-align: right; }
/* Apple Wallet (iPhone, storeCard) */
.pvw.is-apple { background: #f2f2f7; }
.pvw-a { padding: 4cqw 4.4cqw; }
.pvw-a-card {
position: relative; overflow: hidden; border-radius: 4.6cqw; background: var(--card); color: var(--ink);
box-shadow: 0 3cqw 8cqw -3cqw rgba(0, 0, 0, .45);
transition: background-color .3s ease, color .3s ease;
}
.pvw-a-card.has-bg, .pvw-g.has-bg {
background-image: linear-gradient(color-mix(in srgb, var(--card) 25%, transparent), color-mix(in srgb, var(--card) 85%, transparent) 70%), var(--bg-img);
background-size: cover; background-position: center;
}
.pvw-a-top { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; min-height: 17cqw; padding: 3.4cqw 4cqw; }
.pvw-logo { min-width: 0; }
.pvw-logo img { max-height: 11cqw; max-width: 44cqw; object-fit: contain; }
.pvw-logo b { display: block; font-size: 5cqw; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.pvw-a-top .pvw-f { flex: none; }
.pvw-a-top .pvw-f b { font-size: 5.6cqw; font-weight: 500; }
.pvw-a-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; padding: 3.4cqw 4cqw 1cqw; }
.pvw-a-fields .pvw-f b { font-size: 3.9cqw; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pvw-gap { height: 4cqw; }
.pvw-qr { width: 34cqw; aspect-ratio: 1; margin: 4cqw auto 5cqw; padding: 2.4cqw; border-radius: 2.4cqw; background: #fff; }
.pvw-qr i { display: block; width: 100%; height: 100%; border-radius: 1cqw; background: repeating-conic-gradient(#1f1f1f 0 25%, #fff 0 50%) 0 0 / 3.2cqw 3.2cqw; }
/* Pás s postupom (guličky / čísla / kredit / úroveň) */
.pvw-strip {
position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1125 / 432;
background-color: var(--strip); background-size: cover; background-position: center; color: var(--ink);
transition: background-color .3s ease;
}
.pvw-strip-clear { background-color: transparent; }
.pvw-strip.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .06), rgba(0, 0, 0, .3)); }
.pvw-strip > * { position: relative; }
.pvw-dots {
display: grid; grid-template-columns: repeat(var(--per), var(--d)); grid-auto-rows: var(--d);
gap: calc(var(--d) * .28); justify-content: center; align-content: center;
}
.pvw-dots i {
display: grid; place-items: center; border-radius: 50%; color: var(--label);
border: max(1.5px, .55cqw) solid color-mix(in srgb, var(--label) 50%, transparent);
background: color-mix(in srgb, var(--card) 55%, #fff);
transition: background-color .25s ease, border-color .25s ease;
}
.pvw-dots i.on { background: var(--label); border-color: var(--label); color: var(--on-label); }
.pvw-dots i svg { width: 60%; height: 60%; }
.pvw-dots i.gift svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.has-img .pvw-dots i:not(.on) { background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .95); }
.pvw-meter { width: 84%; }
.pvw-meter b { display: block; font-size: 8cqw; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.pvw-bar { display: block; height: 1.8cqw; margin: 2.4cqw 0 1.6cqw; border-radius: 2cqw; overflow: hidden; background: color-mix(in srgb, var(--label) 22%, transparent); }
.pvw-bar i { display: block; height: 100%; border-radius: inherit; background: var(--label); }
.pvw-meter small { display: block; margin-top: 1.6cqw; font-size: 3cqw; opacity: .78; }
.pvw-bar + small { margin-top: 0; }
.has-img .pvw-meter { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.has-img .pvw-bar { background: rgba(255, 255, 255, .35); }
.has-img .pvw-bar i { background: #fff; }
/* Google Wallet (Android) */
.pvw.is-google { background: #1f1f1f; }
.pvw-g { min-height: 100%; padding: 1cqw 0 6cqw; background: var(--card); color: var(--ink); text-align: center; transition: background-color .3s ease; }
.pvw-g-bar { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 5cqw 0; }
.pvw-g-bar span { display: flex; gap: 5cqw; }
.pvw-g-bar svg { width: 6.2cqw; height: 6.2cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pvw-g-head { display: flex; justify-content: center; align-items: center; height: 13cqw; margin: 4cqw auto 0; padding: 0 10cqw; }
.pvw-g-head img { max-height: 100%; max-width: 58cqw; object-fit: contain; }
.pvw-g-head b { font-size: 5.4cqw; font-weight: 700; }
.pvw-g-sub { margin-top: 3cqw; font-size: 3cqw; font-weight: 700; letter-spacing: .08em; opacity: .8; }
.pvw-g-header { font-size: 10cqw; font-weight: 800; line-height: 1.1; }
.pvw-g .pvw-qr { width: 44cqw; margin: 4cqw auto 0; }
.pvw-g-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 3.6cqw 3cqw; padding: 5.4cqw 6cqw 5cqw; text-align: left; }
.pvw-g-rows .pvw-f span { color: inherit; opacity: .85; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 3.3cqw; }
.pvw-g-rows .pvw-f b { font-size: 4.2cqw; font-weight: 800; }
.pvw-g .pvw-strip { aspect-ratio: 1032 / 336; }
/* Bez vernostného programu: prázdna karta s výzvou. */
/* Ukážková karta vo Vzhľade (bez programu). */
.pvw-sample {
position: absolute; z-index: 3; bottom: 8cqw; left: 50%; transform: translateX(-50%); padding: 1cqw 3cqw; border-radius: 999px;
background: rgba(0, 0, 0, .6); color: #fff; font: 600 2.9cqw var(--font-body); letter-spacing: .04em;
}
.pvw-empty-wrap { display: grid; place-items: center; background: #f2f2f7; }
.pvw-empty-wrap.is-google { background: #ececec; }
.pvw-empty { padding: 0 9cqw; text-align: center; color: #6e6e73; }
.pvw-empty-card {
display: flex; align-items: flex-end; justify-content: center; gap: 2.4cqw; width: 72cqw; aspect-ratio: 1.58;
margin: 0 auto 6cqw; padding-bottom: 8cqw; border: 2px dashed #c7c7cc; border-radius: 4.6cqw;
}
.pvw-empty-card i { width: 7cqw; height: 7cqw; border-radius: 50%; border: 2px solid #c7c7cc; }
.pvw-empty p { margin: 0; font-size: 3.8cqw; line-height: 1.45; }
.pvw-empty strong { display: block; margin-bottom: 1.6cqw; color: #1d1d1f; font-size: 4.6cqw; }
/* Lišta a stmavenie vysúvacieho panela existujú len na mobile. */
.pv-grip, .pv-backdrop { display: none; }
/* ---- mobil: jeden stĺpec, náhľad ako vysúvací panel (ťahanie v onboarding.js) ---- */
@media (max-width: 900px) {
html.pv-locked { overflow: hidden; } /* len html: overflow na body by rozbil sticky */
.wz-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; gap: 0; }
.wz-main { max-width: none; }
.wz-head { margin-bottom: 28px; }
/* V krokoch s náhľadom je dole lišta panela — navigácia sedí nad ňou. */
.wz-grid:has(.ob-preview[data-sheet="on"]) .wz-main { padding-bottom: 64px; }
.wz-grid:has(.ob-preview[data-sheet="on"]) .wz-nav:not(.is-last) { bottom: 64px; }
.ob-preview {
--pv-peek: 64px; --pv-h: 90vh;
position: fixed; z-index: 40; top: auto; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 520px;
display: flex; flex-direction: column; height: var(--pv-h);
border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 20px 20px 0 0;
background: radial-gradient(120% 60% at 50% 0%, #222 0%, #141414 55%, #0e0e0e 100%);
box-shadow: 0 -12px 36px rgba(0, 0, 0, .5);
transform: translateY(calc(100% - var(--pv-peek)));
transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}
@supports (height: 1dvh) { .ob-preview { --pv-h: 90dvh; } }
/* Pri potiahnutí nad horný okraj sa pod panelom neukáže medzera. */
.ob-preview::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 64px; background: #0e0e0e; }
.ob-preview.is-open { transform: none; transition-duration: .42s, 0s; }
/* Kroky bez náhľadu (aj stav pred spustením JS): panel odíde, potom sa skryje. */
.ob-preview:not([data-sheet="on"]) { transform: translateY(100%); visibility: hidden; transition-delay: 0s, .28s; }
.ob-preview.is-dragging, .pv-backdrop.is-dragging { transition: none; }
.pv-grip {
flex: none; display: block; width: 100%; height: var(--pv-peek); padding: 8px 18px 0; text-align: left;
border: 0; background: none; color: var(--ink); cursor: grab;
touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.pv-grip:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 20px 20px 0 0; }
.is-dragging .pv-grip { cursor: grabbing; }
.pv-grip-bar { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: var(--line-strong); }
.pv-grip-row { display: flex; align-items: center; gap: 10px; }
.pv-grip-title { font: 600 14.5px var(--font-head); }
.pv-grip-pill {
padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px;
font: 500 12px var(--font-body); color: var(--muted); white-space: nowrap;
}
.pv-backdrop {
display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .55);
opacity: 0; pointer-events: none; touch-action: none; transition: opacity .28s ease;
}
.pv-backdrop.is-on { opacity: 1; pointer-events: auto; }
.pv-inner {
flex: 1; min-height: 0; padding: 4px 16px 20px; border: 0; border-radius: 0; background: none;
overflow-y: auto; overscroll-behavior: contain;
}
.pv-caption { display: none; }
.pv-switch { max-width: 360px; margin: 0 auto 16px; }
/* Telefón sa zmestí do panela celý (--pv-rest = lišta, prepínač, popis
a odsadenia, ,488 = pomer strán .device). */
.ob-preview { --pv-rest: 170px; }
.device { width: min(100%, clamp(230px, calc((var(--pv-h) - var(--pv-rest)) * .488), 340px)); }
}
@media (max-width: 640px) {
.wz-step h1 { font-size: 28px; }
.wz-lead { margin-bottom: 26px; font-size: 15px; }
.wz-progress-label { display: none; }
.wz-auth { margin-top: 8px; padding: 28px 20px 22px; border-radius: 20px; }
.ob-products { grid-template-columns: minmax(0, 1fr); }
.ob-product { flex-direction: row; flex-wrap: wrap; align-items: center; }
.ob-product-art { width: 84px; height: 56px; margin: 0; }
.ob-product-name { flex: 1; }
.ob-product-hint { flex-basis: 100%; }
.ob-ptypes { grid-template-columns: minmax(0, 1fr); }
.ob-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-plans { grid-template-columns: minmax(0, 1fr); }
.wz-recap > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.wz-nav { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.wz-cta { padding: 14px 20px 14px 24px; }
}
@media (max-width: 480px) {
.wz-assets { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.wz-step.is-entering, .wz-auth, .ob-confirm, .device.is-switching .device-frame,
.device.is-switching .pvw:not([hidden]) { animation: none; }
.ob-spinner { animation: none; }
.ob-billing-thumb, .ob-mini-card, .wz-progress-bar::after,
.ob-preview, .pv-backdrop, .pvw-a-card, .pvw-g, .pvw-strip, .pvw-dots i { transition: none; }
.ob-btn:active, .ob-pay:active, .ob-qty-btn:active, .ob-product:active,
.wz-cta:active, .wz-back:active { transform: none; }
}