:root{
    --dc-radius-xl: 22px;
    --dc-radius: 16px;

    /* Text – 3 úrovne kontrastu */
    --dc-text-strong: #e0e0e0;            /* headline */
    --dc-text: rgba(224, 224, 224, .9);                   /* body */
    --dc-text-muted: rgba(224,224,224,.8);  /* meta */

    /* Kompatibilita (ak niekde používate dc-muted) */
    --dc-muted: var(--dc-text-muted);

    --dc-card-bg: rgba(255,255,255,.72);
    --dc-card-border: rgba(255,255,255,.28);

    --dc-field-bg: rgba(255,255,255,.78);
    --dc-field-border: rgba(30,42,53,.12);

    --dc-shadow: 0 18px 60px rgba(0,0,0,.22);
    --dc-shadow-soft: 0 10px 24px rgba(0,0,0,.10);

    --dc-primary: #1f6feb; /* jemná modrá */
    --dc-primary-hover: #1a5fd1;
}

.bi-shield-check {
    color: lightgreen;
}

body{
    color: var(--dc-text);
    min-height: 100vh;
    background:
            linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
            url("bg_lightblue.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Mliečne sklo (premium glass) */
.glass{
    position: relative;
    border-radius: var(--dc-radius-xl);
    border: 1px solid rgba(255,255,255,.34);
    background:
            radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.78), rgba(255,255,255,.55) 45%, rgba(255,255,255,.40) 100%),
            linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.44));
    box-shadow:
            0 18px 60px rgba(0,0,0,.20),
            inset 0 1px 0 rgba(255,255,255,.55);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    overflow: hidden;
}

.glass::before{
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(800px 300px at 15% 0%, rgba(255,255,255,.55), transparent 60%);
    pointer-events: none;
}

.glass::after{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
    opacity: .10;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Headline */
.dc-title{
    font-size: 1.8rem !important;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--dc-text-strong);
}

/* Body text v lead nech je čitateľný, nie „zaprášený“ */
.lead{
    color: var(--dc-text) !important;
}

/* Jemnejší badge */
.brand-badge{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(31,111,235,.10);
    border: 1px solid rgba(31,111,235,.18);
    color: var(--dc-text) !important;
    font-weight: 600;
    font-size: .9rem;
}

.tiny{
    font-size: .9rem;
    color: var(--dc-text-muted) !important;
}

/* Jemnejšie drobné texty */
.dc-muted{
    color: var(--dc-text-muted) !important;
}

/* Form layout: input + button */
.dc-form{
    display: flex;
    gap: 10px;
    align-items: stretch;
}

@media (max-width: 575.98px){
    .dc-form{
        flex-direction: column;
    }
}

/* Input wrapper s ikonou vnútri */
.dc-field{
    position: relative;
    flex: 1;
}

.dc-field i{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(28,47,66,.62);
    pointer-events: none;
}

.dc-input{
    height: 52px;
    border-radius: var(--dc-radius);
    padding-left: 44px;
    background: var(--dc-field-bg);
    border: 1px solid var(--dc-field-border);
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    color: rgba(28,47,66,.90);
    transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

.dc-input::placeholder{
    color: rgba(28,47,66,.52);
}

.dc-input:focus{
    border-color: rgba(31,111,235,.45);
    box-shadow: 0 0 0 .20rem rgba(31,111,235,.18), 0 10px 18px rgba(0,0,0,.07);
}

/* Jemnejšie validácie */
.was-validated .form-control:invalid,
.form-control.is-invalid{
    border-color: rgba(220,53,69,.45) !important;
    box-shadow: 0 0 0 .20rem rgba(220,53,69,.12) !important;
}

/* Button – elegantnejší */
.dc-btn{
    height: 52px;
    border-radius: var(--dc-radius);
    padding: 0 18px;
    font-weight: 600;
    letter-spacing: -0.01em;

    background: linear-gradient(
            180deg,
            #2a7fff 0%,
            #1f6feb 60%,
            #1a5fd1 100%
    );

    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
            0 10px 24px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.35);

    color: #ffffff;
    transition:
            transform .08s ease,
            box-shadow .15s ease,
            filter .15s ease,
            background .15s ease;
}

