/* 
Theme name: Cart sejem v2
Version: 0.1
Author: Kulstik
Author URI: https://kulstik.com/
Requires at least: 6.8.1
Tested up to: 6.8.1
Requires PHP: 8.3
Text Domain: cartaj
*/

:root {
    --background: #fff;
    --color: #000;
    --link-color: blue;
    --link-color-hover: #ff8115;
    --button-color: #fff;
    --button-bg: #000;
    --button-bg-hover: #fff;
    --button-border-color: #000;
    --button-border-thickness: 2px;
    --burger-color: #000;    
    --burger-color-hover: #ff8115;
    --burger-line-thickness: 3px;
    --burger-line-seperation: 7px;
    --burger-line-width: 22px;
    --header-height: auto;
    --header-height-full: auto;

    --color-1: #BBBF79;
    --color-2: #FEC710;
    --color-3: #ff8115;
    --color-4: #9FCBF0;
    --color-5: #2F8B8E;

    --tec-color-accent-primary: #ac5729;
    --tec-color-accent-primary-background-datepicker: #d2ad624d;
    --tec-font-family-sans-serif: 'Open Sans', sans-serif;

    --swiper-theme-color: #D2AD62 !important;

}


.menu-mobile-container [class^=menu-border-] li:hover {background-color: #fff !important;}

.container { --bs-gutter-x: 2.5rem !important }

.single-post-content div:empty {display: block;}

/*::-moz-selection {*/
/*  color: #000;*/
/*  background: var(--color-1);*/
/*}*/

/*::selection {*/
/*  color: #000;*/
/*  background: var(--color-1);*/
/*}*/


.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.gallery br {
    display: none;
}

.gallery-item {
    margin: 0 !important;
    width: 100% !important;
}

.gallery-icon img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    transition: transform 0.2s ease-in-out;
}

.gallery-icon img:hover {
    transform: scale(1.03);
}

.wp-caption-text.gallery-caption {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
}

body {overflow-x: hidden; background-color: var(--background) !important; color: var(--color) !important}

.wp-block-button__link {margin-bottom: 10px;}

a { color: var(--link-color); text-decoration: underline; }
a:hover, a:focus {color: var(--link-color-hover)}

