/* Robotrata · Postavitev za računalnik (≥ 901 px) */
/* ===== RAČUNALNIK (≥901 px): zemljevid + nastavitve v vrsti, rezultati pod njima v treh stolpcih =====
   Telefon in tablica (≤900 px) ostaneta nespremenjena. */
@media (min-width:901px){
  .cfg{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"map set" "res res";grid-template-rows:auto auto;align-items:start}
  
  .set-card{align-self:stretch}
  .aside{position:static;max-height:none!important;}
  #recs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  #recs>*{grid-column:1/-1}
  #recs>.rec,#recs>.ck-wrap{grid-column:auto;}
  #recs>.ck-wrap>.rec{margin:0}
  #recs>.more-recs{width:auto;justify-self:center;margin:4px 0 0;padding:0 28px}
  #recs>.extra-h,#recs>.ck-h{margin:8px 2px 0}
  #recs>details.out{margin:4px 0 0}
  
  body.has-mbar{padding-bottom:88px}
}
@media (min-width:901px){
  
  
  
  
  
  #recs .rec.nc .hd>.stars{transform-origin:right center}
  #recs .rec.nc.ck .hd>.stars,#recs .rec.nc.ck .hd>.ck-verdict{right:52px}
  #recs .rec.nc .hd>.trophy{top:6px}
  #recs .rec.nc h3{overflow-wrap:normal;word-break:normal}
}

/* ===== VODENJE PO KORAKIH =====
   #konfigurator[data-step] določa, kaj je vidno. Kartice ostanejo iste, le prikazujejo se postopoma. */

#konfigurator>.intro,#konfigurator>.checkbar,#konfigurator>.wz-steps,#konfigurator>.wz-head,#konfigurator>.cfg,#konfigurator>.wz-nav,#konfigurator>.lead-card{max-width:var(--wz-w);margin-left:auto;margin-right:auto;box-sizing:border-box}

#konfigurator>.intro{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}  /* naslov strani ostane za iskalnike in bralnike zaslona; zavihki so v vseh korakih na istem mestu */
#konfigurator .cfg{display:block}
#konfigurator .cfg>.card+.card{margin-top:16px}

#konfigurator:not([data-step="3"]):not([data-step="4"]) .set-card{display:none}
#konfigurator:not([data-step="5"]) #rezultat{display:none}
#konfigurator:not([data-step="2"]) #draw-help{display:none}
#find-help{display:none}
.wz-help .wz-side-t{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;font:500 14px/20px var(--font);}.wz-side-t .ms{font-size:20px}
#konfigurator:not([data-step="2"]) #area-panel,#konfigurator:not(.has-lawn) #area-panel{display:none}
/* zemljevid: v 1. koraku brez orodij; med risanjem (2.–3. korak) so na zemljevidu Trata / Izloči / Prehod */
#konfigurator[data-step="1"] .map-wrap>.tools{display:none!important}
#konfigurator .map-wrap:not(.fs) .finish-btn{display:none!important}  /* na strani je »Zaključi obris« primarni gumb spodaj */

/* telefon: zemljevid in spodnja vrstica naj bosta hkrati na zaslonu (orodja za povečavo niso prekrita) */

#map:not(.drawing){cursor:grab}

/* koraki */
.wz-steps{scroll-margin-top:72px}
.steps{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.steps li{padding:0!important;background:none!important;border-radius:0}
.steps .sb{display:flex;align-items:center;border:0;border-radius:var(--shape-full);background:var(--md-sc);color:var(--md-on-surface-variant);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.steps .sb:disabled{cursor:default;opacity:.6}
.steps .sb:not(:disabled):hover{background:var(--md-sc-high)}
.steps .sb:focus-visible{outline:2px solid var(--md-primary);outline-offset:2px}
.steps .st{display:grid!important;min-width:0}
.steps b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps li.on .sb{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}


@media (max-width:760px){
  /* telefon: kompaktna vrstica napredka (5 delov), ime koraka je v naslovu spodaj */
  .steps{gap:4px}
  .steps .sb{min-height:24px;padding:9px 0;background:none!important;border-radius:0}
  .steps .sb::before{content:"";display:block;width:100%;height:6px;border-radius:3px;background:var(--md-sc-highest)}
  .steps li.done .sb::before{background:var(--md-primary-container)}
  .steps li.on .sb::before{background:var(--md-primary)}
  .steps .sn,.steps .st{display:none!important}
}
/* naslov koraka: kaj narediti in zakaj */
.wz-head{display:grid;}
.wz-head h2{margin:0;outline:none}
.wz-k{margin:0;text-transform:uppercase;}
.wz-d{margin:0;max-width:60em}
.wz-why{gap:8px;margin:2px 0 0;line-height:20px;max-width:62em}
.wz-why::before{content:"lightbulb";font-family:"Material Symbols Rounded";font-size:18px;line-height:20px;}

@media (max-width:600px){.wz-d{min-height:44px}.wz-why{min-height:40px}}

/* spodnja vrstica: Nazaj + en primarni gumb, vedno na dosegu */
.wz-nav{position:sticky;bottom:0;z-index:1050;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back info next";align-items:center;gap:8px 12px;margin-top:16px;}
@media (min-width:901px){.wz-nav{bottom:16px}}
.wz-nav.away{opacity:0;transform:translateY(24px);pointer-events:none}
.wz-back{grid-area:back}.wz-info{grid-area:info}.wz-next{grid-area:next}

.wz-info{display:flex;align-items:center;gap:6px;min-width:0;margin:0;line-height:18px;color:var(--md-on-surface-variant)}
.wz-info .ms{font-size:18px;flex:none}
.wz-info.ok{color:var(--md-on-surface)}.wz-info.ok .ms{color:var(--md-primary)}
.wz-next{white-space:nowrap}
.wz-next .ms{font-size:20px}
.btn:disabled{box-shadow:none!important;cursor:not-allowed}
.btn:disabled::after{display:none}
body.map-fs .wz-nav{display:none}
@media (max-width:600px){
  .wz-nav{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"info info" "back next";margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));border-radius:var(--shape-l) var(--shape-l) 0 0;gap:6px 8px}
  .wz-info:empty{display:none}
  .wz-next{width:100%;}
  .wz-back{width:48px;}.wz-back .wz-bl{display:none}.wz-back .ms{font-size:22px}
  #konfigurator>.wz-nav{margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));max-width:none}
  .wz-nav:has(.wz-back[hidden]){grid-template-areas:"info info" "next next"}
}


/* pomoč pri risanju (2. korak) */

.wz-help>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font:500 14px/20px var(--font);}
.wz-help>summary::-webkit-details-marker{display:none}
.wz-help>summary .ms{font-size:20px}
.wz-help>summary::after{content:"expand_more";font-family:"Material Symbols Rounded";font-size:22px;margin-left:auto;transition:transform .2s}
.wz-help[open]>summary::after{transform:rotate(180deg)}
.wz-help ol{margin:0;padding:0 0 0 20px;display:grid;gap:6px;line-height:20px}
.wz-help p{margin:10px 0 14px;font-size:13px;line-height:18px;color:var(--md-on-surface-variant)}

