/* motobaterie.cz 1.11 – vzhled obchodu: formuláře, tlačítka, karty, menu účtu, cookies, právní stránky, animace (prefers-reduced-motion respektuje) */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ring:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent);--lift:0 2px 4px #0000000d,0 12px 28px #00000014}
[hidden]{display:none!important}
:root[data-theme=dark]{--err:#f97066}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--err:#f97066}}body{overflow-x:clip}
::selection{background:color-mix(in srgb,var(--acc) 25%,transparent)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* načítání (filtry, výsledky): proužek nahoře místo „mrtvé“ stránky */
body.loading::before{content:"";position:fixed;z-index:60;top:0;left:0;height:3px;width:40%;background:var(--acc);border-radius:0 3px 3px 0;animation:loadbar 1s var(--ease) infinite}
@keyframes loadbar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
body.loading #results .card{animation:shimmer 1.2s linear infinite}@keyframes shimmer{50%{opacity:.6}}

/* ---------- tlačítka ---------- */
.btn,button.btn{transition:background .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease),border-color .18s,color .18s;box-shadow:0 1px 2px #0000001a}
.btn:hover{box-shadow:0 4px 14px color-mix(in srgb,var(--acc) 30%,transparent)}.btn:active{transform:translateY(1px) scale(.985)}
.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn.ghost{box-shadow:none}.btn.ghost:hover{border-color:var(--acc);color:var(--acc);background:var(--surface);box-shadow:none}
.btn .i{width:1.1em;height:1.1em}.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.busy{position:relative;color:transparent!important;pointer-events:none}.btn.busy::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid #fff;border-right-color:transparent;animation:spin .7s linear infinite}
.btn.ghost.busy::after{border-color:var(--acc);border-right-color:transparent}@keyframes spin{to{transform:rotate(360deg)}}
.center{text-align:center}

/* ---------- formuláře ---------- */
/* :where() = nízká specifičnost, aby vlastní pole (hledání v hlavičce, velké hledání v úvodu) zůstala, jak jsou */
input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden])),select,textarea{border:1.5px solid var(--line);border-radius:12px;transition:border-color .15s,box-shadow .15s,background .15s}
input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden])),select{min-height:46px}
input:where(:hover:not(:focus,[aria-invalid=true])),select:where(:hover:not(:focus)),textarea:where(:hover:not(:focus)){border-color:color-mix(in srgb,var(--fg) 25%,var(--line))}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:var(--ring)}
.top .search input:focus{box-shadow:var(--ring)}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 18%,transparent);animation:nudge .3s var(--ease)}
@keyframes nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
input.filled{animation:flashfill 1.2s var(--ease)}@keyframes flashfill{0%{background:var(--acc-soft)}100%{background:var(--surface)}}
input[type=checkbox],input[type=radio]{accent-color:var(--acc)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
label,.fld>label{font-weight:600}.fld>label small,label small.muted{font-weight:400}label.opt{font-weight:400;line-height:1.45}
fieldset{box-shadow:0 1px 2px #0000000a;padding:18px;gap:14px}
legend{font-size:1.02rem;letter-spacing:-.01em;padding:0 8px;margin-left:-4px}
.checkout{gap:16px}.checkout .sum{margin:0;font-size:1.05rem}
.ferr{display:flex;gap:4px;align-items:flex-start;animation:fadein .2s var(--ease)}
.error{border:1px solid color-mix(in srgb,var(--err) 25%,transparent);animation:fadein .25s var(--ease)}.flash{animation:fadein .25s var(--ease)}
:root[data-theme=dark] .error{background:#3a1210}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .error{background:#3a1210}}
:root[data-theme=dark] .note{background:#3a2e08;color:#ffe08a}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .note{background:#3a2e08;color:#ffe08a}}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* volby dopravy a platby jako dlaždice */
fieldset>label.opt{padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;align-items:center}
fieldset>label.opt:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}
fieldset>label.opt:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
fieldset>label.opt:has(input[type=radio]) b{margin-left:auto}
fieldset>label.opt small{padding-left:26px}
/* souhlasy */
.fchk label.opt{padding:4px 0;border:0;background:none;align-items:flex-start;flex-wrap:nowrap}.fchk label.opt:hover{border:0}.fchk input{margin:2px 6px 0 0;flex:none}
.fchk:has(input[aria-invalid=true]) label{color:var(--err)}.req{color:var(--acc);text-decoration:none;font-weight:700}
.legalnote{margin:0}.order-btn{margin-top:4px}
/* telefon: předvolba + číslo jako jeden celek */
.phone-in{gap:0}.phone-in select{border-radius:12px 0 0 12px;border-right-width:0;background:var(--surface2);font-weight:600;max-width:42%}.phone-in input{border-radius:0 12px 12px 0!important}
.phone-in:focus-within select{border-color:var(--acc)}
/* heslo: zobrazit/skrýt + síla */
.pass-in{position:relative;display:block}.pass-in input{width:100%;padding-right:86px}
.pass-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:var(--surface2);color:var(--fg);font:inherit;font-size:.8rem;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer}.pass-eye:hover{background:var(--acc-soft);color:var(--acc)}
.pass-meter{display:grid;gap:4px}.pass-meter i{display:block;height:5px;border-radius:5px;background:var(--surface2);position:relative;overflow:hidden}
.pass-meter i::after{content:"";position:absolute;inset:0;width:var(--w,10%);background:var(--c,var(--err));border-radius:5px;transition:width .3s var(--ease),background .3s}
.pass-meter[data-lv="0"]{--w:15%;--c:var(--err)}.pass-meter[data-lv="1"]{--w:40%;--c:#d97706}.pass-meter[data-lv="2"]{--w:70%;--c:#65a30d}.pass-meter[data-lv="3"]{--w:100%;--c:#16a34a}
.pass-meter small{color:var(--muted);font-size:.8rem}
/* registrace: soukromá osoba / firma */
.authwrap{max-width:560px;margin:0 auto}.authwrap h1{margin-top:.4em}.authwrap .checkout.narrow{max-width:none}
.authcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.authalt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:18px}.authalt p{width:100%;text-align:center;margin:0;color:var(--muted)}
.kindpick{padding:14px}.kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kind{display:block;cursor:pointer;font-weight:400}.kind input{position:absolute;opacity:0;width:1px;height:1px}
.kind span{display:grid;gap:2px;height:100%;padding:14px;border:2px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .15s,background .15s,transform .12s var(--ease),box-shadow .15s}
.kind span .i{width:26px;height:26px;color:var(--muted);margin-bottom:4px;transition:color .15s}.kind b{font-size:1rem}.kind small{color:var(--muted);font-size:.8rem;line-height:1.35}
.kind:hover span{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}.kind:active span{transform:scale(.98)}
.kind input:checked+span{border-color:var(--acc);background:var(--acc-soft);box-shadow:0 4px 16px color-mix(in srgb,var(--acc) 15%,transparent)}.kind input:checked+span .i{color:var(--acc)}
.kind input:focus-visible+span{box-shadow:var(--ring)}
@media (max-width:420px){.kinds{grid-template-columns:1fr}.kind span{grid-template-columns:auto 1fr;column-gap:12px;align-items:center}.kind span .i{grid-row:span 2;margin:0}}
.company.reveal{animation:reveal .3s var(--ease)}@keyframes reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ico-in{display:flex;gap:8px}.ico-in input{flex:1;min-width:0}.ico-in .btn{flex:none;white-space:nowrap;padding:0 14px;min-height:46px}
.ares-msg{font-size:.85rem;color:var(--muted)}.ares-msg:empty{display:none}.ares-msg.ok{color:#15803d}:root[data-theme=dark] .ares-msg.ok{color:#4ade80}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ares-msg.ok{color:#4ade80}}.ares-msg.ok::before{content:"✓ "}.ares-msg.bad{color:var(--warn)}
@media (max-width:420px){.ico-in{flex-wrap:wrap}.ico-in .btn{width:100%}}

/* ---------- hlavička: menu účtu ---------- */
.hbtn{transition:background .15s,color .15s}.hbtn .i{transition:transform .2s var(--ease)}
.umenu{position:relative}.umenu>summary{list-style:none;cursor:pointer;user-select:none}.umenu>summary::-webkit-details-marker{display:none}
.umenu>summary .i:last-child:not(:first-child){width:14px;height:14px;opacity:.7}.umenu[open]>summary .i:last-child:not(:first-child){transform:rotate(180deg)}
.umenu[open]>summary{background:var(--surface2)}.t-red .umenu[open]>summary,.t-sport .umenu[open]>summary{background:#2e2e2e}
.hbtn .avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;font-weight:800;font-size:.85rem;flex:none}
.umenu-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:45;width:min(290px,calc(100vw - 24px));background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px #0000002e;padding:8px;display:grid;gap:2px;transform-origin:top right;animation:popin .18s var(--ease)}
@keyframes popin{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.umenu-pop nav{display:grid;gap:2px}.umenu-pop form{margin:0;border-top:1px solid var(--line);padding-top:4px;margin-top:4px}
.umenu-head{margin:0 0 4px;padding:8px 10px 10px;border-bottom:1px solid var(--line);display:grid;gap:1px}.umenu-head b{font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.umenu-head small{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.ubadge{justify-self:start;margin-top:6px;font-style:normal;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--surface2);color:var(--muted)}.ubadge.approved{background:var(--acc-soft);color:var(--acc)}.ubadge.pending{background:#fff3cd;color:#7a5600}
.umenu-link{display:flex;gap:10px;align-items:center;width:100%;padding:10px;border-radius:10px;color:var(--fg)!important;text-decoration:none;font:inherit;font-size:.93rem;font-weight:500;background:none;border:0;cursor:pointer;text-align:left;min-height:44px;transition:background .12s}
.umenu-link .i{color:var(--muted)}.umenu-link:hover,.umenu-link:focus-visible{background:var(--surface2);outline:0}.umenu-link:hover .i{color:var(--acc)}.umenu-link.out{color:var(--err)!important}.umenu-link.out .i{color:var(--err)}
.umenu-pop .btn{margin:2px 0}.umenu-pop .btn.full{width:100%}
@media (max-width:640px){.umenu-pop{position:fixed;left:12px;right:12px;top:auto;width:auto;margin-top:8px}.umenu[open] .umenu-pop{top:62px}}
/* kategorie v hlavičce: podtržení */
.catnav a{position:relative;transition:background .15s,color .15s}
.catnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transition:transform .2s var(--ease)}.catnav a:hover::after{transform:scaleX(1)}

/* ---------- karty a kategorie ---------- */
.card{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.card:hover,.cardw:hover .card{box-shadow:var(--lift);border-color:color-mix(in srgb,var(--acc) 30%,var(--line))}
.card .img img{transition:transform .35s var(--ease)}.card:hover .img img{transform:scale(1.04)}
.card:active{transform:translateY(-1px) scale(.99)}.cardw{transition:transform .2s var(--ease)}
.qbtn{box-shadow:0 2px 8px color-mix(in srgb,var(--acc) 35%,transparent)}.qbtn:hover{transform:translateY(-1px)}
.cat{position:relative;overflow:hidden;gap:4px;padding:16px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.cat .i{box-sizing:content-box;padding:10px;border-radius:12px;background:var(--acc-soft);width:26px;height:26px;transition:transform .25s var(--ease),background .2s,color .2s}
.cat:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));box-shadow:var(--lift)}.cat:hover .i{transform:scale(1.08) rotate(-4deg);background:var(--acc);color:#fff}
.cat::after{content:"›";position:absolute;right:14px;top:14px;color:var(--muted);font-size:1.3rem;line-height:1;transition:transform .2s var(--ease),color .2s}.cat:hover::after{transform:translateX(3px);color:var(--acc)}
.chip,.fchip span,.acctnav a,.brands a{transition:border-color .15s,background .15s,color .15s}.chip:hover,.brands a:hover,.acctnav a:hover{border-color:var(--acc);color:var(--acc)}
@media (max-width:699px){.cat{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px}.cat .i{grid-row:span 2;margin:0;padding:8px;width:22px;height:22px}.cat b{font-size:.92rem;line-height:1.25}.cat::after{content:none}}
.rise{opacity:0;transform:translateY(14px)}.rise.in{opacity:1;transform:none;transition:opacity .45s var(--ease) var(--d,0ms),transform .45s var(--ease) var(--d,0ms)}
.hero{animation:fadein .5s var(--ease)}

/* ---------- lišta a nastavení cookies ---------- */
.consent{gap:12px 16px;padding:16px 18px;border-radius:18px;box-shadow:0 18px 50px #00000030;animation:slideup .35s var(--ease)}
@keyframes slideup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.consent-txt{display:flex;gap:12px;align-items:flex-start;flex:1 1 320px}.consent-txt .i{width:28px;height:28px;color:var(--acc);flex:none;margin-top:2px}.consent-txt p{margin:0;font-size:.9rem}.consent-txt b{display:block;font-size:.98rem;margin-bottom:2px}
.consent-btns{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:560px){.consent{left:8px;right:8px;bottom:8px}.consent-btns{width:100%}.consent-btns .btn{flex:1}.consent-btns [data-consent="1"]{flex-basis:100%;order:-1;padding:10px}}
dialog.cdlg{border:0;padding:0;border-radius:var(--r);background:var(--surface);color:var(--fg);width:min(500px,calc(100vw - 24px));box-shadow:0 20px 60px #0006}
dialog.cdlg[open]{animation:popin .2s var(--ease)}dialog.cdlg::backdrop{background:#000a}
.cdlg-in{padding:18px;display:grid;gap:10px}.cdlg .added-head h2::before{content:none}.cdlg-btns{display:flex;gap:8px;margin-top:6px}.cdlg-btns .btn{flex:1}
.ctoggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-weight:400}
.ctoggle span{display:grid;gap:2px}.ctoggle small{color:var(--muted);font-size:.82rem}
.ctoggle input{position:absolute;opacity:0;width:1px;height:1px}.ctoggle i{flex:none;width:46px;height:28px;border-radius:99px;background:var(--line);position:relative;transition:background .2s}
.ctoggle i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:transform .2s var(--ease)}
.ctoggle input:checked+i{background:var(--acc)}.ctoggle input:checked+i::after{transform:translateX(18px)}.ctoggle input:disabled+i{opacity:.55}.ctoggle input:focus-visible+i{box-shadow:var(--ring)}
@media (max-width:640px){dialog.cdlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:18px 18px 0 0}.cdlg-in{padding-bottom:calc(18px + env(safe-area-inset-bottom))}.cdlg-btns{flex-direction:column-reverse}}

/* ---------- právní stránky ---------- */
.legal{line-height:1.65;padding:14px clamp(16px,4vw,36px) 26px;box-shadow:0 1px 2px #0000000a}.legal h2{font-size:1.15rem;margin:1.5em 0 .5em;padding-top:.6em;border-top:1px solid var(--line)}.legal h2:first-of-type{border-top:0}
.legal ul{padding-left:1.2em}.legal li{margin:.35em 0}.legal code{font-size:.85em;background:var(--surface2);padding:1px 6px;border-radius:6px}
.tablewrap{overflow-x:auto;margin:0 -4px}.ctable{font-size:.88rem;min-width:560px}.ctable th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ctag{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--acc-soft);color:var(--acc);white-space:nowrap}.ctag.ana{background:var(--surface2);color:var(--muted)}
.wform-page{max-width:820px}.wform{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px clamp(16px,4vw,36px) 26px}.wform h1{font-size:1.4rem}
.wline{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}.wline span{color:var(--muted);font-size:.88rem}.wline b{font-weight:600;min-height:1.3em;border-bottom:1px dotted var(--line)}
.wsign{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.wsign .wline{grid-template-columns:1fr;gap:2px}
@media print{.noprint,.consent,dialog,.stickybuy{display:none!important}main{padding:0}.wform{border:0;padding:0}.wline b{border-bottom:1px solid #999}}

/* ---------- patička ---------- */
footer .fcol a{transition:color .15s,transform .15s;width:max-content;max-width:100%}footer .fcol a:hover{transform:translateX(2px)}
.newsletter .nlrow input{min-height:42px}
/* mobil: žádné vodorovné posouvání */
@media (max-width:420px){main{padding-left:12px;padding-right:12px}fieldset{padding:14px}.legal{padding:12px 14px 20px}.hbtn{padding:6px}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.rise{opacity:1;transform:none}.card:hover .img img{transform:none}}