/* SPOJAK.sk — Sprievodca výberom (interaktívny wizard)
   Unikátne: progress bar, intro ribbon, option karty, výsledok (odporúčanie, produkty, podpora).
   Zdieľané chrome v base.css. Obsah renderuje sprievodca-logika.js. */

/* PROGRESS BAR (sticky) */
.progress-wrap{display:none;background:#1A1A1A;color:#fff;padding:14px 48px}
.progress-wrap.show{display:block}
.progress-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.progress-label{font-size:13px;font-weight:500;display:flex;align-items:center;gap:10px}
.progress-label .pl-step{font-family:inherit;color:rgba(255,255,255,.55);font-size:12px}
.progress-label .pl-done{color:var(--lgreen);display:inline-flex;align-items:center;gap:6px}
.progress-label .pl-done [data-ic]{font-size:16px}
.progress-back{background:none;border:none;color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;opacity:.85}
.progress-back[disabled]{opacity:.3;cursor:default}
.progress-back [data-ic]{font-size:16px}
.progress-track{height:5px;background:rgba(255,255,255,.14);border-radius:100px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--red);border-radius:100px;transition:width .6s cubic-bezier(.22,1,.36,1)}

/* WIZARD BODY */
.wbody{transition:opacity .2s ease}
.wbody.fade{opacity:0}
.screen{padding:60px 48px 70px}
.whead{text-align:center;max-width:760px;margin:0 auto 38px}
.whead .eyebrow{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:16px}
.whead h1{font-size:46px;font-weight:600;letter-spacing:-1.3px;line-height:1.08}
.whead h1.big{font-size:52px}
.whead .wsub{font-size:16px;color:var(--muted);line-height:1.6;margin-top:16px}

/* intro */
.ribbon{display:inline-flex;align-items:center;gap:18px;background:rgba(125,212,154,.15);color:var(--green);padding:12px 24px;border-radius:100px;font-size:13px;font-weight:500;margin:6px auto 28px}
.ribbon .ri{display:inline-flex;align-items:center;gap:7px}.ribbon [data-ic]{font-size:16px}
.ribbon .sep{width:1px;height:16px;background:rgba(31,111,45,.25)}
.intro-cta{display:flex;flex-direction:column;align-items:center;gap:12px}
.btn-lg{font-size:16px;padding:16px 36px}
.fineprint{font-size:12px;color:var(--muted)}

/* option cards */
.opts{display:grid;gap:16px;max-width:1000px;margin:0 auto}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.opts.c2{grid-template-columns:repeat(2,1fr);max-width:760px}
/* voľby sú <button> (klávesnica) — zrušiť systémový vzhľad tlačidla; vnútro sú <span> */
button.opt{font:inherit;color:inherit;width:100%;display:block}
.opt .otitle,.opt .odesc{display:block}
.opt:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.whead h1:focus{outline:none}
.opt{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:26px;cursor:pointer;text-align:center;transition:border-color .18s,transform .18s,box-shadow .18s,background .18s}
.opt:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.opt .oic{font-size:48px;color:var(--red);margin-bottom:14px;display:flex;justify-content:center}.opt .oic [data-ic]{font-size:48px}
.opt .otitle{font-size:18px;font-weight:500;letter-spacing:-0.2px;margin-bottom:6px}
.opt .odesc{font-size:13px;color:var(--muted);line-height:1.5}
.opt.selected{background:var(--pink);border-color:var(--red);border-width:2px;padding:25.5px}
.opt .ocheck{position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;display:none;align-items:center;justify-content:center}
.opt .ocheck [data-ic]{font-size:15px}
.opt.selected .ocheck{display:flex}

/* RESULT */
.res-intro{max-width:820px;margin:0 auto 36px;text-align:center;font-size:16px;color:var(--ink);line-height:1.65;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:24px 28px}
/* odporúčanie zo servera — renderuje loadRecommendation() do #guideResult
   (typové karty .prod s vymyslenými produktmi boli odstránené) */
