/* =====================================================================================
   Pink Theme — zjednotenie UI kalkulačky s landing page palette.
   Loaded AFTER styles.css to override surgically.
   Tokens (sa preberajú z styles.css :root):
     --accent       #c2477f  deep dusty pink
     --accent-soft  #ff8fc2  hot pink
     --accent-pale  #fef0f8  pale pink bg
     --accent-border#f5c2db  visible pink border
     --accent-tint  #ffd0ed  cotton candy halo
     --dark         #0b0b0e  contrast
===================================================================================== */

/* INPUTS: focus pink ring + jemný hover bg */
input[type=text], input[type=number], input[type=email], input[type=search],
input[type=password], textarea, select {
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input[type=text]:focus, input[type=number]:focus, input[type=email]:focus,
input[type=search]:focus, input[type=password]:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,208,237,.55);
  background: #fff;
}

/* CHECKBOX / RADIO accent */
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* TOPBAR — pink underline pre identitu */
.topbar { border-bottom: 1px solid var(--accent-border); }
.topbar .brand { color: var(--dark); }

/* BUTTONS — non-semantic defaultný .btn (Kópia atď): zjednotený hover s lift */
.btn:not(.btn--danger):not(.btn--export):not(.btn--quote):not(.btn--logout):not(.btn--primary):not(.btn--shop):not(.btn--pricing) {
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:not(.btn--danger):not(.btn--export):not(.btn--quote):not(.btn--logout):not(.btn--primary):not(.btn--shop):not(.btn--pricing):hover {
  border-color: var(--accent);
  background: var(--accent-pale);
  color: var(--dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(194,71,127,.20);
}
.btn:not(.btn--danger):not(.btn--export):not(.btn--quote):not(.btn--logout):not(.btn--primary):not(.btn--shop):not(.btn--pricing):active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(194,71,127,.14);
}
.btn.btn--accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #fff;
  border: 0;
  box-shadow: 0 8px 20px rgba(194,71,127,.22);
}
.btn.btn--accent:hover { filter: brightness(1.05); }

/* PANELS — premium styling je v styles.css, sem necháme len cleanup ak treba */

/* PREMIUM body bg: soft radial cotton candy glow z hora (kalkulačka view) */
body:has(#editor:not(.hidden)) {
  background:
    radial-gradient(900px 380px at 50% -120px, rgba(255,208,237,.40), transparent 70%),
    radial-gradient(1200px 600px at 100% 0%, rgba(255,143,194,.10), transparent 60%),
    #fbfaf9 !important;
  min-height: 100vh;
}

