/*
Theme Name: Flatsome Child - GutscheinShop
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.voucher-preview-button {
	padding: 5px;
	padding-left: 15px;
    padding-right: 15px;
	font-size:13px;
	font-weight:bold;
    margin-top: 15px;
    background-color: #ee7671;
    color: #fff;

    display: none;
}

.single-product .product-preview {
    box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 1);
}

.single-product .pswp {
	display: none !important;
}

 /* Basic styling for the popup */
#popupDiv {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none; /* Hidden by default */
}

.popup-content {
    text-align: center;
}

.close-btn {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 18px;
    cursor: pointer;
}

.title-wrapper p:nth-child(2) { 
    /* hide the product small box category, only show our custom subtitle */
    display: none !important;
}

/* custom dropdown menu stuff */

/* Ensure the submenu is hidden by default */
#menu-item-bundeslaender > .sub-menu {
    display: none;
    /* Optional: Add other styles for submenu if needed */
}

/* Show submenu when the 'open' class is added */
#menu-item-bundeslaender > .sub-menu.open {
    display: block;
}


/* Remove bullet points from the menu */
#menu-item-bundeslaender > a {
    list-style-type: none; /* Remove bullet points */
}

/* Style the menu container */
#menu-item-bundeslaender {
    background-color: white; /* White background */
    border: 1px solid #dcdcdc; /* Light grey border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: Add a subtle shadow for depth */
    padding: 10px 0; /* Add some space around the menu items */
}

/* Style the menu list to remove bullets and align items */
#menu-item-bundeslaender > ul {
    padding-left: 0; /* Remove left padding */
    margin: 0; /* Remove margins */
}

/* Remove bullets from the <ul> items */
#menu-item-bundeslaender > ul > li {
    list-style-type: none; /* Remove bullet points */
}

/* Style the links */
/* Prevent text selection when tapping the dropdown */
#menu-item-bundeslaender a.nav-top-link {
    color: #333; /* Dark text color */
    text-decoration: none; /* Remove underline */
    padding: 10px 15px; /* Add some padding around the links */
    display: block; /* Make the links block elements so they are tappable */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Prevent overflowing text */
    text-overflow: ellipsis; /* Optionally add ellipsis for very long text */
    user-select: none; /* Prevent text selection */
}

/* Optionally, add hover effect for links */
#menu-item-bundeslaender a.nav-top-link:hover {
    background-color: #f4f4f4; /* Light grey background on hover */
}

/* Prevent nested menus under other items */
#menu-item-bundeslaender > ul > li > ul {
    display: none; /* Hide any nested <ul> */
}

/* Style the dropdown container to avoid shifting when opened */
#menu-item-bundeslaender .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    width: 100%;
    z-index: 1000;
    background-color: white;
    border: 1px solid #dcdcdc; /* Light grey border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: Add a shadow */
    min-width: 220px; /* Ensure sub-menu has enough width */
}

/* Show the dropdown when it has the 'open' class */
#menu-item-bundeslaender .sub-menu.open {
    display: block;
}

/* Optional: Add transition for smooth dropdown appearance */
#menu-item-bundeslaender .sub-menu {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

#menu-item-bundeslaender .sub-menu.open {
    opacity: 1;
    visibility: visible;
}

#menu-item-bundeslaender li {
    margin-left: 0 !important;
}

#menu-item-bundeslaender {
    margin-top:15px;
    margin-bottom: 15px;
}

/*
.row:first-of-type:has(+ .no-products-found) {
  display: none !important;
}
*/

/* Main container for the pagination controls */
/* Main container for the pagination controls */
.pagination-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important; /* Space between the buttons and page numbers */
  margin-top: 20px !important;
}

/* Styling for the Previous and Next buttons */
.pagination-btn {
  padding: 8px 16px !important;
  border: 1px solid #ccc !important;
  background-color: #fff !important;
  color: #333 !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  font-weight: 500 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Hover effect for the buttons */
.pagination-btn:not([disabled]):hover {
  background-color: #f0f0f0 !important;
  border-color: #999 !important;
}

/* Styling for disabled buttons */
.pagination-btn[disabled] {
  color: #aaa !important;
  cursor: not-allowed !important;
  background-color: #f9f9f9 !important;
}

/* Container for the page numbers */
.page-numbers {
  display: flex !important;
  gap: 5px !important; /* Space between individual page numbers */
}

/* Styling for each page number */
.page-number {
  padding: 8px 12px !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  color: #555 !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Styling for the currently active page number */
.page-number.active {
  background-color: #ee7671 !important;
  color: #fff !important;
  font-weight: bold !important;
}

/* bundesland block center */
.bundesland-block {
    justify-content: center;
}

/* hide recaptcha icon */
.grecaptcha-badge {
    visibility: hidden;
}

/* always hide erlebnis and discount filters */
#erlebnis-filter, #discount-filter {
    display: none !important;
}

#reset-filters-btn {
    font-weight: normal !important;
}

#recaptcha-disclaimer {
    margin-top:-33px;
    margin-bottom: 0px;
}

.wp-singular .flickity-enabled + .section-title-container {
    margin-top: 45px;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.product-preview img {
		display: none;
	}
	.voucher-preview-button {
		display: inline-block;
	}
    /* new adjustments below */
    .product-item {
        width: 100%;
    }
    #filters select {
        width: 100%;
    }
    .page-template-template-custom-filter .search-container {
        margin: 20px auto;
    }
    .row-slider .flickity-prev-next-button {
        width: 40px !important;
        background-color: #ffffffa6 !important;
    }
    .flickity-slider .col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    #prev-btn, #next-btn {
        font-size: 10px;
    }
    .post-type-archive-product #main {
        width: 80%;
    }
    #betrieb-list-content .col {
        padding-bottom: 0px;
    }
    #recaptcha-disclaimer {
        margin-top:5px;
        margin-bottom: 5px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
    /* new adjustments below */
    #filters select {
        width: 100%;
    }
    .product-item {
        width: 48%;
    }
    .page-template-template-custom-filter .search-container {
        margin: 20px auto;
    }
}