.button {font-size: 18px; padding: 5px 10px; color: #000; background-color: #dfaf5d; border: 1px solid #dfaf5d;}
.button:hover {color: #000; background-color: #fff;}


header {position: relative; height: var(--header-height); font-size: 18px; z-index: 2;}
.burger-wrap{padding:5px;position:absolute;right:0;top:50%;transform:translateY(-50%); display: none;}
.burger {margin: 5px; position: relative;}
.burger::before, .burger::after {position: absolute;}
.burger::before, .burger::after, .burger {content: ''; display: block; width: var(--burger-line-width); height: var(--burger-line-thickness); background-color: var(--burger-color)}
.burger::before {top: var(--burger-line-seperation)}
.burger::after {bottom: var(--burger-line-seperation)}

.burger-wrap.menu-active .burger{ transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); background: var(--burger-color-hover);}
.burger-wrap.menu-active .burger::before {top: 0; opacity: 0; transition: top 0.2s ease, opacity 0.1s 0.12s ease;background: var(--burger-color-hover)}
.burger-wrap.menu-active .burger::after {bottom: 0; transform: rotate(-90deg); transition: bottom 0.2s ease, transform 0.2s 0.12s;background: var(--burger-color-hover)}

.menu-active #menu-header {display: block;}
#menu-header {position: absolute; top: var(--header-height); list-style: none; padding: 0; margin: 0; width: 100%; display: none; left: 0; color: #000;}
/*#menu-header li {border-bottom: 1px solid #ededed;}*/
#menu-header li a {text-decoration: none; display: inline-block; padding: 0 15px;}
.menu-header-container ul > li > a {color: #000}
#menu-header > li > a {text-transform: uppercase;  font-weight: bold;}
#menu-header > li > a:hover {color: #fff;}
#menu-header .menu-item-has-children, #menu-header .sub-menu {list-style: none;}
/*#menu-header .menu-item-has-children > a:after {content: "\e903"; font-family: 'icomoon';}*/
#menu-header .menu-item-has-children .sub-menu {display: none}

#menu-header li a:hover, #menu-header .current-menu-item a, footer .current-menu-item a {color: var(--color-2) !important}

.logo-wrap {position: relative; height: 60px; display: flex; align-items: center; margin: 10px 0 !important}

.header-icons {display: flex; align-items: center; justify-content: center; gap: 10px;}
.header-icons a {color: #000; text-decoration: none; font-size: 20px;}

.menu-mobile-container li a {color: #000; padding: 10px 0 !important;}
.menu-mobile-container > ul > li {padding-right: 40px;}
.menu-mobile-container #menu-header {padding-top: 20px; background-color: #fff; padding-bottom: 20px; padding-right: 15px; text-align: right; height: auto;}
.menu-mobile-container .menu-item-has-children{position: relative;}
.menu-mobile-container .menu-item-has-children::after {content: "\e901"; position: absolute; font-size: 20px; font-family: 'icomoon'; margin-left: 15px; top: 10px}

footer {background-color: #425159; color: #fff; padding-bottom: 10px; font-size: 12px;}
footer a {color: #fff; text-decoration: none;}
footer ul {list-style: none; padding: unset; margin: unset; font-weight: bold;}

#menu-footer-1, #menu-footer-2, #menu-footer-3 {display: flex; flex-direction: column; gap: 10px; padding: 10px 0}

.footer1st {margin: 0 !important;}
.footer1st .col-xl-2 {border-left: 2px solid #fff;}
.footer1st .col-xl-2:last-of-type {border: unset;}
.footer1st [class*=col-] {margin-bottom: 30px;}

.footer-novice {border-left: unset !important;}
.footer-novice h3 {font-size: 16px; margin-bottom: 5px;}
.footer-novice .button {margin-top: 5px;}

.footer2nd .col-12 {margin-top: 30px !important}

.cookies {display: flex; align-items: center; justify-content: center;}
.cookies a{color: #bcc078; padding: 5px; display: block;}
.cookies a:hover{color: #fff}

.copyright {padding-top: 15px;}

.wpcf7 input, .wpcf7 textarea {padding: 13px 20px; border: 1px solid #000; color: #000; background: #ebebeb; width: 100%;}
.wpcf7 textarea {width: 100%;}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder {color: #827f7f; font-size: 12px;}
.wpcf7 input[type="checkbox"] {width: unset;}
.wpcf7 input[type="submit"] {margin-top: 10px; width: unset; background-color: #D2AD62; color: #000; border-color: #D2AD62;}
.wpcf7 input[type="submit"]:hover {background-color: #fff; color: #000;}
.home .contact-wrap {display: none;}
.wpcf7-list-item {margin: unset;} 
.content-break {width: 100%; height: 5px; border-top: 2px solid #e1e1e1; margin-top: 50px; margin-bottom: 50px;}
.wpcf7-spinner {display: none;}


.home section {margin-bottom: 50px;}
.home section:last-child {margin-bottom: unset;}
.home footer {margin-top: unset;}

.swiper-pagination-progressbar {background: unset !important}

.swiper-lazy-preloader {display: none}

.wp-singular main {margin-top: 30px; margin-bottom: 30px}

.home .wp-singular main {margin-top: unset}

#popup-novice {position: fixed; width: 300px; height: auto; border: 2px solid #000; color: #000; padding: 20px; background-color: #f5f5f5; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;}
#popup-novice-wrap {content: ''; position: fixed; z-index: 9997; background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; display: block; top: 0; left: 0; right: 0; bottom: 0; display: none;}
#popup-novice .icon-cross {display: block; font-size: 20px; color: #000; text-align: right;}
.popup-active #popup-novice-wrap {display: block;}
#popup-novice .icon-cross:hover {color: #D2AD62;}

.search-active .asl_w_container {display: block}
.asl_w_container {position: fixed; top: 50px; right: 0; z-index: 99999; display: none; padding: 20px;}
.admin-bar .asl_w_container {top: 90px}
.asl_w_container .promagnifier {pointer-events: none;}
#ajaxsearchliteres1 {z-index: 99999;}


.swiper-button-next, .swiper-button-prev {display: block !important;  -webkit-text-stroke: 2px #fff; top: 70% !important}

.grecaptcha-badge {display: none;}

.error404 main {margin-top: 50px;}

[name="_mc4wp_subscribe_contact-form-7"] {margin-right: 10px !important}

.img-full-width {width: 100%; height: auto}

body {background-image: url("assets/img/background.webp"); background-repeat: repeat;}

@media only screen and (min-width: 768px){

    #logo {font-size: 25px;}

}

@media only screen and (max-width: 992px){

}

@media only screen and (min-width: 992px) {
   
}

@media screen and (max-width: 1199px) {
    .burger-wrap {display: block;}    
    .mobile-hidden {display: none !important;}

    .menu-header-container {display: none;}
}

@media screen and (min-width: 1200px) {
    header {height: var(--header-height-full); padding: 0}

    .header-wrap {padding: 15px 0; text-align: right}


    #menu-header {position: relative; top: unset; display: block;}
    #menu-header > li {display: inline-block;}
    .menu-header-container {display: inline-block;}
    
    /*#menu-header .menu-item-has-children > a:after {content: "\e901"; font-family: 'icomoon'; margin-left: 5px; font-size: 20px; position: absolute; top: 19px;}*/

    /*#menu-header .menu-item-has-children a {padding-right: 30px;}*/
    #menu-header .menu-item-has-children {position: relative;}
    #menu-header .menu-item-has-children .menu-item-has-children a {padding-right: 50px}
    #menu-header .menu-item-has-children .menu-item-has-children:after {content: '\e903'; display: inline-block; font-size: 20px; position: absolute; right: 5px; top: 3px; font-family: 'icomoon'; margin-left: 5px}
    #menu-header .menu-item-has-children .sub-menu {padding: 0;}
    #menu-header .menu-item-has-children:hover > .sub-menu, #menu-header .menu-item-has-children:focus > .sub-menu, #menu-header .menu-item-has-children:focus-within > .sub-menu {display: block;}
    #menu-header .menu-item-has-children > .sub-menu {display: none; position: absolute; white-space: nowrap; left: 0; z-index: 9999; background-color: #fff;}
    #menu-header .menu-item-has-children .menu-item-has-children:hover > .sub-menu, #menu-header .menu-item-has-children .menu-item-has-children:focus > .sub-menu, #menu-header .menu-item-has-children .menu-item-has-children:focus-within > .sub-menu   {display: block}
    #menu-header .menu-item-has-children .menu-item-has-children > .sub-menu {display: none; position: absolute; top: 50px; background-color: #000; white-space: nowrap; z-index: 10}
    #menu-header li a {display: block;}

    #menu-header .menu-item-has-children .menu-item-has-children > .sub-menu {
        display: none;
        position: absolute;
        top: 0;
        background-color: #fff;
        white-space: nowrap;
        left: 100%;
    }


    .menu-mobile-container {display: none;}
}


@media screen and (min-width: 1600px) {
  
    .asl_w_container {right: 16%; top: 41px;}
    .admin-bar .asl_w_container {top: 74px}
    #logo {font-size: 25px;}

}

.pswp img {object-fit: contain}