/* MOBILE FIRST */

.header-ul li:nth-of-type(1) {
    display: none;
}

.blocks-of-input-and-catalog {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: fixed;
    margin: 10px 0 0 10px;
    z-index: 11;
}

.div-input-search {
    display: flex;
}

.input-search {
    width: 250px;
    border-radius: 20px 0 0 20px;
    border: var(--accent-color) 3px dotted;
    background-color: var(--dark-theme);
    color: var(--light-theme);
    padding: 5px;
    font-weight: bold;
    font-size: clamp(18px, 1.4vw, 28px);
}

.input-search::placeholder {
    color: var(--light-theme);
    font-weight: bold;
    font-size: clamp(18px, 1.4vw, 28px);
}

.input-search.dark {
    background-color: var(--light-theme);
    color: var(--dark-theme);
}

.input-search.dark::placeholder {
    color: var(--dark-theme);
}

.search {
    width: 80px;
    border-radius: 0 20px 20px 0;
    border-top: var(--dark-theme) 3px solid;
    border-right: var(--dark-theme) 3px solid;
    border-bottom: var(--dark-theme) 3px solid;
    border-left: none;
    background-color: var(--accent-color);
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search.dark {
    border-top: var(--light-theme) 3px solid;
    border-right: var(--light-theme) 3px solid;
    border-bottom: var(--light-theme) 3px solid;
}

.suggested-offers-by-input {
    display: none;
    width: 300px;
    height: auto;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    background-color: var(--dark-theme);
    position: absolute;
    top: 50%;
    border-radius: 0 0 30px 30px;
    z-index: 6;
}

.suggested-offers-by-input.dark {
    background-color: var(--light-theme);
}

.suggested-offers-by-input a {
    color: var(--light-theme);
    font-size: clamp(16px, 1.55vw, 36px);
    font-weight: bold;
    text-decoration: none;
    transition: background-color var(--transition-standard);
}

.suggested-offers-by-input.dark a {
    color: var(--dark-theme);
}

.suggested-offers-by-input hr {
    width: 100%;
    border: 2px solid var(--accent-color);
}

.suggested-offers-by-input.shown {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-catalog {
    background-color: var(--dark-theme);
    color: var(--light-theme);
    border-radius: var(--border-radius-major-elements);
    font-size: clamp(18px, 1.4vw, 28px);
    font-weight: bold;
    padding: 10px;
    position: relative;
    z-index: 5;
}

.btn-catalog.dark {
    background-color: var(--light-theme);
    color: var(--dark-theme);
}

.div-catalog {
    position: relative;
}

.block-catalog img {
    margin-left: 10px;
}

.block-catalog:hover img {
    transform: rotate(180deg);
}

.modal-catalog {
    display: none;
    position: absolute;
    width: 300px;
    background-color: var(--dark-theme);
    border-radius: var(--border-radius-major-elements);
    padding: 10px;
}

.modal-catalog.dark {
    background-color: var(--light-theme);
}

.modal-catalog.dark a {
    color: var(--dark-theme);
}

.modal-catalog.shown {
    display: block;
}

.modal-catalog ul {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.modal-catalog a {
    color: var(--light-theme);
    font-size: clamp(16px, 1.55vw, 36px);
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding: 5px;
    transition: background-color var(--transition-standard);
}

.modal-catalog:hover {
    display: block;
}

.modal-catalog:hover img {
    transform: rotate(180deg);
}

.slider-offer {
    margin: 50px;
}

.div-slider-offer {
    width: 100%;
    display: flex;
}

.insertion-of-image {
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-major-elements);
}

.slider {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100px;
    max-height: 400px;
    transition: transform var(--transition-standard);
}

.slider-item {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    position: relative;
}

.slider img {
    width: 100%;
    max-width: 550px;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
}

.slider-item:nth-of-type(1)::after, .slider-item:nth-of-type(2)::after, .slider-item:nth-of-type(3)::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 100%;
    background-size: contain;
    filter: blur(10px);
    z-index: -1;
}

.slider-item:nth-of-type(1)::after {
    background-image: url(../images/banners/offer-1.webp);
}

.slider-item:nth-of-type(2)::after {
    background-image: url(../images/banners/offer-2.webp);
}

.slider-item:nth-of-type(3)::after {
    background-image: url(../images/banners/offer-3.webp);
}

.left-arrow-of-slider, .right-arrow-of-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

.btn-left-arrow-of-slider, .btn-right-arrow-of-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: var(--dark-theme);
    border-radius: var(--border-radius-major-elements);
    cursor: pointer;
    transition: background-color var(--transition-standard);
}