/* preverjanje površine (3. korak) */
.map-side{display:grid;align-content:start}
.map-side:empty{display:none}
.area-panel{display:grid;gap:12px;}

@media (max-width:900px){.map-side{margin-top:12px}.map-side .area-panel{margin-top:0}}


.ap-k{text-transform:uppercase;}
.ap-area b{font-variant-numeric:tabular-nums}

.ap-sub{font-size:14px;line-height:20px}
.ap-tip{display:flex;gap:8px;margin:0;line-height:20px;color:var(--md-on-surface-variant)}
.ap-tip b{color:var(--md-on-surface);font-weight:500}
.ap-tip .ms{font-size:18px;line-height:20px;color:var(--md-primary)}
.ap-iss{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 6px 10px 12px;background:var(--md-warning-container);color:var(--md-on-warning-container);font-size:13px;line-height:18px}
.ap-iss.bad{background:var(--md-error-container);color:var(--md-on-error-container)}
.ap-iss>span:nth-child(2){display:grid;gap:1px}
.ap-iss b{font:500 14px/20px var(--font)}
.ap-iss .ms{font-size:20px}
.ap-iss .btn{color:inherit;height:36px;padding:0 10px}
.ap-acts{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:600px){.ap-acts .btn{flex:1 1 140px;padding:0 12px}.ap-iss{grid-template-columns:auto minmax(0,1fr)}.ap-iss .btn{grid-column:2;justify-self:start;margin-left:-10px}}

/* lastnosti vrta (4. korak): vprašanje nad odgovori, razumljive izbire */

.set-card .set-head{display:none}
.wz-lawn:empty{display:none}
.wl{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 10px;margin-bottom:6px;}
.wl svg{flex:none;border-radius:var(--shape-s);background:var(--md-sc-lowest)}
.set-card .opt{grid-template-columns:1fr!important;}
.set-card .opt-l{align-items:flex-start;color:var(--md-on-surface)!important}

.set-card .opt-l .opt-t small{font-size:13px;line-height:18px;opacity:1}
.set-card .opt-slope .opt-l>.ms,.set-card .opts-main .opt-l>.ms{color:var(--md-primary)!important;}
.set-card .opt-slope .seg,.set-card .opts-main .seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.set-card .opt-slope .seg .tool,.set-card .opts-main .seg .tool{text-align:left;color:var(--md-on-surface)}
.tool .tl{display:grid;gap:1px;}
.tool .tl small{font:400 12px/16px var(--font);color:var(--md-on-surface-variant)}
.tool[aria-pressed="true"] .tl small{color:inherit;opacity:.85}


.exact>summary{display:inline-flex;align-items:center;min-height:36px;cursor:pointer;font:500 13px/18px var(--font);color:var(--md-primary);list-style:none}
.exact>summary::-webkit-details-marker{display:none}
.exact>summary::after{content:"expand_more";font-family:"Material Symbols Rounded";font-size:20px;transition:transform .2s}
.exact[open]>summary::after{transform:rotate(180deg)}
.exact-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0 8px}
.exact-row .mini{height:40px}
/* namesto rdečih »!« pri obveznih vprašanjih: zelena kljukica, ko je odgovorjeno */
.opt-slope:not(.done) .opt-l>.ms::after,.opt[data-opt="sig4g"]:not(.done) .opt-l>.ms::after,.opt[data-opt="sky"]:not(.done) .opt-l>.ms::after{content:none}
.set-card .opt-slope.done .opt-l>.ms::after,.set-card .opt[data-opt="sig4g"].done .opt-l>.ms::after,.set-card .opt[data-opt="sky"].done .opt-l>.ms::after{
  content:"check";position:absolute;top:-5px;right:-8px;width:16px;height:16px;border-radius:50%;background:var(--md-primary);color:var(--md-on-primary);font:400 12px/16px "Material Symbols Rounded";text-align:center;box-shadow:0 0 0 2px var(--md-sc-low)}
.set-card .opt.done .opt-t small{color:var(--md-on-surface-variant)!important}


/* površina ob zemljevidu: telefon – kratka vrstica nad zemljevidom, računalnik – plošča desno od zemljevida */
@media (min-width:901px){
  /* enaka postavitev v 1.–3. koraku: zemljevid levo, pomoč / površina desno – zemljevid med koraki ne spreminja velikosti */
  #konfigurator .map-card{align-items:start}
  #konfigurator .map-card>*{grid-column:1}
  #konfigurator .map-card>#map-side{grid-column:2;grid-row:1 / span 9;margin-top:0}
  
  #konfigurator[data-step="1"] #find-help{display:block}
}
/* priporočila (5. korak): analiza je končana */
.res-done:empty{display:none}

