:root {
    --main: #DDE0E4;
    --second: #2bb3f1;
    --third: #69737F;
    --fourth: #fca53e;

}
i {
    font-family: 'Font Awesome 5 Free';
}
.client-square {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
}
.btn-action-pusher {
    width: 50px;
    aspect-ratio: 1 / 1;
    background: var(--fourth);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10vh;
    right: 5vw;
    border: 2px solid var(--second);
    border-radius: 14px;
}
.btn-action-pusher + .btn-action-pusher{
    top: 20vh;

}
body {
    font-family: Comfortaa;
}

.navbar-brand {
    width: 150px;

    img {
        position: absolute !important;
        aspect-ratio: 1.5 /1;
        top: -30px;
    }
}

h1, h1 {
    font-size: 2rem !important;
}

#add-to-cart {
    cursor: pointer;
}

#toShop {
    .form-group {
        display: grid;
        width: 100%;

        label {

            background-color: var(--second);
            width: 100%;
            color: #fff;
            padding: 5px;
        }
    }
}

#gallery_info {
    display: none !important;
}

.paginate_button {
    cursor: pointer;
}

#available-product {
    background-color: green;
    padding: 10px;
    color: #fff;
}
.client-square{
    height: 100vh;
}
.product-price {
    background-color: var(--fourth);
    padding: 10px;
}

#single_price {
    display: inline-block;

    color: #fff;
    padding: 12px;

}

#not-available-product {
    background-color: firebrick;
    padding: 10px;
    color: #fff;


}

.specification {
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;

    .group-title {
        background-color: var(--second);
        color: #fff;
        padding: 0 10px;
    }

    li {
        list-style: none;
        width: 50%;

        &:nth-of-type(even) {
            background-color: var(--fourth);
        }

        &:nth-of-type(odd) {
            border: 1px solid var(--second);
        }

        div {
            display: flex;
            padding: 0 .10px;


            & > * {
                flex: 1 1 0px;
            }
        }
    }


}

.main-nav {
    background-color: var(--second);
    z-index: 10 !important;

    a {
        color: #fff;
    }
}

.user-nav {
    z-index: 9 !important;
}

.fixed-top {
    z-index: unset;
}

details {
    summary {
        background-color: var(--second);
        color: #fff;
        padding: 10px;
    }

    input {
        margin: 0 10px 0 5px;
    }
}

.user-login {
    min-width: 50vw;

    #lostPassword, #loginForm {
        display: none;
    }

    &:has(input#interactionlogin:checked) {
        #loginForm {
            display: block;
        }
    }

    &:has(input#interactionreset:checked) {
        #lostPassword {
            display: block;
        }
    }

    ul {
        flex-direction: row;

        li {
            flex-grow: 1;
            text-align: center;
            background-color: var(--third);
            padding: 10px;
            color: #fff;
            width: 50%;

            &:has(input:checked) {
                background-color: var(--second);
            }


            label {
                width: 100%;
                cursor: pointer;
            }
        }

        input {
            display: none;
            margin: o;
        }
    }

}

.user-nav {
    top: 50px;
    background-color: var(--main);
    border-bottom: 2px solid var(--second);
    box-shadow: 0 5px 15px var(--second);

    a {
        color: var(--second);
        padding: 5px 10px;
    }
}

#gallery_paginate {
    display: flex;
    justify-content: space-between;

    .paginate_button {
        background-color: var(--second);
        color: #fff;
        padding: 5px;
        border-radius: 10px;
    }

    a.paginate_button {
        aspect-ratio: 1 /1;
        height: 40px;
        display: inline-flex;
        justify-content: center;
        margin: 0 3px;
        align-items: center;

        &.current {
            background-color: var(--fourth);
        }
    }
}

.end {
    margin-right: 5vw;
}

.btn-common {
    background-color: var(--fourth);
    color: #fff;
}

.slide1 {
    background: url("../img/slide1.jpeg") no-repeat;
    background-size: cover;
}

.slide2 {
    background: url("../img/slide2.jpeg") no-repeat;
    background-size: cover;
}

.slide3 {
    background: url("../img/slide3.jpeg") no-repeat;
    background-size: cover;
}

.favorites {
    background-color: var(--fourth);
}

.long-view {
    aspect-ratio: 2 /1;
    object-fit: cover;
    height: 90%;
}

.header-carousel, .owl-stage-outer, .owl-stage, .owl-stage > .owl-item, .item {
    width: 100%;
    height: 100%;
}