.guide-result{max-width:1180px;margin:0 auto}
.res-intro .advice{list-style:none;margin:0;padding:0;text-align:left;display:grid;gap:8px;font-size:15px}
.res-intro .advice li{position:relative;padding-left:20px}
.res-intro .advice li::before{content:'';position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.rp-note{display:flex;gap:10px;align-items:flex-start;background:#FFF8E6;border:1px solid #F3D9A4;border-radius:12px;padding:14px 16px;margin:0 0 18px;font-size:13.5px;line-height:1.55}
.rp-note [data-ic]{font-size:19px;color:var(--amber);flex:none;margin-top:1px}
.rp-note a{color:var(--red)}
.rp-note.info{background:var(--bg);border-color:var(--line)}.rp-note.info [data-ic]{color:var(--red)}
.rp-note.err{background:#FDECEC;border-color:#F2B8BB}.rp-note.err [data-ic]{color:var(--red)}
.rp-retry{margin-top:10px}
.rp-attrs{font-size:11.5px;color:var(--muted);line-height:1.4}
.rp-loading{font-size:13px;color:var(--muted);padding:16px 0}
.rp-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin:28px 0 14px}
.rp-head [data-ic]{font-size:19px;color:var(--red)}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.rp-card{border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column}
a.rp-img{text-decoration:none}
.rp-img{height:128px;background:var(--bg);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.rp-img img{max-width:100%;max-height:100%;object-fit:contain}
.rp-img [data-ic]{font-size:38px;color:var(--muted)}
.rp-info{padding:12px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.rp-code{font-size:11px;color:var(--muted);letter-spacing:.4px}
.rp-name{font-size:13.5px;font-weight:500;line-height:1.4;color:inherit;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rp-name:hover{color:var(--red)}
.rp-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto}
.rp-price{font-size:17px;font-weight:600}
.rp-stock{font-size:11.5px;color:#2C7A3F}
.rp-card .btn{width:100%;justify-content:center}

.support-h{max-width:1180px;margin:38px auto 16px;font-size:18px;font-weight:500;letter-spacing:-0.3px}
.support-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1180px;margin:0 auto}
.support{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.support .sic{width:44px;height:44px;border-radius:10px;background:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.support .sic [data-ic]{font-size:22px;color:var(--red)}
.support .st{flex:1}.support .sn{display:block;font-size:14px;font-weight:500}.support .sp{display:block;font-size:13px;color:var(--muted);margin-top:2px}
/* podporné položky sú odkazy na reálne kategórie */
a.support{text-decoration:none;color:inherit;transition:border-color .18s}a.support:hover{border-color:var(--red)}
.support .sadd{font-size:13px;font-weight:500;color:var(--red);cursor:pointer;white-space:nowrap}

.res-actions{display:flex;gap:12px;justify-content:center;max-width:1180px;margin:38px auto 0;flex-wrap:wrap}
.share-out{max-width:560px;margin:14px auto 0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
.share-out[hidden]{display:none}
.share-out input{font:inherit;font-size:13px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff}
.basis{max-width:760px;margin:22px auto 0;text-align:center;font-size:12px;color:var(--muted);line-height:1.6}
.basis strong{color:var(--ink);font-weight:500}

/* mobile sticky cta */
.mcta{display:none}

@media(max-width:860px){
  .progress-wrap{padding:12px 16px}
  .screen{padding:34px 16px 90px}
  .whead h1,.whead h1.big{font-size:30px;letter-spacing:-0.8px}
  .whead .wsub{font-size:15px}
  .ribbon{flex-direction:column;gap:8px;border-radius:16px;align-items:flex-start}.ribbon .sep{display:none}
  .opts.c3,.opts.c2,.support-grid{grid-template-columns:1fr}
  .res-actions{flex-direction:column}
  body.show-mcta .mcta{display:block;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 16px;box-shadow:0 -6px 20px rgba(0,0,0,.08);z-index:30}
  body.show-mcta .mcta .btn{width:100%}
  .pl-full{display:none}
}