/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* GENERAL */

.acf-field.image-field .acf-input{
    margin-top:25px;
}

body:not(.logged-in) .logged-in{
    display: none;
}

body:not(.logged-out) .logged-out{
    display: none;
}

html, body{
    max-width:100vw;
    overflow-x: hidden;
}


/* ARCHIVE */

.archive-posts-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px 10px;
}

@media screen and (max-widtH:767px){
    .archive-posts-grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px 10px;
    }
}

.archive-post{
    background: rgba( 255, 255, 255, 0.8 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 1px solid rgba( 239, 26, 140, 0.18 );
    color: #F9A431;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:30px;
    border-radius: 10px;
    flex-wrap: wrap;
    flex-direction: column;
    font-family: "Century Gothic" !important;
}

.archive-post a:hover span{
    color:#F9A431;
}

.archive-post span{
    font-size:17px;
    text-transform: uppercase;
    font-weight: 900;
}

.archive-post img{
    max-width:80%;
    height: 60px;
    object-fit: contain;
    object-position: center center;
    margin:0 auto 10px;
}

/* HOMEPAGE */

.page-id-116 #header:not(.elementor-sticky--effects) .elementor-icon{
    color:white;
}

.page-id-116 #header:not(.elementor-sticky--effects) .elementor-button{
    fill: var(--e-global-color-7fbdc16 );
    color: var(--e-global-color-7fbdc16 );
    background-color: var(--e-global-color-b233b68);
}

.page-id-116 #header:not(.elementor-sticky--effects) .elementor-nav-menu > .menu-item > a{
    color:black;
}

.city_button .elementor-button{
    border-radius:5px!important;
}

.city_button .elementor-button-text{
    text-align: left;
    transition: padding .3s ease-in-out;
}

.city_button:hover .elementor-button-text{
    padding-left:50px;
}

/* FORM */

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], textarea{
    border-radius: 30px;
    border-color:lightgrey;
    min-height: 40px;
    padding: 20px;
}

body form textarea{
    border-radius: 30px;
    border-color:lightgrey;
    padding: 20px;
}

body select, body .select2-container--default .select2-selection--single{
    border-radius: 30px;
    border-color:lightgrey;
    min-height: 40px;
}

[type=button], button, input[type="submit"], .acf-button.button{
    font-family: "Century Gothic" !important;
    font-size: 17px;
    font-weight: 900;
    background-color: #F9A431;
    border-radius: 30px 30px 30px 30px;
    padding: 15px 22px 15px 22px;
    color:white;
}

[type=button]:hover, button:hover, input[type="submit"]:hover, .acf-button.button:hover{
    background-color: #D5167C;
}

.acf-field .acf-url i{
    top:10px;
}

/* MAP */

.marker-cluster{
    background-color: rgba(239, 26, 140, 0.6)!important;
}

.marker-cluster div{
    background-color: rgba(239, 26, 140, 0.8)!important;
    color:white!important;
    font-weight: bold;
}

.cluster-icon {
    background-color: rgb(239, 26, 140);
    color: #fff;
  }

.content-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

.map_container{
    display:flex;
    flex-wrap: nowrap;
}

.filter-bar {
    display:flex;
    width:100%;
    justify-content: space-between;
    padding: 10px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    z-index:99;
    min-height:70px;
}

.filter-checkbox{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    margin-right:auto;
}

.checkbox-wrapper{
    margin-right: 10px;
    margin-bottom: 3px;
    font-size:12px;
    display: flex;
}

.checkbox-wrapper input{
    margin-right:3px;
}

@media screen and (max-width:767px){
	.filter-bar{
	z-index:9999;
}
}

.location.featured{
	background: #F9A431 !important;
	color: white;
	padding:20px 0px;
	margin-right:-10px;
}

.location.featured h3{
	color:white;
}

.location.featured h3:after{
	content:'';
	background-image: url("data:image/svg+xml,%3Csvg style='color: white' width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5ZM7.50001 3.5C7.69387 3.5 7.87026 3.61206 7.95263 3.78755L8.92087 5.85035L11.0755 6.17933C11.2607 6.20761 11.4146 6.33713 11.4741 6.51485C11.5336 6.69257 11.4888 6.88864 11.3579 7.02278L9.78412 8.63573L10.1567 10.9195C10.1875 11.1085 10.1077 11.2985 9.95121 11.4087C9.79468 11.519 9.58892 11.5302 9.42134 11.4376L7.50001 10.3755L5.57868 11.4376C5.41111 11.5302 5.20534 11.519 5.04881 11.4087C4.89228 11.2985 4.81248 11.1085 4.84331 10.9195L5.2159 8.63573L3.64214 7.02278C3.51126 6.88864 3.46638 6.69257 3.52588 6.51485C3.58539 6.33713 3.73928 6.20761 3.92454 6.17933L6.07916 5.85035L7.04739 3.78755C7.12976 3.61206 7.30615 3.5 7.50001 3.5Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
	width:15px;
	height:15px;
	display:inline-block;
	background-repeat:no-repeat;
	margin-left:5px;
	position:relative;
	top:1px;
}

.location.featured .show-on-map{
	margin-right:10px;
}

.location.featured img{
	  filter: brightness(0) invert(1);
}

.location.featured .show-on-map{
	color:#F9A431 !important;
	background:white;
}


.location.bumas_reseller h3:after{
    content:'BUMAS RESELLER';
    display:inline-block;
    color:white;
    background-color: #F9A431 !important;
    font-size:12px;
    padding:3px 6px;
    border-radius:10px;
    transform: translateY(-3px);
    margin-left:6px;
}

.location .location_data > p{
	flex-basis:60%;
}

.show-on-map{
	height:41px;
}

/*Style for checkboxes*/

.checkbox-wrapper {
    margin-bottom: 10px;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-wrapper label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}


.checkbox-wrapper input[type="checkbox"]:checked + label::before {
    content: "\2713";
    background-color: #F9A431 !important;
    color: #fff;
    border-color: #F9A431 !important;
}


label
{
  display: flex;
  line-height: 1;
  vertical-align: middle;
  align-items: center;
  gap: 5px;
}

/*End*/

.filter-bar select, 
.filter-bar input, 
.filter-bar button {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.filter-bar button {
    font-family: "Lato", Sans-serif;
    font-size: 17px;
    font-weight: 900;
    background-color: #F9A431 !important;
    border-radius: 30px 30px 30px 30px;
    padding: 15px 22px 15px 22px;
    color:white;
    margin-left:20px;
}

.filter-bar button:hover {
    background-color: #D5167C;
}

#filter-form{
    display: flex;
    align-items: center;
    justify-content:end;
}

input#location{
    max-width:200px;
    border-radius: 30px;
    border-color:lightgrey;
    min-height: 40px;
    padding: 15px;
}

#map {
    width: 70%;
    height: calc( 100vh - 70px - 90px );
}

.marker-modal {
    position: absolute;
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 9999;
}

.marker-modal::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #ccc transparent;
}

.marker-modal h3 {
    margin-top: 0;
}

.marker-modal p {
    margin: 5px 0;
}

#sidebar {
    width: 30%;
    padding: 20px;
    overflow-y: scroll;
    height: calc( 100vh - 70px - 90px );
    border-left: 1px solid #ddd;
    background:white;
    z-index:100;
    font-family: "Century Gothic" !important;
}

.location {
    margin-bottom: 10px;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #efefef;
    font-family: "Century Gothic" !important;
    justify-content: space-between;
    padding-bottom: 10px;
}

.location:not(.active){
    display:none;
}

.location .category_icon{
    width:50px;
    height:auto;
    padding:5px;
}

.location .location_data{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    width: calc( 100% - 60px );
}

.location .location_row{
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-basis:100%;
    display:flex;
}

.location .location_row a{
    width:auto;
}

.location h3{
    margin: 0;
    font-family: "Century Gothic" !important;
    font-size:17px;
    text-transform: uppercase;
    font-weight: bold;
    width:auto;
}

.location .location_data > p{
    flex-basis: 70%;
    font-size:14px;
    margin-bottom: 0;
}

.show-on-map {
    display: inline-block;
    font-family: "Century Gothic" !important;
    font-size: 13px;
    font-weight: 900;
    background-color: #F9A431;
    border-radius: 30px 30px 30px 30px;
    padding: 7px 11px 7px 11px;
    color:white;
    height: auto;
    margin-bottom:-20px;
    max-height: 41px;;
}

