.cs-car-value-home{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    min-height:310px;
    margin-top:14px;
    overflow:hidden;
    border-radius:20px;

    background:#0D1217;

    border:0;
    box-shadow:none;
}


/* =========================================================
   IMAGE
========================================================= */

.cs-car-value-home__visual{
    position:relative;
    min-height:310px;
    overflow:hidden;

    display:block;

    color:inherit;
    text-decoration:none;

    border-top-right-radius:30px;
    border-bottom-right-radius:30px;
}


.cs-car-value-home__visual img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;

    transform:none !important;
    transition:none !important;
}


.cs-car-value-home__visual:hover img{
    transform:none !important;
}


/* gradient over image */

.cs-car-value-home__shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(4,8,12,.76) 0%,
            rgba(4,8,12,.50) 37%,
            rgba(4,8,12,.12) 70%,
            rgba(4,8,12,.34) 100%
        ),
        linear-gradient(
            0deg,
            rgba(4,8,12,.58) 0%,
            transparent 62%
        );
}


.cs-car-value-home__visual-copy{
    position:absolute;

    left:36px;
    bottom:34px;

    width:min(450px,78%);

    z-index:2;
}


.cs-car-value-home__visual-copy h2{
    margin:0;

    color:#fff;

    font-size:30px;
    line-height:1.08;

    font-weight:800;
    letter-spacing:-.035em;
}


.cs-car-value-home__visual-copy p{
    margin:10px 0 0;

    max-width:390px;

    color:rgba(255,255,255,.70);

    font-size:13px;
    line-height:1.5;
}



/* =========================================================
   RIGHT FORM
========================================================= */

.cs-car-value-home__form-side{
    display:flex;
    align-items:center;

    padding:28px 38px;

    background:#0D1217;
}


.cs-car-value-home__form{
    width:100%;
}


.cs-car-value-home__field{
    min-width:0;
}


.cs-car-value-home__field label{
    display:block;

    margin-bottom:6px;

    color:#D7DDE3;

    font-size:11px;
    font-weight:700;
}



/* =========================================================
   SPZ / VIN
========================================================= */

.cs-car-value-home__plate{
    display:flex;

    height:54px;

    overflow:hidden;

    border:1px solid #2A343E;
    border-radius:10px;

    background:#ECEEF0;
}


.cs-car-value-home__plate:focus-within{
    border-color:#3F7FB8;
}


/* EU / Slovakia dark blue */

.cs-car-value-home__plate-sk{
    width:68px;
    min-width:68px;

    display:flex;
    flex-direction:column;

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

    gap:3px;

    background:#003399;

    color:#fff;
}


.cs-car-value-home__stars{
    color:#FFD700;

    font-size:7px;
    line-height:1;

    letter-spacing:1px;
}


.cs-car-value-home__plate-sk span{
    font-size:16px;
    line-height:1;

    font-weight:800;
    letter-spacing:.05em;
}


.cs-car-value-home__plate input{
    flex:1;

    min-width:0;
    height:100%;

    padding:0 17px;

    border:0;
    outline:0;

    background:#ECEEF0;

    color:#3E464D;

    font:inherit;

    font-size:16px;
    font-weight:800;

    letter-spacing:.035em;

    text-transform:uppercase;
}


.cs-car-value-home__plate input::placeholder{
    color:#8B9299;

    font-weight:700;
}



/* =========================================================
   ALEBO
========================================================= */

.cs-car-value-home__or{
    display:flex;
    align-items:center;

    gap:10px;

    margin:9px 0;
}


.cs-car-value-home__or::before,
.cs-car-value-home__or::after{
    content:"";

    flex:1;

    height:1px;

    background:rgba(255,255,255,.055);
}


.cs-car-value-home__or span{
    color:#66727C;

    font-size:9px;
    font-weight:600;

    letter-spacing:.02em;
}



/* =========================================================
   MANUAL FIELDS
========================================================= */

.cs-car-value-home__manual{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:11px;
}


.cs-car-value-home__manual input,
.cs-car-value-home__manual select{
    width:100%;
    height:43px;

    box-sizing:border-box;

    padding:0 13px;

    border:1px solid #28333D;
    border-radius:8px;

    outline:0;

    background:#090F14;

    color:#E9EDF1;

    font:inherit;

    font-size:13px;
}


.cs-car-value-home__manual input::placeholder{
    color:#68737D;
}


/* clean select arrow */

.cs-car-value-home__manual select{
    appearance:none;
    -webkit-appearance:none;

    padding-right:38px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2397A3AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:
        right 13px center;

    background-size:14px;
}



/* =========================================================
   CARSELECT CTA
========================================================= */

.cs-car-value-home__button{
    width:100%;
    height:46px;

    margin-top:14px;

    border:0;
    border-radius:8px;

    /* EXACT CARSELECT .sk BLUE */
    background:#2E9FE5;

    color:#FFFFFF;

    font-size:13px;
    font-weight:850;

    cursor:pointer;

    transition:
        filter .15s ease,
        transform .15s ease;
}


.cs-car-value-home__button:hover{
    filter:brightness(1.07);

    transform:translateY(-1px);
}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

    .cs-car-value-home{
        grid-template-columns:1fr;
    }


    .cs-car-value-home__visual{
        min-height:260px;

        border-top-right-radius:0;
        border-bottom-right-radius:0;
    }


    .cs-car-value-home__form-side{
        padding:26px 22px 28px;
    }


    .cs-car-value-home__visual-copy{
        left:24px;
        bottom:24px;
    }


    .cs-car-value-home__visual-copy h2{
        font-size:27px;
    }
}


@media(max-width:560px){

    .cs-car-value-home__manual{
        grid-template-columns:1fr;
    }


    .cs-car-value-home__visual{
        min-height:230px;
    }

}