/* ===== NUMBERED SECTION EYEBROWS (zladené s PDF) ===== */
.sz-eyebrow{
  display:flex;align-items:center;gap:14px;margin:32px 0 12px;padding:0 4px;
  font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
/* Prvé eyebrow v editori má menší top margin (priamo pod empty state / topbar) */
#editor > .sz-eyebrow:first-child{ margin-top:16px; }
.sz-eyebrow .idx{font-size:24px;font-weight:700;color:#c2477f;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;flex:0 0 auto}
.sz-eyebrow .label{font-size:10px;font-weight:800;color:#0b0b0e;text-transform:uppercase;
  letter-spacing:.18em;line-height:1;flex:1}
.sz-eyebrow .rule{height:1px;background:#f5c2db;flex:1 1 auto;margin-left:8px}

/* ===== ACTIVE RECIPE NAME v topbare ===== */
.topbar-active-recipe{display:inline-flex;align-items:center;gap:8px;margin-left:16px;
  padding-left:16px;border-left:1px solid #f5c2db;font-size:13px;color:#94748d;font-weight:600;
  letter-spacing:.04em}
.topbar-active-recipe .label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#c2477f;font-weight:800}
.topbar-active-recipe .name{color:#0b0b0e;font-weight:700;max-width:280px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){ .topbar-active-recipe{display:none} }

/* ===== RECIPE META (datum vytvorenia / upravy) ===== */
.recipe-meta{display:flex;gap:18px;margin:10px 0 18px;font-size:11px;color:#94748d}
.recipe-meta .item{display:inline-flex;align-items:center;gap:5px;letter-spacing:.04em}
.recipe-meta .item i{color:#c2477f;font-size:10px}
.recipe-meta .item strong{color:#0b0b0e;font-weight:700}

/* ===== SAVE TOAST ===== */
.sz-toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9990;display:flex;flex-direction:column;gap:10px;
  pointer-events:none;max-width:340px}
.sz-toast{pointer-events:auto;background:#fff;border:1px solid #f5c2db;border-radius:14px;
  box-shadow:0 18px 40px -8px rgba(194,71,127,.20),0 6px 18px rgba(11,11,14,.10);
  padding:13px 16px 13px 14px;display:flex;align-items:flex-start;gap:11px;
  animation:szToastIn .35s cubic-bezier(.2,.9,.25,1.05);font-size:13.5px;color:#0b0b0e}
.sz-toast.is-leaving{animation:szToastOut .25s ease forwards}
@keyframes szToastIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes szToastOut{to{opacity:0;transform:translateY(6px) scale(.98)}}
.sz-toast .ico{width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:#fef0f8;color:#c2477f;
  display:grid;place-items:center;font-size:13px;border:1px solid #f5c2db}
.sz-toast.success .ico{background:#0b0b0e;color:#ffd0ed;border-color:#0b0b0e}
.sz-toast .body{flex:1;line-height:1.45}
.sz-toast .body .title{font-weight:700}
.sz-toast .body .sub{font-size:11.5px;color:#94748d;margin-top:1px}
@media (prefers-reduced-motion: reduce) { .sz-toast{animation:none} }

/* =====================================================================================
   FEATURE: TESTIMONIALS na landing (3+ schválené recenzie z DB)
===================================================================================== */
.sz-testimonials-grid{grid-template-columns:1fr}
@media(min-width:720px){.sz-testimonials-grid{grid-template-columns:repeat(3,1fr)!important}}
.sz-testimonial{background:#fff;border-radius:20px;padding:24px 22px 20px;position:relative;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 0 0 1px rgba(11,11,14,.08),0 0 0 5px rgba(194,71,127,.06),
    0 18px 40px -12px rgba(194,71,127,.16),0 6px 18px -4px rgba(11,11,14,.06);
  transition:transform .2s ease,box-shadow .25s ease}
.sz-testimonial:hover{transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(11,11,14,.10),0 0 0 6px rgba(194,71,127,.10),
    0 26px 50px -14px rgba(194,71,127,.22),0 8px 22px -4px rgba(11,11,14,.10)}
.sz-testimonial::before{content:"\201C";position:absolute;top:14px;right:22px;
  font-family:"Bricolage Grotesque",Georgia,serif;font-size:60px;line-height:1;color:#fef0f8;
  font-weight:800;pointer-events:none;z-index:0}
.sz-tx-stars{display:flex;gap:2px;font-size:14px;color:#d4a64f;position:relative;z-index:1}
.sz-tx-quote{margin:0;font-size:14.5px;line-height:1.6;color:#3a2530;font-weight:500;
  position:relative;z-index:1;flex:1}
.sz-tx-author{display:flex;align-items:center;gap:11px;position:relative;z-index:1;
  padding-top:14px;border-top:1px dashed #f5c2db}
.sz-tx-avatar{width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(135deg,#c2477f,#ff8fc2);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:15px;
  font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.02em;
  box-shadow:0 6px 14px rgba(194,71,127,.28)}
.sz-tx-meta{display:flex;flex-direction:column;line-height:1.2}
.sz-tx-name{font-weight:800;color:#0b0b0e;font-size:13.5px}
.sz-tx-city{font-size:11.5px;color:#94748d;letter-spacing:.06em;margin-top:2px}
/* =====================================================================================
   /FEATURE: TESTIMONIALS
===================================================================================== */

/* =====================================================================================
   FEATURE: LANDING NAV (zasadacka-style — len logged-out) — zmaž tento blok aby si vrátila
===================================================================================== */
html{scroll-behavior:smooth}
.sz-landing-nav{display:none;align-items:center;gap:2px;flex:0 0 auto;margin-left:auto;margin-right:4px}
.sz-landing-nav a{padding:8px 12px;border-radius:10px;font-size:13px;font-weight:600;color:#0b0b0e;
  text-decoration:none;letter-spacing:.01em;line-height:1;white-space:nowrap;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.sz-landing-nav a:hover{background:#fef0f8;color:#c2477f;
  box-shadow:0 4px 10px rgba(194,71,127,.12)}
.sz-landing-nav a.is-active{background:#0b0b0e;color:#ffd0ed}

/* Lang switcher — hover + aktívny stav */
.sz-lang{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;font-size:15px;
  text-decoration:none;line-height:1;background:#fff;color:#333;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .12s ease}
.sz-lang.is-active{background:#fff;color:#0b0b0e;
  box-shadow:inset 0 -3px 0 #c2477f}
.sz-lang:not(.is-active):hover{background:#fef0f8;color:#c2477f;transform:translateY(-1px)}
.sz-lang.is-active:hover{background:#fef0f8}

/* Medzera medzi jazykmi a CTA tlačidlom */
body:has(#auth:not(.hidden)) #btnLoginTop{margin-left:14px}

/* Zobraz nav iba na landing (logged-out view) */
body:has(#auth:not(.hidden)) .sz-landing-nav{display:inline-flex}
body:has(#auth:not(.hidden)) .sz-cta-label-editor{display:none}
body:has(#editor:not(.hidden)) .sz-cta-label-landing,
body:has(#editor:not(.hidden)) .sz-cta-label-editor{display:inline}
body:has(#editor:not(.hidden)) .sz-cta-label-landing{display:none}

/* Stretching layout — brand left, nav center, actions right */
@media(max-width:880px){ .sz-landing-nav{display:none!important} }

/* =====================================================================================
   FEATURE: COST DONUT (rozdelenie nákladov surovín) — zmaž tento blok aby si vrátila
===================================================================================== */
.sz-cost-donut-block{margin:18px 0 0;padding:22px 22px 20px;background:#fff;border-radius:18px;
  border:0;box-shadow:0 0 0 1px rgba(11,11,14,.08), 0 0 0 5px rgba(194,71,127,.06),
    0 18px 40px -12px rgba(194,71,127,.14), 0 6px 18px -4px rgba(11,11,14,.06)}
.sz-cost-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.sz-cost-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;color:#0b0b0e}
.sz-cost-title i{color:#c2477f;font-size:14px}
.sz-cost-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.1}
.sz-cost-meta-lbl{font-size:9.5px;font-weight:800;color:#94748d;letter-spacing:.18em;text-transform:uppercase}
.sz-cost-meta-val{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-size:22px;font-weight:800;color:#c2477f;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sz-cost-grid{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:center}
@media(max-width:720px){.sz-cost-grid{grid-template-columns:1fr;gap:18px}}
.sz-cost-chart-wrap{position:relative;width:240px;height:240px;justify-self:center}
@media(max-width:480px){.sz-cost-chart-wrap{width:200px;height:200px}}
.sz-cost-chart-wrap canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.sz-cost-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;pointer-events:none;padding:0 30px}
.sz-cost-center-lbl{font-size:9px;font-weight:800;color:#94748d;letter-spacing:.18em;text-transform:uppercase;line-height:1}
.sz-cost-center-val{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-size:28px;font-weight:800;color:#0b0b0e;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.sz-cost-center-name{font-size:11px;color:#5b4555;font-weight:700;line-height:1.2;margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.sz-cost-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sz-cost-legend li{display:grid;grid-template-columns:14px 1fr auto auto;gap:10px;align-items:center;
  padding:8px 12px;background:#fef0f8;border:1px solid #f5c2db;border-radius:11px;
  font-size:12.5px;color:#0b0b0e;line-height:1.2;transition:transform .12s ease,box-shadow .15s ease}
.sz-cost-legend li:hover{transform:translateX(2px);box-shadow:0 4px 12px rgba(194,71,127,.18)}
.sz-cost-legend .dot{width:12px;height:12px;border-radius:4px}
.sz-cost-legend .name{font-weight:700;color:#0b0b0e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sz-cost-legend .val{font-variant-numeric:tabular-nums;font-weight:700;color:#5b4555;font-size:12px}
.sz-cost-legend .pct{font-variant-numeric:tabular-nums;font-weight:800;color:#c2477f;font-size:13px;min-width:42px;text-align:right}
.sz-cost-merge{display:inline-block;font-size:9.5px;font-weight:800;color:#94748d;background:#fff;
  padding:2px 5px;border-radius:5px;border:1px solid #f5c2db;margin-left:4px;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;vertical-align:middle}
@keyframes szCostIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.sz-cost-donut-block{animation:szCostIn .4s cubic-bezier(.2,.9,.25,1.05)}

/* =====================================================================================
   FEATURE: SUZYS.SK MARKETING (A + B) — zmaž tento blok aby si feature vrátila späť
===================================================================================== */
/* Premium brand mark — pink gradient pill s monogram "S" (zasadacka-style) */
.sz-brand-mark{width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,#c2477f 0%,#ff8fc2 100%);
  color:#fff;display:grid;place-items:center;
  font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-size:19px;font-weight:800;letter-spacing:-.04em;line-height:1;
  box-shadow:0 6px 14px rgba(194,71,127,.30), 0 0 0 1px rgba(255,255,255,.08) inset}
/* 2-riadkový text layout vedľa ikony (zasadacka-style) */
.sz-brand-text{display:flex;flex-direction:column;line-height:1;gap:3px}
.sz-brand-name{font-size:15px;font-weight:800;color:#0b0b0e;letter-spacing:-.01em;line-height:1}
.sz-brand-name a{color:#0b0b0e;text-decoration:none}
.sz-brand-name a:hover{color:#c2477f}
.sz-brand-tag{font-size:11px;color:#0b0b0e;font-weight:700;line-height:1;
  white-space:nowrap;letter-spacing:.02em}
/* Na úzkej obrazovke skry text vedľa ikony (pill ostane) */
@media(max-width:560px){ .sz-brand-text{display:none} }
/* Brand drží vľavo aj keď tagline naskočí */
.topbar .inner > .brand{margin-right:auto;flex:0 0 auto;justify-content:flex-start}
.topbar .brand{align-items:center}
/* Topbar — širší container aby všetko ostalo na jednom riadku */
.topbar .inner{max-width:1280px !important}
/* Active recipe name — neorez na 280px */
.topbar-active-recipe .name{max-width:none !important}

/* Editor footer — diskrétny brand line dole */
.sz-editor-footer{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:36px 0 0;padding:18px 8px 4px;border-top:1px solid #f5c2db;
  font-size:12px;color:#5b4555}
.sz-editor-footer a{color:#0b0b0e;font-weight:700;text-decoration:none;
  transition:color .15s ease}
.sz-editor-footer a:hover{color:#c2477f}
.sz-editor-footer .sep{width:1px;height:12px;background:#f5c2db;flex:0 0 auto}

/* Post-save CTA banner (Suzys kurzy) */
.sz-suzys-cta{position:fixed;bottom:24px;right:24px;z-index:9985;
  background:linear-gradient(135deg,#0b0b0e 0%,#1a1620 100%);color:#fff;border-radius:18px;
  padding:18px 22px;display:flex;align-items:center;gap:16px;
  max-width:420px;
  box-shadow:0 22px 50px -10px rgba(11,11,14,.32),0 0 0 4px rgba(255,208,237,.30),0 8px 20px rgba(255,143,194,.20);
  animation:szSuzysIn .45s cubic-bezier(.2,.9,.25,1.05)}
@keyframes szSuzysIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.sz-suzys-cta.is-leaving{animation:szSuzysOut .3s ease forwards}
@keyframes szSuzysOut{to{opacity:0;transform:translateY(20px)}}
.sz-suzys-cta .sz-cta-ico{width:46px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,#ffd0ed,#ff8fc2);
  color:#0b0b0e;display:grid;place-items:center;font-size:20px;flex:0 0 auto;
  box-shadow:0 8px 18px rgba(255,143,194,.40)}
.sz-suzys-cta .sz-cta-text{flex:1;min-width:0;line-height:1.35}
.sz-suzys-cta .sz-cta-title{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.01em}
.sz-suzys-cta .sz-cta-sub{font-size:12px;color:#ffd0ed;margin-top:3px;font-weight:500;line-height:1.45}
.sz-suzys-cta .sz-cta-actions{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.sz-suzys-cta .sz-cta-btn{appearance:none;border:0;border-radius:11px;padding:10px 14px;cursor:pointer;
  background:#fff;color:#0b0b0e;font-weight:800;font-size:12.5px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  box-shadow:0 6px 14px rgba(255,208,237,.50);
  transition:transform .12s ease,box-shadow .15s ease}
.sz-suzys-cta .sz-cta-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(255,208,237,.60)}
.sz-suzys-cta .sz-cta-dismiss{appearance:none;background:transparent;border:0;color:#cfc6bd;
  font-size:10.5px;cursor:pointer;font-weight:600;text-decoration:underline;padding:4px 0}
.sz-suzys-cta .sz-cta-dismiss:hover{color:#fff}
@media(max-width:560px){
  .sz-suzys-cta{right:12px;left:12px;max-width:none;flex-direction:column;align-items:flex-start}
  .sz-suzys-cta .sz-cta-actions{flex-direction:row;width:100%;justify-content:space-between}
}
/* =====================================================================================
   /FEATURE: SUZYS.SK MARKETING
===================================================================================== */

/* ===== EMPTY STATE (žiadny recept) — premium celistvy lem ===== */
.sz-empty{margin:18px 0;padding:38px 30px 32px;background:linear-gradient(180deg,#fff 0%,#fef0f8 100%);
  border-radius:26px;border:0;text-align:center;position:relative;overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(11,11,14,.10),
    0 0 0 6px rgba(194,71,127,.08),
    0 22px 50px -14px rgba(194,71,127,.20),
    0 8px 22px -6px rgba(11,11,14,.10)}
.sz-empty .badge{display:inline-block;font-size:10px;font-weight:800;color:#c2477f;
  background:#fef0f8;border:1px solid #f5c2db;padding:5px 12px;border-radius:999px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.sz-empty h2{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-size:28px;font-weight:800;color:#0b0b0e;margin:0;letter-spacing:-.02em;line-height:1.15}
.sz-empty h2 em{font-style:normal;background:linear-gradient(135deg,#c2477f,#ff8fc2);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sz-empty p.sub{margin:10px auto 24px;font-size:14.5px;color:#5b4555;line-height:1.55;max-width:520px}
.sz-empty .samples{display:grid;grid-template-columns:1fr;gap:14px;max-width:740px;margin:0 auto;align-items:stretch}
@media(min-width:720px){.sz-empty .samples{grid-template-columns:repeat(3,1fr)}}
.sz-sample{display:flex;flex-direction:column;background:#fff;border:0;border-radius:18px;
  padding:20px 18px 18px;cursor:pointer;text-align:left;
  transition:transform .15s ease,box-shadow .25s ease;
  box-shadow:
    0 0 0 1px rgba(11,11,14,.10),
    0 6px 18px -10px rgba(194,71,127,.22),
    0 2px 6px rgba(11,11,14,.06)}
.sz-sample:hover{transform:translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(194,71,127,.30),
    0 0 0 5px rgba(255,208,237,.32),
    0 22px 44px -12px rgba(194,71,127,.32),
    0 6px 14px rgba(11,11,14,.10)}
.sz-sample .ico{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#c2477f,#ff8fc2);
  color:#fff;display:grid;place-items:center;font-size:17px;flex:0 0 auto;
  box-shadow:0 8px 16px rgba(194,71,127,.32);margin-bottom:14px}
.sz-sample h3{margin:0;font-size:15.5px;font-weight:800;color:#0b0b0e;line-height:1.25;flex:0 0 auto;
  min-height:38px;display:flex;align-items:flex-start}
.sz-sample .desc{font-size:12.5px;color:#5b4555;margin-top:6px;line-height:1.5;flex:1 1 auto}
.sz-sample .pill{display:inline-block;align-self:flex-start;margin-top:14px;font-size:10px;font-weight:700;
  color:#c2477f;background:#fef0f8;padding:4px 10px;border-radius:999px;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid #f5c2db}
.sz-empty .skip{margin-top:22px;font-size:12.5px;color:#94748d}
.sz-empty .skip a{color:#c2477f;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ===== PROCEDURE PREVIEW CHIPS (v editori — pod tlačidlom postupu) ===== */
.sz-proc-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 4px;
  text-align:left}
@media(max-width:620px){.sz-proc-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.sz-proc-chips{grid-template-columns:1fr}}
.sz-proc-chip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #f5c2db;
  border-radius:12px;padding:9px 12px;line-height:1.2;text-align:left;
  box-shadow:0 4px 10px rgba(194,71,127,.10), 0 1px 2px rgba(11,11,14,.04);
  justify-self:stretch}
.sz-proc-chip > i{width:24px;height:24px;border-radius:7px;background:#fef0f8;color:#c2477f;
  display:grid;place-items:center;font-size:11px;flex:0 0 auto}
.sz-proc-chip-lbl{font-size:9.5px;font-weight:700;color:#94748d;letter-spacing:.12em;text-transform:uppercase;
  display:block;line-height:1.2;margin-bottom:2px}
.sz-proc-chip-val{font-size:13px;font-weight:800;color:#0b0b0e;font-variant-numeric:tabular-nums;
  display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sz-proc-chip-body{flex:1;min-width:0}
.sz-proc-divider{height:1px;background:linear-gradient(90deg,transparent,#f5c2db,transparent);
  margin:14px 0 12px;font-size:0;line-height:0}
.sz-proc-text{font-size:13px;color:#5b4555;line-height:1.65;white-space:pre-wrap;word-wrap:break-word;
  text-align:left}

/* Checkbox "Zahrnúť do PDF" — jednoriadkový */
#procedurePanel label[for="procedureInPdf"], #procedurePanel label:has(#procedureInPdf){
  white-space:nowrap
}

/* ===== SAVE PROMPT BANNER (po načítaní ukážkového receptu) ===== */
.sz-save-prompt{display:flex;align-items:center;gap:14px;padding:14px 18px;margin:0 0 16px;
  background:linear-gradient(135deg,#0b0b0e 0%,#1a1620 100%);color:#fff;
  border-radius:18px;border:1.5px solid #0b0b0e;
  box-shadow:0 18px 40px -10px rgba(11,11,14,.34),0 0 0 5px rgba(255,208,237,.30);
  opacity:0;transform:translateY(-8px);transition:opacity .35s ease, transform .35s cubic-bezier(.2,.9,.25,1.05)}
.sz-save-prompt.is-shown{opacity:1;transform:none}
.sz-save-prompt.is-leaving{opacity:0;transform:translateY(-8px)}
.sz-save-prompt .sp-ico{width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(135deg,#ffd0ed,#ff8fc2);color:#0b0b0e;display:grid;place-items:center;
  font-size:17px;box-shadow:0 6px 14px rgba(255,143,194,.40)}
.sz-save-prompt .sp-body{flex:1;min-width:0}
.sz-save-prompt .sp-title{font-size:14.5px;font-weight:700;line-height:1.3;color:#fff}
.sz-save-prompt .sp-title strong{color:#ffd0ed;font-weight:800}
.sz-save-prompt .sp-sub{font-size:12px;color:#cfc6bd;margin-top:2px;line-height:1.45}
.sz-save-prompt .sp-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sz-save-prompt .sp-skip{appearance:none;background:transparent;border:0;color:#cfc6bd;
  font-size:12.5px;cursor:pointer;font-weight:600;padding:6px 10px;text-decoration:underline}
.sz-save-prompt .sp-skip:hover{color:#ffd0ed}
.sz-save-prompt .sp-save{appearance:none;border:0;border-radius:11px;padding:10px 16px;cursor:pointer;
  background:#fff;color:#0b0b0e;font-weight:800;font-size:13.5px;
  display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 8px 18px rgba(255,208,237,.45),0 2px 4px rgba(0,0,0,.12)}
.sz-save-prompt .sp-save:hover{transform:translateY(-1px)}
@media(max-width:640px){
  .sz-save-prompt{flex-wrap:wrap}
  .sz-save-prompt .sp-actions{width:100%;justify-content:flex-end;margin-top:2px}
}

/* ===== ONBOARDING TOUR ===== */
.sz-tour-backdrop{position:fixed;inset:0;background:rgba(11,11,14,.66);z-index:9970;
  animation:szTourFade .35s ease;pointer-events:auto}
@keyframes szTourFade{from{opacity:0}to{opacity:1}}
.sz-tour-spot{position:fixed;border-radius:14px;pointer-events:none;z-index:9971;
  box-shadow:0 0 0 9999px rgba(11,11,14,.70),0 0 0 4px rgba(255,208,237,.65),0 0 30px rgba(255,208,237,.45);
  transition:all .35s cubic-bezier(.2,.9,.25,1.05)}
.sz-tour-card{position:fixed;z-index:9972;background:#fff;border-radius:18px;border:1.5px solid #0b0b0e;
  box-shadow:0 24px 60px rgba(11,11,14,.30),0 8px 22px rgba(194,71,127,.22),0 0 0 5px rgba(255,208,237,.45);
  width:min(360px,calc(100vw - 32px));padding:18px 20px;
  animation:szTourCardIn .4s cubic-bezier(.2,.9,.25,1.05)}
@keyframes szTourCardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sz-tour-card .step{font-size:10px;font-weight:800;color:#c2477f;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.sz-tour-card .step .num{font-variant-numeric:tabular-nums}
.sz-tour-card h3{margin:0;font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-size:17px;font-weight:800;color:#0b0b0e;letter-spacing:-.01em;line-height:1.25}
.sz-tour-card p{margin:8px 0 0;font-size:13px;color:#5b4555;line-height:1.55}
.sz-tour-card .acts{margin-top:16px;display:flex;align-items:center;gap:8px;justify-content:space-between}
.sz-tour-card .skip{background:transparent;border:0;color:#94748d;text-decoration:underline;
  font-size:12px;cursor:pointer;font-weight:600;padding:6px 0}
.sz-tour-card .next{appearance:none;border:0;border-radius:11px;padding:9px 18px;cursor:pointer;
  background:linear-gradient(135deg,#0b0b0e 0%,#c2477f 100%);color:#fff;font-weight:800;font-size:13px;
  display:inline-flex;align-items:center;gap:7px;box-shadow:0 10px 22px rgba(11,11,14,.28)}
.sz-tour-card .back{appearance:none;border:1px solid #f5c2db;border-radius:11px;padding:9px 14px;
  background:#fff;color:#0b0b0e;font-weight:700;font-size:13px;cursor:pointer}
.sz-tour-card .progress{display:flex;gap:5px;margin-top:14px}
.sz-tour-card .progress span{width:18px;height:3px;border-radius:2px;background:#f5c2db}
.sz-tour-card .progress span.on{background:#c2477f}
@media (prefers-reduced-motion: reduce){
  .sz-tour-backdrop,.sz-tour-spot,.sz-tour-card{animation:none;transition:none}
}

/* MODAL — pink frame + dark header gradient */
.modal__dialog {
  border: 1.5px solid var(--accent-border);
  box-shadow: 0 30px 80px rgba(11,11,14,.18), 0 6px 20px rgba(255,143,194,.20);
}

/* SELECT recipes — distinct accent */
#myRecipes:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,208,237,.55); }

/* TABLE riadky hover */
.table tbody tr:hover { background: var(--accent-pale); }
.table th { background: #fff; border-bottom: 2px solid var(--accent-border); color: var(--dark); }

/* BADGES — accent variant */
.badge.is-pink, .badge.badge-accent {
  background: var(--accent-pale);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

/* PRICES / total rows — accent text */
.price-strong, .qr-line-total { color: var(--accent) !important; }

/* TABULAR NUMERALS — stĺpce cien sa vizuálne zarovnajú */
#costTotal,
#costSummary,
.qr-line-total,
.price-strong,
td.c-price, td.c-qty,
.costVal,
.costSubtotal,
[id*="cost"],
[class*="price"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Premium "tick" effect na cene pri update */
@keyframes szTotalTick {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}
#costTotal {
  display: inline-block;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* SKELETON LOADERS — placeholder pulzujúce riadky */
@keyframes szSkelPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}
.sz-skel {
  background: linear-gradient(90deg,
    rgba(245,194,219,.40) 0%,
    rgba(255,208,237,.65) 50%,
    rgba(245,194,219,.40) 100%);
  background-size: 200% 100%;
  animation: szSkelShimmer 1.4s linear infinite, szSkelPulse 2s ease-in-out infinite;
  border-radius: 6px;
  display: inline-block;
  height: 14px;
  vertical-align: middle;
}
@keyframes szSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sz-skel-row td {
  padding: 12px 8px !important;
}
.sz-skel-row .sz-skel { width: 100%; max-width: 220px; }
@media (prefers-reduced-motion: reduce) {
  .sz-skel { animation: none; opacity: .7; }
}

/* SPINNER */
.spinner { border-top-color: var(--accent) !important; }

/* LINKS */
a:not(.btn):not(.nav-item):not(.brand) { color: var(--accent); }
a:not(.btn):not(.nav-item):not(.brand):hover { color: var(--dark); }

/* HEADINGS — solid dark for contrast on cream/pink bg */
h1, h2, h3 { color: var(--dark); }

/* INFO ICONS Suzys (FAQ-style) — pink accent */
.fa-info-circle, .fa-circle-info { color: var(--accent) !important; }

/* SCROLLBARS (webkit) */
::-webkit-scrollbar-thumb { background: var(--accent-border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }