/** basics **/
:root {
    --borderRadius: 20px;
    --ortArtBlue: #1e8ec4;
    --ortArtDarkBlue: #2d2e6a;
    --ortArtOrange: #f7a83d;
}

.text-warning {
    color:var(--ortArtOrange) !important;
}
.text-lightblue  {
    color:var(--ortArtBlue) !important;
}
.text-grey {
    color:#555;
}

body {

    font-family: "Roboto", sans-serif;
    padding-top:63px;

    &.index {
        @media(min-width: 992px) {
            padding-top:45px;
        }
    }
    &.cart {
        padding-top:80px;
        .container {
            max-width: 1100px;
        }
    }
    &.scrolled {
        .topbar {
            top:-45px;
        }
        .navbar-desktop {
            padding-top:10px;
            padding-bottom:10px;
            top:0;
            border-bottom:1px solid #eee;
        }
    }
    &:not(.scrolled).index {
        nav.bg-light {
            background:none !important;
            border:none;

            .navbar-search{
                input {
                    border:none;
                }
                .input-group-text{
                    border:none;
                }
            }

        }
    }
    @media(min-width:992px) {
        padding-top:145px;
        &.cart {
            padding-top:90px;
        }
    }
}

h1:not(.defaultfont),h2,h3,h4 {
    font-family: "Special Gothic Expanded One", sans-serif;
}

h5 {
    font-weight:400;
}

a{
    color:var(--ortArtBlue);
}

/** buttons **/
.btn {

    border-radius:99px;
    font-weight: 500;
    padding:0.5rem 1.5rem;

    &.btn-outline-primary{
        border-color:var(--ortArtDarkBlue);
        color:var(--ortArtDarkBlue);
        &:hover {
            background-color:var(--ortArtDarkBlue);
            color:#fff;
        }
    }

    &.btn-blue {
        border-color:var(--ortArtBlue);
        background-color:var(--ortArtBlue);
        color:#fff;
        &:hover{

        }
    }

    &.btn-warning {
        border-color:var(--ortArtOrange);
        background-color:var(--ortArtOrange);
    }
    &.btn-outline-warning {
        border-color:var(--ortArtOrange);
        color:var(--ortArtOrange);
        &:hover {
            color:#fff;
            background-color:var(--ortArtOrange)
        }
    }

    &.btn-primary{
        border-color:var(--ortArtDarkBlue);
        background-color:var(--ortArtDarkBlue);
    }
}



/** forms **/
.form-control:focus {
    outline:none;
    box-shadow:none;
}

/** containers **/
.container {
    @media(max-width:991px) {
        max-width:100%;
    }
}

/** topbar **/
.topbar {
    width:100%;
    color:#fff;
    background-color:var(--ortArtDarkBlue);
    font-size:13px;
    line-height:1;
    transition:.3s all;
    .topbar-link {
        font-weight:500;
        color:#fff;
    }
}


/** navbar **/
.navbar-mobile {
    height:63px;
}
.navbar-search-mobile{
    position: absolute;
    top:63px;
    left:0px;
    width:100%;
    padding:0.25rem 0.75rem;
}
.navbar-desktop {

    top:45px;
    padding-top:30px;
    padding-bottom:30px;
    transition:.3s all;

    .nav-link {
        &:hover {
            color:var(--ortArtDarkBlue);
        }
    }
    .navbar-search{
        input {
            border-radius:99px 0 0 99px;
            border-right:none;
            height:40px;
        }

        .input-group-text{
            background:#fff;
            padding-right:20px;
            border-radius:0 99px 99px 0;
        }
    }
}