.show-on-map:hover {
    background-color: #D5167C;
}

@media screen and (max-width:767px){
    .map_container{
        flex-wrap: wrap;
    }

    #map{
        width:100%;
        height:60vh;
    }

    #sidebar{
        width:100%;
        height:200px;
    }
}

/* Filter popup */

#open-filter-popup, #apply-filter{
    margin-left:0;
    margin-right:10px;
}

.filter-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.filter-popup-inner .filter-checkbox > .checkbox-wrapper{
    flex-basis:100%;
    margin-bottom:10px;
    font-size:16px;
}

.filter-popup-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    width:90%;
}

.filter-popup-inner .filter-checkbox{
    width:100%;
}

.filter-popup-inner .filter-checkbox h4
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* CATEGORY TILES */

.category-tiles{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px 10px;
}

@media screen and (max-width:767px){
    .category-tiles{
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px 10px;
    }
    .filter-bar
    {
        min-height: 150px;
        position: relative;
    }
    #filter-form
    {
        display: block;
        width: 100%;
    }
    input#location
    {
        position: absolute;
        bottom: 15px;
        left: 12px;
        max-width: 93%;
    }
    .filter-bar button
    {
        margin-left: 0px;
        width: 49%;
    }
    #open-filter-popup, #apply-filter
    {
        margin-right: 0px;
    }
}

.category-tile{
    background: rgba( 255, 255, 255, 0.8 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 1px solid rgba( 239, 26, 140, 0.18 );
    color: #F9A431;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:30px;
    border-radius: 15px;
    flex-wrap: wrap;
    flex-direction: column;
    font-family: "Lato", Sans-serif;
}

.category-tile a:hover span{
    color:#F9A431;
}

.category-tile span{
    font-size:17px;
    text-transform: uppercase;
    font-weight: 900;
}

.category-tile img{
    width:80px;
    height: auto;
    margin-bottom: 10px;;
}

.slick-dots {
    position: absolute;
    bottom: -25px; /* adjust the position */
    list-style-type: none;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 0;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 8px; /* adjust the size */
    height: 8px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #cccccc; /* adjust the background color */
    border-radius: 50%;
}

.slick-dots li.slick-active button {
    background: #333333; /* adjust the active dot background color */
}

/* Slick slider arrow styling */
.slick-prev,
.slick-next {
    position: absolute;
    bottom: -100px; /* Adjust this value to position the arrows up or down */
}

.slick-prev {
    left: 50%; /* Center the button */
    transform: translateX(-125%); /* Move it to the left */
}

.slick-next {
    left: 50%; /* Center the button */
    transform: translateX(25%); /* Move it to the right */
}

/* Ensure the container has space for the arrows */
.category-tiles {
    margin-bottom: 100px; /* Adjust this value as necessary */
}


/* UNTERNEHMEN SINGLE */

#unternehmen-gallery .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    justify-items: center;
    align-items: center;
  }
  
  #unternehmen-gallery .gallery a {
    display: block;
    text-decoration: none;
  }
  
  #unternehmen-gallery .gallery img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  #unternehmen-gallery h3.galerie-title{
    color: var(--e-global-color-secondary );
    font-family: "Lato", Sans-serif;
    font-size: 18px;
    font-weight: 600;
  }

  .opening-hours {
    background-color: transparent;
    border-collapse: collapse;
  }

  .opening-hours tr{
    background-color: transparent!important;
  }
  
  .opening-hours td {
    background-color: transparent!important;
    border: none;
    border-bottom: 1px solid #efefef;
  }
  
  .opening-hours tr:last-child td {
    border-bottom: none;
  }
  
  .ribbon {
    width: 300px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    top: 25px;
    right: -99px;
    background-color: #F9A431;
    transform: rotate(45deg);
    text-align: center;
    line-height: 50px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    z-index:99;
}

.ribbon span {
    position: relative;
    /*transform: rotate(-45deg);*/
    display: block;
    font-size:13px;
}

.acf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.acf-tag {
    background-color: #e0e0e0;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
}