.t5evo {
    --primary-color: #FFD700;
}

.voyahpassion {
    .car-welcome {
        --primary-color: #ed78ff;
    }
}

.voyahfree {
    .car-welcome {
        --primary-color: #57abff;
    }
}

.shine {
    .car-welcome {
        --primary-color: rgb(255, 59, 59);
    }
}

.car-welcome {
    user-select: none;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    background-size: cover;
    background-position: center;
    height: 100vh !important;
    max-width: 100vw !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.car-welcome-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.image-indicators {
    position: absolute;
    bottom: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    background-color: transparent;
}

.image-indicator {
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background-color: #ffffff69;
    transition: all 0.3s ease;
}

.image-indicator:hover {
    cursor: pointer;
    background-color: white;
    transform: scale(1.1);
}

.image-indicator.active {
    background-color: var(--primary-color);
    transform: scale(1.4);
}

.t5evo .car-welcome {
    background-image: url('../media/T5_EVO_muszaki-scaled.jpg');
}

.voyahfree .car-welcome {
    background-image: url('../media/voyah-free-2.webp');
}

.voyahpassion .car-welcome {
    background-image: url('../media/voyah-passion.webp');
}

.shine .car-welcome {
    background-image: url('../media/df-shine.jpg');
}

.car-arrow-left,
.car-arrow-right {
    position: absolute;
    top: 80%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    border-radius: var(--round-border-radius);
    font-size: 1.6em;
    color: white;
    z-index: 999;
    padding: 0.4em;
}

.car-arrow-left:hover,
.car-arrow-right:hover {
    color: var(--primary-color);
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
}

.car-arrow-left {
    left: 1em;
}

.car-arrow-right {
    right: 1em;
}

.car-welcome-quote {
    color: white;
    font-size: 2.2em;
    text-align: center;
    padding: 1em;
    border-radius: var(--border-radius);
    padding: 1.2em;
    background-color: #00000099;
}

.site-section>p {
    margin-top: 0;
    padding-left: 1em;
    user-select: none;
    font-size: 0.8em;
}

.site-section>h1 {
    user-select: none;
}

.tesztvez-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    width: clamp(20em, 70%, 90%);
    min-width: 100%;
}

.tesztvez-card {
    margin: 2em 0 3em 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 1em;
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    background-color: var(--secondary-color);
    padding: 1em;
    border-radius: 0.75em;
    outline: 2px solid var(--primary-color);
    border: 4px solid var(--primary-bg);
    min-height: 10em;
    transition: all 0.3s;
    user-select: none;
    box-shadow: 6px 12px 16px -3px rgba(0, 0, 0, 0.2);
}

.dark-mode .tesztvez-card {
    box-shadow: 6px 12px 16px -3px rgba(0, 0, 0, 0.5);
}

.car-card-content-container {
    display: flex;
    flex-direction: column;
}

.tesztvez-card:hover {
    transform: translateY(-0.5em);
    outline: 2px solid var(--text-color);
}

.tesztvez-card>p {
    margin: 0;
}

.tesztvez-card-step {
    font-size: 1.6em;
    color: color-mix(in srgb, var(--primary-bg) 90%, var(--primary-color) 20%);
    font-weight: bold;
    margin-bottom: 0.5em;
    aspect-ratio: 1;
    padding: 0.1em 0.4em;
    border-radius: var(--round-border-radius);
}

.tesztvez-models {
    margin: 2em;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    justify-content: start;
    align-items: end;
}

.tesztvez-models * {
    transition: all 0.3s ease-in-out;
}

.tesztvez-model {
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-color);
    padding: 0.4em 0.6em;
    border-radius: 0.3em;
    font-size: 1.25em;
    color: var(--text-color);
    box-shadow: 1px 2px 8px -1px rgba(0, 0, 0, 0.2);
}

.tesztvez-model:hover {
    background-color: color-mix(in srgb, var(--primary-color) 90%, white 30%);
    color: black;
    cursor: pointer;
}

.tesztvez-model:hover .tesztvez-model-name {
    transform: scale(1.1);
}

.tesztvez-model:hover .tesztvez-model-image {
    border-color: rgb(0, 0, 0);
}

.tesztvez-model-image {
    width: auto;
    height: 1.7em;
    object-fit: cover;
    padding-right: 0.4em;
    border-right: 2px solid var(--primary-color);
}

.tesztvez-model-name {
    font-weight: bold;
    padding: 0 0.5em 0 0.7em;
}

.tesztvez-model.checked {
    background-color: rgb(50, 220, 50) !important;
    color: rgb(0, 75, 16) !important;
}

.tesztvez-model.checked .tesztvez-model-image {
    border-color: rgb(0, 75, 16) !important;
}