.navbar-search-results{
    border-top:none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.navbar-search-results .dropdown-item-text{
    font-size:0.9rem;
    text-transform:uppercase;
    opacity:0.7;
}

.navbar-brand {
    font-weight:500;
    padding:0;

    img {
        max-width:100%;
        max-height:50px;
    }

}
.navbar-search {
    width:300px;
}
.navbar-cart {
    .progress {
        position:absolute;
        left:0;
        width:100vw;
        bottom:-16px;
        border-radius:0;
    }
}


/** modal cart **/
.modal-minicart {
    .modal-fullscreen {
        width:100vw;
        max-width:360px;
    }
}

.minicart-product {
    &:not(:last-child){
        border-bottom:1px solid #eee;
    }
    .name{
        line-height:1.1;
        font-size:1rem;
    }
    .price-original {
        text-decoration: line-through;
    }
    .price-action {
        color:red;
    }
    .btn-outline-secondary,
    .btn-outline-secondary.disabled{
        border-color:#a8a8a8;
        color:#a8a8a8;
        opacity:1;
        min-width:40px;
        border-radius:0px;
    }
}
.minicart-nothing{
    opacity:0.3;
}


/** cart **/
form.blocked {
    opacity:0.8;
    pointer-events: none;
    cursor:default;
}
form.blocked * {
    pointer-events: none;
    cursor: default;
}
.cart-option-card {
    cursor:pointer;
    line-height:1.2;
}
.cart-option-card strong {
    font-weight:500;
}
.cart-option-card .fa-2x{
    font-size:1.5rem;
}
.cart-agree {
    font-size: 0.9rem;
}

.placeholder-line{
    height: 10px;
    background-color: rgba(165, 165, 165, 0.3);
    margin:0 0 10px 0;
}

.placeholder-line.transparent,
.text-input__loading--line.transparent {
    opacity:0.5;
}

.placeholder-line.w-80,
.text-input__loading--line.w-80{
    width:80%;
}
.placeholder-line.w-60,
.text-input__loading--line.w-60{
    width:60%;
}
.placeholder-line.w-40,
.text-input__loading--line.w-40{
    width:40%;
}
.placeholder-line.w-20,
.text-input__loading--line.w-20{
    width:20%;
}
.placeholder-line.w-10,
.text-input__loading--line.w-10{
    width:10%;
}


/** modal menu mobile **/
.modal-menu {
    .modal-fullscreen{
        width:400px;
        max-width:70vw;
    }
    .modal-header {
        a {
            color:inherit;
            text-decoration:none;
        }
    }
    hr {
        margin-left: -1rem;
        margin-right: -1rem;
        border-color: #dfdfdf;
    }
    .menu-main-links  {
        .list-group-item{
            background-color:rgba(0,0,0,.075);
            border:none;
            margin-bottom:0.3rem;
        }
    }
}


.card {
    border-color:#eee;
}
/** products **/
.product-card {
    border:none;
    border-radius: var(--borderRadius);

    &:hover {
        box-shadow:0 3px 10px rgba(0,0,0,.05);
    }

    .card-title{
        font-size: 1.1rem;
        font-weight: 600;
    }

    .card-body {


        a{
            text-decoration:none;
            color:#000
        }

        .product-price {
            font-size:18px;
            font-weight:600;
            color:#666;
        }

        .product-price-old {
            text-decoration:line-through;
        }
        .product-price-action {
            color:red;
        }

    }
}

.product-tags{
    pointer-events: none;
}
@media(max-width:575px) {
    .product-card .card-title{
        font-size: 1rem;
    }
}

.category-subcategories{
    a {
        color:#333;
        text-decoration:none;
        &:hover {
            color:#000;
        }
    }
}

/** product detail **/
.product-detail {


    .product-detail-title {
        font-size: 1.4rem;
        font-weight: 700;
    }

    .product-detail-price {
        color: #666;
        font-size: 1.2rem;
    }

    .product-detail-price .price-original {
        text-decoration: line-through;
    }

    .product-detail-price .price-action {
        color: red;
    }

    .product-detail-accordion {


        table {
            border:none;
            font-size:16px;
            tr {
                border:none;
                td,th {
                    background:none;
                    border:none;
                    border-bottom:1px solid #eee;
                    padding:8px;
                }
                td {

                }
                th {

                }
            }
        }

        .accordion-item {
            border:none !important;


        }

        .accordion-button{
            box-shadow:none !important;
            outline:none !important;
            border-bottom:1px solid #eee !important;
            &:not(.collapsed),
            &[aria-expanded="true"] {
                background:none !important;
            }
        }

        ul,p {
            font-size:16px;
            line-height: 1.8;
        }
        big {
            line-height: 1.3;
        }

        ul {
            list-style:none;
            padding:0 0 0 10px;
            li {
                padding-left:20px;
                position:relative;
                margin-bottom:5px;
                &:before {
                    position: absolute;
                    left:0;
                    top:13px;
                    width:4px;
                    height:4px;
                    content:'';
                    background-color: var(--ortArtOrange);
                }
            }
        }

    }

    .product-detail-image img,
    .product-detail-gallerynav img {
        border:1px solid #eee;
        border-radius: 0.375rem;
        transition:all .6s ease;
    }
    .product-detail-gallerynav .slick-current img{
        border:1px solid #000;
    }

}
.product-detail-gallerynav {
    .slick-slide{
    }
}

@media(max-width:767px) {
    .product-detail-gallery:not(.count-1) .slick-list{
        padding:0 20% 0 0 !important;
    }
}

@media(min-width:768px) {
    .product-detail-title{
        font-size:2rem;
    }
    .product-detail-info {
        position: sticky;
        top: 80px;
    }
}

/** slick sliders **/
.slick-slider{
    position: relative;
    margin-bottom:24px;
    margin-left:-0.5rem;
    margin-right:-0.5rem;

    .slick-slide {
        padding:0 0.5rem;
    }
    .slick-dots{
        position: absolute;
        width:100%;
        bottom:-24px;
        text-align:center;
        padding:0;
        margin:0;
        li {
            display:inline-block;
            margin-right: 3px;
            margin-left: 3px;
            &.slick-active {
                button {
                    opacity: 1;
                }
            }
            button {
                width: 30px;
                height: 3px;
                border:none;
                font-size:0px;
                box-shadow:none;
                padding:0px;
                background-color:#000;
                opacity:0.25;
                transition: opacity .6s ease;
            }
        }
    }

    button.slick-arrow {
        border:none;
        width:40px;
        height:40px;
        background-color:#000;
        background-repeat:no-repeat;
        background-size:60% auto;
        background-position:center center;
        position:absolute;
        top:50%;
        transform:translate(0,-50%);
        z-index:99;
        font-size:0px;
        color:transparent;
        transition:opacity .6s ease;
        opacity:0.4;
    }
    button.slick-arrow:hover{
        opacity:1;
    }
    .slick-prev {
        left:0px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    }
    .slick-next {
        right:0px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }


}


@media(max-width:575px) {
    button.slick-arrow{
        width:30px;
        height:30px;
    }
}

/** category **/
.category-title {
    font-size:1.5rem;
    font-weight:600;
}

/** page **/
.page {
    h1 {
        font-size:1.8rem;
        font-weight:700;
    }
}


/** icheck **/
[class*=icheck-]>label{
    font-size:0.9rem;
    line-height: 1.2;
}


/** footer **/
footer  {
    h4 {
        font-size:1.1rem;
        text-transform: uppercase;
        font-weight:600;
        margin:0 0 15px 0;
    }
    p {
        margin-bottom:0.5rem;
    }
    a {
        color:#444;
        text-decoration:none;
        &:hover {
            text-decoration:underline;
        }
    }
    .content-inline-icons {
        a {
            background-color:#333;
            color:#fff;
            border-radius:99px;
            font-size:20px;
            text-align:center;
            width:50px;
            height:50px;
            display:inline-block;
            line-height:50px;
            justify-content:center;
            align-items:center;
            margin-right:10px;
            transition:.2s all;
            &:hover {
                transform:scale(1.05);
            }
        }
    }
    .footer-sign{
        background-color: #e1e1e1;
    }
}

ul.content-list {
    list-style:none;
    padding:0 0 0 10px;
    li {
        padding-left:20px;
        position:relative;
        margin-bottom:5px;
        &:before {
            position: absolute;
            left:0;
            top:13px;
            width:4px;
            height:4px;
            content:'';
            background-color: var(--ortArtOrange);
        }
    }
}

/** select2 bs5 **/
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection{
    box-shadow:none;
}

.homepage-advantages {
   .top-boxes {
       .content-icon-boxes {
           transform:translate(0,-80px);
       }
       .item {
           padding:30px;
           background-color:#fff;
           box-shadow:0 10px 25px rgba(0,0,0,.07);
           border-radius: var(--borderRadius);
           height: 100%;
           transition:.3s all;
           &:hover {
               transform:scale(1.05);
           }
       }
   }
    .bottom-boxes {
        margin-top: -80px;
        .item {
            img {
                height:50px;
            }
            h5 {
                font-size:16px;
                font-weight:500;
                margin-top:30px;
            }
        }
    }
}


.homepage-welcome {

    position: relative;
    padding:160px 0 100px 0;
    background-image:url('../img/bg-welcome.jpg');
    background-size:cover;
    background-position:center center;
    background-repeat: no-repeat;

    .image {
        max-width:300px;
    }

    .logos {
        gap:20px;
        img {
            height:40px;

            @media(max-width:575px) {
                width:80px !important;
                height:auto;
            }
        }
    }

    @media(max-width:767px) {
        padding:40px 0;
    }
}


p.subtitle {
    letter-spacing:1px;
    font-weight:600;
    opacity:0.5;
    text-transform:uppercase;
}

.about {
    p {
        font-size:18px;
        line-height:2;
    }
    @media(min-width:1200px) {
        h1 {
            font-size:80px;
        }
    }
}