.rd{gap:12px;align-items:flex-start;}

.rd>div{display:grid;gap:2px}

.rd span:not(.ms){font-size:14px;line-height:20px}
.rd-acts{display:flex;flex-wrap:wrap;}
.rd-acts .btn{padding:0 12px 0 8px}

/* =====================================================================
   ROBOTRATA – DESIGN SYSTEM 2.0 (Nature Tech · modern minimalist)
   Samo videz: barvni žetoni, tipografija, razmiki, oblike, sence in postavitev.
   Obnašanje strani in vsa logika ostajajo nespremenjeni.
   ===================================================================== */
:root{--md-on-primary:#fff;
  --md-secondary:#4c5c4f;--md-on-secondary:#fff;--md-secondary-container:#e8f3e5;--md-on-secondary-container:#14361c;
  --md-tertiary:#2f6475;--md-tertiary-container:#e1f0f5;--md-on-tertiary-container:#0f3340;
  --md-error:#c42b1c;--md-error-container:#fdecea;--md-on-error-container:#6b130b;
  --md-warning:#9a6400;--md-warning-container:#fff4dc;--md-on-warning-container:#4a3000;
  --md-surface:#f5f7f3;--md-on-surface-variant:#5a665c;
  --md-outline:#cfd8cc;--md-outline-variant:#e4e9e1;
  --md-sc-lowest:#ffffff;--md-sc-low:#ffffff;--md-sc:#f3f6f1;--md-sc-high:#eef2ec;--md-sc-highest:#e3e9e0;
  --md-inverse-surface:#17211a;--md-inverse-on-surface:#eef3ec;
  --elev-1:0 1px 2px rgba(18,32,20,.05),0 1px 3px rgba(18,32,20,.06);
  --elev-2:0 2px 6px rgba(18,32,20,.06),0 8px 24px rgba(18,32,20,.08);
  --elev-3:0 12px 40px rgba(18,32,20,.14),0 2px 8px rgba(18,32,20,.06);
  --shape-xs:6px;--shape-s:8px;--shape-m:12px;--shape-l:14px;--shape-xl:20px;--shape-full:999px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--rt-line:#e4e9e1;
  --search-bg:#ffffff;--logo-ink:#14211a;--logo-green:#2f8f4a;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--md-on-primary:#062611;--md-primary-container:#163823;--md-on-primary-container:#bdeec8;
  --md-secondary:#aebfb1;--md-on-secondary:#16241a;--md-secondary-container:#1c3324;--md-on-secondary-container:#cfe9d4;
  --md-tertiary:#8fc7d8;--md-tertiary-container:#163843;--md-on-tertiary-container:#cdeef8;
  --md-error:#ff8f80;--md-error-container:#3d1410;--md-on-error-container:#ffd9d3;
  --md-warning:#f1c062;--md-warning-container:#352708;--md-on-warning-container:#ffe7b3;
  --md-surface:#0c110e;--md-on-surface-variant:#a1ada3;
  --md-outline:#334036;--md-outline-variant:#232d26;
  --md-sc-lowest:#121915;--md-sc-low:#121915;--md-sc:#18211b;--md-sc-high:#1d2720;--md-sc-highest:#26322a;
  --md-inverse-surface:#e6ece6;--md-inverse-on-surface:#17211a;
  --elev-1:0 1px 2px rgba(0,0,0,.4);--elev-2:0 4px 16px rgba(0,0,0,.4);--elev-3:0 16px 48px rgba(0,0,0,.55);
  --rt-accent:#6fd08a;--rt-line:#232d26;
  --search-bg:#18211b;--logo-ink:#f1f5f1;--logo-green:#7ee08f}}
:root[data-theme="dark"]{--md-on-primary:#062611;--md-primary-container:#163823;--md-on-primary-container:#bdeec8;
  --md-secondary:#aebfb1;--md-on-secondary:#16241a;--md-secondary-container:#1c3324;--md-on-secondary-container:#cfe9d4;
  --md-tertiary:#8fc7d8;--md-tertiary-container:#163843;--md-on-tertiary-container:#cdeef8;
  --md-error:#ff8f80;--md-error-container:#3d1410;--md-on-error-container:#ffd9d3;
  --md-warning:#f1c062;--md-warning-container:#352708;--md-on-warning-container:#ffe7b3;
  --md-surface:#0c110e;--md-on-surface-variant:#a1ada3;
  --md-outline:#334036;--md-outline-variant:#232d26;
  --md-sc-lowest:#121915;--md-sc-low:#121915;--md-sc:#18211b;--md-sc-high:#1d2720;--md-sc-highest:#26322a;
  --md-inverse-surface:#e6ece6;--md-inverse-on-surface:#17211a;
  --elev-1:0 1px 2px rgba(0,0,0,.4);--elev-2:0 4px 16px rgba(0,0,0,.4);--elev-3:0 16px 48px rgba(0,0,0,.55);
  --rt-accent:#6fd08a;--rt-line:#232d26;
  --search-bg:#18211b;--logo-ink:#f1f5f1;--logo-green:#7ee08f}

/* ----- osnova in tipografija ----- */
body{font:400 15px/1.55 var(--font);letter-spacing:0;background:
  radial-gradient(1100px 420px at 50% -160px,color-mix(in srgb,var(--rt-accent) 10%,transparent),transparent 70%) no-repeat,var(--md-surface)}
body,button,input,select,textarea{font-feature-settings:"cv11","ss01"}
.headline-m{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.025em}
.headline-s{font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.02em}
.title-m{font-weight:600;letter-spacing:-.005em}
.body-m,.body-s,.label-l,.label-m{letter-spacing:0}
::selection{background:color-mix(in srgb,var(--rt-accent) 25%,transparent)}
:focus-visible{outline-color:var(--md-primary)}

/* ----- zgornja vrstica ----- */
.topbar,.topbar.scrolled{background:color-mix(in srgb,var(--md-sc-lowest) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--rt-line);box-shadow:none}
.topbar.scrolled{box-shadow:0 4px 20px rgba(18,32,20,.05)}
.topbar .in{height:68px;max-width:1240px}
.vtabs{background:transparent;padding:0;gap:4px}
.vtabs a{position:relative;height:68px;padding:0 14px;border-radius:0;font:500 14.5px/20px var(--font);color:var(--md-on-surface-variant)}
.vtabs a .ms{font-size:19px}
.vtabs a:not([aria-current="page"]):hover{background:transparent;color:var(--md-on-surface)}
.vtabs a[aria-current="page"]{background:transparent;color:var(--md-on-surface);font-weight:600}
.vtabs a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--md-primary)}
.vtabs a[aria-current="page"] .ms{color:var(--md-primary)}
.icon-btn{border-radius:12px;color:var(--md-on-surface)}
@media (max-width:560px){.vtabs a[aria-current="page"]::after{left:10px;right:10px}}