.tesztvez-submit {
    color: var(--text-color);
    padding: 0.6em 2em;
    background-color: transparent;
    border-radius: var(--round-border-radius);
    font-size: 1.2em;
    cursor: pointer;
    outline: 2px solid var(--primary-color);
    display: block;
    grid-row: 2 / span 1;
    transition: border-radius 0.6s, color 0.3s, background-color 0.3s;
}

.tesztvez-submit:hover {
    background-color: var(--primary-color);
    color: black;
    border-radius: 0.25em;
}

.shine .tesztvez-submit:hover,
.shine .tesztvez-btn:hover {
    color: white !important;
}

.tesztvez-gdpr {
    font-size: 0.5em;
    margin-top: 1em;
    display: inline-block;
}

.tesztvez-header {
    font-size: 1.6em;
    margin: 1em 0 0.6em 0;
    text-align: center;
}

.tesztvez-hr {
    width: 30%;
    margin: 0 auto;
    border: 2px solid var(--primary-color);
    border-radius: var(--round-border-radius);
}

.tesztvez-form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.tesztvez-form-container:has(input:invalid) .tesztvez-submit {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.tesztvez-form-container:has(input:invalid) .tesztvez-submit:hover {
    border-radius: var(--round-border-radius) !important;
}

.tesztvez-form {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1em;
}

.tesztvez-form-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    justify-content: start;
    align-items: center;
    margin-top: 4em;
}

.tesztvez-label {
    font-size: 0.9em;
    text-align: left;
    color: var(--text-color);
    white-space: nowrap;
    padding: 0 0.2em;
    padding-left: 2em;
}

.tesztvez-model-label {
    font-size: 0.8em;
    color: white;
    text-align: left;
    margin-left: 2.2em;
}

.tesztv-input-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--secondary-color);
    padding: 0.8em;
    border-radius: 1.5em;
    border: 2px solid var(--primary-color);
    transition: border 0.2s;
}

.tesztv-input-container:has(.tesztvez-input:focus:invalid) {
    border: 2px solid rgb(255, 73, 73);
}

.tesztv-input-container:has(.tesztvez-input:focus:valid) {
    border: 2px solid rgb(132, 253, 62);
}

.tesztv-input-container:has(.tesztvez-input:focus:placeholder-shown) {
    border: 2px solid var(--text-color);
}

.tesztvez-input {
    width: 100%;
    background-color: transparent;
    outline: none;
    color: var(--text-color);
    font-size: 0.8em;
}

.tesztvez-dropdown {
    width: 100%;
    background-color: var(--secondary-color);
    outline: none;
    color: var(--text-color);
    font-size: 0.8em;
    padding: 0.9em;
    border-radius: 1.5em;
    border: 2px solid var(--primary-color);
}

.dongfeng-desc-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    max-width: 100%;
    padding: 1em;
    font-size: 0.8em;
    line-height: 1.6em;
}

.dongfeng-desc-container h3 {
    margin-top: 0;
    margin-bottom: 0.6em;
    font-size: 1.5em;
}

.dongfeng-readless-paragraph {
    margin: 0;
    max-height: 4.2em;
    overflow: hidden;
}

.dongfeng-readmore {
    width: 100%;
    height: 2em;
    box-shadow: 0 -12px 28px 12px var(--primary-bg);
    display: flex;
    align-items: start;
    justify-content: center;
    transition: all 0.3s ease;
}

.dongfeng-readmore-btn {
    color: color-mix(in srgb, transparent 60%, var(--text-color) 70%);
    background-color: transparent;
    border: none;
    position: relative;
    transition: all 0.3s ease;
    font-size: 1em;
    padding: 1em 0.4em;
}

.dongfeng-readmore-btn::after {
    content: '';
    position: absolute;
    bottom: 1.1em;
    width: 0;
    height: 1px;
    background-color: var(--primary-color);
    left: 10%;
    transition: all 0.3s ease;
}

.dongfeng-readmore-btn:hover {
    cursor: pointer;
    color: var(--text-color);
    transform: translateY(0.2em);
}

.dongfeng-readmore-btn:hover::after {
    width: 80%;
}

.dongfeng-desc-container:has(.dongfeng-readmore-content:not(.hidden)) .dongfeng-readmore {
    box-shadow: none;

    .dongfeng-readmore-btn:hover {
        transform: translateY(-0.2em);
    }
}

@media screen and (max-width: 1280px) {
    body {
        font-size: 1.5vw;
        grid-template-rows: auto 18em;
    }

    .head-link {
        font-size: 1.1em;
    }

    .car-welcome-quote {
        font-size: 1.8em;
        padding: 0.8em;
        top: 45%;
    }

    .tesztvezetes-button {
        font-size: 1.2em;
        padding: 0.4em 0.8em;
    }

    .col-4 .car-promo-card h2 {
        font-size: 1.8em;
    }
}

