/* ==========================================================================
   Vzdelanko – spoločný vzhľad „Instagram“ (lúče, nálepkové karty, vlnky, iskričky)
   Načítava sa ZA vloženým CSS stránky a prekrýva pôvodný „papier a ceruzka“ štýl.
   Nové prvky majú predponu ig-, staré triedy sa len preštýlujú (JS väzby ostávajú).
   ========================================================================== */
:root {
  --ig-ink: #423a2d; --ig-paper: #f4ead7; --ig-card: #fffdf7; --ig-line: #d9c6a2; --ig-muted: #6f6455;
  --ig-zlta: #f6c33b; --ig-zlta-sv: #fbe094; --ig-cervena: #c5533f; --ig-cervena-sv: #d0685a; --ig-koral: #e27561;
  --ig-tyrkys: #3f8f8a; --ig-tyrkys-sv: #579d99; --ig-modra: #2f5a8a; --ig-modra-sv: #486e98;
  --ig-olivova: #7c8a58; --ig-olivova-sv: #909d6f; --ig-fialova: #8468a5; --ig-fialova-sv: #9b7fb4; --ig-zelena: #5f8f45;
  --ig-rucne: #9a5a10;
  --ig-p-zlta: #fbe3a0; --ig-p-modra: #d6e6ec; --ig-p-ruzova: #f6d3c7; --ig-p-tyrkys: #cfe7e3; --ig-p-zelena: #d9e9c4; --ig-p-fialova: #e6ddf0; --ig-p-olivova: #e6e7d3;
  --ig-brush: 'Caveat Brush', 'Caveat', cursive; --ig-note: 'Kalam', 'Caveat', cursive;
  --ig-obrys: 3px; --ig-tien: 0 6px 0 rgba(66, 58, 45, .17); --ig-tien-hover: 0 12px 0 rgba(66, 58, 45, .17); --ig-tien-maly: 0 3px 0 rgba(66, 58, 45, .15);
  --ig-hero: var(--ig-zlta); --ig-hero-sv: var(--ig-zlta-sv); --ig-hero-text: var(--ig-ink); --ig-hero-podciark: var(--ig-cervena);
  /* pôvodné názvy premenných (používa ich auth.js, chatbot.css, platba.css a vložené CSS stránok) */
  --bg-main: #f4ead7; --bg-card: #fffdf7; --primary-color: #423a2d; --primary-hover: #2c261d; --primary-light: #efe3cc;
  --accent-color: #3f8f8a; --accent-soft: #cfe7e3; --accent-warm: #e0a41c; --text-dark: #423a2d; --text-dim: #6f6455;
  --border-color: #e3d3b3; --line-strong: #cdb98f; --graphite: #423a2d; --paper-line: #e3d5b8;
  --font-hand: 'Caveat Brush', 'Caveat', cursive;
}
html[data-ig="o-nas"], html[data-ig="moje"] { --ig-hero: var(--ig-tyrkys); --ig-hero-sv: var(--ig-tyrkys-sv); --ig-hero-text: #fff; --ig-hero-podciark: var(--ig-zlta); }
html[data-ig="materialy"] { --ig-hero: var(--ig-modra); --ig-hero-sv: var(--ig-modra-sv); --ig-hero-text: #fff; --ig-hero-podciark: var(--ig-zlta); }
html[data-ig="cennik"] { --ig-hero: var(--ig-olivova); --ig-hero-sv: var(--ig-olivova-sv); --ig-hero-text: #fff; --ig-hero-podciark: var(--ig-zlta); }
html[data-ig="kariera"] { --ig-hero: var(--ig-cervena); --ig-hero-sv: var(--ig-cervena-sv); --ig-hero-text: #fff; --ig-hero-podciark: var(--ig-zlta); }
html[data-ig="sukromie"] { --ig-hero: var(--ig-fialova); --ig-hero-sv: var(--ig-fialova-sv); --ig-hero-text: #fff; --ig-hero-podciark: var(--ig-zlta); }

/* ---------- základ ---------- */
html[data-ig] body { background-color: var(--ig-paper); overflow-x: clip; }
html[data-ig] body::before { opacity: 1; animation: none; background-image: radial-gradient(rgba(66, 58, 45, .075) 1.5px, transparent 1.6px); }
html[data-ig] body::after { display: none; }
html[data-ig] .doodle, html[data-ig] .paper-grain { display: none !important; }
html[data-ig] :focus-visible { outline: 3px solid var(--ig-modra); outline-offset: 3px; }
html[data-ig] h1, html[data-ig] h2, html[data-ig] h3 { text-wrap: balance; }
html[data-ig] .text-gradient { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; padding: 0 !important; }

/* ---------- iskričky a vlnky ---------- */
.ig-iskra { position: absolute; width: var(--s, 26px); height: var(--s, 26px); fill: var(--c, #fffdf7); stroke: var(--ig-ink); stroke-width: 1.5; stroke-linejoin: round;
  animation: ig-iskrenie var(--t, 3.6s) ease-in-out var(--o, 0s) infinite alternate; pointer-events: none; z-index: 0; }
@keyframes ig-iskrenie { from { scale: .9; rotate: -5deg; opacity: .85; } to { scale: 1.07; rotate: 8deg; opacity: 1; } }
.ig-vlna { position: absolute; left: 0; width: 100%; height: clamp(28px, 4.4vw, 58px); pointer-events: none; display: block; }
.ig-vlna--dole { bottom: -1px; }
.ig-vlna--hore { top: -1px; transform: scaleY(-1); }
.ig-vlna .vypln { fill: var(--ig-vlna-vypln, var(--ig-paper)); }
.ig-vlna .ciara { fill: none; stroke: var(--ig-ink); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- navigácia ---------- */
html[data-ig] nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: var(--ig-obrys) solid transparent; box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; box-sizing: border-box; }
html[data-ig] nav.ig-zrolovane, html[data-ig] nav.ig-menu-otvorene { background: var(--ig-card); border-bottom-color: var(--ig-ink); box-shadow: 0 5px 0 rgba(66, 58, 45, .14); }
html[data-ig] .logo { font-family: var(--ig-brush); font-weight: 400; font-size: 2.1rem; color: var(--ig-hero-text); letter-spacing: .01em; transition: color .25s ease; }
html[data-ig] nav.ig-zrolovane .logo, html[data-ig] nav.ig-menu-otvorene .logo { color: var(--ig-ink); }
html[data-ig] .nav-logo { height: 46px; }
html[data-ig] .nav-links a { color: var(--ig-hero-text); font-weight: 700; }
html[data-ig] nav.ig-zrolovane .nav-links a, html[data-ig] nav.ig-menu-otvorene .nav-links a { color: var(--ig-ink); }
html[data-ig] .nav-links a:hover { color: inherit; }
html[data-ig] .nav-links a:not(.btn-nav)::after { height: 3px; bottom: -3px; border-radius: 3px; background: currentColor; }
html[data-ig] .nav-links a.btn-nav, html[data-ig] .btn-nav-mobile { background: var(--ig-zlta); color: var(--ig-ink) !important; border: var(--ig-obrys) solid var(--ig-ink); border-radius: 999px;
  font-weight: 800; padding: 10px 24px; box-shadow: 0 4px 0 var(--ig-ink); transition: translate .16s ease, box-shadow .16s ease; }
html[data-ig] .nav-links a.btn-nav:hover, html[data-ig] .btn-nav-mobile:hover { background: var(--ig-zlta); transform: none; translate: 0 2px; box-shadow: 0 2px 0 var(--ig-ink); }
html[data-ig] .hamburger { background: var(--ig-card); border: var(--ig-obrys) solid var(--ig-ink); border-radius: 14px; color: var(--ig-ink); box-shadow: 0 4px 0 var(--ig-ink); }
html[data-ig] .hamburger:hover { color: var(--ig-ink); }
html[data-ig] .auth-profile-toggle { border: 2.5px solid var(--ig-ink) !important; }
@media (max-width: 768px) {
  html[data-ig] .nav-right-wrap { border-top: 2px dashed var(--ig-line); }
  html[data-ig] .logo { font-size: 1.85rem; }
  html[data-ig] .nav-logo { height: 40px; }
  html[data-ig] .btn-nav-mobile { padding: 8px 18px; min-height: 44px; }
}

/* ---------- hero podstránok: farebné lúče, biely nadpis, vlnka ---------- */
html[data-ig] header:not(.ig-hero) { max-width: none; width: 100%; box-sizing: border-box; position: relative; isolation: isolate; overflow: hidden;
  margin: calc(var(--ig-nav-h, 76px) * -1) 0 clamp(26px, 4vw, 44px); padding: calc(var(--ig-nav-h, 76px) + clamp(24px, 4vw, 48px)) 20px clamp(64px, 8.5vw, 112px);
  background: var(--ig-hero); color: var(--ig-hero-text); text-align: center; }
html[data-ig] header:not(.ig-hero)::before { content: ""; position: absolute; left: 50%; top: 58%; width: var(--ig-v, max(240vw, 1900px)); aspect-ratio: 1; translate: -50% -50%; z-index: -2;
  background: repeating-conic-gradient(from 0deg, var(--ig-hero-sv) 0deg 8.82deg, var(--ig-hero) 9deg 17.82deg, var(--ig-hero-sv) 18deg); animation: ig-tocenie 220s linear infinite; }
html[data-ig] header:not(.ig-hero)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23f4ead7' d='M0 34C120 10 260 58 420 36S720 6 900 30 1240 62 1440 26V70H0Z'/%3E%3Cpath fill='none' stroke='%23423a2d' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke' d='M0 34C120 10 260 58 420 36S720 6 900 30 1240 62 1440 26'/%3E%3C/svg%3E") left bottom -1px / 100% clamp(28px, 4.4vw, 58px) no-repeat,
    radial-gradient(rgba(255, 255, 255, .26) 1.6px, transparent 1.7px) 0 0 / 26px 26px; }
@keyframes ig-tocenie { to { rotate: 360deg; } }
html[data-ig] header:not(.ig-hero) .hero-wrapper { margin-bottom: 0; position: relative; }
html[data-ig] header:not(.ig-hero) h1, html[data-ig] header:not(.ig-hero) .hero-title { font-family: var(--ig-brush); font-weight: 400; color: var(--ig-hero-text); font-size: clamp(3rem, 8.4vw, 5.6rem); line-height: 1; margin: 0; letter-spacing: .005em; text-shadow: none; }
html[data-ig] header:not(.ig-hero) .hero-title .word { animation: none; clip-path: none; line-height: 1; }
html[data-ig] header:not(.ig-hero) p, html[data-ig] header:not(.ig-hero) .hero-desc { color: var(--ig-hero-text); }
html[data-ig] header .sketch-underline .sketch-path { stroke: var(--ig-hero-podciark); }

/* ---------- podčiarknutia a nadpisy sekcií ---------- */
html[data-ig] .sketch-underline { -webkit-mask-image: none; mask-image: none; filter: none; }
html[data-ig] .sketch-path { stroke: var(--ig-zlta); stroke-width: 7; }
html[data-ig] .sketch-path.is-accent { stroke: var(--ig-koral); }
html[data-ig] .section-head h2, html[data-ig] .mat-head h2, html[data-ig] .faq-head h2, html[data-ig] .form-header h2, html[data-ig] .section > h2 {
  font-family: var(--ig-brush); font-weight: 400; color: var(--ig-ink); letter-spacing: .005em; }

/* ---------- nálepkové karty (pôvodné triedy) ---------- */
html[data-ig] .card, html[data-ig] .feature-item, html[data-ig] .pricing-card, html[data-ig] .faq-item, html[data-ig] .testimonial-card, html[data-ig] .form-container,
html[data-ig] .criteria-box, html[data-ig] .highlight-box, html[data-ig] .guarantee-banner, html[data-ig] .plan-option-card, html[data-ig] .subject-card, html[data-ig] .legal-content-wrap,
html[data-ig] .parent-box, html[data-ig] .konz-box, html[data-ig] .step, html[data-ig] .tim-karta, html[data-ig] .subject-link, html[data-ig] .how-it-works-accordion {
  background-color: var(--ig-card); border: var(--ig-obrys) solid var(--ig-ink); border-radius: 22px; box-shadow: var(--ig-tien); }
@media (hover: hover) {
  html[data-ig] .card:hover, html[data-ig] .feature-item:hover, html[data-ig] .pricing-card:hover, html[data-ig] .testimonial-card:hover, html[data-ig] .tim-karta:hover,
  html[data-ig] .subject-link:hover, html[data-ig] .step:hover { transform: translateY(-6px); box-shadow: var(--ig-tien-hover); border-color: var(--ig-ink); }
}
html[data-ig] .feature-icon, html[data-ig] .card-icon { border: 2.5px solid var(--ig-ink); border-radius: 50%; background: var(--ig-p-zlta); color: var(--ig-ink); box-shadow: var(--ig-tien-maly); }

/* ---------- tlačidlá ---------- */
html[data-ig] .btn-hero, html[data-ig] .btn-pricing, html[data-ig] .empty-btn, html[data-ig] .payment-btn, html[data-ig] .ig-btn {
  background: var(--ig-zlta); color: var(--ig-ink) !important; border: var(--ig-obrys) solid var(--ig-ink); border-radius: 999px; font-weight: 800; text-decoration: none;
  box-shadow: 0 6px 0 var(--ig-ink); transition: translate .16s ease, box-shadow .16s ease; animation: none; cursor: pointer; }
html[data-ig] .btn-hero:hover, html[data-ig] .btn-pricing:hover, html[data-ig] .empty-btn:hover, html[data-ig] .payment-btn:hover, html[data-ig] .ig-btn:hover {
  background: var(--ig-zlta); transform: none; translate: 0 2px; box-shadow: 0 4px 0 var(--ig-ink); }
html[data-ig] .btn-hero:active, html[data-ig] .btn-pricing:active, html[data-ig] .empty-btn:active, html[data-ig] .payment-btn:active, html[data-ig] .ig-btn:active { translate: 0 6px; box-shadow: 0 0 0 var(--ig-ink); }
html[data-ig] .btn-pricing-outline, html[data-ig] .empty-btn, html[data-ig] .ig-btn--biela { background: var(--ig-card); }
html[data-ig] .btn-pricing-outline:hover, html[data-ig] .empty-btn:hover, html[data-ig] .ig-btn--biela:hover { background: var(--ig-card); }
.ig-btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: 800 18px/1 var(--font-body); padding: 17px 30px; }
.ig-btn svg { width: 22px; height: 22px; transition: translate .25s; }
.ig-btn:hover svg { translate: 4px 0; }
.ig-btn--mala { font-size: 15px; padding: 11px 20px; box-shadow: 0 4px 0 var(--ig-ink) !important; }

/* ---------- pilulky, štítky ---------- */
.ig-pilulka { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--font-body); color: var(--ig-ink); background: var(--ig-card); border: 2.5px solid var(--ig-ink);
  border-radius: 999px; padding: 8px 15px; box-shadow: var(--ig-tien-maly); text-decoration: none; }
.ig-pilulka--zlta { background: var(--ig-zlta); }
.ig-stitok { display: inline-block; font: 700 clamp(17px, 5.2vw, 22px)/1 var(--ig-note); font-style: italic; background: var(--ig-card); color: var(--ig-ink); border: var(--ig-obrys) solid var(--ig-ink);
  border-radius: 12px; padding: 7px 16px 5px; box-shadow: var(--ig-tien); rotate: 2deg; }
.ig-stitok--hviezdy { font-style: normal; color: var(--ig-zlta); -webkit-text-stroke: 1.2px var(--ig-ink); letter-spacing: 3px; padding: 6px 14px 6px 17px; font-size: 21px; }
.ig-stitok--zlty { background: var(--ig-zlta); display: inline-flex; align-items: center; gap: 8px; }
.ig-stitok--zlty svg { width: 24px; height: 24px; }

/* ---------- pätička ---------- */
html[data-ig] footer { position: relative; width: 100%; max-width: none; box-sizing: border-box; margin-top: clamp(30px, 5vw, 60px); padding: clamp(78px, 10vw, 116px) 20px 90px; background: var(--ig-p-zlta); overflow: hidden; }
html[data-ig] footer > .glass-field { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
html[data-ig] footer .footer-logo { height: 70px; width: auto; }
html[data-ig] footer .contact-link { background: var(--ig-card); border: 2.5px solid var(--ig-ink); border-radius: 999px; padding: 10px 18px; color: var(--ig-ink); font-weight: 700; box-shadow: var(--ig-tien-maly); text-decoration: none; }
html[data-ig] footer a.contact-link:hover { transform: none; translate: 0 -2px; color: var(--ig-ink); }
html[data-ig] footer .footer-divider { display: none; }
html[data-ig] footer .footer-social-btn-only { background: var(--ig-zlta); border: 2.5px solid var(--ig-ink); color: var(--ig-ink); box-shadow: var(--ig-tien-maly); }
html[data-ig] footer .legal-link, html[data-ig] footer .footer-copyright, html[data-ig] footer .footer-operator { color: var(--ig-ink) !important; }
html[data-ig] footer .legal-link { font-weight: 700; }
html[data-ig] footer .footer-copyright { opacity: .82; }

/* ---------- objavovanie nových prvkov ---------- */
html.ig-js .ig-objav { opacity: 0; }
html.ig-js .ig-objav.ig-videt { opacity: 1; animation: ig-objav .7s cubic-bezier(.2, 1.25, .35, 1) var(--d, 0s) backwards; }
@keyframes ig-objav { from { opacity: 0; translate: 0 28px; scale: .95; } to { opacity: 1; translate: 0 0; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  html[data-ig] *, html[data-ig] *::before, html[data-ig] *::after { animation: none !important; transition: none !important; }
  html.ig-js .ig-objav { opacity: 1; }
}

/* ==========================================================================
   PODSTRÁNKY – spoločné doladenia
   ========================================================================== */
html[data-ig] .text-gradient { margin: 0 !important; display: inline !important; }
html[data-ig] header:not(.ig-hero) .sketch-underline { display: block; margin: 8px auto 0 !important; width: min(340px, 62%) !important; height: 16px !important; }
html[data-ig] header:not(.ig-hero) .header-subtitle, html[data-ig] header:not(.ig-hero) .lead-text, html[data-ig] header:not(.ig-hero) .hero-desc p {
  color: var(--ig-hero-text); font-family: var(--ig-note); font-style: italic; font-weight: 700; font-size: clamp(1.17rem, 2.2vw, 1.3rem); line-height: 1.45; max-width: 640px; margin: 16px auto 0; opacity: 1; }
html[data-ig] header:not(.ig-hero) .hero-desc { padding: 0; margin: 0 auto; }
html[data-ig] header:not(.ig-hero) .hero-desc::before, html[data-ig] header:not(.ig-hero) .hero-desc::after { display: none; }
html[data-ig] header:not(.ig-hero) .hero-logo { max-width: 104px; margin-bottom: 8px; filter: none; animation: ig-plavanie 4.6s ease-in-out infinite; }
@keyframes ig-plavanie { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 -7px; rotate: 1.5deg; } }

/* sekcie: obsah priamo na papieri, nadpisy na stred */
html[data-ig="o-nas"] .section, html[data-ig="kariera"] .section, html[data-ig="cennik"] .section, html[data-ig="materialy"] .section {
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: clamp(18px, 3vw, 34px) 0; margin-bottom: clamp(18px, 3vw, 30px); }
html[data-ig] .section-head, html[data-ig] .mat-head, html[data-ig] .faq-head, html[data-ig] .form-header { text-align: center; }
html[data-ig] .section-head h2, html[data-ig] .mat-head h2, html[data-ig] .faq-head h2, html[data-ig] .faq-title { font-size: clamp(2.5rem, 5.6vw, 3.6rem); line-height: 1.02; }
html[data-ig] .section-head .sketch-underline, html[data-ig] .mat-head .sketch-underline, html[data-ig] .faq-head .sketch-underline { margin-left: auto; margin-right: auto; display: block; }
html[data-ig] .section-sub { text-align: center; color: var(--ig-rucne); font-family: var(--ig-note); font-style: italic; font-weight: 700; }
html[data-ig] .card h3, html[data-ig] .feature-item h3, html[data-ig] .card-name, html[data-ig] .plan-name, html[data-ig] .guarantee-banner h3, html[data-ig] .faq-title,
html[data-ig] .cta-section h2, html[data-ig] .cta-inline h3 { font-family: var(--ig-brush); font-weight: 400; color: var(--ig-ink); letter-spacing: .005em; }

/* tlačidlá: jednotné písmo */
html[data-ig] .btn-hero, html[data-ig] .btn-pricing, html[data-ig] .btn-submit, html[data-ig] .payment-btn, html[data-ig] .empty-btn, html[data-ig] .btn-view-payment, html[data-ig] .btn-res-secondary {
  font-family: var(--font-body); font-weight: 800; font-style: normal; letter-spacing: 0; }
html[data-ig] .btn-submit, html[data-ig] .btn-view-payment, html[data-ig] #contact-form button[type="submit"] {
  background: var(--ig-zlta); color: var(--ig-ink) !important; border: var(--ig-obrys) solid var(--ig-ink); border-radius: 999px; box-shadow: 0 6px 0 var(--ig-ink);
  transition: translate .16s ease, box-shadow .16s ease; cursor: pointer; }
html[data-ig] .btn-submit:hover, html[data-ig] .btn-view-payment:hover, html[data-ig] #contact-form button[type="submit"]:hover { background: var(--ig-zlta); transform: none; translate: 0 2px; box-shadow: 0 4px 0 var(--ig-ink); }
html[data-ig] .btn-res-secondary { background: var(--ig-card); color: var(--ig-ink) !important; border: 2.5px solid var(--ig-ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ig-ink); }
html[data-ig] .btn-res-secondary:hover { background: var(--ig-card); transform: none; translate: 0 2px; box-shadow: 0 2px 0 var(--ig-ink); }

/* formulárové polia */
html[data-ig] body input:not([type="checkbox"]):not([type="radio"]), html[data-ig] body textarea, html[data-ig] body select { border: 2px solid var(--ig-line); border-radius: 12px; background-color: var(--ig-paper); color: var(--ig-ink); }
html[data-ig] body input:not([type="checkbox"]):not([type="radio"]):focus, html[data-ig] body textarea:focus, html[data-ig] body select:focus { border-color: var(--ig-ink); background-color: #fff; box-shadow: none; }
html[data-ig] input[type="checkbox"] { accent-color: var(--ig-ink); }

/* výzvy na konci sekcií */
html[data-ig] .cta-section, html[data-ig] .cta-inline { background: var(--ig-p-zlta); border: var(--ig-obrys) solid var(--ig-ink); border-radius: 26px; box-shadow: var(--ig-tien); padding: clamp(24px, 4vw, 40px) 22px; text-align: center; }
html[data-ig] .cta-section h2, html[data-ig] .cta-inline h3 { font-size: clamp(2.2rem, 5vw, 3.2rem); display: block; margin: 0 0 8px; }
html[data-ig] .cta-fineprint { color: var(--ig-muted); font-weight: 700; }

/* štítky a značky */
html[data-ig] .tag, html[data-ig] .card-role, html[data-ig] .res-category-tag, html[data-ig] .res-variant-tag { border: 2px solid var(--ig-ink); border-radius: 999px; background: var(--ig-card); color: var(--ig-ink); font-weight: 700; }
html[data-ig] .card-role { background: var(--ig-p-zlta); }
html[data-ig] .card-portrait, html[data-ig] .modal-icon img { border: var(--ig-obrys) solid var(--ig-ink); }

/* filter lektorov */
html[data-ig] .filter-container { background: var(--ig-card); border: var(--ig-obrys) solid var(--ig-ink); border-radius: 999px; box-shadow: var(--ig-tien-maly); }
html[data-ig] .filter-glider { background: var(--ig-zlta); border: 2.5px solid var(--ig-ink); border-radius: 999px; box-shadow: none; }
html[data-ig] .filter-chip { font-family: var(--font-body); font-style: normal; font-weight: 700; color: var(--ig-ink); }
html[data-ig] .filter-chip.active { color: var(--ig-ink); }

/* modálne okná */
html[data-ig] .modal-content, html[data-ig] .success-modal, html[data-ig] .testimonial-overlay .overlay-content, html[data-ig] .auth-modal { border: var(--ig-obrys) solid var(--ig-ink) !important; border-radius: 26px !important; box-shadow: 0 10px 0 rgba(66, 58, 45, .25) !important; background-color: var(--ig-card); }
html[data-ig] .modal-close, html[data-ig] .close-success, html[data-ig] .close-modal, html[data-ig] .close-overlay { border: 2.5px solid var(--ig-ink); border-radius: 50%; background: var(--ig-card); color: var(--ig-ink); }

/* cookie lišta (meranie.js) */
html[data-ig] #vz-suhlas { border: var(--ig-obrys) solid var(--ig-ink) !important; border-radius: 20px !important; box-shadow: 0 6px 0 rgba(66, 58, 45, .2) !important; background: var(--ig-card) !important; }
html[data-ig] #vz-suhlas button { border: 2.5px solid var(--ig-ink) !important; border-radius: 999px !important; background: var(--ig-card) !important; color: var(--ig-ink) !important; font-weight: 800 !important; box-shadow: 0 3px 0 var(--ig-ink) !important; }
html[data-ig] #vz-suhlas button:last-of-type { background: var(--ig-zlta) !important; }

/* ==========================================================================
   CENNÍK
   ========================================================================== */
html[data-ig="cennik"] .pricing-card { padding-top: 34px; }
html[data-ig="cennik"] .pricing-card.featured { background-color: var(--ig-p-zlta); }
html[data-ig="cennik"] .card-badge, html[data-ig="cennik"] .most-popular-badge, html[data-ig="cennik"] .save-badge { background: var(--ig-card); color: var(--ig-ink); border: 2.5px solid var(--ig-ink); border-radius: 12px; font-family: var(--ig-note); font-style: italic; font-weight: 700; box-shadow: var(--ig-tien-maly); rotate: -2deg; }
html[data-ig="cennik"] .pricing-card.featured .card-badge { background: var(--ig-cervena); color: #fff; }
html[data-ig="cennik"] .plan-icon { border: 2.5px solid var(--ig-ink); border-radius: 50%; background: var(--ig-p-tyrkys); color: var(--ig-ink); box-shadow: var(--ig-tien-maly); transform: none; }
html[data-ig="cennik"] .pricing-card.featured .plan-icon { background: var(--ig-card); }
html[data-ig="cennik"] .plan-name { font-size: 2.2rem; }
html[data-ig="cennik"] .price-amount { font-family: var(--ig-brush); font-weight: 400; color: var(--ig-ink); }
html[data-ig="cennik"] .pricing-card .divider { border-top: 2px dashed var(--ig-line); background: none; height: 0; }
html[data-ig="cennik"] .pricing-feature .lucide, html[data-ig="cennik"] .pricing-features .lucide { color: var(--ig-zelena); }
html[data-ig="cennik"] .guarantee-banner { background-color: var(--ig-p-tyrkys); }
html[data-ig="cennik"] .guarantee-banner h3 { font-size: 2.2rem; }
html[data-ig="cennik"] .faq-item { box-shadow: var(--ig-tien-maly); border-radius: 16px; }
html[data-ig="cennik"] .faq-q { font-weight: 800; color: var(--ig-ink); }

/* ==========================================================================
   O NÁS
   ========================================================================== */
html[data-ig="o-nas"] .lecturer-card { cursor: pointer; }
html[data-ig="o-nas"] .card-name { font-size: 1.9rem; }
html[data-ig="o-nas"] .story-text { background: var(--ig-card); border: var(--ig-obrys) solid var(--ig-ink); border-radius: 22px; box-shadow: var(--ig-tien); padding: clamp(20px, 3.4vw, 36px); }
html[data-ig="o-nas"] .highlight-box { background-color: var(--ig-p-tyrkys); box-shadow: var(--ig-tien-maly); font-family: var(--ig-note); }
html[data-ig="o-nas"] .cta-inline { margin-top: 26px; }

/* ==========================================================================
   KARIÉRA + OCHRANA SÚKROMIA
   ========================================================================== */
html[data-ig="kariera"] .form-container { background-color: var(--ig-p-zlta); padding: clamp(20px, 3.6vw, 40px); max-width: 640px; margin: 0 auto; }
html[data-ig="kariera"] .form-header h2 { font-size: clamp(2.2rem, 5vw, 3rem); display: block; }
html[data-ig="kariera"] .criteria-box { background-color: var(--ig-p-ruzova); padding: clamp(18px, 3vw, 30px); }
html[data-ig="kariera"] .form-group label { font-weight: 800; color: var(--ig-ink); }
html[data-ig="kariera"] .form-container input, html[data-ig="kariera"] .form-container textarea, html[data-ig="kariera"] .form-container select { background-color: var(--ig-card) !important; }
html[data-ig="sukromie"] .legal-content-wrap { padding: clamp(22px, 4vw, 48px); }
html[data-ig="sukromie"] .legal-content-wrap h2 { font-family: var(--ig-brush); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--ig-ink); display: block; }
html[data-ig="sukromie"] .legal-content-wrap a { color: var(--ig-ink); font-weight: 700; }

/* ==========================================================================
   REZERVÁCIA – kroky ako nálepkové karty, voľby ako ľahšie dlaždice
   ========================================================================== */
html[data-ig="rezervacia"] .section { background: var(--ig-card); border: var(--ig-obrys) solid var(--ig-ink); border-radius: 26px; box-shadow: var(--ig-tien); }
html[data-ig="rezervacia"] .section h2 { font-family: var(--ig-brush); font-weight: 400; font-size: clamp(2rem, 4.6vw, 2.8rem); color: var(--ig-ink); }
html[data-ig="rezervacia"] #info-section { background: none; border: 0; box-shadow: none; padding: 0; }
html[data-ig="rezervacia"] .how-it-works-accordion { background-color: var(--ig-p-zlta); box-shadow: var(--ig-tien-maly); }
html[data-ig="rezervacia"] .how-it-works-summary { font-family: var(--ig-brush); font-weight: 400; color: var(--ig-ink); }
html[data-ig="rezervacia"] .plan-option-card, html[data-ig="rezervacia"] .subject-card, html[data-ig="rezervacia"] .btn-cat, html[data-ig="rezervacia"] .slot-day, html[data-ig="rezervacia"] .slot-hour {
  background-color: var(--ig-card); border: 2.5px solid var(--ig-ink); border-radius: 16px; box-shadow: var(--ig-tien-maly); color: var(--ig-ink);
  transition: translate .15s ease, box-shadow .15s ease, background-color .15s ease; }
html[data-ig="rezervacia"] .plan-option-card:hover, html[data-ig="rezervacia"] .subject-card:hover, html[data-ig="rezervacia"] .btn-cat:hover, html[data-ig="rezervacia"] .slot-day:hover, html[data-ig="rezervacia"] .slot-hour:hover {
  transform: none; translate: 0 -3px; box-shadow: 0 6px 0 rgba(66, 58, 45, .17); border-color: var(--ig-ink); }
html[data-ig="rezervacia"] .plan-option-card.active, html[data-ig="rezervacia"] .plan-option-card.selected, html[data-ig="rezervacia"] .subject-card.active, html[data-ig="rezervacia"] .subject-card.selected,
html[data-ig="rezervacia"] .btn-cat.active, html[data-ig="rezervacia"] .btn-cat.selected, html[data-ig="rezervacia"] .slot-day.active, html[data-ig="rezervacia"] .slot-day.selected,
html[data-ig="rezervacia"] .slot-hour.active, html[data-ig="rezervacia"] .slot-hour.selected {
  background-color: var(--ig-zlta); color: var(--ig-ink); border-color: var(--ig-ink); box-shadow: 0 4px 0 var(--ig-ink); }
html[data-ig="rezervacia"] .plan-option-name, html[data-ig="rezervacia"] .subject-card-title { font-family: var(--ig-brush); font-weight: 400; color: var(--ig-ink); }
html[data-ig="rezervacia"] .plan-option-price { color: var(--ig-cervena); font-weight: 800; }
html[data-ig="rezervacia"] .plan-option-icon, html[data-ig="rezervacia"] .subject-card-icon { border: 2.5px solid var(--ig-ink); border-radius: 50%; background: var(--ig-p-zlta); color: var(--ig-ink); transform: none; }
html[data-ig="rezervacia"] .subject-card-new { background: var(--ig-cervena); color: #fff; border: 2px solid var(--ig-ink); border-radius: 999px; font-family: var(--ig-note); font-style: italic; }
html[data-ig="rezervacia"] .inner-pill { border: 2px solid var(--ig-ink); border-radius: 999px; }
html[data-ig="rezervacia"] .inner-pill.active { background: var(--ig-ink); color: #fff; }
html[data-ig="rezervacia"] .suhrn { background: var(--ig-p-zlta); border: 2.5px solid var(--ig-ink); border-radius: 18px; }
html[data-ig="rezervacia"] .slot-summary { font-weight: 700; }
html[data-ig="rezervacia"] .slot-skip { color: var(--ig-rucne); font-weight: 700; }
html[data-ig] .status-badge { border: 2px solid var(--ig-ink); border-radius: 999px; font-weight: 800; }
html[data-ig] .payment-summary, html[data-ig] .payment-slot { border: 2.5px solid var(--ig-ink); border-radius: 16px; background: var(--ig-p-zlta); }

/* ==========================================================================
   MOJE REZERVÁCIE
   ========================================================================== */
html[data-ig="moje"] .user-banner { background: var(--ig-card); color: var(--ig-ink); border: 2.5px solid var(--ig-ink); border-radius: 999px; box-shadow: var(--ig-tien-maly); }
html[data-ig="moje"] .reservation-card, html[data-ig="moje"] .empty-state { background: var(--ig-card); border: var(--ig-obrys) solid var(--ig-ink); border-radius: 22px; box-shadow: var(--ig-tien); }
html[data-ig="moje"] .empty-state h2, html[data-ig="moje"] .empty-state h3, html[data-ig="moje"] .res-subject { font-family: var(--ig-brush); font-weight: 400; color: var(--ig-ink); }
html[data-ig="moje"] .res-icon { border: 2.5px solid var(--ig-ink); border-radius: 50%; background: var(--ig-p-zlta); color: var(--ig-ink); }
html[data-ig="moje"] .res-price-badge { border: 2.5px solid var(--ig-ink); border-radius: 12px; background: var(--ig-zlta); color: var(--ig-ink); font-family: var(--ig-brush); font-weight: 400; }
html[data-ig="moje"] .res-next-step { background: var(--ig-p-tyrkys); border: 2.5px solid var(--ig-ink); border-radius: 16px; }
html[data-ig="moje"] .res-msg { background: var(--ig-paper); border: 2px dashed var(--ig-line); border-radius: 14px; }
html[data-ig="moje"] .empty-actions a, html[data-ig="moje"] .empty-actions button { border: 2.5px solid var(--ig-ink) !important; border-radius: 999px !important; font-weight: 800; box-shadow: 0 4px 0 var(--ig-ink); background: var(--ig-card); color: var(--ig-ink) !important; }
html[data-ig="moje"] .empty-actions a:first-child, html[data-ig="moje"] .empty-actions button:first-child { background: var(--ig-zlta); }

@media (max-width: 768px) {
  html[data-ig] .section-head h2, html[data-ig] .mat-head h2, html[data-ig] .faq-head h2 { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  html[data-ig] header:not(.ig-hero) { padding-left: 16px; padding-right: 16px; }
}

/* doladenia po prvej kontrole */
html[data-ig] header:not(.ig-hero) h1 .text-normal { color: inherit; }
html[data-ig="rezervacia"] .how-it-works-accordion { padding: 14px 22px; box-sizing: border-box; }
html[data-ig="rezervacia"] .plan-option-name { font-size: 1.75rem; line-height: 1; }
html[data-ig="rezervacia"] .subject-card-title { font-size: 1.6rem; }
html[data-ig="rezervacia"] .plan-option-card.selected .plan-option-icon, html[data-ig="rezervacia"] .subject-card.selected .subject-card-icon { background: var(--ig-card); color: var(--ig-ink); border-color: var(--ig-ink); }

/* ==========================================================================
   VYLEPŠENIA: štítok a ilustrácia v hero podstránok, pestré ikonky, jemné natočenie kariet
   ========================================================================== */
html[data-ig] #contact-form button[type="submit"], html[data-ig] .konz-odoslat { font-family: var(--font-body); font-weight: 800; font-style: normal; }
.ig-hero-stitok { margin: 0 auto 14px; rotate: -3deg; font-size: 20px; animation: ig-vyskoc .6s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
@keyframes ig-vyskoc { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
.ig-hero-ilu { position: absolute; right: max(3%, calc(50% - 580px)); top: calc(var(--ig-nav-h, 76px) + 30px); width: 150px; height: 150px; border-radius: 50%; background: var(--ig-card);
  border: 4px solid var(--ig-ink); box-shadow: 0 9px 0 rgba(66, 58, 45, .2); display: grid; place-items: center; rotate: 6deg; animation: ig-vyskoc .7s cubic-bezier(.2, 1.6, .4, 1) .35s both; }
.ig-hero-ilu::before { content: ""; position: absolute; inset: 9px; border: 2.5px dashed #e2d2b0; border-radius: 50%; }
.ig-hero-ilu > svg:not(.ig-iskra) { width: 62%; height: auto; animation: ig-plavanie 5s ease-in-out infinite; }
@media (max-width: 1200px) { .ig-hero-ilu { display: none; } }

/* pestré kruhy ikon a jemné natočenie kariet v mriežkach */
html[data-ig] .grid > .card:nth-child(6n+1) .card-icon, html[data-ig] .categories-grid > a:nth-child(6n+1) .card-icon { background: var(--ig-p-modra); }
html[data-ig] .grid > .card:nth-child(6n+2) .card-icon, html[data-ig] .categories-grid > a:nth-child(6n+2) .card-icon { background: var(--ig-p-ruzova); }
html[data-ig] .grid > .card:nth-child(6n+3) .card-icon, html[data-ig] .categories-grid > a:nth-child(6n+3) .card-icon { background: var(--ig-p-tyrkys); }
html[data-ig] .grid > .card:nth-child(6n+4) .card-icon, html[data-ig] .categories-grid > a:nth-child(6n+4) .card-icon { background: var(--ig-p-zelena); }
html[data-ig] .grid > .card:nth-child(6n+5) .card-icon, html[data-ig] .categories-grid > a:nth-child(6n+5) .card-icon { background: var(--ig-p-fialova); }
html[data-ig] .grid > .card:nth-child(3n+1), html[data-ig] .categories-grid > a:nth-child(3n+1) .card, html[data-ig="cennik"] .pricing-card:nth-child(3n+1) { rotate: -.7deg; }
html[data-ig] .grid > .card:nth-child(3n+2), html[data-ig] .categories-grid > a:nth-child(3n+2) .card { rotate: .5deg; }
html[data-ig] .grid > .card:nth-child(3n), html[data-ig] .categories-grid > a:nth-child(3n) .card, html[data-ig="cennik"] .pricing-card:nth-child(3n) { rotate: .7deg; }
@media (hover: hover) { html[data-ig] .grid > .card:hover, html[data-ig] .categories-grid > a:hover .card, html[data-ig="cennik"] .pricing-card:hover { rotate: 0deg; } }
html[data-ig] .card, html[data-ig] .pricing-card { transition: transform .28s cubic-bezier(.2, 1.3, .4, 1), rotate .28s ease, box-shadow .28s ease; }
@media (hover: hover) { html[data-ig] .card:hover .card-icon svg, html[data-ig] .pricing-card:hover .plan-icon svg { animation: ig-kyvanie .7s ease-in-out; } }
@keyframes ig-kyvanie { 0%, 100% { rotate: 0deg; } 25% { rotate: -10deg; } 60% { rotate: 8deg; } }

@media (max-width: 768px) {
  html[data-ig] .filter-container { border-radius: 22px; }
}

/* aktuálna stránka v navigácii */
html[data-ig] .nav-links a[aria-current="page"]:not(.btn-nav)::after { transform: scaleX(1); }
@media (max-width: 768px) {
  html[data-ig] .nav-links a[aria-current="page"]:not(.btn-nav)::after { display: none; }
  html[data-ig] .nav-links a[aria-current="page"]:not(.btn-nav) { background: var(--ig-p-zlta); border-radius: 12px; }
}

/* ==========================================================================
   OPRAVY PO NEZÁVISLEJ KONTROLE (kolo 1)
   ========================================================================== */
/* menu profilu a mobilné položky účtu: vždy tmavý text (predtým biele na bielom) */
html[data-ig] .nav-links .auth-dropdown-menu a, html[data-ig] .nav-links .auth-dropdown-item, html[data-ig] .nav-links .auth-dropdown-item-mobile { color: var(--ig-ink) !important; }
html[data-ig] .auth-dropdown-menu { border: 2.5px solid var(--ig-ink) !important; border-radius: 16px !important; box-shadow: var(--ig-tien-maly) !important; }
/* chybné pole formulára ostáva zvýraznené */
html[data-ig] body [aria-invalid="true"] { border-color: #bc4b3c !important; background-color: #fdf3f0 !important; }
/* po úspešnej konzultácii formulár naozaj zmizne (chyba bola aj na main) */
html[data-ig] .konz-form[hidden] { display: none !important; }
/* cookie lišta: obe voľby rovnocenné, krížik bez pilulky */
html[data-ig] #vz-suhlas .vz-suhlas-tlacidla button, html[data-ig] #vz-suhlas button:last-of-type { background: var(--ig-card) !important; }
html[data-ig] #vz-suhlas .vz-suhlas-zavriet { border: 0 !important; box-shadow: none !important; background: none !important; }
html[data-ig] #vz-suhlas .vz-suhlas-text a { color: var(--ig-ink); text-decoration-color: var(--ig-ink); }
/* Moje rezervácie a potvrdenie žiadosti */
html[data-ig="moje"] .res-price-badge { padding: 2px 12px; }
html[data-ig] .status-pending { color: var(--ig-rucne); background: var(--ig-p-zlta); border-color: var(--ig-ink); }
html[data-ig] .payment-slot { padding: 10px 14px; margin-top: 0; }
html[data-ig="rezervacia"] .plan-option-card.selected .plan-option-price { color: var(--ig-ink); }
/* filter lektorov nepretŕča */
html[data-ig] .filter-container { max-width: 100%; flex-wrap: wrap; box-sizing: border-box; }
html[data-ig] .filter-glider { box-sizing: border-box; }
/* úvod domova sa už neskrýva skriptom (bliknutie na pomalej sieti) */
html[data-ig="domov"] .ig-uvod .ig-podciark { clip-path: none !important; }
@media (max-width: 400px) {
  html[data-ig] .logo { font-size: 1.45rem; gap: 6px; }
  html[data-ig] .nav-logo { height: 30px; }
  html[data-ig] .btn-nav-mobile { padding: 8px 10px; font-size: .82rem; }
  html[data-ig] .nav-controls { gap: 8px; }
  html[data-ig="rezervacia"] .how-it-works-accordion { padding: 12px; }
}
@media (max-width: 360px) { .ig-btn { font-size: 16px; padding: 14px 20px; white-space: normal; text-align: center; } }

/* ==========================================================================
   OPRAVY PO NEZÁVISLEJ KONTROLE (kolo 2)
   ========================================================================== */
/* tmavšie odtiene hero podstránok: biely text (aj menu 16 px) má na oboch lúčoch kontrast ≥ 4,7 : 1 */
html[data-ig="o-nas"], html[data-ig="moje"] { --ig-hero: #2a746f; --ig-hero-sv: #327f7a; }
html[data-ig="cennik"] { --ig-hero: #5d6b3a; --ig-hero-sv: #69773f; }
html[data-ig="kariera"] { --ig-hero: #a8412f; --ig-hero-sv: #b94a36; }
html[data-ig="sukromie"] { --ig-hero: #6f5391; --ig-hero-sv: #7d60a0; }

/* lúče podstránok: veľkosť podľa hero (počíta vz-ig.js), bez aspect-ratio a translate (staršie Safari), pauza mimo obrazovky */
html[data-ig] header:not(.ig-hero)::before { width: var(--ig-v, max(240vw, 1900px)); height: var(--ig-v, max(240vw, 1900px)); aspect-ratio: auto; translate: none;
  margin: calc(var(--ig-v, max(240vw, 1900px)) / -2) 0 0 calc(var(--ig-v, max(240vw, 1900px)) / -2); }
html[data-ig] header.ig-mimo::before { animation-play-state: paused; }
@media (max-width: 768px) { html[data-ig] header:not(.ig-hero)::before { animation: none; } }

/* iskričky v hero: na užších šírkach len dve hore, pri ilustrácii jedna pri jej okraji */
@media (max-width: 1040px) {
  html[data-ig] header:not(.ig-hero) > .ig-iskra--2 { display: none; }
  html[data-ig] header:not(.ig-hero) > .ig-iskra--1 { top: calc(var(--ig-nav-h, 70px) + 26px) !important; --s: 24px !important; }
}
@media (min-width: 1201px) { html[data-ig] header.ig-ma-ilu > .ig-iskra--p1, html[data-ig] header.ig-ma-ilu > .ig-iskra--p2 { display: none; } }
.ig-hero-ilu > .ig-iskra { left: -30px; top: -2px; }
@media (max-width: 1200px) { .ig-hero-ilu > .ig-iskra { display: none; } }

/* viditeľný fokus na farebnom aj svetlom podklade (biely krúžok + tmavý prstenec) */
html[data-ig] :is(a, button, summary, [role="button"], [tabindex]):focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px var(--ig-ink); }

/* Cenník: odznak len jeden (obal bez štýlu) */
html[data-ig="cennik"] .card-badge, html[data-ig="cennik"] .pricing-card.featured .card-badge { background: none; border: 0; box-shadow: none; border-radius: 0; rotate: none; }
html[data-ig="cennik"] .most-popular-badge { background: var(--ig-cervena); color: #fff; }

/* prihlasovacie okno, platobné údaje a kroky v rezervácii v novom štýle */
html[data-ig] .auth-form input { border: 2px solid var(--ig-line) !important; background: var(--ig-paper) !important; color: var(--ig-ink) !important; }
html[data-ig] .auth-form input:focus { border-color: var(--ig-ink) !important; background: #fff !important; }
html[data-ig] .auth-form form button[type="submit"] { background: var(--ig-zlta) !important; color: var(--ig-ink) !important; border: var(--ig-obrys) solid var(--ig-ink) !important; border-radius: 999px !important; font-weight: 800 !important; box-shadow: 0 4px 0 var(--ig-ink) !important; }
html[data-ig] .auth-tab.active { color: var(--ig-ink); }
html[data-ig] .vz-platba-sposob { border: 2.5px solid var(--ig-ink); border-radius: 16px; }
html[data-ig] .vz-platba-riadok { border: 2px solid var(--ig-line); border-radius: 12px; }
html[data-ig] .vz-platba-kopiruj { border: 2px solid var(--ig-ink); border-radius: 999px; font-weight: 800; }
html[data-ig="rezervacia"] .accordion-item { background: var(--ig-card); border: 2px solid var(--ig-ink); border-radius: 16px; }
/* doladenie po meraní: podklad aktívneho filtra presne pod tlačidlom, tlačidlá na 320 px bez pretekania */
html[data-ig] .filter-glider { margin: calc(var(--ig-obrys) * -1) 0 0 calc(var(--ig-obrys) * -1); }
@media (max-width: 380px) {
  html[data-ig] .ig-btn, html[data-ig="domov"] .ig-uvod .ig-cta .ig-btn { font-size: 16px; padding: 14px 18px; white-space: normal; text-align: center; line-height: 1.2; max-width: 100%; box-sizing: border-box; }
}
html[data-ig="domov"] .konz-intro .section-head { text-align: left; }

/* ==========================================================================
   OPRAVY PO OVEROVACOM KOLE (kolo 3)
   ========================================================================== */
/* N1: tmavý prstenec fokusu musí prebiť vlastné tiene tlačidiel */
html[data-ig] :is(a, button, summary, [role="button"], [tabindex]):focus-visible { box-shadow: 0 0 0 7px var(--ig-ink) !important; }
html[data-ig] .nav-links a.btn-nav:focus-visible, html[data-ig] .btn-nav-mobile:focus-visible, html[data-ig] #contact-form button[type="submit"]:focus-visible,
html[data-ig] .auth-form form button[type="submit"]:focus-visible, html[data-ig] #vz-suhlas button:focus-visible, html[data-ig] [id^="vzdelko"] button:focus-visible, html[data-ig] [class*="vzdelko"] button:focus-visible {
  outline: 3px solid #fff !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px var(--ig-ink) !important; }
/* N3: bez vlasovej linky nad pätičkou */
html[data-ig] footer { border-top: 0; }
/* N4: podčiarknutie pod nadpisom konzultácie začína pod nadpisom */
html[data-ig="domov"] .konz-intro .section-head .sketch-underline { margin-left: 0; }
/* N2: tmavší posledný pás, aby drobný biely text mal dostatočný kontrast */
html[data-ig="domov"] .ig-pas--luce { --pas: #a8412f !important; }
/* N6: dlaždice „Ako to funguje?“ sa zmestia aj pod 350 px */
html[data-ig="rezervacia"] .how-it-works-accordion .features { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* N7, N8: kontrast stavu a zástupných textov */
html[data-ig] .status-pending { color: #7d4709; }
html[data-ig] .auth-form input::placeholder { color: var(--ig-muted); }
/* N9: úzke telefóny – logo sa zmestí aj s náhradným písmom */
@media (max-width: 340px) { html[data-ig] .logo { font-size: 1.3rem; } }

/* ==========================================================================
   FILTER LEKTOROV (O nás): nálepky namiesto posuvnej bublinky
   Vybraný predmet zožltne, pootočí sa a krátko poskočí. Pôvodný posuvný podklad je skrytý.
   ========================================================================== */
html[data-ig] .filter-container { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
html[data-ig] .filter-glider { display: none; }
html[data-ig] .filter-chip { background: var(--ig-card); border: 2.5px solid var(--ig-ink); border-radius: 999px; padding: 10px 18px; font: 700 1rem/1.1 var(--font-body); font-style: normal; color: var(--ig-ink);
  box-shadow: var(--ig-tien-maly); transition: translate .15s ease, box-shadow .15s ease, background-color .15s ease, rotate .2s ease; -webkit-tap-highlight-color: transparent; }
html[data-ig] .filter-chip:hover { transform: none; color: var(--ig-ink); }
@media (hover: hover) { html[data-ig] .filter-chip:not(.active):hover { translate: 0 -2px; box-shadow: 0 5px 0 rgba(66, 58, 45, .16); } }
html[data-ig] .filter-chip.active, html[data-ig] .filter-chip.active:hover { background: var(--ig-zlta); color: var(--ig-ink); box-shadow: 0 4px 0 var(--ig-ink); rotate: -2deg; animation: ig-nalepka .38s cubic-bezier(.2, 1.7, .4, 1); }
html[data-ig] .filter-chip.active:nth-of-type(even) { rotate: 1.6deg; }
@keyframes ig-nalepka { 0% { scale: .86; } 55% { scale: 1.08; } 100% { scale: 1; } }
@media (max-width: 480px) {
  html[data-ig] .filter-container { display: flex; padding: 0; gap: 8px; }
  html[data-ig] .filter-chip { width: auto; padding: 10px 16px; border-radius: 999px; font-size: .95rem; }
}


/* ==========================================================================
   NAVIGÁCIA: plávajúca nálepka (biela zaoblená lišta nad stránkou) + vysúvacia kartička s ikonami (telefón)
   Lišta je vždy biela, nezávisí od scrollu ani od skriptu. Hero pod ňu zasúva --ig-nav-h (výška + okraje lišty).
   ========================================================================== */
html[data-ig] {
  --ig-i-ludia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423a2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.5-4 3-6 6.5-6s6 2 6.5 6'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14.3c2 .7 3.2 2.5 3.5 5.7'/%3E%3C/svg%3E");
  --ig-i-stitok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423a2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8Z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.3'/%3E%3C/svg%3E");
  --ig-i-kniha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423a2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.5-5-2-8-1.5v13c3-.5 6 0 8 1.5 2-1.500 5-2 8-1.5v-13c-3-.5-6 0-8 1.5Z'/%3E%3Cpath d='M12 6v13'/%3E%3C/svg%3E");
  --ig-i-ucet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423a2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c.6-4 3.2-6 7-6s6.4 2 7 6'/%3E%3C/svg%3E");
  --ig-i-kalendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423a2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E");
  --ig-i-von: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423a2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M15 8l4 4-4 4M19 12H9'/%3E%3C/svg%3E");
  --ig-i-sipka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423a2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
html[data-ig] nav, html[data-ig] nav.ig-zrolovane, html[data-ig] nav.ig-menu-otvorene { width: calc(100% - 32px); max-width: 1180px; margin: 10px auto 6px; top: 10px; min-height: 62px; box-sizing: border-box;
  padding: 6px 8px 6px 16px; flex-wrap: nowrap; align-items: center; background: var(--ig-card); border: 3px solid var(--ig-ink); border-radius: 999px; box-shadow: 0 5px 0 rgba(66, 58, 45, .22); }
html[data-ig] nav .logo { color: var(--ig-ink); font-size: 1.9rem; gap: 8px; white-space: nowrap; }
html[data-ig] nav .nav-logo { height: 40px; }
/* pri pohybe nadol sa lišta zasunie nad okraj okna, pri pohybe nahor sa vysunie (triedu prepína vz-ig.js) */
html[data-ig] nav, html[data-ig] nav.ig-zrolovane, html[data-ig] nav.ig-menu-otvorene { transition: translate .36s cubic-bezier(.2, 1.35, .4, 1); }
html[data-ig] nav.ig-nav-skryta { translate: 0 calc(-100% - 26px); transition: translate .26s cubic-bezier(.5, 0, .9, .5); }
/* domov: nálepka „Ahoj!“ nesmie zachádzať pod lištu */
html[data-ig="domov"] header.ig-hero { padding-top: calc(var(--ig-nav-h, 78px) + 16px); }

@media (min-width: 769px) {
  html[data-ig] nav .nav-right-wrap, html[data-ig] nav .nav-links { align-items: center; gap: 4px; }
  html[data-ig] nav .nav-links > a::after { display: none !important; }
  html[data-ig] nav .nav-links > a:not(.btn-nav) { color: var(--ig-ink) !important; font-weight: 700; font-size: .97rem; line-height: 1.2; padding: 9px 14px; border: 2.5px solid transparent; border-radius: 999px; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, rotate .2s ease; }
  html[data-ig] nav .nav-links > a:not(.btn-nav):hover { background: var(--ig-p-zlta); }
  html[data-ig] nav .nav-links > a[aria-current="page"]:not(.btn-nav) { background: var(--ig-p-zlta); border-color: var(--ig-ink); rotate: -2deg; }
  html[data-ig] nav .nav-links > a.btn-nav { margin-left: 6px; padding: 9px 22px; font-size: .97rem; line-height: 1.2; white-space: nowrap; box-shadow: 0 3px 0 var(--ig-ink); }
  html[data-ig] nav .nav-links > a.btn-nav:hover { translate: 0 2px; box-shadow: 0 1px 0 var(--ig-ink); }
  html[data-ig] nav .nav-links > a.btn-nav[aria-current="page"] { rotate: -2deg; }
  html[data-ig] nav .auth-mobile-only { display: none !important; }
  html[data-ig] nav .auth-nav-slot.auth-desktop-only { margin-left: 4px; }
  html[data-ig] nav .auth-profile-toggle { width: 44px; height: 44px; background: var(--ig-card); color: var(--ig-ink); font-family: var(--ig-brush); font-size: 1.3rem; box-shadow: none; transition: background-color .15s ease, rotate .2s ease; }
  html[data-ig] nav .auth-profile-toggle:hover { background: var(--ig-p-fialova); transform: none; rotate: -6deg; box-shadow: none; }
  html[data-ig] nav .auth-profile-toggle.logged-in { background: var(--ig-p-fialova); }
  html[data-ig] nav .auth-dropdown-menu { top: calc(100% + 16px); }
  html[data-ig] .nav-links .auth-dropdown-item.logout-item { color: #a3271b !important; }
}
@media (min-width: 769px) and (max-width: 900px) {
  html[data-ig] nav, html[data-ig] nav.ig-zrolovane, html[data-ig] nav.ig-menu-otvorene { width: calc(100% - 24px); padding-left: 12px; }
  html[data-ig] nav .logo { font-size: 1.7rem; }
  html[data-ig] nav .nav-logo { height: 36px; }
  html[data-ig] nav .nav-links > a:not(.btn-nav) { padding: 9px 10px; }
  html[data-ig] nav .nav-links > a.btn-nav { padding: 9px 16px; margin-left: 2px; }
}

@media (max-width: 768px) {
  html[data-ig] nav, html[data-ig] nav.ig-zrolovane, html[data-ig] nav.ig-menu-otvorene { width: calc(100% - 20px); margin: 8px auto 6px; top: 8px; min-height: 60px; padding: 5px 6px 5px 12px; }
  html[data-ig] nav .logo { font-size: 1.7rem; gap: 7px; }
  html[data-ig] nav .nav-logo { height: 34px; }
  html[data-ig] nav .nav-controls { align-items: center; gap: 7px; }
  html[data-ig] nav .btn-nav-mobile { box-sizing: border-box; min-height: 42px; padding: 7px 14px; font-size: .9rem; line-height: 1.2; white-space: nowrap; box-shadow: 0 3px 0 var(--ig-ink); }
  html[data-ig] nav .btn-nav-mobile:hover { translate: 0 2px; box-shadow: 0 1px 0 var(--ig-ink); }
  html[data-ig] nav .hamburger { box-sizing: border-box; width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; background: var(--ig-p-zlta); box-shadow: none;
    transition: rotate .25s ease, background-color .15s ease; }
  html[data-ig] nav .hamburger[aria-expanded="true"] { rotate: 90deg; background: var(--ig-zlta); }
  html[data-ig] nav .hamburger svg { width: 22px; height: 22px; }

  /* vysúvacia kartička */
  html[data-ig] nav .nav-right-wrap { position: absolute; left: -3px; right: -3px; top: calc(100% + 11px); width: auto; margin: 0; padding: 8px; gap: 0; box-sizing: border-box;
    background: var(--ig-card); border: 3px solid var(--ig-ink); border-radius: 24px; box-shadow: 0 6px 0 rgba(66, 58, 45, .22); transform-origin: 92% 0;
    max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; }
  html[data-ig] nav .nav-right-wrap.active { animation: ig-vysun .32s cubic-bezier(.2, 1.5, .4, 1); }
  html[data-ig] nav .nav-links { gap: 0; align-items: stretch; }
  html[data-ig] nav .nav-links > a:not(.btn-nav), html[data-ig] nav .auth-dropdown-item-mobile { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 9px 10px;
    border: 0; border-radius: 16px; background: none; font-size: 1.03rem; font-weight: 700; text-align: left; color: var(--ig-ink) !important; }
  html[data-ig] nav .nav-links > a:not(.btn-nav)::before, html[data-ig] nav .auth-dropdown-item-mobile::before { content: ""; flex: none; width: 38px; height: 38px; box-sizing: border-box; border-radius: 50%;
    border: 2.5px solid var(--ig-ink); background: var(--kc, var(--ig-p-zlta)) var(--ik, var(--ig-i-sipka)) center / 20px no-repeat; }
  html[data-ig] nav .nav-links > a:not(.btn-nav)::after, html[data-ig] nav .nav-links .auth-dropdown-item-mobile::after { content: "" !important; display: block !important; position: static; flex: none; margin-left: auto; width: 18px; height: 18px;
    background: var(--ig-i-sipka) center / contain no-repeat; transform: none; opacity: .5; border-radius: 0; }
  html[data-ig] nav .nav-links > a[href="o-nas"] { --kc: var(--ig-p-tyrkys); --ik: var(--ig-i-ludia); }
  html[data-ig] nav .nav-links > a[href="cennik"] { --kc: var(--ig-p-olivova); --ik: var(--ig-i-stitok); }
  html[data-ig] nav .nav-links > a[href="materialy"] { --kc: var(--ig-p-modra); --ik: var(--ig-i-kniha); }
  html[data-ig] nav .auth-dropdown-item-mobile { --kc: var(--ig-p-fialova); --ik: var(--ig-i-ucet); }
  html[data-ig] nav .auth-dropdown-item-mobile[href*="moje-rezervacie"] { --kc: var(--ig-p-ruzova); --ik: var(--ig-i-kalendar); }
  html[data-ig] nav .auth-dropdown-item-mobile.logout-item { --kc: var(--ig-card); --ik: var(--ig-i-von); color: #a3271b !important; }
  html[data-ig] nav .nav-links > a[aria-current="page"]:not(.btn-nav), html[data-ig] nav .nav-links > a:not(.btn-nav):active, html[data-ig] nav .auth-dropdown-item-mobile:active,
  html[data-ig="moje"] nav .auth-dropdown-item-mobile[href*="moje-rezervacie"] { background: var(--ig-p-zlta); border-radius: 16px; }
  html[data-ig] nav .auth-desktop-only, html[data-ig] nav .auth-mobile-only:empty { display: none !important; }
  html[data-ig] nav .auth-mobile-only { order: 5; border-top: 2px dashed var(--ig-line) !important; margin-top: 6px !important; padding-top: 6px !important; }
  html[data-ig] nav .prof-email-mobile { align-self: stretch; overflow-wrap: anywhere; background: var(--ig-p-fialova) !important; color: var(--ig-ink) !important; border: 0 !important; border-radius: 12px !important; margin: 0 2px 4px; }
  html[data-ig] nav .nav-links > a.btn-nav { display: flex !important; order: 10; align-items: center; justify-content: center; width: auto; margin: 8px 6px 6px; padding: 13px; font-size: 1.02rem; font-weight: 800;
    background: var(--ig-zlta); color: var(--ig-ink) !important; border: 3px solid var(--ig-ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ig-ink); }
}
@keyframes ig-vysun { from { scale: .6; opacity: 0; } to { scale: 1; opacity: 1; } }
@media (max-width: 400px) {
  html[data-ig] nav, html[data-ig] nav.ig-zrolovane, html[data-ig] nav.ig-menu-otvorene { width: calc(100% - 16px); padding-left: 10px; }
  html[data-ig] nav .logo { font-size: 1.45rem; gap: 6px; }
  html[data-ig] nav .nav-logo { height: 30px; }
  html[data-ig] nav .btn-nav-mobile { padding: 7px 11px; font-size: .84rem; }
  html[data-ig] nav .nav-controls { gap: 6px; }
}
@media (max-width: 340px) {
  html[data-ig] nav .logo { font-size: 1.25rem; gap: 5px; }
  html[data-ig] nav .nav-logo { height: 28px; }
  html[data-ig] nav .btn-nav-mobile { padding: 7px 9px; font-size: .8rem; }
  html[data-ig] nav .hamburger { width: 42px; height: 42px; }
}