/* ===========================================================
   HERO
=========================================================== */

.hero-configurator{

    display:grid;
    grid-template-columns:1.1fr 0.9fr;

    align-items:center;

    gap:60px;

    padding:70px 70px 20px;

    background:

linear-gradient(115deg,#101010 0%,#1a1a1a 55%,#232323 100%);

    color:#fff;

    border-radius:20px;

    overflow:hidden;

    position:relative;

    margin-bottom:40px;

}

.hero-configurator::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at right, rgba(255,255,255,.05), transparent 55%);

    pointer-events:none;

}

.hero-left{

    position:relative;
    z-index:2;

}

.hero-badge{

    display:inline-block;

    color:#d71920;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.hero-left h1{

   font-size:64px;

    line-height:1;

    margin:0 0 25px;

    font-weight:800;

    color:#fff;

}

.hero-left p{

    max-width:520px;

    font-size:20px;

    line-height:1.6;

    color:#d9d9d9;

}

.hero-features{

    display:flex;

    gap:35px;

    margin-top:45px;

}

.hero-feature{

    display:flex;

    flex-direction:column;

}

.hero-feature strong{

    font-size:17px;

}

.hero-feature span{

    color:#bdbdbd;

    font-size:14px;

    margin-top:6px;

}

.hero-right{

    position:relative;

    z-index:2;

    text-align:right;

}

.hero-right img{

    width:100%;

    max-width:620px;

    display:block;

    margin-left:auto;

}


/* ==========================================
   ZÁKLADNÍ LAYOUT
========================================== */

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#fafafa;
    color:#222;
}

.configurator{
    max-width:1200px;
    margin:60px auto;
    padding:0 20px;
}


/* ==========================================
   PROGRESS BAR
========================================== */

#progress{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin:50px 0 60px;
}

.progress-line{
    position:absolute;
    left:45px;
    right:45px;
    top:18px;
    height:4px;
    background:#ddd;
    border-radius:10px;
    z-index:0;
}

.progress-fill{
    position:absolute;
    left:45px;
    top:18px;
    height:4px;
    width:0;
    background:#d71920;
    border-radius:10px;
    transition:width .45s ease;
    z-index:1;
}

.step{
    position:relative;
    flex:1;
    text-align:center;
    cursor:pointer;
    z-index:2;
}

.circle{

    width:38px;
    height:38px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:0 auto 10px;

    border-radius:50%;

    background:#cfcfcf;
    color:#fff;

    font-weight:bold;

    transition:.3s;
}

.step.done .circle{
    background:#d71920;
}

.step.active .circle{
    background:#d71920;
    transform:scale(1.12);
    box-shadow:0 0 0 8px rgba(215,25,32,.12);
}

.label{
    font-size:14px;
    font-weight:600;
    color:#666;
}

.step.active .label{
    color:#d71920;
}


/* ==========================================
   OTÁZKY
========================================== */

#question-container{

    transition:.35s;

}

.options-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:20px;

    margin-top:35px;

}

.option{

    position:relative;

    padding:30px;

    border:2px solid #ddd;

    border-radius:14px;

    background:#fff;

    cursor:pointer;

    transition:.25s;

}

.option:hover{

    border-color:#d71920;

    transform:translateY(-5px);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.option.selected{

    border-color:#d71920;

    background:#fff7f7;

    box-shadow:0 10px 30px rgba(215,25,32,.15);

}

.option h3{

    margin-top:0;

    margin-bottom:12px;

}

.option p{

    color:#666;

    line-height:1.5;

}


/* ==========================================
   MODELY
========================================== */

.models{

    margin-top:25px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.model-tag{

    background:#efefef;

    padding:7px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}


/* ==========================================
   TLAČÍTKA
========================================== */

.buttons{

    display:flex;

    justify-content:space-between;

    margin-top:40px;

}

button{

    padding:15px 34px;

    border:none;

    border-radius:10px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

#backBtn{

    background:#ececec;

    color:#444;

}

#backBtn:hover{

    background:#ddd;

}

#nextBtn{

    background:#d71920;

    color:#fff;

}

#nextBtn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(215,25,32,.3);

}


/* ==========================================
   ANIMACE
========================================== */

.fade-out{

    opacity:0;

    transform:translateX(-40px);

}

.fade-in{

    opacity:1;

    transform:translateX(0);

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:768px){

    .options-grid{

        grid-template-columns:1fr;

    }

    .buttons{

        flex-direction:column;

        gap:15px;

    }

    button{

        width:100%;

    }

    .label{

        font-size:12px;

    }

}

.result{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    align-items:center;

    margin-top:60px;

}

.result-image img{

    width:100%;

}

.badge{

    display:inline-block;

    padding:8px 16px;

    background:#d71920;

    color:white;

    border-radius:30px;

    font-weight:bold;

    margin-bottom:20px;

}

.result ul{

    padding:0;

    list-style:none;

    margin:30px 0;

}

.result li{

    margin-bottom:14px;

}

.btn-result{

    display:inline-block;

    margin-top:20px;

    padding:16px 36px;

    background:#d71920;

    color:white;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

}

@media (max-width: 768px){

    .result{

        grid-template-columns:1fr;
        gap:30px;
        text-align:center;

    }

    .result-image img{

        max-width:320px;
        margin:auto;
        display:block;

    }

}

.result-alternatives{
    margin-top:70px;
}

.result-alternatives h3{
    margin-bottom:25px;
}

.alternatives{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.alternative-card{

    border:1px solid #ddd;
    border-radius:14px;
    padding:25px;
    text-align:center;
    background:white;
    transition:.25s;

}

.alternative-card:hover{

    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.alternative-card img{

    width:100%;
    max-height:180px;
    object-fit:contain;
    margin-bottom:20px;

}

.score{

    display:block;
    margin:15px 0;
    color:#d71920;
    font-weight:bold;

}

.score-big{

    font-size:26px;
    font-weight:bold;
    color:#d71920;
    margin-bottom:20px;

}

.btn-alt{

    display:inline-block;
    margin-top:10px;
    padding:12px 24px;
    background:#d71920;
    color:white;
    text-decoration:none;
    border-radius:8px;
    font-weight:bold;

}

.restart{

    text-align:center;

    margin-top:50px;

}

#restartConfigurator{

    background:#ececec;

    color:#333;

    border:none;

    padding:16px 34px;

    border-radius:10px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

#restartConfigurator:hover{

    background:#ddd;

}

/* ===========================================================
   MOBIL
=========================================================== */

@media (max-width: 768px){

    .hero-configurator{

        grid-template-columns:1fr;
        gap:20px;

        padding:35px 25px;

        text-align:center;

        border-radius:14px;

    }

    .hero-left{

        order:2;

    }

    .hero-right{

        order:1;
        text-align:center;

    }

    .hero-right img{

        width:100%;
        max-width:340px;

        margin:0 auto;

    }

    .hero-left h1{

        font-size:40px;
        line-height:1.05;

    }

    .hero-left p{

        max-width:none;
        font-size:17px;

    }

    .hero-features{

        flex-direction:column;

        gap:20px;

        margin-top:30px;

    }

}