.presentation-header {
    height: 80vh;
    position: relative;

    .left-header-bar {
        background-color: var(--second);
        opacity: .8;
        display: flex;
        flex-direction: column;
        padding: 20px;
        color: #fff;
        justify-content: center;
        position: relative;
        z-index: 2;
    }

    .bottom-bar {
        position: absolute;
        z-index: 1;
        height: 10vh;
        bottom: 10vh;
        background-color: rgba(64, 70, 82, .7);

    }

    .header-carousel {
        position: absolute;
    }
}

#amount-holder {
    background-color: var(--fourth);
    min-width: 70px;
    text-align: center;
}

.amounts {
    align-items: center;
}

.products-filter {
    background-color: var(--main);
    align-items: center;
    box-shadow: 0 2px 5px var(--second), 0 -2px 5px var(--second);
    margin: 20px 0;
    padding: 5px 0;

    label {
        margin: 0;
    }
}

#gallery tbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;

    .product-holder {
        flex-basis: 25%;
        width: 25%;
        background-color: var(--second);
        border: 5px solid #fff;
        display: flex;
        align-items: center;
        position: relative;
        flex-direction: column;
        color: #fff;

        .square {
            text-wrap: wrap;
            position: relative;

            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .item_name {
                h2 {
                    color: #fff;
                    font-size: 16px;
                }
            }

            a {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
        }
    }
}

.top-section {
    .big-viewed {
        aspect-ratio: 2 / 1;
    }
}

.most-viewed {
    aspect-ratio: 1/ 1;
    background-color: #E2E3E7;
    border: 5px solid #fff;
    display: flex;
    align-items: center;
    position: relative;

    a {
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: var(--fourth);
        color: #000;
        border-radius: 30px 0 0 0;
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: .5;
        transition: all linear 100ms;
    }

    &:hover a {
        width: 100%;
        height: 100%;
        opacity: .7;
        border-radius: 0;
    }

    figure {
        margin: 0;
        display: flex;

        img {
            border: 2px solid var(--second);
            box-shadow: -10px 10px 20px var(--second);
            border-radius: 10px;
        }

        figcaption {
            position: absolute;
            background-color: var(--second);
            text-align: center;
            opacity: .8;
            left: 0;
            top: 0;
            font-weight: bold;
            padding: 10px;
            color: #fff;
            width: 100%;
        }
    }
}

.second-info {
    position: relative;

    .left-shadow {
        background: linear-gradient(
                45deg,
                rgba(26, 117, 187, 0.9) 0%,
                rgba(26, 117, 187, 0.9) 45%,
                rgba(243, 164, 135, 0.9) 55%,
                rgba(243, 164, 135, 0.9) 100%
        );
        min-height: 300px;
    }

    .right-shadow {
        background: linear-gradient(274deg, rgba(255, 255, 255, 1) 0%, rgba(228, 231, 236, 1) 49%, rgba(228, 231, 236, 1) 100%);
        min-height: 300px;
    }

    .right-viewed-infobox {
        background-color: #5B8D2A;
        border-radius: 20px;
        min-height: 600px;
        right: 2vw;
        top: -400px;
        box-shadow: 0 0 25px #75BF44;
        position: absolute;

    }
}

.h-100 {
    height: 103%;
}

.table.dataTable {
    border: none;
}

.product-list {
    border-left: 20px solid var(--second);
    border-bottom: 50px solid var(--second);

}

h1, h2, h3, footer a {
    color: var(--fourth);
}

footer {
    margin-top: 150px;
    padding-bottom: 50px;
    position: relative;
    background-color: var(--second);

    &:before {
        clip-path: polygon(100% 50%, 100% 100%, 0% 100%);
        content: '';
        position: absolute;
        top: -20vh;
        left: 0;
        background: var(--second);
        height: 20vh;
        width: 100%;
    }

    a {
        font-weight: bolder;
    }

    h2 {
        text-align: center;
        margin: 20px 0;
        color: var(--second);
    }

    & > * {
        min-height: 500px;

    }

    .container {
        min-height: unset;
    }

}

.welcome-form {
    padding: 100px 0 0;
    font-weight: bold;
}

#end {
    background-color: var(--second);
    padding: 10px 0;
    text-align: center;
}

.panel-heading {
    background-color: var(--second);
    padding: 5px 3px;
    border-bottom: 2px solid #fff;

    .accordion-toggle {
        color: #fff;
    }


}