@media screen and (max-width: 840px) {
    body {
        font-size: 3vw;
        grid-template-rows: auto 20em;
    }

    .head-elements {
        margin-left: 0;
    }

    .head-link {
        display: none;
    }

    .head-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }

    .car-welcome-quote {
        font-size: 2em;
        padding: 1.5em;
        min-width: 100%;
        top: 40%;
    }

    .tesztvezetes-button {
        font-size: 1.6em;
        padding: 0.5em 1em;
    }

    .logo-header {
        height: 2.3em;
    }

    .mode-switch {
        font-size: 1.4em;
        padding: 0.3em 0.5em;
    }

    .logo-element img {
        content: url('../media/dongfeng_logo_kicsi.png');
    }

    .car-arrow-left {
        left: 0.5em;
        top: 75.5%;
        font-size: 1.5em;
        padding: 0.4em 1em;
    }

    .car-arrow-right {
        right: 0.5em;
        top: 75.5%;
        font-size: 1.5em;
        padding: 0.4em 1em;
    }

    .car-details {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .model-container {
        grid-template-columns: 50% 50% !important;
    }

    .car-model-card {
        min-width: 100%;
    }

    .car-card-info-element div {
        font-size: 0.8em;
    }

    h1 {
        font-size: 2.2em;
    }

    .car-card-name {
        font-size: 1.8em;
    }

    .car-card-buttons {
        padding: 0.8em;
        padding-top: 1.1em;
    }

    .car-card-image {
        width: 85%;
    }

    .car-promo-card {
        order: 999;
        grid-column: span 1;
        padding: 1em;
    }

    .car-promo-card h2 {
        margin-top: 2em;
        font-size: 2em;
    }

    .car-promo-card .tesztvez-btn {
        font-size: 1em;
        margin: auto;
    }

    .tesztvez-card-container {
        grid-template-columns: repeat(2, 1fr);
        margin: 3em 0 2em 0;
    }

    .tesztvez-card {
        margin: 0;
    }

    .tesztvez-dropdown-smallscreen {
        display: block;
    }

    .tesztvez-models {
        font-size: 0.6em;
        margin: 1em !important;
    }

    .tesztvez-form {
        grid-template-columns: 1fr;
    }

    .tesztvez-submit {
        grid-row: auto
    }

    .grid-size-cont {
        display: none;
    }
    .car-model-card:hover .car-card-image-link-overlay {
        opacity: 0;
    }
}

@media screen and (max-width: 567px) {
    body {
        font-size: 4vw;
        grid-template-rows: auto 25em;
    }

    .head-elements {
        flex-direction: column;
        align-items: center;
        margin-left: 0;
    }

    .head-link {
        display: none;
    }

    .car-welcome-quote {
        font-size: 1.5em;
        padding: 1em;
        top: 35%;
    }

    .mode-switch {
        font-size: 1.2em;
        padding: 0.5em 0.5em;
    }

    .model-container {
        grid-template-columns: 100% !important;
    }

    .car-card-info-element {
        min-width: 100%;
    }

    .car-card-info-element div {
        font-size: 1em;
    }

    .modell-nav-buttons {
        bottom: 10em;
        right: 0.9em;
    }

    .modell-nav-btn {
        font-size: 1.3em;
    }

    .car-promo-card {
        order: 999;
        grid-column: 1 !important;
    }

    .tesztvez-card-container {
        grid-template-columns: 1fr !important;
    }

    .tesztvez-dropdown-smallscreen {
        display: block;
    }

    .tesztvez-models {
        display: none;
    }

    .dongfeng-desc-container {
        line-height: 1.8em;
        letter-spacing: 0.8px;
    }

    .dongfeng-readless-paragraph {
        max-height: 8em;
        font-size: 1.1em;
    }

    .dongfeng-readmore-content {
        font-size: 1.2em;
    }

    .dongfeng-readmore-content h4 {
        font-size: 1.4em;
    }

    .dongfeng-desc-container h3 {
        font-size: 1.8em;
        margin-bottom: 0.5em;
    }


    .car-arrow-left,
    .car-arrow-right {
        display: none;
    }

    .image-indicator {
        width: 1.2em;
        height: 1.2em;
    }

    .image-indicators {
        gap: 0.8em;
        bottom: 10em;
    }

    .dev-promo {
        display: none;
    }
}

@media screen and (min-width: 840px) {
    .head-menu-button {
        display: none;
    }

    .head-link {
        display: inline-block;
    }

    .grid-sizes {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}

@media screen and (min-width: 567px) {
    .tesztvez-dropdown-smallscreen {
        display: none !important;
    }
}