﻿@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

@keyframes spin {
    0 {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotateImageLoading {
    from {
        transform: translate(-50%,-50%) rotateY(0) scale(1.01)
    }

    to {
        transform: translate(-50%,-50%) rotateY(360deg) scale(1.01)
    }
}

.cmp-car-stock-search {
    padding: 80px 0
}

.cmp-car-stock-search__container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1920px;
    min-width: 320px;
    padding: 0 var(--dg-layout-margin)
}

.cmp-car-stock-search__title {
    text-align: center
}

    .cmp-car-stock-search__title .cmp-title__text {
        color: var(--dg-color-text-strong,#fafafa);
        font-family: var(--dg-font-family-base);
        font-weight: 300;
        text-transform: uppercase;
        font-size: var(--dg-font-size-headline-m);
        line-height: var(--dg-font-height-headline-m);
        letter-spacing: var(--dg-font-letter-spacing-m);
        word-break: break-word;
        margin: 0
    }

.cmp-car-stock-search__text {
    margin: 0 0 111px;
    text-align: center
}

    .cmp-car-stock-search__text .cmp-text, .cmp-car-stock-search__text .cmp-text p {
        color: var(--dg-color-text-strong,#fafafa);
        font-family: var(--dg-font-family-base);
        font-weight: 350;
        font-size: var(--dg-font-size-body-l);
        line-height: var(--dg-font-height-body-l);
        letter-spacing: var(--dg-font-letter-spacing-m);
        word-break: break-word
    }

        .cmp-car-stock-search__text .cmp-text a {
            color: var(--dg-color-text-strong,#fafafa);
            text-decoration: underline
        }

.cmp-car-stock-search__content {
    background: var(--dg-gradient-bg-glass-default,linear-gradient(179deg,var(--dg-global-opacity-white-15,rgba(250,250,250,0.15)) .73%,var(--dg-global-opacity-grey-05,rgba(195,195,203,0.05)) 84.63%,var(--dg-global-opacity-grey-10,rgba(195,195,203,0.1)) 99.44%));
    border-radius: 12px;
    padding: 32px 12px 24px
}

.cmp-car-stock-search__image {
    margin: -160px auto -28px;
    width: 264px;
    height: 184px;
    position: relative
}

    .cmp-car-stock-search__image.mod__zoom .cmp-image__image {
        object-fit: cover;
        transform: scale(1.4) translate(0,8%);
        transform-origin: center center
    }

    .cmp-car-stock-search__image .cmp-image__image {
        opacity: 1;
        transition: opacity .3s ease-in-out
    }

        .cmp-car-stock-search__image .cmp-image__image:hover {
            pointer-events: none
        }

        .cmp-car-stock-search__image .cmp-image__image.mod__loading {
            opacity: 0
        }

.cmp-car-stock-search__model, .cmp-car-stock-search__engine, .cmp-car-stock-search__car-type {
    display: block
}

    .cmp-car-stock-search__model label, .cmp-car-stock-search__engine label, .cmp-car-stock-search__car-type label, .cmp-car-stock-search__model select, .cmp-car-stock-search__engine select, .cmp-car-stock-search__car-type select {
        display: none
    }

.cmp-car-stock-search__filters {
    display: flex;
    flex-direction: column;
    gap: 20px
}

    .cmp-car-stock-search__filters .cmp-car-stock-search__button {
        display: none
    }

.cmp-car-stock-search__available-cars {
    margin: 20px 0 0;
    font-size: var(--dg-font-size-body-l);
    line-height: var(--dg-font-height-body-l);
    font-weight: 500;
    color: var(--dg-font-family-base);
    letter-spacing: var(--dg-font-letter-spacing-m);
    text-transform: uppercase;
    text-align: center
}

.cmp-car-stock-search__button {
    margin: 12px auto 0;
    display: flex;
    justify-content: center
}

@media(min-width:480px) {
    .cmp-car-stock-search__text {
        margin: 0 0 172px
    }

    .cmp-car-stock-search__content {
        padding: 56px 12px 24px
    }

    .cmp-car-stock-search__image {
        margin: -240px auto -30px;
        width: 400px;
        height: 268px
    }

        .cmp-car-stock-search__image.mod__zoom .cmp-image__image {
            transform: scale(1.4) translate(2%,8%)
        }
}

@media(min-width:768px) {
    .cmp-car-stock-search {
        min-height: 1024px;
        display: flex;
        align-items: center
    }

    .cmp-car-stock-search__title .cmp-title__text {
        font-size: var(--dg-font-size-headline-l);
        line-height: var(--dg-font-height-headline-l);
        margin: 0
    }

    .cmp-car-stock-search__text {
        margin: 0 0 168px
    }

    .cmp-car-stock-search__content {
        margin: 0 123px;
        padding: 48px 20px 24px
    }

    .cmp-car-stock-search__image {
        margin: -248px auto -30px
    }

        .cmp-car-stock-search__image.mod__zoom .cmp-image__image {
            transform: scale(1.4) translate(0,12%)
        }

    .cmp-car-stock-search__filters {
        gap: 32px;
        margin: 0 auto
    }

    .cmp-car-stock-search__available-cars {
        margin: var(--dg-spacing-l-1) 0 0
    }

    .cmp-car-stock-search__button {
        margin: 16px auto 0
    }
}

@media(min-width:1024px) {
    .cmp-car-stock-search {
        min-height: 800px
    }

    .cmp-car-stock-search__content {
        margin: 0;
        padding: 48px 32px var(--dg-spacing-l-1)
    }

    .cmp-car-stock-search__image {
        margin: -240px auto 0
    }

        .cmp-car-stock-search__image.mod__zoom .cmp-image__image {
            transform: scale(1.6) translate(3%,10%)
        }

    .cmp-car-stock-search__filters {
        flex-direction: row;
        width: 100%
    }

        .cmp-car-stock-search__filters .cmp-car-stock-search__button {
            display: block
        }

    .cmp-car-stock-search__model, .cmp-car-stock-search__engine, .cmp-car-stock-search__car-type {
        flex: 1
    }

    .cmp-car-stock-search__button {
        display: none;
        margin: 0;
        align-content: flex-end;
        flex: 1
    }
}

@media(min-width:1440px) {
    .cmp-car-stock-search {
        min-height: 810px
    }

    .cmp-car-stock-search__content {
        margin: 0 156px
    }
}

@media(min-width:1920px) {
    .cmp-car-stock-search {
        min-height: 1080px
    }

    .cmp-car-stock-search__text {
        margin: 0 0 180px
    }

    .cmp-car-stock-search__content {
        margin: 0 204px
    }
}