.dc-btn:hover{
    background: var(--dc-primary-hover);
    box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

.dc-btn:active{
    transform: translateY(1px);
}

/* Divider jemnejší */
.dc-hr{
    opacity: .15;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
    :root{
        --dc-text-strong: #f5f8fc;
        --dc-text: rgba(245,248,252,.92);
        --dc-text-muted: rgba(245,248,252,.70);

        --dc-card-bg: rgba(18,22,32,.62);
        --dc-card-border: rgba(255,255,255,.10);
        --dc-field-bg: rgba(255,255,255,.06);
        --dc-field-border: rgba(255,255,255,.16);
        --dc-shadow: 0 18px 60px rgba(0,0,0,.50);
        --dc-shadow-soft: 0 12px 26px rgba(0,0,0,.35);
    }

    .glass{
        border: 1px solid rgba(255,255,255,.12);
        background:
                radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.12), rgba(255,255,255,.06) 55%, rgba(255,255,255,.04) 100%),
                linear-gradient(180deg, rgba(18,22,32,.62), rgba(18,22,32,.46));
        box-shadow:
                0 22px 70px rgba(0,0,0,.55),
                inset 0 1px 0 rgba(255,255,255,.10);
    }

    .brand-badge{
        color: rgba(245,248,252,.92) !important;
        background: rgba(31,111,235,.14);
        border-color: rgba(31,111,235,.22);
    }

    .dc-field i{
        color: rgba(245,248,252,.62);
    }

    .dc-input{
        color: rgba(245,248,252,.85);
    }

    .dc-input::placeholder{
        color: rgba(245,248,252,.50);
    }
}

/* Glassmorphism – form container (css.glass štýl, jemne vyladené) */
.glass-form{
    margin-top: 1.5rem;
    padding: 1.25rem 1.25rem 1.4rem;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(8px) saturate(1.15);
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

/* Jemné vnútorné oddelenie inputu a CTA */
.glass-form .dc-form{
    margin-bottom: 0.75rem;
}

/* Alert v glass forme – base (decentne) */
.glass-form .alert{
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--dc-text);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media (prefers-color-scheme: dark){
    .glass-form{
        background: rgba(20, 25, 40, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
    }

    .glass-form .alert{
        background: rgba(30, 35, 55, 0.55);
        border-color: rgba(255, 255, 255, 0.18);
        color: var(--dc-text);
    }
}

/* Checklist s jemnou zelenou fajkou */
.dc-checklist{
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.dc-checklist li{
    position: relative;
    padding-left: 28px;
    margin-bottom: 0.55rem;
    color: var(--dc-text);
    font-size: 1rem;
    line-height: 1.4;
}

.dc-checklist li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.05em;
    color: #2fbf71; /* jemná profesionálna zelená */
    font-weight: 700;
}

/* Dark mode – trochu svetlejšia zelená */
@media (prefers-color-scheme: dark){
    .dc-checklist li::before{
        color: #42d58a;
    }
}

.swl {
    color: rgba(240,240,240,.90);
    font-weight: bold;
}

/* GDPR modal – jemnejší vzhľad, bez “šedej krabice” */
#gdprModal .modal-content{
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.92);
}

@media (prefers-color-scheme: dark){
    #gdprModal .modal-content{
        background: rgba(18,22,32,.92);
        border-color: rgba(255,255,255,.12);
    }
    #gdprModal .modal-title,
    #gdprModal .modal-body{
        color: rgba(245,248,252,.92);
    }
}

/* =========================================================
   Stavové farby pre alerty v glass forme (Bootstrap 5.3)
   - prepisujeme aj --bs-alert-* aby to bolo stabilné
   ========================================================= */

.glass-form .alert-success{
    --bs-alert-bg: rgba(46, 204, 113, 0.18);
    --bs-alert-border-color: rgba(46, 204, 113, 0.45);
    --bs-alert-color: #eafff3;

    background: rgba(46, 204, 113, 0.18);
    border-color: rgba(46, 204, 113, 0.45);
    color: #eafff3;
}

.glass-form .alert-info{
    --bs-alert-bg: rgba(52, 152, 219, 0.18);
    --bs-alert-border-color: rgba(52, 152, 219, 0.45);
    --bs-alert-color: #eef7ff;

    background: rgba(52, 152, 219, 0.18);
    border-color: rgba(52, 152, 219, 0.45);
    color: #eef7ff;
}

.glass-form .alert-warning{
    --bs-alert-bg: rgba(241, 196, 15, 0.18);
    --bs-alert-border-color: rgba(241, 196, 15, 0.45);
    --bs-alert-color: #fffbe6;

    background: rgba(241, 196, 15, 0.18);
    border-color: rgba(241, 196, 15, 0.45);
    color: #fffbe6;
}

.glass-form .alert-danger{
    --bs-alert-bg: rgba(231, 76, 60, 0.18);
    --bs-alert-border-color: rgba(231, 76, 60, 0.45);
    --bs-alert-color: #ffecec;

    background: rgba(231, 76, 60, 0.18);
    border-color: rgba(231, 76, 60, 0.45);
    color: #ffecec;
}

.brand-icon{
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}