/* ----- gumbi ----- */
.btn{height:44px;padding:0 20px;border-radius:12px;font:600 14.5px/20px var(--font);letter-spacing:0;}
.btn::after{display:none}
.btn-filled{background:var(--md-primary);color:var(--md-on-primary);box-shadow:0 1px 2px rgba(18,32,20,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-filled:hover{background:var(--rt-hover);box-shadow:0 4px 12px color-mix(in srgb,var(--md-primary) 28%,transparent)}
.btn-tonal{color:var(--md-on-surface)}
.btn-tonal:hover{background:var(--md-sc-highest)}
.btn-outlined{background:var(--md-sc-lowest);color:var(--md-on-surface);border:1px solid var(--md-outline);padding:0 19px}
.btn-outlined:hover{border-color:var(--md-primary);color:var(--md-primary)}
.btn-text{color:var(--md-primary);padding:0 10px}
.btn-text:hover{background:color-mix(in srgb,var(--md-primary) 8%,transparent)}

.btn:disabled{background:var(--md-sc-high)!important;color:color-mix(in srgb,var(--md-on-surface) 40%,transparent)!important}

/* ----- izbirni gumbi (čipi) ----- */
.tool{height:36px;padding:0 14px 0 12px;border-radius:10px;border:1px solid var(--md-outline);background:var(--md-sc-lowest);color:var(--md-on-surface);font:500 14px/20px var(--font);letter-spacing:0;}
.tool::after{display:none}
.tool:hover{border-color:color-mix(in srgb,var(--md-primary) 55%,var(--md-outline))}
.tool[aria-pressed="true"]{background:var(--rt-accent-soft);border-color:var(--md-primary);color:var(--md-on-surface);box-shadow:inset 0 0 0 1px var(--md-primary)}
.tool[aria-pressed="true"] .chk{color:var(--md-primary)}
.seg .tool{height:36px}

/* ----- vnosna polja (obrobljena) ----- */
.tf{border-radius:12px;background:var(--md-sc-lowest);box-shadow:inset 0 0 0 1px var(--md-outline)}
.tf:hover{background:var(--md-sc-lowest);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-on-surface) 35%,var(--md-outline))}
.tf:focus-within,.tf.open{box-shadow:inset 0 0 0 2px var(--md-primary)}
.tf.invalid{box-shadow:inset 0 0 0 2px var(--md-error)}
.tf input,.tf select,.dd-btn,.lead .tf textarea{border-radius:12px;letter-spacing:0;font-size:15px}
.tf>.lbl{letter-spacing:0;font-weight:500}
.dd-menu,.sugg{background:var(--md-sc-lowest);border:1px solid var(--rt-line);border-radius:14px;box-shadow:var(--elev-3)}
.dd-menu li{border-radius:10px;font-size:15px}
.dd-menu li[aria-selected="true"]{background:var(--rt-accent-soft);color:var(--md-on-surface)}
.sugg li{font-size:15px;min-height:52px}
.sugg li::before{color:var(--md-primary)}
.searchbar{height:52px;border-radius:14px;background:var(--md-sc-lowest);box-shadow:inset 0 0 0 1px var(--md-outline),var(--elev-1)}
.searchbar:focus-within{background:var(--md-sc-lowest);box-shadow:inset 0 0 0 2px var(--md-primary),0 0 0 4px color-mix(in srgb,var(--md-primary) 12%,transparent)}
.searchbar>.ms{color:var(--md-on-surface-variant)}
.searchbar input{font-size:15px;letter-spacing:0}
.consent input{accent-color:var(--md-primary)}

/* ----- kartice ----- */
.card{background:var(--md-sc-lowest);border:1px solid var(--rt-line);box-shadow:var(--elev-1)}

.none{border-radius:14px;background:var(--md-sc);border:1px solid var(--rt-line);letter-spacing:0}

/* ----- vodenje: širina, koraki, glava ----- */
#konfigurator{--wz-w:1200px}
.wz-steps{margin:8px 0 18px}
@media (min-width:761px){
  .steps{display:flex!important;align-items:center;gap:0}
  .steps li{display:flex!important;align-items:center;flex:1 1 0;min-width:0}
  .steps li:last-child{flex:0 0 auto}
  .steps li:not(:last-child)::after{content:"";flex:1;height:2px;min-width:16px;margin:0 14px;border-radius:2px;background:var(--md-outline-variant)}
  .steps li.done::after{background:var(--md-primary)}
  .steps .sb{width:auto;flex:0 0 auto;min-height:40px;padding:4px 6px;border-radius:12px;background:transparent!important;gap:10px}
  .steps .sb:not(:disabled):hover{background:var(--md-sc)!important}
  .steps .sn{background:var(--md-sc-lowest);color:var(--md-on-surface-variant);box-shadow:inset 0 0 0 1.5px var(--md-outline)}
  .steps li.on .sn{box-shadow:0 0 0 4px color-mix(in srgb,var(--md-primary) 16%,transparent)}
  .steps li.done .sn{background:var(--md-primary-container);color:var(--md-primary);box-shadow:none}
  .steps b{font:500 14.5px/20px var(--font);color:var(--md-on-surface-variant)}
  .steps li.on b{color:var(--md-on-surface);font-weight:600}
  .steps li.done b{color:var(--md-on-surface)}
}
@media (max-width:760px){.steps .sb::before{height:4px}.steps li.done .sb::before{background:color-mix(in srgb,var(--md-primary) 45%,transparent)}}


.wz-head h2{font-size:30px;line-height:38px;font-weight:700;}
.wz-d{color:var(--md-on-surface-variant)}
.wz-why{font-size:14px;color:var(--md-on-surface-variant)}

@media (max-width:600px){.wz-head h2{line-height:30px}}

/* spodnja vrstica korakov */
.wz-nav{background:color-mix(in srgb,var(--md-sc-lowest) 92%,transparent);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:10px 10px 10px 8px}

.wz-info{font-size:13.5px}
@media (max-width:600px){.wz-nav{border-radius:18px 18px 0 0;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))}.wz-back{border-radius:12px;border:1px solid var(--md-outline)}}

/* ----- 1.–2. korak: zemljevid levo, iskalnik in pomoč / površina desno ----- */
#konfigurator .map-card{padding:20px}


@media (min-width:901px){
  #konfigurator .map-card{grid-template-columns:minmax(0,1fr) 340px;column-gap:24px}
  #konfigurator .map-card>#search-box{grid-column:2;grid-row:1;margin:0 0 4px}
  #konfigurator .map-card>.map-wrap{grid-column:1;grid-row:1 / span 3}
  #konfigurator .map-card>#map-side{grid-column:2;grid-row:2 / span 6;margin-top:12px}
  #konfigurator .map-card>#status,#konfigurator .map-card>#hint,#konfigurator .map-card>.subbar{grid-column:1}
  
}
@media (min-width:601px){#konfigurator .map-wrap:not(.fs) #map{margin-inline:0}}
@media (max-width:600px){#konfigurator .map-card{padding:16px;border-left:0;border-right:0;}}

.hint{font-size:13.5px;color:var(--md-on-surface-variant);margin-top:12px}

.status{border-radius:10px;font-size:13.5px;letter-spacing:0}
/* orodja na zemljevidu */
.map-wrap>.tools .segd{height:40px;padding:3px;gap:2px}
.map-wrap>.tools .segd .tool{border:0!important;padding:0 12px;font:500 13.5px/18px var(--font);box-shadow:none}
.map-wrap>.tools .segd .tool+.tool{border-left:0!important}
.map-wrap>.tools .segd .tool[aria-pressed="true"]{background:var(--rt-accent-soft);color:var(--md-on-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-primary) 45%,transparent)}

.edit-tools .edit-done{height:40px;border-radius:12px}
.map-fs-btn{width:42px;height:42px;border:1px solid var(--rt-line)}
.passw{height:40px;}

.maplabel{border-radius:8px;font:600 12px/16px var(--font);letter-spacing:0;color:#fff;}

.leaflet-bar,.leaflet-control-layers{border:1px solid var(--rt-line)!important;box-shadow:var(--elev-2)!important}

@media (max-width:600px){
  .map-wrap>.tools .segd{height:36px;padding:2px}
  .map-wrap>.tools .segd .tool{padding:0 9px;font-size:12px}
  
}
/* stranski stolpec */


.wz-help>summary,.wz-side-t{color:var(--md-on-surface)!important;font-weight:600!important}
.wz-help>summary .ms,.wz-side-t .ms{color:var(--md-primary)}
.wz-help ol{font-size:14px;color:var(--md-on-surface-variant)}
.wz-help ol li::marker{color:var(--md-primary);font-weight:600}
.ap-area{border-radius:16px;color:var(--md-on-surface);border:1px solid color-mix(in srgb,var(--md-primary) 18%,transparent)}
.ap-k{font:600 12px/16px var(--font);letter-spacing:.06em;color:var(--md-primary);opacity:1}
.ap-area b{font:700 40px/48px var(--font);letter-spacing:-.03em}
.ap-area b small{font-size:20px;font-weight:600}
.ap-sub{color:var(--md-on-surface-variant)}
.ap-tip{font-size:13.5px}
.ap-iss{border-radius:12px;border:1px solid color-mix(in srgb,var(--md-warning) 25%,transparent)}
.ap-iss.bad{border-color:color-mix(in srgb,var(--md-error) 25%,transparent)}
.ap-acts .btn-tonal{border:1px solid var(--md-outline)}
.ap-acts .btn-tonal:hover{border-color:var(--md-primary);color:var(--md-primary)}

/* ----- 3. korak: povzetek trate levo, vprašanja desno ----- */

@media (min-width:901px){
  
  
  #konfigurator .set-card>#wz-lawn{grid-column:1;grid-row:1 / span 12;position:sticky;top:92px}
  #konfigurator .set-card>.opt-slope{padding-top:0}
  .wl{flex-direction:column;align-items:stretch;gap:12px;padding:14px;margin:0;border-radius:16px;background:var(--md-sc);border:1px solid var(--rt-line)}
  .wl svg{width:100%;height:auto;border-radius:12px;background:var(--md-sc-lowest)}
  .wl .btn-text{justify-content:flex-start;padding:0 8px;margin-left:-8px}
  .wl .btn-text::before{content:"edit";font-family:"Material Symbols Rounded";font-size:18px}
}
.wl{border-radius:14px;background:var(--md-sc);border:1px solid var(--rt-line)}



.set-card .opt-slope .seg .tool[aria-pressed="true"],.set-card .opts-main .seg .tool[aria-pressed="true"]{background:var(--rt-accent-soft)}
.tool .tl{font-weight:600}
.tool .tl small{font-weight:400}
.lidar-res{border-radius:12px;}

.more-set>summary .ms-l{font-weight:600}



/* ----- 4. korak: »Vaš vrt« levo, analiza in kosilnice desno ----- */
#konfigurator #rezultat{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
#konfigurator #rezultat .res-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.sumbar{background:var(--md-sc-lowest);}
.sumbar::before{margin-bottom:6px;font:700 17px/24px var(--font);color:var(--md-on-surface)}
.sumbar>span{display:flex!important;align-items:center;gap:10px;height:auto!important;min-height:46px;padding:10px 0!important;border-radius:0!important;background:transparent!important;border-top:1px solid var(--rt-line);color:var(--md-on-surface-variant)!important;font-size:14px;white-space:normal}
.sumbar>span::before{content:attr(title);order:1;margin-right:auto;color:var(--md-on-surface-variant);font-size:14px}
.sumbar>span .ms{order:0;font-size:19px!important;color:var(--md-primary)}
.sumbar>span b{order:2;font:600 14.5px/20px var(--font)!important;color:var(--md-on-surface)!important}
.sumbar>span small{order:3;font-size:12px;color:var(--md-on-surface-variant);white-space:nowrap;margin-left:-6px}
.sumbar .sb-main::after{content:"square_foot";order:0;font-family:"Material Symbols Rounded";font-size:19px;line-height:1;color:var(--md-primary)}
.sumbar .sb-main b{font-size:16px!important}
@media (min-width:901px){
  #konfigurator #rezultat{grid-template-columns:300px minmax(0,1fr);column-gap:28px;align-items:start}
  #konfigurator #rezultat>*{grid-column:2;min-width:0}
  #konfigurator #rezultat>.sumbar{grid-column:1;grid-row:1 / span 8;top:92px}
  #konfigurator #rezultat>.vh,#konfigurator #rezultat>input{grid-column:1}
}

.rd{color:var(--md-on-surface)}
.rd>.ms{color:var(--md-primary);font-size:30px}
.rd b{font:700 17px/24px var(--font);letter-spacing:-.01em}
.rd span:not(.ms){color:var(--md-on-surface-variant)}


#warns{margin-bottom:14px}


.warn.stop{border-color:color-mix(in srgb,var(--md-error) 22%,transparent)}
.warn.ok{border:0}

/* kartice priporočil */
#konfigurator #recs .rec.nc{display:flex!important;flex-direction:column;margin:0 0 16px;}
#konfigurator #recs .rec.nc:hover{box-shadow:var(--elev-2);transform:translateY(-2px)}

#konfigurator #recs .rec.nc.chosen:not(.top){border-color:var(--md-primary)}
#konfigurator #recs .rec.nc .role{align-self:flex-start;padding:0 10px;border-radius:8px;background:var(--brand-soft);color:var(--md-on-surface);font:600 12.5px/26px var(--font);letter-spacing:0}
#konfigurator #recs .rec.nc .role .ms{color:var(--brand)}
#konfigurator #recs .rec.nc .role-best{background:var(--md-primary);color:var(--md-on-primary)}
#konfigurator #recs .rec.nc .role-best .ms{color:inherit}
#konfigurator #recs .rec.nc .hd{margin:0;}


#konfigurator #recs .rec.nc .ph img{padding:6%}

#konfigurator #recs .rec.nc h3{color:var(--md-on-surface)}
#konfigurator #recs .rec.nc .hd>.trophy,#konfigurator #recs .rec.nc .hd>.stars,#konfigurator #recs .rec.nc .hd>.ck-verdict{top:16px!important;right:16px!important;transform:none!important}
#konfigurator #recs .rec.nc .hd>.trophy{width:36px;height:36px;top:12px!important}
#konfigurator #recs .rec.nc.ck .hd>.stars,#konfigurator #recs .rec.nc.ck .hd>.ck-verdict{right:56px!important}
#konfigurator #recs .rec.nc .kf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rt-line);border-bottom:1px solid var(--rt-line)}
#konfigurator #recs .rec.nc .kf div{background:transparent;padding:0 8px;border-radius:0}
#konfigurator #recs .rec.nc .kf div:first-child{padding-left:0}
#konfigurator #recs .rec.nc .kf div+div{border-left:1px solid var(--rt-line)}



#konfigurator #recs .rec.nc .pros li::before{content:"check";color:var(--md-primary);font-variation-settings:"wght" 600}
#konfigurator #recs .rec.nc .pros li.w::before{content:"warning";color:var(--md-warning)}

#konfigurator #recs .rec.nc .ft{border-top:1px solid var(--rt-line);font:600 14px/20px var(--font);color:var(--md-primary)}
#konfigurator #recs .rec.nc .more{padding-top:4px}
#konfigurator #recs .rec.nc .more dl{padding:12px;border-radius:12px;background:var(--md-sc)}
@media (min-width:901px){
  #konfigurator #recs{gap:18px}
  
  #konfigurator #recs>.ck-wrap>.rec{height:100%}
}
@media (max-width:600px){
  
  
  
  #konfigurator #recs .rec.nc .hd>.trophy,#konfigurator #recs .rec.nc .hd>.stars{top:14px!important;right:14px!important}
}

details.out{border-radius:14px;}
.checkbar{border-radius:16px;border:1px solid color-mix(in srgb,var(--md-primary) 20%,transparent)}

/* ----- povpraševanje ----- */
.lead-card{border:1px solid var(--rt-line);box-shadow:var(--elev-2);padding:28px}
.lead-ic{border-radius:14px;background:var(--rt-accent-soft);color:var(--md-primary)}
.lead-head h2{font-weight:700;}
.lead-k{font:600 12px/16px var(--font);letter-spacing:.08em;color:var(--md-on-surface-variant)}
.lm{border-radius:16px;border-width:1.5px;background:linear-gradient(160deg,var(--brand-soft),var(--md-sc-lowest))}
.lm h3{font-weight:700;letter-spacing:-.02em}
.lt,.lead-note{border-radius:14px;background:var(--md-sc);border:1px solid var(--rt-line)}
.lead-alt{border-radius:10px}
.done-card{border-radius:16px;background:var(--rt-accent-soft);color:var(--md-on-surface);border:1px solid color-mix(in srgb,var(--md-primary) 20%,transparent)}
@media (max-width:600px){.lead-card{padding:20px 16px;}}

/* ----- katalog ----- */
.cat-head h1{font-weight:700;}
.cat-filters{padding:18px}
.cat-search{border-radius:12px}
.fg{border-top-color:var(--rt-line)}
.fg legend{font:600 13px/18px var(--font);color:var(--md-on-surface)}
.fg legend .ms{color:var(--md-primary)}
.fbadge{background:var(--md-primary)}
.cat-grid{gap:18px}
.pcard{border:1px solid var(--rt-line);background:var(--md-sc-lowest);box-shadow:var(--elev-1);}
.pcard:hover{box-shadow:var(--elev-2);transform:translateY(-2px);border-color:color-mix(in srgb,var(--md-primary) 30%,var(--rt-line))}
.pc-main{padding:14px 14px 16px;gap:8px}
.pcard .ph{border-radius:14px;background:radial-gradient(70% 80% at 50% 60%,var(--brand-soft),var(--md-sc) 80%)}
.pcard .brand{color:var(--md-on-surface-variant);font:500 12.5px/16px var(--font);letter-spacing:0}
.pcard h3{font:700 18px/24px var(--font);letter-spacing:-.015em}
.cspecs .sr>span{border-radius:7px;background:var(--md-sc);border:1px solid var(--rt-line);font-weight:500;letter-spacing:0}
.cspecs .sr .nv{background:var(--brand-soft);border-color:transparent}
.pc-flag{border-radius:8px}

/* ----- okna ----- */
.pdlg,.navdlg{border:1px solid var(--rt-line);box-shadow:var(--elev-3)}
.pdlg::backdrop,.navdlg::backdrop{background:rgba(10,18,12,.45);backdrop-filter:blur(3px)}

.pd-x{border-radius:12px;background:var(--md-sc)}
.nd-it{border-radius:16px;background:var(--md-sc);border:1px solid var(--rt-line)}
.nd-it.on{border:1.5px solid var(--md-primary);background:var(--rt-accent-soft)}
.nd-ic{border-radius:12px}


/* ----- splošne podrobnosti ----- */
.cap-k{border-radius:8px;font-weight:600}
.rec .na{opacity:.7}
.info-q,.nav-q{border-radius:8px}

/* ----- priporočila: kompaktne kartice enake višine; 1. mesto na sredini (na večjih zaslonih) ----- */

/* vrh kartice: oznaka vloge; nato slika, ime ter pokal z zvezdicami v eni vrstici */
#konfigurator #recs .rec.nc{gap:10px;padding:16px!important}
#konfigurator #recs .rec.nc.top{padding:15px!important}



#konfigurator #recs .rec.nc .nm{min-width:0}
#konfigurator #recs .rec.nc .brand{display:block;font-size:12.5px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#konfigurator #recs .rec.nc h3{font-size:18px!important;line-height:23px!important}
#konfigurator #recs .rec.nc .hd>.podium-m,#konfigurator #recs .rec.nc .hd>.trophy,#konfigurator #recs .rec.nc .hd>.stars{position:static!important;align-self:start}
#konfigurator #recs .rec.nc .hd>.podium-m{justify-items:center;margin-top:-34px}
#konfigurator #recs .podium-m .stars{display:flex!important;position:static!important;transform:none!important}
#konfigurator #recs .podium-m .kst{width:12px;height:12px}
#konfigurator #recs .rec.nc .role{height:24px;font-size:12px;line-height:24px;max-width:calc(100% - 64px)}
.podium-m .trophy{position:relative;width:34px;height:34px;animation:none}
.podium-m.p1 .trophy{width:40px;height:40px;animation:ktrophy 3.6s ease-in-out infinite}
.podium-m .trophy b{position:absolute;left:0;right:0;top:19%;text-align:center;font:800 11px/1 var(--font);color:rgba(60,35,0,.75)}
.podium-m.p1 .trophy b{font-size:12px}
.trophy.t2 svg{filter:grayscale(1) brightness(1.22) contrast(1.05) drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.trophy.t2 b{color:rgba(40,46,56,.75)!important}
.trophy.t3 svg{filter:sepia(1) saturate(2.2) hue-rotate(-22deg) brightness(.78) drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.trophy.t3 b{color:rgba(255,240,225,.92)!important}
/* ključni podatki – ena tanka vrstica */
#konfigurator #recs .rec.nc .kf{padding:8px 0}
#konfigurator #recs .rec.nc .kf b{font-size:13.5px;line-height:18px}

/* zasedenost in daljši opisi so v oknu s podrobnostmi; na kartici največ dva razloga */

#konfigurator #recs .rec.nc .pros{gap:3px}
#konfigurator #recs .rec.nc .pros li{font-size:13.5px;line-height:19px}
#konfigurator #recs .rec.nc .pros li:nth-child(n+3){display:none}
/* noga: Podrobnosti + Izberi model */
#konfigurator #recs .rec.nc .ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:10px}
#konfigurator #recs .rec.nc .ft .det{padding:0 4px 0 2px;margin-left:-2px;height:38px;font-size:14px}
#konfigurator #recs .rec.nc .ft .det .ms{font-size:20px;margin-left:-2px}
#konfigurator #recs .rec.nc .ft .pick{height:38px;padding:0 14px 0 10px;margin-left:auto;font-size:14px}
#konfigurator #recs .rec.nc .ft .pick.btn-outlined{background:var(--md-sc-lowest)}
@media (min-width:901px){
  
  #konfigurator #recs>*{order:10}
  #konfigurator #recs>.ck-wrap,#konfigurator #recs>.ck-h,#konfigurator #recs>.none{order:0}
  #konfigurator #recs>.pl2{order:1}#konfigurator #recs>.pl1{order:2}#konfigurator #recs>.pl3{order:3}
  #konfigurator #recs>.rec,#konfigurator #recs>.ck-wrap>.rec{margin:0!important}
}
/* ----- postavitev 4. koraka -----
   ≥1181 px: levo »Vaš vrt«, analiza in opozorila, desno takoj kartice;
   ožje: povzetek trate kot vrstica oznak nad karticami. */



@media (min-width:1181px){
  #konfigurator #rezultat{grid-template-columns:290px minmax(0,1fr);column-gap:24px;row-gap:14px;align-items:start}
  #konfigurator #rezultat>*{grid-column:1;min-width:0}
  #konfigurator #rezultat>#recs{grid-column:2;grid-row:1 / span 20}
  #konfigurator #rezultat>.sumbar{grid-row:auto;}
  
  
  
  #konfigurator #rezultat .rd{padding:14px}
  #konfigurator #rezultat .rd>.ms{font-size:24px}
  #konfigurator #rezultat .rd b{font-size:15px;line-height:20px}
  #konfigurator #rezultat .rd span:not(.ms){font-size:13px;line-height:18px}
  
  #konfigurator #rezultat #warns .warn{font-size:13px;line-height:18px}
  
  #konfigurator #rezultat #warns:empty{display:none}
}
@media (max-width:1180px){
  #konfigurator #rezultat{display:block}
  
  
  .sumbar>span{min-height:32px!important;padding:0 12px!important;border:1px solid var(--rt-line)!important;border-radius:999px!important;background:var(--md-sc-lowest)!important;gap:6px;font-size:13px}
  .sumbar>span::before{display:none}
  .sumbar>span b{font-size:13.5px!important}
  .sumbar>span small{margin-left:-2px}
  .sumbar .sb-main::after{display:none}
  #konfigurator #rezultat .res-done{flex-wrap:wrap;align-items:center;margin-bottom:10px}
  #konfigurator #rezultat .rd{flex:1 1 260px;align-items:center;padding:10px 14px;gap:10px}
  #konfigurator #rezultat .rd>.ms{font-size:22px}
  #konfigurator #rezultat .rd b{font-size:15px}
  #konfigurator #rezultat .rd span:not(.ms){display:none}
  #konfigurator #rezultat .rd-acts{margin:0}
  #konfigurator #rezultat #warns .warn{font-size:13px;line-height:18px;}
  
  #konfigurator #rezultat #warns .warn .ms{font-size:20px}
}
/* okno s podrobnostmi: razlogi za priporočilo */
.pd-rec{display:grid;gap:10px;padding:14px 16px;border-radius:16px;background:var(--rt-accent-soft);border:1px solid color-mix(in srgb,var(--md-primary) 18%,transparent)}
.pd-rec-t{display:flex;align-items:center;gap:8px;margin:0;font:600 14px/20px var(--font);color:var(--md-on-surface)}
.pd-place{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font:700 12px/24px var(--font);color:#3d2a00;background:linear-gradient(90deg,#f6d567,#e3ad25)}
.pd-place.p2{color:#2a3038;background:linear-gradient(90deg,#e3e7ec,#b7c0ca)}
.pd-place.p3{color:#fff;background:linear-gradient(90deg,#d79a62,#a9652f)}
.pd-rec .pros{margin:0}
.pd-rec .pros li::before{content:"check";color:var(--md-primary)}
.pd-rec .cap-bar i{background:var(--md-primary)}

/* ----- računalnik: zemljevid zapolni celotno belo kartico (le 1. in 2. korak) -----
   levo lebdita iskalnik in navodila / površina, desno orodja za urejanje trate */
@media (min-width:901px){
  #konfigurator:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .map-card{display:block!important;position:relative;padding:0!important;}
  #konfigurator .map-card>.map-wrap{border-radius:0}
  #konfigurator .map-wrap:not(.fs) #map{width:100%;margin:0;aspect-ratio:auto!important;max-height:none!important;min-height:0!important}
  /* levo: iskalnik + pomoč oz. površina */
  #konfigurator .map-card>#search-box{position:absolute;top:16px;left:16px;width:340px;margin:0;z-index:1010}
  #konfigurator .map-card>#search-box .searchbar{box-shadow:inset 0 0 0 1px var(--rt-line),var(--elev-2)}
  #konfigurator .map-card>#map-side{position:absolute;top:80px;left:16px;width:340px;max-height:calc(100% - 96px);overflow:auto;margin:0!important;padding:14px;z-index:1005;
    background:color-mix(in srgb,var(--md-sc-lowest) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--rt-line);border-radius:18px;box-shadow:var(--elev-3);scrollbar-width:thin}
  
  #konfigurator .map-side .area-panel{margin:0}
  /* namig – spodaj, desno od plošče (ne prestreže klikov na zemljevid) */
  #konfigurator .map-card>#hint{position:absolute;z-index:1004;pointer-events:none;margin:0;padding:9px 14px 9px 12px;border-radius:12px;-webkit-backdrop-filter:blur(8px);color:var(--md-on-surface);font-size:13.5px;line-height:19px}
  #konfigurator .map-card>#hint:empty{display:none}
  #konfigurator .map-card>#status{position:absolute;z-index:1004;margin:0;box-shadow:var(--elev-2)}
  /* desno: orodja za urejanje trate */
  #konfigurator .map-wrap:not(.fs)>.tools{justify-content:flex-end}
  /* gumb za cel zaslon levo spodaj ob plošči; povečava in sloji ostanejo desno spodaj */
  
  #konfigurator .map-wrap:not(.fs) .grid-note{left:372px!important}
}