.btn-left-arrow-of-slider.dark, .btn-right-arrow-of-slider.dark {
    background-color: var(--light-theme);
}

.btn-left-arrow-of-slider img, .btn-right-arrow-of-slider img {
    width: 35px;
}

.left-arrow-of-slider img {
    transform: rotate(-90deg);
}

.right-arrow-of-slider img {
    transform: rotate(90deg);
    max-width: 100px;
}

.offers {
    display: grid;
    justify-content: center;
}

.current-offers {
    display: inline-block;
    background-color: var(--dark-theme);
    color: var(--light-theme);
    padding: var(--padding-texts-titles);
    font-size: var(--size-titles);
    font-weight: bold;
    border-radius: var(--border-radius-major-elements);
    margin: 0;
}

.current-offers.dark {
    background-color: var(--light-theme);
    color: var(--dark-theme);
}

.title-of-section {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--dark-theme);
    padding: var(--padding-texts-titles);
    font-size: var(--size-titles);
    font-weight: bold;
    border-radius: var(--border-radius-major-elements);
}

.three-offer {
    width: 100%;
    padding: 20px 0;
    border-top: var(--dark-theme) 3px solid;
    border-bottom: var(--dark-theme) 3px solid;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.three-offer.dark {
    border-top: var(--light-theme) 3px solid;
    border-bottom: var(--light-theme) 3px solid;
}

.card-offer {
    width: 300px;
    background-color: var(--dark-theme);
    color: var(--light-theme);
    border-radius: var(--border-radius-card-offer);
}

.card-offer.dark {
    background-color: var(--light-theme);
    color: var(--dark-theme);
}

.card-offer img {
    max-width: 300px;
    height: auto;
    border-radius: var(--border-radius-card-offer) var(--border-radius-card-offer) 0 0;
}

.description-of-offer {
    color: var(--light-theme);
    margin: 10px;
}

.description-of-offer.dark {
    color: var(--dark-theme);
}

.div-find {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: flex-end;
}

.find {
    background-color: var(--accent-color);
    color: var(--dark-theme);
    font-size: clamp(18px, 1.35vw, 36px);
    font-weight: bold;
    border-radius: var(--border-radius-major-elements);
    margin: 10px;
    padding: 10px;
    cursor: pointer;
}

.div-current-bag {
    position: fixed;
    right: 10px;
    bottom: 10px;
}

.current-bag {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: var(--accent-color);
    border: var(--dark-theme) 3px dotted;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.current-bag.dark {
    border: var(--light-theme) 3px dotted;
}

/* extra styles which not necessary use(only by user) */

.dark-bg {
    display: none;
}

.dark-bg.shown {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9;
}

.in-case-if-wrong {
    max-width: 450px;
    font-weight: bold;
    font-size: clamp(16px, 1.3vw, 24px);
    text-align: center;
    background-color: red;
    border-radius: var(--border-radius-major-elements);
    padding: 5px;
    margin-bottom: 10px;
    display: none;
}

.if-order-successful {
    position: fixed;
    right: 0;
    top: 0;
    background-color: var(--accent-color);
    color: var(--dark-theme);
    border-radius: 0 0 0 20px;
    padding: 15px;
    filter: drop-shadow(-5px 5px 40px var(--accent-color));
    z-index: 11;
    transform: translateY(-400px);
    transition: transform 0.6s ease;
}

.if-order-successful.shown {
    transform: translateY(0);
}

.if-order-successful p {
    font-size: clamp(18px, 1.55vw, 48px);
    font-weight: bold;
    margin: 0;
    max-width: 300px;
    text-align: center;
}

/* modal windows */

dialog {
    width: 100%;
    max-width: 1000px;
    height: 450px;
    overflow-x: hidden;
    border: none;
    border-radius: var(--border-radius-major-elements);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

dialog:not([open]) {
    display: none;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.modal-offer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.content-of-offer {
    display: grid;
    grid-template-columns: 1fr;
}

.content-image-offer img {
    border-radius: var(--border-radius-card-offer);
}

.content-description-offer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.name-description-of-offer {
    max-width: 285px;
    font-size: clamp(16px, 1.4vw, 36px);
}

.price {
    background-color: var(--dark-theme);
    color: var(--accent-color);
    padding: var(--padding-texts-titles);
    border-radius: var(--border-radius-major-elements);
    font-size: var(--size-titles);
    font-weight: bold;
}

.price.dark {
    background-color: var(--light-theme);
}

.throw-in-bin, .div-order-preform button, .order {
    background-color: var(--accent-color);
    color: var(--dark-theme);
    padding: var(--padding-texts-titles);
    border-radius: var(--border-radius-major-elements);
    font-size: var(--size-titles);
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.div-order-preform button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bag-of-offers {
    width: 100%;
    display: flex;
    justify-content: center;
}

.content-of-bag-of-offers {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.suggested-offers {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-suggested-offer {
    width: 100%;
    max-width: 500px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    background-color: var(--dark-theme);
}

.img-suggested-offer {
    border-radius: 20px 0 0 20px;
}

.p-suggested-offer {
    color: var(--accent-color);
    padding: 5px;
    font-size: clamp(14px, 1.2vw, 22px);
    width: 100%;
}

.div-suggested-offer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

.btn-suggested-offer {
    background-color: red;
    height: 100%;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
}

.if-bin-empty {
    text-align: center;
}

.form-for-buy {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-beg {
    text-align: center;
}

form label {
    font-size: clamp(16px, 1.5vw, 32px);
    font-weight: bold;
    margin: 20px;
}

#email, #name {
    width: 100%;
    max-width: 500px;
    border-radius: var(--border-radius-major-elements);
    border: var(--accent-color) 3px dotted;
    background-color: var(--dark-theme);
    color: var(--light-theme);
    padding: 5px;
    font-weight: bold;
    font-size: clamp(18px, 1.4vw, 28px);
}

#email::placeholder, #name::placeholder {
    color: var(--light-theme);
    font-weight: bold;
    font-size: clamp(18px, 1.4vw, 28px);
}

.agree-condition {
    font-size: clamp(14px, 1.3vw, 24px);
    margin: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#tick {
    accent-color: var(--accent-color);
    width: 25px;
    height: 25px;
}

.div-close-modal {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.div-close-modal button {
    background: none;
    cursor: pointer;
}

@media (min-width: 768px) {
    .header-ul li:nth-of-type(1) {
        display: flex;
    }

    .burger-menu {
        display: none;
    }

    .blocks-of-input-and-catalog {
        flex-direction: row;
    }

    .suggested-offers-by-input {
        top: 100%;
    }

    .modal-catalog {
        left: 50%;
        transform: translate(-50%, 0);
    }

    .btn-left-arrow-of-slider img, .btn-right-arrow-of-slider img {
        width: 50px;
    }

    .three-offer {
        grid-template-columns: 1fr 1fr;
    }

    .content-of-offer {
        display: grid;
        grid-template-columns: 100% 100%;
    }
    
    .content-of-bag-of-offers {
        width: 100%;
        flex-direction: row;
        align-items: normal;
    }

    .form-for-buy {
        flex-direction: row;
    }

    .div-close-modal {
        align-items: flex-start;
        padding: 0;
    }
}

@media (min-width: 1024px) {
    .header-ul li:nth-of-type(1) {
        display: flex;
    }

    .burger-menu {
        display: none;
    }

    .blocks-of-input-and-catalog {
        flex-direction: row;
    }

    .suggested-offers-by-input {
        top: 100%;
    }

    .modal-catalog {
        left: 50%;
        transform: translate(-50%, 0);
    }

    .three-offer {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .div-current-bag {
        right: 20px;
        bottom: 20px;
    }

    .modal-catalog a:hover, .suggested-offers-by-input a:hover {
        background-color: var(--hover-dark-theme);
    }

    .modal-catalog.dark a:hover, .suggested-offers-by-input.dark a:hover {
        background-color: var(--hover-light-theme);
    }

    .btn-left-arrow-of-slider:hover, .btn-right-arrow-of-slider:hover {
        background-color: var(--hover-dark-theme);
    }

    .btn-left-arrow-of-slider.dark:hover, .btn-right-arrow-of-slider.dark:hover {
        background-color: var(--hover-light-theme);
    }
}