.banner__main                   { background-image: url('../img/header/ok_desktop.jpg'); }
.banner__main.CITIGO            { background-image: url('../img/header/desktop/Citigo.jpg'); }
.banner__main.FABIA             { background-image: url('../img/header/desktop/Fabia.jpg'); }
.banner__main.FABIA_COMBI       { background-image: url('../img/header/desktop/Fabia_Combi.jpg'); }
.banner__main.KAROQ             { background-image: url('../img/header/desktop/Karoq.jpg'); }
.banner__main.KODIAQ            { background-image: url('../img/header/desktop/Kodiaq.jpg'); }
.banner__main.OCTAVIA           { background-image: url('../img/header/desktop/Octavia.jpg'); }
.banner__main.OCTAVIA_COMBI     { background-image: url('../img/header/desktop/Octavia_Combi.jpg'); }
.banner__main.RAPID_SPACEBACK   { background-image: url('../img/header/desktop/Rapid_Spaceback.jpg'); }
.banner__main.RAPID             { background-image: url('../img/header/desktop/Rapid.jpg'); }
.banner__main.ENYAQ          { background-image: url('../img/header/desktop/Enyaq.jpg'); }
.banner__main.ENYAQ_COUPE    { background-image: url('../img/header/desktop/Enyaq_Coupe.jpg'); }
.banner__main.SCALA             { background-image: url('../img/header/desktop/Scala.jpg'); }
.banner__main.SUPERB            { background-image: url('../img/header/desktop/Superb.jpg'); }
.banner__main.SUPERB_COMBI      { background-image: url('../img/header/desktop/Superb_Combi.jpg'); }
.banner__main.KAMIQ             { background-image: url('../img/header/desktop/Kamiq.jpg'); }

.banner__ok {
    background-image: url('../img/header/ok_desktop.jpg');
}

@media(max-width: 1000px) {
    .banner__main                   { background-image: url('../img/header/ok_mobile.jpg'); }
    .banner__main.CITIGO            { background-image: url('../img/header/mobile/Citigo.jpg'); }
    .banner__main.FABIA             { background-image: url('../img/header/mobile/Fabia.jpg'); }
    .banner__main.FABIA_COMBI       { background-image: url('../img/header/mobile/Fabia_Combi.jpg'); }
    .banner__main.KAROQ             { background-image: url('../img/header/mobile/Karoq.jpg'); }
    .banner__main.KODIAQ            { background-image: url('../img/header/mobile/Kodiaq.jpg'); }
    .banner__main.OCTAVIA           { background-image: url('../img/header/mobile/Octavia.jpg'); }
    .banner__main.OCTAVIA_COMBI     { background-image: url('../img/header/mobile/Octavia_Combi.jpg'); }
    .banner__main.RAPID_SPACEBACK   { background-image: url('../img/header/mobile/Rapid_Spaceback.jpg'); }
    .banner__main.RAPID             { background-image: url('../img/header/mobile/Rapid.jpg'); }
    .banner__main.ENYAQ          { background-image: url('../img/header/mobile/Enyaq.jpg'); }
    .banner__main.ENYAQ_COUPE    { background-image: url('../img/header/mobile/Enyaq_Coupe.jpg'); }
    .banner__main.SCALA             { background-image: url('../img/header/mobile/Scala.jpg'); }
    .banner__main.SUPERB            { background-image: url('../img/header/mobile/Superb.jpg'); }
    .banner__main.SUPERB_COMBI      { background-image: url('../img/header/mobile/Superb_Combi.jpg'); }
    .banner__main.KAMIQ             { background-image: url('../img/header/mobile/Kamiq.jpg'); }

    .banner__ok {
        background-image: url('../img/header/ok_mobile.jpg');
    }
}

.stars {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
}

.star {
    width: 100px;
    height: 100px;
    display: flex;
    justify-comtent: center;
    align-items: center;
    background: white url('../img/star.png') no-repeat center center;
}

.star:hover, 
.star.hovered {
    background: white url('../img/star_selected.png') no-repeat center center !important;
}

.description {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 5px;
}

.box {
    background: white;
    padding: 30px;
    width: 100%;
}

.box.option {
    min-height: 100px;
    display: flex;
}

.fields {
    margin-top: 60px;
}

.row {
    margin-top: 20px;
    display: flex; 
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; 
}

.radio + label::before,
.checkbox + label::before {
    background-color: #f1f2f2;
    border: 0;
    margin-right: 10px;
    border-radius: 0;
    position: relative;
}

.radio + label p,
.checkbox + label p {
    margin: 3px 0 0 0;
}

.checkbox:checked + label::before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA5klEQVQ4jbXSLQ7CMBTA8T9MzDXBLSQ1XKBirh6J5Aq7ArsCR+AK6DmwTGEmsDMTZIpkbgoEg5Cxja4bz72m/b2P1GHEEFr5rvQurvQos/w0GRMGDsCsOgqnf4IBGNx5CxwWcbIdhHfBMKDzX7A1bgJb4aYwwLR6EAitzkKrxVgwwERotQb2VZ4CyyJO0qHwq3P/I18Ah/oENjCAU2b50ZXe/KPIDFi50ovKLL/ZwgAOQJnlUUuBK8+V9Yah9luEVjsg6LhvDL87f0XDBNbwF95RoDfcGUKrndDqLrTajIbWCjStxzgeECJrbwHTA1EAAAAASUVORK5CYII=');
    background-size: 16px;
    background-position: center;
}

textarea,
textarea:active,
textarea:focus {
    border: none;
    padding: 0;
}

textarea::placeholder {
    font-size: 16px;
}

.buttons {
    display: flex;
    flex-align: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.email {
    margin-top: 20px;
}

.contact img {
    flex-grow: 0;
    max-width: 60px;
}

.contact div {
    flex-grow: 2;
}

.contact div p {
    text-align: left;
    margin: 5px 0;
}

button.next:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.copy {
    margin: 10px auto;
    text-align: center;
}