/*
Theme Name: Gini\'s Beverages Gutenberg
Author: Sahil Patel
Description: Your description goes here
Version: 1.0
Template: twentytwentyfive

This is the child theme for Twenty Twenty-Five theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/


.current-year {
    font-size: 1.0rem;

}

.zero-height {
	height: 0px !important;
}

.shop-results {
	width: 65%;
}

.limit-logo-height > a > img {
	max-height: 15vw;
	width: auto;
	border-style: none;
}

.banner-styling > div {
	backdrop-filter: blur(5px) invert(10%);
	box-shadow: 0px 0px 40px 40px #fff1;
}

.header-logo-section {
    box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2) inset;
}


.wc-block-product-filters__open-overlay > span {
	font-size: 1.2em;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.wc-block-product-filters__open-overlay > span {
  animation: pulse 5s infinite;
}

.block-visibility-hide-large-screen .wp-block-navigation-item__label {
        font-size: var(--wp--preset--font-size--x-large) !important;
}


/* --- 1. Style the Help Icon --- */
/* Forces the count and the icon to remain on the same line, wrapping together */
.unbreakable-filter-group {
    display: inline; /* Ensure it behaves like a text element */
    white-space: nowrap; /* Prevents wrapping between its children */
}

.filter-help-icon {
	display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background-color: var(--wp--preset--color--accent-1);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-help-icon:hover {
    background-color: var(--wp--preset--color--custom-color-1);
}

/* --- 2. Style the Modal Popup --- */
#filter-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999; /* Ensure it's on top of everything */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.popup-content {
    background: var(--wp--preset--color--accent-5);
    padding: 1em;
    max-width: 500px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    text-align: center;
}

#popup-close {
    margin-top: 15px;
    padding: 8px 15px;
    background-color: var(--wp--preset--color--accent-1);
    border: 1px solid #ccc;
    cursor: pointer;
	color: var(--wp--preset--color--accent-5);
}

/* --- Styling for the Small Hover Popover (Desktop) --- */
#filter-popover {
    /* Critical Visual Styles */
    background: #fff; /* White background (this is what's likely missing) */
    border: 1px solid #ccc; /* Border around the box */
    border-radius: 4px; /* Rounded corners */
    padding: 10px 15px; /* Spacing inside the box */
    max-width: 300px; /* Prevents it from getting too wide */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Subtle shadow */

    /* Critical Layout Styles (Ensures it positions correctly) */
    /* Note: position:absolute and z-index are now handled inline via JavaScript */
    pointer-events: none; /* Allows user to click through to elements behind the popover */
}

/* Style for the content inside the popover */
#filter-popover h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1em;
    font-weight: bold;
	display: none;
}

#filter-popover p {
    margin-bottom: 0;
	margin-top: 0;
    font-size: 0.9em;
    line-height: 1.4;
}

#popup-title {
	display: none;
}