.filter-checkbox {
    display: flex;
    flex-direction: column;
    background-color: var(--fourth);
    padding: 10px;
    color: #000;
}

.input-group-addon {
    background-color: var(--fourth);
    padding: 4px 8px;
}

#compare-total {
    color: #000;
    font-size: 14px;
}

.compare-it {
    background-color: var(--fourth);
    text-align: center;
    position: relative;
    z-index: 3;
    cursor: pointer;
}

.nav.nav-tabs {
    li {
        background-color: var(--third);

        &.active {
            background-color: var(--second);
        }

        a {
            color: #fff;
        }
    }

}

.cart {
    thead, tfoot {
        background-color: var(--second);
        color: #fff
    }
}

#visited-products {

    background-color: var(--second);
    box-shadow: 0 5px 5px var(--second), 0 -5px 5px var(--second)
}

.productsTable {
    color: #000
}

.single-filter {
    font-size: 14px;
    cursor: pointer;

    input {
        margin-right: 5px;
        display: inline-block;
    }

    border-bottom: 2px solid var(--second);
}

s::before,
s::after {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

s::before {
    content: " [start of stricken text] ";
}

s::after {
    content: " [end of stricken text] ";
}

.success-animation {
    margin: 150px auto;
}

.product-category {
    background-color: var(--second);
    display: block;
    color: #fff;
    padding: 10px;
}

.checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: var(--fourth);;
    display: none;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0 pxvar(--fourth);;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--fourth);
    fill: #fff;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px var(--fourth);;
    }
}


.range-slider {
    position: relative;
    width: 90%;
    height: 70px;
    margin: auto;
}

/* Балончета */
.value-bubble {
    position: absolute;
    top: 0;
    padding: 3px 8px;
    background: var(--fourth);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

/* Линията */
.slider-track {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    transform: translateY(-50%);
    z-index: 1;
}

/* Двата плъзгача */
.range-slider input[type="range"] {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    background: none;
    z-index: 2;
    -webkit-appearance: none;
}

/* Thumb */
.range-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    background: var(--fourth);
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
}

.range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    background: var(--fourth);
    border-radius: 50%;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .img-fluid {
        max-width: 100%;
    }

    html {
        overflow-x: hidden;
    }

    .presentation-header {
        & .header-carousel {
            display: none;
            overflow: hidden;
        }
    }

    .presentation-header {
        height: auto !important;

        & .bottom-bar {
            height: fit-content;
            bottom: 0;
            padding: 10px;
            color: #fff;
            text-align: center;
            position: relative;

            a.btn-common {
                padding: 10px;
                display: block;
                text-align: center;
                margin-top: 10px;
            }
        }
    }

    .second-info {
        & .right-viewed-infobox {
            min-height: auto;
            position: static;
            padding: 20px;
            margin: 10px;
        }
    }

    .product-list {
        margin: 10px;
    }

    .left-shadow {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        margin-bottom: 20px;

        h2 {
            color: #000;
        }
    }

    .right-shadow {
        display: none;
    }

    footer {
        text-align: center;

        .container > .row {
            flex-direction: column;
        }
    }

    dd, dt {
        margin: 0;
        padding: 10px;
    }

    .header-carousel, .owl-stage-outer, .owl-stage, .owl-stage > .owl-item, .item {
        width: 100%;
        min-height: 100px;
        max-width: 100%;
    }

    .navbar-cart {
        align-items: end !important;
    }

    .user-login {
        & ul {
            flex-direction: column;
            width: 100%;

            li {
                width: 100%;
            }
        }
    }

}

#add-response {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
}

#cover {
    position: relative;
    overflow-x: hidden;
    height: 100vh;
    transition: all linear 1s;
    z-index: 3;

    & > * {
        transition: all linear 1s;
    }


    &.open {
        .mid-image, p {
            opacity: 0;
        }

        #left-cover {
            left: -50vw;

        }

        #right-cover {
            right: -50vw;

        }
    }

    p {
        opacity: 1;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        z-index: 3;
        text-align: center;
        font-size: 30px;
        display: block;
        height: fit-content;
        padding-top: 320px;
    }

    .mid-image {
        width: 20vw;
        aspect-ratio: 1 / 1;
        position: absolute;
        opacity: 1;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        margin: auto;
    }

    .halfs {
        width: 50vw;
        height: 100vh;
        position: absolute;
        top: 0;
    }

    #left-cover {
        left: 0;
        background-color: var(--second);
    }

    #right-cover {
        right: 0;
        background-color: var(--fourth);
    }

}