/* Extracted from detect-konfigurator/sk/index.html; keep this link after site-wide styles. */
/* === Svetlé fialové pozadie s gradientom — zhodné s hlavnou stránkou === */
      body.dark-scheme {
        background: var(--color-surface-soft) !important;
      }
      html, body {
        background: transparent !important;
      }
      /* Fialový gradient — jemné prekrývajúce sa glow-spoty */
      #wrapper {
        background:
          radial-gradient(ellipse 55% 25% at 22% 14%, rgba(140,90,255,0.22) 0%, rgba(180,140,255,0.08) 50%, transparent 85%),
          radial-gradient(ellipse 50% 22% at 78% 30%, rgba(190,150,255,0.18) 0%, rgba(210,180,255,0.06) 55%, transparent 88%),
          radial-gradient(ellipse 55% 25% at 22% 48%, rgba(140,90,255,0.20) 0%, rgba(180,140,255,0.07) 55%, transparent 88%),
          radial-gradient(ellipse 50% 22% at 78% 66%, rgba(190,150,255,0.18) 0%, rgba(210,180,255,0.06) 55%, transparent 88%),
          radial-gradient(ellipse 55% 25% at 22% 84%, rgba(140,90,255,0.16) 0%, transparent 85%),
          var(--color-surface-accent);
      }
      /* Sekcie majú transparentné pozadie — ukazujú gradient z #wrapper */
      #section-about,
      #section-why-attend,
      #section-speakers,
      #section-schedule,
      #section-tickets,
      #section-venue,
      #section-faq {
        background: transparent !important;
        position: relative;
      }

      /* Farba textu v svetlých sekciách */
      #section-about,
      #section-about h1, #section-about h2, #section-about h3,
      #section-about h4, #section-about h5, #section-about h6,
      #section-about p, #section-about li, #section-about span,
      #section-about a, #section-about .subtitle,
      #section-why-attend,
      #section-why-attend h1, #section-why-attend h2, #section-why-attend h3,
      #section-why-attend h4, #section-why-attend p, #section-why-attend span,
      #section-why-attend .subtitle,
      #section-speakers,
      #section-speakers h1, #section-speakers h2, #section-speakers h3,
      #section-speakers h4, #section-speakers p, #section-speakers span,
      #section-speakers .subtitle,
      #section-schedule,
      #section-schedule h1, #section-schedule h2, #section-schedule h3,
      #section-schedule h4, #section-schedule p, #section-schedule span,
      #section-schedule .subtitle,
      #section-tickets,
      #section-tickets h1, #section-tickets h2, #section-tickets h3,
      #section-tickets h4, #section-tickets p, #section-tickets span,
      #section-tickets .subtitle,
      #section-venue,
      #section-venue h1, #section-venue h2, #section-venue h3,
      #section-venue h4, #section-venue p, #section-venue span,
      #section-venue .subtitle,
      #section-faq,
      #section-faq h1, #section-faq h2, #section-faq h3,
      #section-faq h4, #section-faq p, #section-faq span,
      #section-faq .subtitle {
        color: var(--color-text-strong) !important;
      }

      /* Nadpisy v svetlých sekciách — tmavý fialový gradient */
      #section-about h1, #section-about h2,
      #section-why-attend h1, #section-why-attend h2,
      #section-speakers h1, #section-speakers h2,
      #section-schedule h1, #section-schedule h2,
      #section-tickets h1, #section-tickets h2,
      #section-venue h1, #section-venue h2,
      #section-faq h1, #section-faq h2 {
        background: linear-gradient(180deg, var(--color-text-strong) 0%, #7c5cbf 85%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
      }

      /* Karty a vnorené tmavé prvky */
      #section-why-attend .bg-dark-2 {
        background-color: #e4d6ff;
      }
      #section-why-attend .bg-dark-2 h4,
      #section-why-attend .bg-dark-2 p {
        color: var(--color-text-strong) !important;
      }

      /* === Päťička v štýle hlavnej stránky === */
      .footer-creative {
        position: relative;
        overflow: hidden;
        padding-top: 0 !important;
      }
      .footer-creative::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(180, 141, 255, 0.6) 50%, transparent 100%);
      }
      .footer-creative::after {
        content: "";
        position: absolute;
        bottom: -40%;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 80%;
        background: radial-gradient(ellipse at center, rgba(118, 77, 240, 0.18) 0%, transparent 60%);
        pointer-events: none;
        z-index: 0;
      }
      .footer-creative > * {
        position: relative;
        z-index: 1;
      }
      .footer-cta-banner {
        padding: 70px 0 60px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        position: relative;
      }
      .footer-cta-eyebrow {
        display: inline-block;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #b48dff;
        margin-bottom: 12px;
      }
      .footer-cta-title {
        font-size: 2.2rem;
        line-height: 1.15;
        margin: 0;
        background: linear-gradient(180deg, #ffffff 0%, #b48dff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      @media (max-width: 767px) {
        .footer-cta-title { font-size: 1.6rem; }
        .footer-cta-banner { padding: 50px 0 40px; }
      }
      .footer-main {
        padding: 60px 0 50px;
      }
      .footer-heading {
        position: relative;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #b48dff;
        margin-bottom: 22px;
        padding-left: 14px;
      }
      .footer-heading::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 14px;
        background: linear-gradient(180deg, var(--primary-color), #b48dff);
        border-radius: 2px;
      }
      .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .footer-links li { margin-bottom: 10px; }
      .footer-links a {
        position: relative;
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
        font-size: 0.95rem;
        display: inline-block;
        transition: color .3s ease, transform .3s ease;
      }
      .footer-links a::before {
        content: "";
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 1px;
        background: #b48dff;
        transition: width .3s ease;
      }
      /* Rovnaká oprava ako v css/components/footer.css: posun transformáciou,
         nie padding-om, inak sa dlhý odkaz pri hoveri zalomí. */
      .footer-links a:hover { color: #ffffff; transform: translateX(20px); }
      .footer-links a:hover::before { width: 14px; }
      .footer-contact-card {
        max-width: 380px; /* jednotna paticka - karta obopne obsah */
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(180, 141, 255, 0.18);
        border-radius: 14px;
        padding: 22px 22px;
        backdrop-filter: blur(8px);
      }
      .footer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 10px 0;
      }
      .footer-contact-item + .footer-contact-item {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .footer-contact-item .footer-contact-icon {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(118, 77, 240, 0.25), rgba(180, 141, 255, 0.15));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #b48dff;
        font-size: 1rem;
      }
      .footer-contact-item .footer-contact-text {
        font-size: 0.92rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.85);
      }
      .footer-contact-item .footer-contact-text a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        transition: color .25s ease;
      }
      .footer-contact-item .footer-contact-text a:hover { color: #b48dff; }
      .footer-contact-item .footer-contact-label {
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: rgba(180, 141, 255, 0.82);
        margin-bottom: 2px;
      }
      .footer-social { display: flex; gap: 10px; }
      .footer-social a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid transparent; box-shadow: inset 0 0 0 1px rgba(180, 141, 255, 0.35);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.95rem;
        transition: all .3s ease;
      }
      .footer-social a:hover {
        background: linear-gradient(135deg, var(--primary-color), #b48dff);
        border-color: transparent;
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(118, 77, 240, 0.4);
      }
      .footer-watermark {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Saira', 'Manrope', Helvetica, Arial, sans-serif;
        font-size: 18vw;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.04em;
        text-transform: lowercase;
        color: transparent;
        -webkit-text-stroke: 1px rgba(180, 141, 255, 0.10);
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
        z-index: 0;
      }
      .footer-creative .subfooter {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 22px 0;
        position: relative;
        z-index: 2;
      }
      .footer-creative .subfooter a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition: color .25s ease;
      }
      .footer-creative .subfooter a:hover { color: #b48dff; }
      .footer-lang-switcher {
        display: inline-flex;
        gap: 4px;
        align-items: center;
        margin-left: 16px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(180, 141, 255, 0.2);
        border-radius: 20px;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.5px;
      }
      .footer-lang-switcher a,
      .footer-lang-switcher span.active {
        padding: 2px 8px;
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.7);
      }
      .footer-lang-switcher span.active {
        background: rgba(180, 141, 255, 0.25);
        color: #ffffff;
      }

      /* === Hero banner — stlmenie tmavých a farebných vrstiev nad obrázkom, aby pôvodné farby viac presvitali === */
      #section-hero .sw-overlay {
        opacity: 0.35 !important;
      }
      #section-hero .gradient-edge-top.color {
        opacity: 0.25 !important;
      }
      #section-hero .gradient-edge-bottom {
        opacity: 0.5 !important;
      }
      /* Posunutie obsahu hero bannera nižšie */
      #section-hero .abs-centered {
        top: 60% !important;
      }
      @media (max-width: 991px) {
        #section-hero .abs-centered {
          top: 55% !important;
        }
      }
      /* Väčší podnadpis v hero banneri */
      #section-hero .hero-subheadline {
        font-size: 3.6rem;
        line-height: 1.15;
        font-weight: 700;
      }
      @media (max-width: 991px) {
        #section-hero .hero-subheadline {
          font-size: 2.4rem;
        }
      }
      @media (max-width: 575px) {
        #section-hero .hero-subheadline {
          font-size: 1.6rem;
        }
      }

