/* ==========================================================================
   ŠportAuto.sk – front-end
   Paleta inšpirovaná pretekárskou livrejou: práškovo modrá, oranžová, námornícka.
   ========================================================================== */
:root{
  --ink:#0f1d33;          /* námornícka – text, hlavička, pätička */
  --ink-2:#2a3a55;
  --muted:#5b6880;
  --line:#dde3ec;
  --paper:#f1f4f8;        /* pozadie stránky */
  --white:#fff;
  --livery:#a9d1ec;       /* práškovo modrá – hero */
  --livery-soft:#d7e9f6;
  --cobalt:#1f5fd6;       /* Predaj, TOP, hlavné tlačidlá */
  --cobalt-dark:#1648a8;
  --orange:#ee6a1f;       /* Prenájom, Nový inzerát */
  --orange-dark:#c9530f;
  --yellow:#f4c20d;       /* Zvýraznený */
  --green:#0f8a5f;
  --red:#d42a3a;
  --r-card:16px;
  --r-ctl:10px;
  --shadow:0 1px 2px rgba(15,29,51,.06),0 8px 24px -12px rgba(15,29,51,.18);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Sora","Inter",system-ui,sans-serif;
  --wrap:1240px;
  --bar:var(--wp-admin--admin-bar--height,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body.sa-body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0}
#sa-app{min-height:100vh;display:flex;flex-direction:column}

:where(.sa-body) img{max-width:100%;display:block}
:where(.sa-body) a{color:inherit}
:where(.sa-body) button{font:inherit;color:inherit}
:where(.sa-body) :is(h1,h2,h3,h4){font-family:var(--display);letter-spacing:-.02em;line-height:1.15;margin:0}
.sa-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sa-main{flex:1;padding-bottom:72px}
.sa-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:6px}
.sa-boot{min-height:100vh;display:grid;place-items:center;background:var(--ink)}
.sa-boot-logo{font:700 26px var(--display);color:#fff;letter-spacing:-.03em}
.sa-boot-logo span{color:var(--livery)}
.sa-noscript{padding:40px;text-align:center}
.ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}

/* ---------- Tlačidlá a formuláre ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-ctl);border:1px solid transparent;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--cobalt);color:#fff!important}
.btn-primary:hover:not(:disabled){background:var(--cobalt-dark)}
.btn-orange{background:var(--orange);color:#fff!important}
.btn-orange:hover:not(:disabled){background:var(--orange-dark)}
.btn-ghost{background:var(--white);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover:not(:disabled){border-color:var(--ink-2)}
.btn-dark{background:var(--ink);color:#fff!important}
.btn-danger{background:var(--white);border-color:#f2c4c9;color:var(--red)!important}
.btn-danger:hover{background:#fff4f5}
.btn-link{background:none;border:0;padding:0;min-height:0;color:var(--cobalt)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.btn-sm{min-height:36px;padding:0 12px;font-size:14px}
.btn-block{width:100%}
.btn.is-loading{position:relative;color:transparent!important}
.btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:sa-spin .7s linear infinite}
.btn-ghost.is-loading::after{border-color:var(--ink);border-right-color:transparent}
@keyframes sa-spin{to{transform:rotate(360deg)}}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:0;background:transparent;cursor:pointer;color:inherit;text-decoration:none}
.icon-btn:hover{background:rgba(255,255,255,.1)}

.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>label,.fld>.lbl{font-size:13px;font-weight:600;color:var(--ink-2)}
.fld .hint{font-size:12.5px;color:var(--muted)}
.inp,.sel,.txa{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cdd5e1;border-radius:var(--r-ctl);background:var(--white);color:var(--ink);font:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235b6880' stroke-width='2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.txa{min-height:120px;resize:vertical;line-height:1.5}
.inp:focus,.sel:focus,.txa:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(31,95,214,.18)}
.fld.has-err .inp,.fld.has-err .sel,.fld.has-err .txa{border-color:var(--red)}
.err{color:var(--red);font-size:13px;font-weight:500}
.err:empty{display:none}
.inp-suffix{position:relative}
.inp-suffix .inp{padding-right:58px}
.inp-suffix span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--cobalt);flex:none}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:8px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted)}
.seg input:checked+span{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(15,29,51,.15)}
.seg input:focus-visible+span{outline:3px solid var(--cobalt)}

/* ---------- Hlavička ---------- */
.hdr{position:sticky;top:var(--bar);z-index:50;background:var(--ink);color:#fff}
.hdr-in{display:flex;align-items:center;gap:22px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff!important;font:700 21px var(--display);letter-spacing:-.035em;flex:none}
.logo-mark{width:30px;height:22px;flex:none}
.logo small{font:inherit;color:var(--livery)}
.nav{display:flex;gap:2px}
.nav a{padding:10px 12px;border-radius:10px;text-decoration:none;color:#c9d4e5!important;font-weight:500;font-size:15px}
.nav a:hover{color:#fff!important;background:rgba(255,255,255,.07)}
.nav a.is-active{color:#fff!important;box-shadow:inset 0 -3px 0 var(--orange);border-radius:0}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.badge-count{position:absolute;top:4px;right:2px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--orange);color:#fff;font:700 11px/19px var(--font);text-align:center}
.badge-count:empty,.badge-count[data-n="0"]{display:none}
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:9px;height:44px;padding:0 10px 0 6px;border-radius:12px;border:0;background:transparent;color:#fff;cursor:pointer}
.acct-btn:hover{background:rgba(255,255,255,.08)}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--livery);color:var(--ink);font:700 14px var(--display);flex:none}
.acct-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:14px}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:var(--white);color:var(--ink);border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,29,51,.35);padding:8px;display:none;z-index:60}
.menu.is-open{display:block}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px;border:0;background:none;text-align:left;text-decoration:none;font-size:14.5px;cursor:pointer;color:var(--ink)!important}
.menu a:hover,.menu button:hover:not(:disabled){background:var(--paper)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.menu .is-verified{color:var(--cobalt)!important;font-weight:600}
.menu .is-pending{color:#a65300!important}
.menu-head{padding:8px 12px 10px;font-size:13px;color:var(--muted)}
.menu-head strong{display:block;color:var(--ink);font-size:15px}
.hdr .btn-new{margin-left:8px}
.burger{display:inline-grid}
.mnav{position:fixed;inset:0;z-index:90;display:none}
.mnav.is-open{display:block}
.mnav-bg{position:absolute;inset:0;background:rgba(10,18,32,.5)}
.mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(330px,88vw);background:var(--white);padding:18px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.mnav-panel a,.mnav-panel button.lnk{display:block;padding:13px 10px;border-radius:10px;text-decoration:none;font-weight:600;font-size:16px;border:0;background:none;text-align:left;width:100%;cursor:pointer}
.mnav-panel a:hover{background:var(--paper)}
.mnav-panel hr{border:0;border-top:1px solid var(--line);margin:8px 0}

/* ---------- Hero (úvod) ---------- */
.hero{position:relative;background:var(--livery);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 0 63%,var(--orange) 63% 66.5%,transparent 66.5% 68%,var(--ink) 68% 79%,transparent 79% 80.5%,var(--orange) 80.5% 82%,transparent 82%)}
.hero-in{position:relative;padding:58px 20px 118px}
.hero h1{font-size:clamp(34px,5.6vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1.02;max-width:13ch;color:var(--ink)}
.hero p{margin:18px 0 0;font-size:17px;color:var(--ink-2);max-width:42ch}
.filter-float{position:relative;margin-top:-82px;z-index:5}

/* ---------- Filter ---------- */
.filter{background:var(--white);border-radius:20px;box-shadow:0 20px 50px -24px rgba(15,29,51,.45);padding:20px}
.filter-grid{display:grid;grid-template-columns:1.1fr 1.1fr 1.1fr .8fr .8fr;gap:12px;align-items:end}
.filter-bottom{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.filter-bottom .grow{flex:1}
.filter .clear{color:var(--muted)}
.filter .clear:hover{color:var(--red);background:var(--paper)}
.filter-ext{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.side .filter{border-radius:16px;box-shadow:var(--shadow);position:sticky;top:calc(84px + var(--bar))}
.side .filter-grid,.side .filter-ext{grid-template-columns:1fr 1fr}
.side .filter-grid>.span2,.side .filter-ext>.span2{grid-column:1/-1}
.side .filter-bottom{flex-direction:column;align-items:stretch}
.side .filter-bottom .seg{display:flex}
.side .filter-bottom .seg label{flex:1;text-align:center}

/* ---------- Sekcie ---------- */
.sec{padding-top:44px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-head h2{font-size:clamp(22px,2.6vw,30px)}
.sec-head p{margin:4px 0 0;color:var(--muted)}
.page-head{padding-top:34px;padding-bottom:22px}
.page-head h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.035em}
.page-head p{margin:8px 0 0;color:var(--muted)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);padding:22px 0 14px;flex-wrap:wrap}
.crumbs a{color:var(--muted)!important;text-decoration:none}
.crumbs a:hover{color:var(--ink)!important;text-decoration:underline}

/* ---------- Karta inzerátu ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{position:relative;display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.card.is-hl{box-shadow:0 0 0 3px var(--yellow),var(--shadow)}
.card.is-top{box-shadow:0 0 0 3px var(--cobalt),var(--shadow)}
.card-media{position:relative;display:block;aspect-ratio:3/2;background:var(--livery-soft);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-media img{transform:scale(1.03)}
.illus{width:100%;height:100%;display:block}
.tag{position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;letter-spacing:.01em}
.tag-sale{background:var(--cobalt)}
.tag-rent{background:var(--orange)}
.cmp-btn{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(15,29,51,.2)}
.cmp-btn:hover{background:#fff;color:var(--cobalt)}
.cmp-btn.is-on{background:var(--cobalt);color:#fff}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-title{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
.card-title h3{font-size:18px;font-weight:600;letter-spacing:-.02em}
.card-title h3 a{text-decoration:none}
.card-title h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card .cmp-btn{z-index:3}
.promo{flex:none;padding:3px 9px;border-radius:7px;font-size:12px;font-weight:700}
.promo-top{background:var(--cobalt);color:#fff}
.promo-hl{background:var(--yellow);color:#3d2e00}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--paper);color:var(--ink-2);font-size:12.5px;font-weight:600}
.chip-verified{background:#e5eeff;color:var(--cobalt)}
.chip-verified .ico{width:14px;height:14px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13.5px}
.spec{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink-2)}
.spec .ico{width:18px;height:18px;color:var(--muted)}
.spec span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{font-size:13.5px;color:var(--muted)}
.price{margin-top:auto;font:700 22px var(--display);letter-spacing:-.03em;color:var(--ink)}
.price small{font:600 14px var(--font);color:var(--muted);letter-spacing:0}
.price-rent{color:var(--orange-dark)}

.empty{background:var(--white);border-radius:var(--r-card);padding:48px 24px;text-align:center;box-shadow:var(--shadow)}
.empty h3{font-size:20px;margin-bottom:6px}
.empty p{color:var(--muted);margin:0 0 18px}
.center{text-align:center}
.more{margin-top:30px;display:flex;justify-content:center}

.pager{display:flex;justify-content:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;padding:0 10px;display:grid;place-items:center;border-radius:10px;text-decoration:none;font-weight:600;background:var(--white);border:1px solid var(--line)}
.pager a:hover{border-color:var(--ink-2)}
.pager .is-current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager .gap{border:0;background:none}
.pager .is-off{opacity:.4;pointer-events:none}

.list-layout{display:grid;grid-template-columns:330px 1fr;gap:28px;align-items:start}
.results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:var(--muted);font-size:14px;gap:12px}
.skel{background:linear-gradient(90deg,#e6ebf2 0,#f3f6fa 50%,#e6ebf2 100%);background-size:200% 100%;animation:sa-sh 1.2s infinite;border-radius:var(--r-card)}
.skel-card{height:420px}
@keyframes sa-sh{to{background-position:-200% 0}}

/* ---------- Detail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.gallery-main{position:relative;border-radius:18px;overflow:hidden;background:var(--livery-soft);aspect-ratio:3/2}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding:3px 3px 6px}
.thumb{position:relative;flex:none;width:96px;height:68px;border-radius:10px;overflow:hidden;border:0;padding:0;cursor:pointer;opacity:.75;background:var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-active{opacity:1;box-shadow:0 0 0 3px var(--cobalt)}
.thumb-star{position:absolute;right:4px;top:4px;width:24px;height:24px;border-radius:50%;background:rgba(15,29,51,.7);color:#fff;display:grid;place-items:center;font-size:13px;line-height:1;border:0;cursor:pointer}
.thumb-star.is-main{background:var(--yellow);color:var(--ink)}
.side-col{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(84px + var(--bar))}
.panel{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);padding:22px}
.panel h2{font-size:20px;margin-bottom:14px}
.d-title{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.d-title .tag{position:static}
.panel h1{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.035em}
.d-meta{color:var(--muted);margin:8px 0 14px}
.d-price{font:700 36px var(--display);letter-spacing:-.04em}
.d-price small{font:600 16px var(--font);color:var(--muted);letter-spacing:0}
.owner-box{border:2px dashed #c8d3e3;box-shadow:none;background:#fbfcfe}
.owner-box .btns{display:grid;gap:8px}
.owner-note{font-size:13.5px;color:var(--muted);margin:0 0 12px}
.pending-pill{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:var(--r-ctl);background:#fff4e5;color:#8a4500;font-weight:600;font-size:14px}
.seller-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 18px var(--display);letter-spacing:-.02em;margin-bottom:8px}
.seller-name a{text-decoration:none}
.seller-name a:hover{text-decoration:underline}
.contact-list{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.contact-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;word-break:break-word}
.contact-list .ico{color:var(--muted);margin-top:1px}
.contact-list a{color:var(--cobalt)!important;font-weight:600;text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.params{width:100%;border-collapse:collapse;font-size:15px}
.params th,.params td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.params th{font-weight:500;color:var(--muted);width:46%}
.params td{font-weight:600}
.params tr:last-child th,.params tr:last-child td{border-bottom:0}
.desc{white-space:pre-line;line-height:1.7;max-width:72ch;margin:0}
.equip{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.equip li{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--paper);font-size:14px;font-weight:500}
.equip .ico{width:16px;height:16px;color:var(--green)}
.d-blocks{display:grid;gap:22px}
.detail>.d-gal{grid-column:1;grid-row:1}
.detail>.d-blocks{grid-column:1;grid-row:2}
.detail>.side-col{grid-column:2;grid-row:1/span 2}
.detail{row-gap:22px}
.notice{padding:14px 16px;border-radius:12px;background:#fff4e5;color:#7a3d00;font-size:14.5px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.notice-info{background:#e8f1ff;color:#123a80}

/* Hviezdičky a recenzie */
.stars{display:inline-flex;gap:1px;color:#f2a900;vertical-align:middle}
.stars .ico{width:17px;height:17px}
.stars .off{color:#d3dae5}
.rating-line{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.rating-line strong{color:var(--ink);font-size:15px}
.reviews{display:grid;margin-top:10px}
.review{padding:14px 0;border-top:1px solid var(--line)}
.review:first-child{border-top:0;padding-top:0}
.review-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.review-head span{color:var(--muted);font-size:13px}
.review p{margin:0;white-space:pre-line}
.star-pick{display:inline-flex;gap:4px}
.star-pick button{border:0;background:none;padding:2px;cursor:pointer;color:#d3dae5}
.star-pick button.is-on{color:#f2a900}
.star-pick .ico{width:30px;height:30px}
.review-form{display:grid;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.big-rating{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.big-rating b{font:700 40px var(--display);letter-spacing:-.04em}

/* Profil predajcu */
.prof{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.prof .avatar{width:72px;height:72px;font-size:30px}
.prof h1{font-size:clamp(26px,3.2vw,38px)}
.prof-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;margin-top:26px}

/* Porovnanie */
.cmp-wrap{overflow-x:auto;background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow)}
.cmp{width:100%;border-collapse:collapse;min-width:640px}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp th{width:170px;color:var(--muted);font-weight:500;font-size:14px;background:#fafbfd}
.cmp td{font-weight:600}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp-car{position:relative}
.cmp-car .media{display:block;border-radius:12px;overflow:hidden;aspect-ratio:3/2;background:var(--livery-soft);margin-bottom:10px}
.cmp-car .media img{width:100%;height:100%;object-fit:cover}
.cmp-car a.name{font:600 17px var(--display);text-decoration:none;letter-spacing:-.02em}
.cmp-x{position:absolute;right:6px;top:6px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.95);cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:2}
.cmp-x:hover{color:var(--red)}
.cmp .best{color:var(--green)}

/* Formulár inzerátu */
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.fsec{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);padding:24px;margin-bottom:18px}
.fsec>h2{font-size:19px;margin-bottom:4px}
.fsec>p.sub{margin:0 0 18px;color:var(--muted);font-size:14px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fgrid .span2{grid-column:span 2}
.fgrid .span3{grid-column:1/-1}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:14px}
.ph{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--paper)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph:first-child{box-shadow:0 0 0 3px var(--yellow)}
.ph-main{position:absolute;left:6px;bottom:6px;background:var(--yellow);color:var(--ink);font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px}
.ph-btn{position:absolute;top:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(15,29,51,.72);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:15px}
.ph-btn:hover{background:var(--ink)}
.ph-star{left:6px}
.ph-del{right:6px}
.ph-del:hover{background:var(--red)}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed #c3cfdf;border-radius:14px;padding:28px 16px;text-align:center;cursor:pointer;color:var(--muted);transition:border-color .15s,background .15s}
.drop:hover,.drop.is-over{border-color:var(--cobalt);background:#f5f9ff}
.drop strong{color:var(--cobalt)}
.form-aside{position:sticky;top:calc(84px + var(--bar))}
.form-aside .panel p{font-size:14px;color:var(--muted);margin:0 0 10px}
.form-aside ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink-2);display:grid;gap:6px}

/* Moje inzeráty */
.my-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px;margin-bottom:14px}
.my-row .media{border-radius:10px;overflow:hidden;aspect-ratio:3/2;background:var(--livery-soft)}
.my-row .media img{width:100%;height:100%;object-fit:cover}
.my-row h3{font-size:17px;margin-bottom:4px}
.my-row h3 a{text-decoration:none}
.my-row .btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.st{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;margin-top:6px;margin-right:10px}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.st-ok{color:var(--green)}
.st-bad{color:var(--red)}
.st-wait{color:#b36200}
.st-promo{color:var(--cobalt)}

/* Účet */
.narrow{max-width:720px}
.verify-card{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.vbadge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#e5eeff;color:var(--cobalt);font-weight:700}

/* Textové stránky */
.prose{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);padding:34px clamp(20px,4vw,48px);max-width:820px;font-size:16px;line-height:1.7}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:22px;margin:30px 0 10px}
.prose h3{font-size:18px;margin:24px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 14px}
.prose a{color:var(--cobalt)!important;font-weight:600}
.prose img{border-radius:12px;height:auto}
.prose details{border-bottom:1px solid var(--line)}
.prose details summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font:600 17px var(--display);letter-spacing:-.015em;position:relative}
.prose details summary::-webkit-details-marker{display:none}
.prose details summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.prose details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.prose details>*:not(summary){margin:0 0 18px;color:var(--ink-2)}
.prose details+p{margin-top:20px}
.page-cols{display:grid;grid-template-columns:minmax(0,820px) minmax(0,1fr);gap:28px;align-items:start}
.contact-form{display:grid;gap:14px}

/* ---------- Pätička ---------- */
.ftr{background:var(--ink);color:#c2cde0;margin-top:auto;position:relative}
.ftr::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--livery) 0 60%,var(--orange) 60% 75%,var(--livery) 75%)}
.ftr-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding:48px 20px 28px}
.ftr p{margin:14px 0 0;font-size:14px;line-height:1.65;max-width:52ch}
.ftr h3{font:600 15px var(--display);color:#fff;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr ul a{color:#c2cde0!important;text-decoration:none;font-size:14.5px}
.ftr ul a:hover{color:#fff!important;text-decoration:underline}
.ftr-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;font-size:13.5px;color:#8b99b3}

/* ---------- Modálne okná ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 24px;overflow-y:auto}
.modal-bg{position:fixed;inset:0;background:rgba(10,18,32,.55)}
.modal-box{position:relative;width:100%;max-width:460px;background:var(--white);border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);animation:sa-pop .18s ease-out}
.modal-box.wide{max-width:640px}
@keyframes sa-pop{from{transform:translateY(10px);opacity:0}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0}
.modal-head h2{font-size:21px}
.modal-body{padding:18px 22px 24px}
.modal-x{width:38px;height:38px;border-radius:50%;border:0;background:var(--paper);cursor:pointer;display:grid;place-items:center;flex:none}
.modal-x:hover{background:var(--line)}
.stack{display:grid;gap:14px}
.tabs{display:flex;border-bottom:1px solid var(--line);margin:0 -22px 18px;padding:0 22px;gap:18px}
.tabs button{border:0;background:none;padding:10px 0 12px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button.is-active{color:var(--ink);border-color:var(--orange)}
.pw-rules{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px;font-size:13px}
.pw-rules li{display:flex;align-items:center;gap:6px;color:var(--muted)}
.pw-rules li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid #c3cdda;flex:none}
.pw-rules li.ok{color:var(--green)}
.pw-rules li.ok::before{background:var(--green) 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'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center/10px no-repeat;border-color:var(--green)}
.code-inp{font:700 26px/1 ui-monospace,Consolas,monospace!important;letter-spacing:10px;text-align:center}
.codebox{margin:6px 0 4px;padding:18px;border-radius:14px;background:var(--paper);text-align:center;font:700 32px/1 ui-monospace,Consolas,monospace;letter-spacing:7px;color:var(--ink);user-select:all}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0}
.opt .box{display:block;height:100%;padding:14px;border-radius:14px;border:2px solid var(--line);background:var(--white)}
.opt input:checked+.box{border-color:var(--cobalt);background:#f5f8ff}
.opt input:focus-visible+.box{outline:3px solid var(--cobalt);outline-offset:2px}
.opt .box strong{display:block;font:600 16px var(--display);margin-bottom:3px}
.opt .box span{font-size:13px;color:var(--muted)}
.opt .swatch{display:block;height:8px;border-radius:4px;margin-bottom:10px}
.dur{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dur.three{grid-template-columns:repeat(3,1fr)}
.dur .box{padding:10px;text-align:center}
.dur .box strong{font-size:15px}
.total{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-weight:600}
.total b{font:700 22px var(--display)}
.pay-list{list-style:none;margin:0;padding:16px;border-radius:14px;background:var(--paper);display:grid;gap:8px;font-size:14.5px}
.pay-list li{display:flex;justify-content:space-between;gap:12px}
.pay-list b{text-align:right;word-break:break-all}
.qs-results{display:grid;gap:6px;margin-top:12px;max-height:56vh;overflow:auto}
.qs-item{display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:12px;text-decoration:none}
.qs-item:hover,.qs-item:focus{background:var(--paper)}
.qs-item .media{border-radius:8px;overflow:hidden;aspect-ratio:3/2;background:var(--livery-soft)}
.qs-item .media img{width:100%;height:100%;object-fit:cover}
.qs-item strong{display:block;font-size:15px}
.qs-item span{font-size:13px;color:var(--muted)}
.qs-item b{font-family:var(--display);font-size:15px;white-space:nowrap}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-weight:500;box-shadow:0 14px 34px -10px rgba(0,0,0,.5);max-width:calc(100vw - 32px);animation:sa-pop .2s ease-out}
.toast.is-err{background:var(--red)}

/* ---------- Responzivita ---------- */
@media (max-width:1100px){
  .nav a{padding:10px 8px}
  .filter-grid{grid-template-columns:repeat(3,1fr)}
  .list-layout{grid-template-columns:290px 1fr}
  .detail,.prof-layout{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:960px){
  .nav,.hdr .btn-new,.acct-name{display:none}
  .burger{display:inline-grid}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .list-layout,.detail,.prof-layout,.form-layout,.page-cols{grid-template-columns:1fr}
  .side .filter,.side-col,.form-aside{position:static}
  .detail>.side-col,.detail>.d-gal,.detail>.d-blocks{grid-column:1;grid-row:auto}
  .side .filter-grid,.side .filter-ext{grid-template-columns:repeat(3,1fr)}
  .side .filter-bottom{flex-direction:row;align-items:center}
  .side .filter-bottom .seg{display:inline-flex}
  .ftr-in{grid-template-columns:1fr 1fr}
  .ftr-in>div:first-child{grid-column:1/-1}
  .hero::before{background:linear-gradient(104deg,transparent 0 74%,var(--orange) 74% 77.5%,transparent 77.5% 79%,var(--ink) 79% 92%,transparent 92%)}
}
@media (max-width:640px){
  .sa-wrap{padding-left:16px;padding-right:16px}
  .hdr-in{height:60px;gap:10px}
  .logo{font-size:18px}
  .hero-in{padding:36px 16px 104px}
  .hero::before{background:linear-gradient(104deg,transparent 0 82%,var(--orange) 82% 85.5%,transparent 85.5% 87%,var(--ink) 87%)}
  .hero h1{max-width:11ch}
  .filter{padding:16px;border-radius:16px}
  .filter-grid,.filter-ext,.side .filter-grid,.side .filter-ext{grid-template-columns:1fr 1fr}
  .filter-grid>.span2-m{grid-column:1/-1}
  .filter-bottom .btn-primary{flex:1}
  .grid,.grid-2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid .span2{grid-column:1/-1}
  .fsec{padding:18px}
  .my-row{grid-template-columns:96px 1fr}
  .my-row .btns{grid-column:1/-1;justify-content:flex-start}
  .opt-grid{grid-template-columns:1fr}
  .dur{grid-template-columns:repeat(2,1fr)}
  .ftr-in{grid-template-columns:1fr;gap:28px}
  .d-price{font-size:30px}
  .modal{padding-top:16px}
  .seg span{padding:8px 10px}
}
.fld .seg{align-self:flex-start}
.fsec>h2+.fgrid{margin-top:16px}
.filter-float+.sec{padding-top:52px}

/* Značka: výber zo zoznamu aj písanie */
.combo{position:relative}
.combo .inp{padding-right:42px}
.combo-btn{position:absolute;right:4px;top:22px;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.combo-btn .ico{transform:rotate(90deg);width:18px;height:18px}
.combo-btn:hover{color:var(--ink);background:var(--paper)}
.combo-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:290px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -14px rgba(15,29,51,.4)}
.combo-list[hidden]{display:none}
.combo-list li{padding:9px 11px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--ink)}
.combo-list li:hover,.combo-list li.is-active{background:var(--paper)}
.combo-list li.is-active{box-shadow:inset 3px 0 0 var(--cobalt)}

/* Porovnanie: ikona šípiek, zapnutý stav modrý */
.cmp-btn .ico{width:19px;height:19px}
.btn.is-on{background:#e8f0ff;border-color:var(--cobalt);color:var(--cobalt)}

/* Detail: hlavička bez rámčeka */
.d-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'main price' 'facts price';gap:0 32px;align-items:end;padding:6px 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.d-head .d-title{position:static;display:flex;gap:8px;margin-bottom:12px}
.d-head .tag,.d-head .promo{position:static;padding:5px 11px;border-radius:999px;font-size:12.5px;line-height:1.4}
.d-head h1{font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.d-head-main{grid-area:main}
.d-head-price{grid-area:price}
.d-facts{grid-area:facts;display:flex;flex-wrap:wrap;margin:18px 0 0;padding:0}
.d-facts>div{padding:0 18px;border-left:1px solid var(--line)}
.d-facts>div:first-child{padding-left:0;border-left:0}
.d-facts dt{font-size:12.5px;color:var(--muted);margin-bottom:2px}
.d-facts dd{margin:0;font:600 15.5px var(--display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.d-head-price{text-align:right}
.d-price-label{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.d-head .d-price{font:700 clamp(32px,3.6vw,44px)/1 var(--display);letter-spacing:-.045em;color:var(--ink)}
.d-head .d-price.price-rent{color:var(--orange-dark)}
@media (max-width:960px){
  .d-head{grid-template-columns:1fr;grid-template-areas:'main' 'price' 'facts';align-items:start}
  .d-head-price{text-align:left;margin-top:12px}
}
@media (max-width:640px){
  .d-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;margin-top:16px}
  .d-facts>div{padding:0;border-left:0;min-width:0}
  .d-facts dd{font-size:14px;white-space:normal}
  .d-facts dt{font-size:12px}
}
/* Karta: 3 parametre – motor cez celú šírku */
.specs .spec:nth-child(3){grid-column:1/-1}

/* Animované auto v úvode – zapína ho farebná téma (napr. Luxus) */
.hero-car{display:none}

/* ==========================================================================
   Farebná téma „Luxus“ – hlboký antracit, slonovinový text, šampanské zlato.
   Štítky: platina = Predaj a TOP, meď = Prenájom, zlato = Zvýraznený.
   ========================================================================== */
:root{
  color-scheme:dark;
  --ink:#ffffff;          /* biely text */
  --ink-2:#d6d6d8;
  --muted:#a3a4a8;
  --line:#3a3d44;
  --paper:#1d1f23;        /* pozadie stránky */
  --white:#2a2d33;        /* karty, panely */
  --raised:#33363d;       /* polia formulárov */
  --livery:#0e0f11;       /* úvodný pás */
  --livery-soft:#24272c;  /* plocha pod autom */
  --cobalt:#d4d7dc;       /* platina – Predaj, TOP */
  --cobalt-dark:#bfc3c9;
  --orange:#c8692c;       /* meď – Prenájom */
  --orange-dark:#e08a4f;
  --yellow:#c9a24a;       /* zlato – Zvýraznený */
  --gold:#c9a96b;         /* šampanské – hlavné akcie */
  --gold-hi:#dcc08a;
  --night:#141518;        /* hlavička, pätička */
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 32px -16px rgba(0,0,0,.8);
}
body.sa-body{background:var(--paper);color:var(--ink)}
:focus-visible{outline-color:var(--gold)}

/* Hlavička, pätička, logo */
.hdr,.ftr,.sa-boot{background:var(--night)}
.hdr{border-bottom:1px solid #1f2125}
.nav a.is-active{box-shadow:inset 0 -2px 0 var(--gold)}
.logo small{color:var(--gold)}
.logo-mark path:first-child{fill:#fff}
.logo-mark path:last-child{fill:var(--gold)}
.badge-count{background:var(--gold);color:#16130c}
.avatar{background:var(--gold);color:#16130c}
.ftr::before{height:2px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent)}

/* Úvodný pás: takmer čierny, jemné zlaté pruhy */
.hero{background:radial-gradient(120% 140% at 15% 0%,#1d1f24 0,#0e0f11 60%)}
.hero::before{background:linear-gradient(104deg,transparent 0 66%,var(--gold) 66% 66.6%,transparent 66.6% 68.5%,#1b1d21 68.5% 80%,transparent 80% 81.5%,var(--gold) 81.5% 82.1%,transparent 82.1%)}
@media (max-width:960px){.hero::before{background:linear-gradient(104deg,transparent 0 76%,var(--gold) 76% 76.8%,transparent 76.8% 79%,#1b1d21 79% 93%,transparent 93%)}}
@media (max-width:640px){.hero::before{background:linear-gradient(104deg,transparent 0 84%,var(--gold) 84% 85%,transparent 85% 87%,#1b1d21 87%)}}
.hero h1{color:#fff;font-weight:600;letter-spacing:-.04em}
.hero p{color:var(--muted)}
.filter{box-shadow:0 24px 60px -28px rgba(0,0,0,.9);border:1px solid #3a3d44}

/* Tlačidlá: hlavné akcie v šampanskom zlate */
.btn-primary,.btn-orange{background:var(--gold);color:#16130c!important}
.btn-primary:hover:not(:disabled),.btn-orange:hover:not(:disabled){background:var(--gold-hi)}
.btn.is-loading::after{border-color:#16130c;border-right-color:transparent}
.btn-dark{background:#2a2d33}
.btn-dark:hover{background:#34373e}
.btn-ghost{background:transparent;border-color:#3a3d44}
.btn-ghost:hover:not(:disabled){border-color:var(--gold)}
.btn-danger{background:transparent;border-color:#5a2f33;color:#e88c93!important}
.btn-danger:hover{background:#2a1c1e}
.btn-link,.prose a,.contact-list a,.combo-list li.is-active{color:var(--gold)!important}
.combo-list li.is-active{box-shadow:inset 2px 0 0 var(--gold)}
.pager .is-current{background:var(--gold);color:#16130c;border-color:var(--gold)}
.pager a,.pager span{background:var(--white);border-color:var(--line)}
.toast{background:#08090a;border:1px solid #2a2c31}

/* Formulárové prvky */
.inp,.sel,.txa{background-color:var(--raised);border-color:#383b42}
.inp:focus,.sel:focus,.txa:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,107,.18)}
.inp::placeholder,.txa::placeholder{color:#77726a}
.seg{background:#222428;border-color:var(--line)}
.seg input:checked+span{background:#41444c;box-shadow:none;color:var(--ink)}
.check input{accent-color:var(--gold)}
.combo-list,.menu{background:var(--raised);border-color:#383b42}

/* Karty a štítky */
.card{border:1px solid #393c43}
.card.is-hl{box-shadow:0 0 0 2px var(--yellow),var(--shadow)}
.card.is-top{box-shadow:0 0 0 2px var(--cobalt),var(--shadow)}
.promo-hl{background:var(--yellow);color:#16130c}
.cmp-btn{background:rgba(11,12,14,.85);color:var(--ink)}
.cmp-btn:hover{background:#000;color:var(--gold)}
.cmp-btn.is-on{background:var(--gold);color:#16130c}
.btn.is-on{background:rgba(201,169,107,.12);border-color:var(--gold);color:var(--gold)}
.chip{background:#363940;color:var(--ink-2)}
.chip-verified,.vbadge{background:rgba(201,169,107,.14);color:var(--gold)}
.price{color:#fff}
.price-rent,.d-head .d-price.price-rent{color:var(--orange-dark)}
.d-head .d-price{color:#fff}
.stars{color:var(--gold)}
.stars .off,.star-pick button{color:#45474d}
.star-pick button.is-on{color:var(--gold)}
.skel{background:linear-gradient(90deg,#1a1c20 0,#23262b 50%,#1a1c20 100%);background-size:200% 100%}
.equip .ico{color:var(--gold)}

/* Ilustrácia auta bez fotky */
.illus>rect{fill:#24272c}
.illus>path{fill:#1f2125}
.illus>ellipse{fill:#000;opacity:.6}

/* Upozornenia a pomocné plochy */
.notice{background:#2a2216;color:#e8cf9f}
.notice-info{background:#22252a;color:#d6d6d8}
.pending-pill{background:#2a2216;color:#e8cf9f}
.owner-box{background:transparent;border-color:#3a3d44}
.cmp th{background:#25282d}
.cmp-x{background:#0b0c0e;color:var(--ink)}
.drop{border-color:#3a3d44}
.drop strong{color:var(--gold)}
.drop:hover,.drop.is-over{background:#1f1d18;border-color:var(--gold)}
.opt input:checked+.box{background:#221f19;border-color:var(--gold)}
.tabs button.is-active{border-color:var(--gold)}
.ph:first-child{box-shadow:0 0 0 3px var(--gold)}
.ph-main{background:var(--gold)}
.modal-bg,.mnav-bg{background:rgba(0,0,0,.7)}
.pw-rules li.ok{color:#7fc79f}
.rating-line a{color:var(--gold)!important}
.gallery-main,.card-media{box-shadow:inset 0 0 0 1px #26282d}

/* Platinové štítky potrebujú tmavý text */
.tag-sale,.promo-top{color:#121316}
.card.is-top{box-shadow:0 0 0 2px var(--cobalt),var(--shadow)}
.inp::placeholder,.txa::placeholder{color:#7c7d82}

/* Úvod: zadná časť auta, ktorej sa rozsvieti svetelný pás */
.hero::before{background:radial-gradient(60% 70% at 78% 62%,rgba(255,43,43,.10),transparent 70%)}
.hero-in{min-height:470px}
.hero-car{display:block;position:absolute;right:10px;bottom:96px;width:min(46%,600px);pointer-events:none}
.hero-car svg{display:block;width:100%;height:auto;overflow:visible}
.hero-car .hc-bar{transform-box:fill-box;transform-origin:center;transform:scaleX(0);opacity:0;animation:hc-bar 1.1s cubic-bezier(.2,.7,.2,1) .5s forwards}
.hero-car .hc-core{transform-box:fill-box;transform-origin:center;transform:scaleX(0);opacity:0;animation:hc-bar 1.1s cubic-bezier(.2,.7,.2,1) .62s forwards}
.hero-car .hc-glow{opacity:0;animation:hc-glow 1.4s ease-out 1.1s forwards,hc-breathe 4.5s ease-in-out 3.2s infinite}
.hero-car .hc-floor{opacity:0;animation:hc-floor 1.6s ease-out 1.2s forwards}
@keyframes hc-bar{0%{transform:scaleX(0);opacity:0}15%{opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes hc-glow{0%{opacity:0}45%{opacity:.95}100%{opacity:.6}}
@keyframes hc-breathe{0%,100%{opacity:.6}50%{opacity:.85}}
@keyframes hc-floor{0%{opacity:0}100%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .hero-car .hc-bar,.hero-car .hc-core{animation:none;transform:none;opacity:1}
  .hero-car .hc-glow{animation:none;opacity:.6}
  .hero-car .hc-floor{animation:none;opacity:.35}
}
@media (max-width:960px){
  .hero-in{min-height:0}
  .hero-car{position:relative;right:auto;bottom:auto;width:100%;max-width:440px;margin:22px 0 -10px auto}
}

/* Úvod s fotkou (Nastavenia → Úvodný pás). Bez fotky sa zobrazí animované auto. */
.hero.has-photo{background-color:#141518;background-position:center right;background-size:cover;background-repeat:no-repeat}
.hero.has-photo .hero-car{display:none}
.hero.has-photo::before{background:
  linear-gradient(90deg,rgba(20,21,24,.86) 0%,rgba(20,21,24,.66) 34%,rgba(20,21,24,.18) 64%,rgba(20,21,24,0) 100%),
  linear-gradient(180deg,rgba(20,21,24,.25) 0%,transparent 30%,transparent 66%,rgba(29,31,35,1) 100%)}
.hero.has-photo .hero-in{min-height:520px}
@media (max-width:960px){
  .hero.has-photo{background-position:70% center}
  .hero.has-photo::before{background:linear-gradient(180deg,rgba(20,21,24,.4) 0%,rgba(20,21,24,.62) 55%,rgba(29,31,35,1) 100%)}
  .hero.has-photo .hero-in{min-height:0;padding-top:64px;padding-bottom:130px}
}
.sa-boot-logo span{color:#c9a96b}

/* ==========================================================================
   Farebná téma „Rosso“ (svetlý základ + pretekárska červená). Prepisuje tému Luxus vyššie.
   ========================================================================== */
/* ==========================================================================
   Skúška „Svetlý luxus“ – perleťové pozadie, biele karty, grafitový text,
   šampanské zlato na detailoch. Tmavá fotka v úvode a grafitová pätička
   dávajú svetlej stránke pevný rámec.
   Štítky: grafit = Predaj a TOP, meď = Prenájom, zlato = Zvýraznený.
   ========================================================================== */
:root{
  color-scheme:light;
  --ink:#1d1f23;
  --ink-2:#3c3f45;
  --muted:#77746d;
  --line:#e4e1db;
  --paper:#f3f2ef;        /* perleťové pozadie */
  --white:#ffffff;        /* karty, panely */
  --raised:#fbfaf8;       /* polia formulárov */
  --livery-soft:#ecebe7;  /* plocha pod autom */
  --cobalt:#1d1f23;       /* grafit – Predaj, TOP */
  --cobalt-dark:#000;
  --orange:#b8612a;       /* meď – Prenájom */
  --orange-dark:#a4531f;
  --yellow:#c9a24a;       /* zlato – Zvýraznený */
  --gold:#c4a165;
  --gold-hi:#d3b47e;
  --gold-text:#8a6a31;    /* zlato pre text na bielom */
  --graphite:#1d1f23;
  --shadow:0 1px 2px rgba(29,31,35,.05),0 10px 30px -16px rgba(29,31,35,.22);
}
body.sa-body{background:var(--paper);color:var(--ink)}

/* Hlavička: biela s tenkou zlatou linkou */
.hdr{background:#fff;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(196,161,101,.35)}
.hdr .logo{color:var(--ink)!important}
.hdr .logo small{color:var(--gold-text)}
.hdr .logo-mark path:first-child{fill:var(--ink)}
.nav a{color:var(--ink-2)!important}
.nav a:hover{color:var(--ink)!important;background:rgba(29,31,35,.05)}
.nav a.is-active{color:var(--ink)!important}
.icon-btn:hover{background:rgba(29,31,35,.06)}
.hdr .acct-btn{color:var(--ink)}
.hdr .acct-btn:hover{background:rgba(29,31,35,.06)}

/* Pätička a načítanie ostávajú grafitové */
.ftr,.sa-boot{background:var(--graphite)}
.ftr .logo-mark path:first-child{fill:#fff}

/* Úvod s tmavou fotkou */
.hero p{color:#d6d1c7}
.hero.has-photo::before{background:
  linear-gradient(90deg,rgba(20,21,24,.84) 0%,rgba(20,21,24,.62) 34%,rgba(20,21,24,.16) 64%,rgba(20,21,24,0) 100%),
  linear-gradient(180deg,rgba(20,21,24,.25) 0%,transparent 35%,transparent 70%,rgba(20,21,24,.5) 100%)}
@media (max-width:960px){.hero.has-photo::before{background:linear-gradient(180deg,rgba(20,21,24,.45) 0%,rgba(20,21,24,.66) 100%)}}
.filter{border:1px solid var(--line);box-shadow:0 24px 60px -30px rgba(29,31,35,.5)}

/* Tlačidlá */
.btn-primary{background:var(--graphite);color:#fff!important}
.btn-primary:hover:not(:disabled){background:#000}
.btn-primary.is-loading::after{border-color:#fff;border-right-color:transparent}
.btn-orange{background:var(--gold);color:#1d1f23!important}
.btn-orange:hover:not(:disabled){background:var(--gold-hi)}
.btn-ghost{background:#fff;border-color:#d9d5ce}
.btn-ghost:hover:not(:disabled){border-color:var(--gold)}
.btn-danger{background:#fff;border-color:#efc9cc;color:#b4232f!important}
.btn-danger:hover{background:#fff5f5}
.btn-link,.prose a,.contact-list a,.rating-line a,.combo-list li.is-active{color:var(--gold-text)!important}
.pager .is-current{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.pager a,.pager span{background:#fff;border-color:var(--line)}

/* Formuláre */
.inp,.sel,.txa{background-color:var(--raised);border-color:#d9d5ce}
.inp::placeholder,.txa::placeholder{color:#a19d95}
.seg{background:#efeee9;border-color:var(--line)}
.seg input:checked+span{background:#fff;box-shadow:0 1px 3px rgba(29,31,35,.14);color:var(--ink)}
.combo-list,.menu{background:#fff;border-color:var(--line);box-shadow:0 18px 40px -14px rgba(29,31,35,.3)}

/* Karty a štítky */
.card{border:1px solid var(--line)}
.tag-sale,.promo-top{color:#fff}
.cmp-btn{background:rgba(255,255,255,.95);color:var(--ink)}
.cmp-btn:hover{background:#fff;color:var(--gold-text)}
.cmp-btn.is-on{background:var(--gold);color:#1d1f23}
.btn.is-on{background:#faf5ea;border-color:var(--gold);color:var(--gold-text)}
.chip{background:#f0eee9;color:var(--ink-2)}
.chip-verified,.vbadge{background:#f7f0e2;color:var(--gold-text)}
.price,.d-head .d-price{color:var(--ink)}
.price-rent,.d-head .d-price.price-rent{color:var(--orange-dark)}
.stars .off,.star-pick button{color:#d8d4cc}
.skel{background:linear-gradient(90deg,#ebe9e4 0,#f6f5f2 50%,#ebe9e4 100%);background-size:200% 100%}

/* Ilustrácia auta bez fotky */
.illus>rect{fill:#ecebe7}
.illus>path{fill:#e2e0db}
.illus>ellipse{fill:#1d1f23;opacity:.16}
.gallery-main,.card-media{box-shadow:none}

/* Upozornenia a pomocné plochy */
.notice,.pending-pill{background:#fbf3e6;color:#7a5419}
.notice-info{background:#f0eee9;color:var(--ink-2)}
.owner-box{background:#fcfbf9;border-color:#d9d5ce}
.cmp th{background:#faf9f7}
.cmp-x{background:#fff;color:var(--ink)}
.drop{border-color:#d9d5ce}
.drop:hover,.drop.is-over{background:#faf6ee;border-color:var(--gold)}
.opt input:checked+.box{background:#faf6ee;border-color:var(--gold)}
.modal-bg,.mnav-bg{background:rgba(29,31,35,.45)}
.toast{background:var(--graphite);border:0}
.pw-rules li.ok{color:#2e7d55}

/* ==========================================================================
   Skúška „Rosso“ – pretekárska červená s čiernou a bielou.
   Predaj a TOP červené, Prenájom grafitový, Zvýraznený žltý rám.
   ========================================================================== */
:root{
  --ink:#141416;
  --ink-2:#36363a;
  --muted:#707074;
  --line:#e5e4e6;
  --paper:#f4f3f3;
  --raised:#fbfbfb;
  --livery-soft:#ecebeb;
  --cobalt:#c8102e;       /* pretekárska červená – Predaj, TOP */
  --cobalt-dark:#a50d26;
  --orange:#2b2b2f;       /* Prenájom – grafit */
  --orange-dark:#141416;
  --yellow:#f2c230;       /* Zvýraznený */
  --gold:#c8102e;
  --gold-hi:#a50d26;
  --gold-text:#b00e28;
  --graphite:#141416;
}

/* Hlavička a pätička čierne s červeným akcentom */
.hdr{background:#141416;color:#fff;border-bottom:0;box-shadow:inset 0 -2px 0 #c8102e}
.hdr .logo{color:#fff!important}
.hdr .logo small{color:#ff3b4f}
.hdr .logo-mark path:first-child{fill:#fff}
.hdr .logo-mark path:last-child{fill:#c8102e}
.nav a{color:#c9c9cd!important}
.nav a:hover{color:#fff!important;background:rgba(255,255,255,.08)}
.nav a.is-active{color:#fff!important;box-shadow:inset 0 -2px 0 #ff3b4f}
.hdr .icon-btn:hover,.hdr .acct-btn:hover{background:rgba(255,255,255,.1)}
.hdr .acct-btn{color:#fff}
.avatar,.badge-count{background:#c8102e;color:#fff}
.ftr,.sa-boot{background:#141416}
.ftr::before{background:#c8102e;height:3px}

/* Úvod: fotka s jemným červeným nádychom */
.hero p{color:#dedddf}
.hero.has-photo::before{background:
  linear-gradient(90deg,rgba(18,10,12,.86) 0%,rgba(18,10,12,.62) 34%,rgba(40,6,12,.22) 64%,rgba(60,6,14,.12) 100%),
  linear-gradient(180deg,rgba(18,10,12,.2) 0%,transparent 35%,transparent 70%,rgba(18,10,12,.5) 100%)}

/* Tlačidlá */
.btn-primary,.btn-orange{background:#c8102e;color:#fff!important}
.btn-primary:hover:not(:disabled),.btn-orange:hover:not(:disabled){background:#a50d26}
.btn-ghost:hover:not(:disabled){border-color:#c8102e}
.pager .is-current{background:#141416;border-color:#141416;color:#fff}
.tag-sale,.promo-top{color:#fff}
.tag-rent{background:#2b2b2f}
.price-rent,.d-head .d-price.price-rent{color:#141416}
.promo-hl{background:var(--yellow);color:#141416}
.cmp-btn.is-on{background:#c8102e;color:#fff}
.btn.is-on{background:#fdecee;border-color:#c8102e;color:#b00e28}
.chip-verified,.vbadge{background:#fdecee;color:#b00e28}
.stars,.star-pick button.is-on{color:#f2b705}
.equip .ico{color:#c8102e}
.inp:focus,.sel:focus,.txa:focus{border-color:#c8102e;box-shadow:0 0 0 3px rgba(200,16,46,.14)}
:focus-visible{outline-color:#c8102e}
.opt input:checked+.box,.drop:hover,.drop.is-over{background:#fdf3f4;border-color:#c8102e}
.illus>ellipse{fill:#141416}


/* Karta: červená len na štítku TOP, zvyšok neutrálny */
.tag-sale{background:#141416;color:#fff}
.tag-rent{background:#fff;color:#141416;box-shadow:inset 0 0 0 1px #141416}
.card.is-top{box-shadow:var(--shadow)}
.promo-top{background:#c8102e;color:#fff}
.chip-verified,.vbadge{background:#f0eff0;color:#141416}

/* Odkazy v boxe Predávajúci a v textoch: tmavé, červené až pri prejdení myšou */
.contact-list a,.rating-line a,.prose a,.btn-link,.seller-name a{color:var(--ink)!important;text-decoration:underline;text-decoration-color:rgba(20,20,22,.25);text-underline-offset:3px}
.contact-list a:hover,.rating-line a:hover,.prose a:hover,.btn-link:hover,.seller-name a:hover{color:#c8102e!important;text-decoration-color:#c8102e}
.rating-line a{text-decoration:none}
.seller-name a{text-decoration:none}
.equip .ico{color:#1a8a4f}
.contact-stack{display:grid;gap:22px;max-width:820px}
.contact-stack>.contact-form{padding:28px clamp(20px,4vw,48px)}

/* Súhlas s cookies */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:95;max-width:1040px;margin:0 auto;display:flex;gap:16px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px 20px;background:#fff;color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--cobalt);border-radius:12px;box-shadow:0 24px 60px -20px rgba(20,20,22,.45);animation:sa-pop .25s ease-out}
.cookie-text{flex:1 1 420px;min-width:0}
.cookie-text strong{display:block;font:600 16px var(--display);margin-bottom:4px}
.cookie-text p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cookie-text a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cookie-btns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.cookie-btns{width:100%}.cookie-btns .btn{flex:1}.cookie-btns .btn-primary{flex-basis:100%;order:-1}}
.cookie-row{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.cookie-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cookie-row-text span{font-size:13.5px;color:var(--muted)}
.switch{position:relative;flex:none;width:46px;height:26px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch-ui{position:absolute;inset:0;border-radius:999px;background:#cfcfd3;transition:background .15s}
.switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked+.switch-ui{background:var(--cobalt)}
.switch input:checked+.switch-ui::after{transform:translateX(20px)}
.switch input:focus-visible+.switch-ui{outline:3px solid var(--cobalt);outline-offset:2px}
.switch.is-locked{opacity:.55}
.switch.is-locked input{cursor:not-allowed}
.ftr-linkbtn{background:none;border:0;padding:0;font:inherit;font-size:14.5px;color:#c2cde0;cursor:pointer;text-align:left}
.ftr-linkbtn:hover{color:#fff;text-decoration:underline}
.fld>label.check{font-weight:400;font-size:13.5px;color:var(--ink-2)}

/* Mobilná hlavička: červené „+“ na pridanie inzerátu je viditeľné vždy */
@media (max-width:960px){
  .hdr .btn-new{display:inline-flex;width:40px;min-height:40px;height:40px;padding:0;margin:0 2px 0 4px;border-radius:12px}
  .hdr .btn-new .btn-new-t{display:none}
  .hdr .btn-new svg{width:22px;height:22px}
}
@media (max-width:640px){
  .hdr-in{gap:8px}
  .hdr-actions{gap:0}
  .hdr .icon-btn{width:38px;height:38px}
}
@media (max-width:400px){
  .logo{font-size:16px;gap:8px}
  .logo-mark{width:24px;height:18px}
  .hdr .icon-btn{width:36px;height:36px}
  .hdr .btn-new{width:38px;height:38px;min-height:38px}
}
@media (max-width:374px){
  .hdr .icon-btn.js-qs{display:none}
}
@media (min-width:641px) and (max-width:960px){
  .hdr .btn-new{width:auto;padding:0 16px 0 12px}
  .hdr .btn-new .btn-new-t{display:inline}
}

/* Počet zobrazení inzerátu */
.d-views{display:inline-flex;align-items:center;gap:6px;margin-left:8px;align-self:center;font:500 14px var(--body,Inter);color:var(--muted)}
.d-views .ico{width:17px;height:17px}
.st-views{display:inline-flex;align-items:center;gap:5px;color:var(--muted);background:transparent}
.st-views .ico{width:15px;height:15px}
@media (max-width:640px){.d-views{margin-left:auto}}

/* Výber jazyka v menu ☰ (počítač aj mobil) */
.lang-opt .lang-code{display:inline-grid;place-items:center;width:28px;height:20px;border-radius:5px;background:var(--paper);font:700 11px var(--body,Inter);letter-spacing:.04em;color:var(--ink-2)}
.lang-opt.is-on{font-weight:600}
.lang-opt.is-on .lang-code{background:var(--ink);color:#fff}
.lang-opt .lang-ok{margin-left:auto;width:18px;height:18px;color:var(--cobalt)}
.mnav-lang{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mnav-lang .lang-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:none;font:inherit;font-size:14.5px;color:inherit;cursor:pointer}
.mnav-lang .lang-opt.is-on{border-color:var(--ink)}
.mnav-lang .lang-ok{display:none}
/* Tlačidlo „Nový inzerát“ v menu ☰ (bolo priehľadné) */
.mnav-panel a.btn-orange{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;background:#c8102e;color:#fff!important}
.mnav-panel a.btn-orange:hover{background:#a50d26}

/* Porovnanie: voľný stĺpec na ďalšie auto a mobilné zobrazenie */
.cmp-add{vertical-align:top}
.cmp-add a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:3/2;border:2px dashed var(--line);border-radius:12px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;text-align:center;padding:8px}
.cmp-add a:hover{border-color:currentColor;color:var(--ink)}
.cmp-add-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink)}
.cmp-add-ico .ico{width:20px;height:20px}
.cmp td.cmp-add-cell{background:transparent}
@media (min-width:641px){
  .cmp{table-layout:fixed}
  .cmp thead th{width:15%}
  .cmp td.cmp-car{width:28.3%}
  .cmp-add a{max-width:300px}
}
@media (max-width:640px){
  .cmp-wrap{margin:0 -16px;border-radius:0}
  .cmp{min-width:0;table-layout:fixed;width:auto}
  .cmp th,.cmp td{padding:11px 10px}
  .cmp th{width:92px;min-width:92px;font-size:13px;position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--line)}
  .cmp td{width:150px;min-width:150px;font-size:14px;overflow-wrap:anywhere}
  .cmp td.cmp-add,.cmp td.cmp-add-cell{width:104px;min-width:104px}
  .cmp-add a{font-size:12.5px;gap:6px}
  .cmp-add-ico{width:32px;height:32px}
  .cmp .price{font-size:17px}
  .cmp-car a.name{font-size:15px}
  .cmp-car .media{margin-bottom:8px;border-radius:10px}
  .cmp-x{width:28px;height:28px;right:4px;top:4px}
  .cmp.cmp-n1{width:100%}
  .cmp.cmp-n1 td.cmp-car{width:auto;min-width:0}
}

/* Profilová fotka / logo firmy */
.avatar.has-img{background:#fff;overflow:hidden;padding:0}
.avatar.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-md{width:44px;height:44px;font-size:18px}
.avatar-xl{width:96px;height:96px;font-size:38px}
.avatar-edit{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.avatar-btns{display:flex;gap:10px;flex-wrap:wrap}
.seller-name .avatar{margin-right:4px}
.hdr .acct-btn .avatar.has-img{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
/* Položky účtu v menu ☰ s ikonou */
.mnav-panel a:not(.btn) .ico,.mnav-panel button.lnk .ico{width:20px;height:20px;margin-right:12px;vertical-align:-4px}
.mnav-panel button.lnk{color:inherit;font-family:inherit}
/* Porovnanie s jedným autom na mobile: veľká fotka */
.cmp-solo,.cmp-solo-add{display:none}
@media (max-width:640px){
  .cmp-solo{display:block;position:relative;margin:0 0 14px}
  .cmp-solo .media{display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--livery-soft)}
  .cmp-solo .media img,.cmp-solo .media svg{width:100%;height:100%;object-fit:cover;display:block}
  .cmp-solo .cmp-x{width:36px;height:36px;right:10px;top:10px}
  .cmp-solo a.name{display:block;margin-top:10px;font:600 20px var(--display);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
  .cmp.cmp-n1 thead,.cmp.cmp-n1 .cmp-add-cell{display:none}
  .cmp-solo-add{display:inline-flex}
}
@media (max-width:640px){.cmp-solo + .cmp-wrap{margin:0;border-radius:14px}}