/* ===== KONFIGURATOR - STYLY ===== */
            #section-configurator { padding: 100px 0; }
            .cfg-stepper {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
                position: relative;
                flex-wrap: wrap;
            }
            .cfg-step {
                flex: 1 1 0;
                min-width: 130px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                opacity: 0.45;
                transition: opacity .25s ease;
                position: relative;
                text-align: center;
            }
            .cfg-step + .cfg-step::before {
                content: '';
                position: absolute;
                top: 22px;
                left: calc(-50% + 12px);
                width: calc(100% - 34px);
                height: 2px;
                background: rgba(255,255,255,.15);
                z-index: 0;
            }
            .cfg-step.active,
            .cfg-step.done { opacity: 1; }
            .cfg-step-num {
                width: 44px; height: 44px; border-radius: 50%;
                background: rgba(255,255,255,.08);
                border: 2px solid rgba(255,255,255,.2);
                display: inline-flex; align-items: center; justify-content: center;
                font-weight: 700; font-size: 18px; color: #fff;
                position: relative; z-index: 1;
                transition: all .25s ease;
            }
            .cfg-step.active .cfg-step-num {
                background: var(--primary-color);
                border-color: transparent;
                box-shadow: 0 0 0 6px rgba(124,92,191,.18);
            }
            .cfg-step.done .cfg-step-num {
                background: rgba(124,92,191,.4);
                border-color: rgba(179,159,255,.6);
            }
            .cfg-step-label { font-size: 14px; color: #fff; }

            /* Na mobile: kompaktný progres na jednom riadku — menšie čísla vedľa
               seba, jedna súvislá čiara za nimi, popisy skryté (názov kroku je
               v nadpise panela pod stepperom). */
            @media (max-width: 767px) {
                .cfg-stepper { flex-wrap: nowrap; gap: 2px; }
                .cfg-step { min-width: 0; flex: 1 1 0; }
                .cfg-step-num { width: 36px; height: 36px; font-size: 15px; }
                .cfg-step-label { display: none; }
                .cfg-step + .cfg-step::before { display: none; }
                .cfg-stepper::before {
                    content: '';
                    position: absolute;
                    top: 18px;
                    left: 9%;
                    right: 9%;
                    height: 2px;
                    background: rgba(255,255,255,.15);
                    z-index: 0;
                }
                .cfg-step.active .cfg-step-num { box-shadow: 0 0 0 4px rgba(124,92,191,.18); }
            }

            .cfg-panel {
                background: rgba(255,255,255,.04);
                border: 1px solid rgba(255,255,255,.08);
                border-radius: 16px;
                padding: 40px;
                backdrop-filter: blur(8px);
            }
            .cfg-pane { display: none; animation: cfgFade .35s ease; }
            .cfg-pane.active { display: block; }
            @keyframes cfgFade {
                from { opacity: 0; transform: translateY(8px); }
                to { opacity: 1; transform: translateY(0); }
            }

            .cfg-pane-title {
                margin-bottom: 8px;
                font-size: 28px;
            }
            .cfg-pane-desc { opacity: .75; margin-bottom: 30px; }

            .cfg-options {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }
            .cfg-options-grid {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            }
            .cfg-card {
                background: rgba(255,255,255,.03);
                border: 2px solid rgba(255,255,255,.1);
                border-radius: 12px;
                padding: 24px;
                text-align: left;
                color: #fff;
                cursor: pointer;
                transition: all .2s ease;
                display: flex;
                flex-direction: column;
                gap: 6px;
                position: relative;
            }
            .cfg-card:hover {
                border-color: rgba(179,159,255,.55);
                background: rgba(124,92,191,.12);
                transform: translateY(-2px);
            }
            .cfg-card.selected {
                border-color: #b39fff;
                background: linear-gradient(135deg, rgba(124,92,191,.25), rgba(179,159,255,.12));
                box-shadow: 0 8px 24px rgba(124,92,191,.25);
            }
            .cfg-card.selected::after {
                content: '✓';
                position: absolute;
                top: 14px; right: 16px;
                width: 26px; height: 26px;
                border-radius: 50%;
                background: #b39fff;
                color: var(--color-text-strong);
                display: inline-flex; align-items: center; justify-content: center;
                font-weight: 800;
                font-size: 14px;
            }
            .cfg-card h4 { margin: 0; font-size: 18px; color: #fff; }
            .cfg-card p { margin: 0; opacity: .75; font-size: 14px; color: #fff; }
            .cfg-card-icon {
                width: 50px; height: 50px;
                border-radius: 12px;
                background: linear-gradient(135deg, #7c5cbf, #b39fff);
                display: inline-flex; align-items: center; justify-content: center;
                font-size: 22px; color: #fff;
                margin-bottom: 8px;
            }
            .cfg-custom-input {
                margin-top: 10px;
                width: 100%;
                background: rgba(0,0,0,.25);
                border: 1px solid rgba(255,255,255,.18);
                border-radius: 8px;
                padding: 8px 12px;
                color: #fff;
            }

            .cfg-nav {
                display: flex;
                justify-content: space-between;
                gap: 12px;
                margin-top: 32px;
                flex-wrap: wrap;
            }
            .cfg-nav .btn-main { flex: 0 0 auto; }
            .cfg-nav .btn-main[disabled] {
                opacity: .35;
                pointer-events: none;
            }
            .cfg-reset { margin-left: auto; }

            /* Pokračovať = hlavné výrazné tlačidlo (výrazné vždy, aj keď je
               zatiaľ neaktívne). Začať znova = sekundárne (menej výrazné). */
            .cfg-nav .cfg-next[disabled] { opacity: 1; }
            .cfg-reset,
            .cfg-reset:focus {
                background: rgba(255,255,255,.07) !important;
                background-image: none !important;
                border: 1px solid rgba(255,255,255,.2) !important;
                color: #fff !important;
                box-shadow: none !important;
            }
            .cfg-reset:hover {
                background: rgba(255,255,255,.13) !important;
                background-image: none !important;
            }

            /* Mobil: Späť + Pokračovať vedľa seba (riadok 1), Začať znova pod
               nimi na celú šírku (riadok 2). */
            @media (max-width: 575px) {
                .cfg-nav .cfg-back { order: 1; flex: 1 1 0; }
                .cfg-nav .cfg-next { order: 2; flex: 1 1 0; }
                .cfg-nav .cfg-reset { order: 3; flex: 1 1 100%; margin-left: 0; }
                /* text v tlačidlách vycentrovať a zmestiť na jeden riadok;
                   Späť + Pokračovať väčšie (vyššie) */
                .cfg-nav .btn-main {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    padding: 17px 10px;
                    white-space: nowrap;
                }
                .cfg-nav .btn-main,
                .cfg-nav .btn-main span {
                    font-size: 11px !important;
                    letter-spacing: 0.3px !important;
                }
            }

            .cfg-summary {
                background: rgba(0,0,0,.25);
                border: 1px solid rgba(255,255,255,.08);
                border-radius: 12px;
                padding: 20px 24px;
            }
            .cfg-summary-row {
                display: flex;
                justify-content: space-between;
                gap: 12px;
                padding: 10px 0;
                border-bottom: 1px dashed rgba(255,255,255,.1);
            }
            .cfg-summary-row:last-child { border-bottom: none; }
            .cfg-summary-row .label { opacity: .7; }
            .cfg-summary-row .value { font-weight: 600; text-align: right; }

            .cfg-label {
                display: block;
                margin-bottom: 6px;
                font-size: 14px;
                opacity: .85;
            }
            .cfg-form .form-control {
                background: rgba(0,0,0,.25);
                border: 1px solid rgba(255,255,255,.18);
                color: #fff;
                border-radius: 8px;
                padding: 10px 14px;
            }
            .cfg-form .form-control:focus {
                outline: none;
                border-color: #b39fff;
                box-shadow: 0 0 0 3px rgba(179,159,255,.2);
            }

            .cfg-success {
                text-align: center;
                padding: 40px 20px;
            }
            /* Po odoslaní ostáva panel viditeľný, skryjú sa len kroky a navigácia —
               potvrdenie je totiž vnútri panela. */
            .cfg-panel.cfg-done .cfg-pane,
            .cfg-panel.cfg-done .cfg-nav {
                display: none !important;
            }
            .cfg-success-icon {
                font-size: 72px;
                color: #b39fff;
                margin-bottom: 12px;
            }

            @media (max-width: 768px) {
                .cfg-panel { padding: 24px; }
                .cfg-options { grid-template-columns: 1fr; }
                .cfg-step-label { font-size: 12px; }
            }