/*
 Theme Name:        GeneratePress Child | Epic Deals
 Theme URI:         https://generatepress.com/?ref=7960
 Description:       Custom GeneratePress Child Theme for Epic Deals
 Author:            Brian Chin
 Author URI:        https://wpspeedexpert.com
 Template:          generatepress
 Version:           1.9.10
 Text Domain:       gp-child
 GitHub Theme URI:  https://github.com/WPSpeedExpert/generatepress-child-epicdeals
 Primary Branch:    main
*/

/**
 * Do not directly or manually make changes to this Theme, it is controlled by a GIT repository on GitHub.
 */

/* ===========================================
 * Table of Contents:
 * ===========================================
 * 1. Header & Navigation
 *    - Mobile Header Layout
 *    - Desktop Header Configuration
 *    - Secondary Navigation Styling
 *    - Main Menu Customization
 *    - FiboSearch Integration
 *    - Secondary Navigation Menu
 *
 * 2. WooCommerce Elements
 *    - Store Notice Banner
 *    - Product Grid Layout
 *    - Sale Badge Styling
 *    - Price Display
 *    - Mini Cart Design
 *    - Breadcrumb Navigation
 *
 * 3. Form & Input Elements
 *    - Button Styling
 *    - Input Field Design
 *    - Newsletter Form Layout
 *
 * 4. Layout & Components
 *    - Social Media Icons
 *    - Cookie Notice Banner
 *    - Utility Classes
 *
 * 5. Review Display Limit
 *    - Homepage and Footer overflow control
 *    - Side widget review name overflow control
 *    - Footer review and Side Widget URL links
 *
 * 6. Flickity Carousel
 *    - Adjusted container sizes for Flickity carousel
 *    - Page dots and arrow buttons
 *    - Responsive adjustments for Flickity carousel
 *
 * 7. Modal Filter
 *    - Modal filter text adjustments
 *
 * 8. Newsletter Form
 *    - Submit button centered 
 * 
 * 9. Chatbot widget Appearance
 *    - target picture for prod site 
 *    - hide old chatbot button
 * 10. Chatbot Header alignment fix
 *    - header contact horizontal alignment
 *    - header bottom links vertical alignment
 *    - left margin for header links
 *    - popup bubble responsiveness
 */

/* ===========================================
 * 1. Header & Navigation
 * =========================================== */

/**
 * Mobile Header Layout
 * Custom mobile header configuration with:
 * - Left-aligned menu toggle
 * - Centered logo
 * - Right-aligned search and cart
 */
 @media (max-width: 1200px) {
    #mobile-header {
        min-height: 45px;
        padding: 25px 0px 25px 0px;
    }

    #mobile-header .menu-toggle {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 19px;
    }

    .site-logo.mobile-header-logo {
        position: absolute;
        top: 50%;
        left: 47%;
        transform: translate(-50%, -50%);
    }

    .cart-contents.mobile-cart,
    #mobile-header .search-icon {
        position: absolute;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
    }
    .cart-contents .gp-icon.shopping-cart:hover {
        color: #fff !important; /* change hover color for cart icon */
    }

   /* Hide the black menu */
   .secondary-nav-aligned-right .secondary-navigation .inside-navigation {
   		display: none !important;
	}
}

/**
 * Desktop Header Configuration
 * Implements sticky header and navigation
 */
@media (min-width: 1200px) {
    .site-logo {
        margin-left: 0px;
    }

    .site-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    #site-navigation {
        position: sticky;
        top: 129px;
        z-index: 999;
    }
}

/**
 * Header Scroll Behavior
 * Hide header when scrolling down, show when scrolling up
 */
.site-header,
#site-navigation,
#mobile-header,
#wc-sticky-cart-panel {
    transition: transform 0.3s ease-in-out;
}

.site-header.header-hidden,
#mobile-header.header-hidden {
    transform: translateY(-150%);
}
#site-navigation.header-hidden {
    transform: translateY(-350%);
}

.site-header.header-visible,
#site-navigation.header-visible,
#mobile-header.header-visible {
    transform: translateY(0);
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #wc-sticky-cart-panel.header-hidden {
        transform:translateY(-150%) !important
    }
    #wc-sticky-cart-panel.header-visible {
        transform: translateY(0);
    }
}

/**
 * Secondary Navigation Styling
 * Adds subtle border and spacing
 */

.secondary-navigation {
    padding: 4px;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #f8f8f84a;
}

/* Secondary Navigation Menus*/
.secondary-navigation .main-nav ul li a {
    font-weight: normal !important;
}

/**
 * Main Menu Customization
 * Includes hover effects and active states
 */

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
    background-color: var(--link-hover);
    border-radius: 10px;
}

.main-navigation .main-nav ul li.current-menu-item > a {
    margin: 9px 9px;
}

.main-navigation .main-nav ul li a {
    line-height: 50px;
    margin: 9px 9px;
    border-radius: 10px;
}

.main-navigation ul ul {
    border-radius: 10px;
}

@media (max-width: 1024px) {
    .main-navigation .main-nav ul li a {
        line-height: 37px;
    }
}

/**
 * FiboSearch Integration
 * Controls search visibility on different devices
 */
@media (min-width: 1024px) {
    .menu-bar-items .dgwt-wcas-search-wrapp {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .menu-bar-items .dgwt-wcas-search-wrapp {
        display: block !important;
    }
}

/**
 * Collapsible Sidebar
 * Click-to-toggle sidebar collapse/expand (desktop only)
 * Uses transform for GPU-accelerated smooth animation
 * Version: 1.1.0
 */
@media (min-width: 1025px) {
    /* Sidebar stays at full width, uses transform to slide */
    #left-sidebar {
        transition: transform 0.5s ease-in-out;
        position: relative;
        overflow: visible; /* Allow sidebar to slide without clipping */
    }

    /* Collapsed state: slide left, keeping only 50px visible */
    #left-sidebar.sidebar-collapsed {
        transform: translateX(calc(-100% + 50px));
        width: 50px;
    }

    /* Expanded state: normal position */
    #left-sidebar:not(.sidebar-collapsed) {
        transform: translateX(0);
    }

    /* Toggle Button Styles */
    .sidebar-toggle-button {
        position: absolute;
        top: 30px;
        right: 0;
        width: 40px;
        height: 40px;
        background: var(--base);
        border: 1px solid var(--base);
        border-radius: 10px;
        cursor: pointer;
        z-index: 100;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .sidebar-toggle-button .toggle-icon {
        font-size: 20px;
        color: #ffffff;
        transition: transform 0.3s ease;
        line-height: 1;
    }

    .sidebar-toggle-button:hover {
        background: #ffffff;
        transform: scale(1.05);
    }

    .sidebar-toggle-button:hover .toggle-icon,
    .sidebar-toggle-button:focus .toggle-icon {
        color: var(--base);
    }

    .sidebar-toggle-button:active {
        transform: scale(0.95);
    }

    /* Position button in visible area when collapsed */
    #left-sidebar.sidebar-collapsed .sidebar-toggle-button {
        right: 0;
        border-color: var(--base);
        top: 65px;
    }

    /* Hide button on widgets area to prevent overlap with content */
    #left-sidebar.sidebar-collapsed .sidebar-toggle-button .toggle-icon {
        opacity: 1;
    }
    #left-sidebar.sidebar-collapsed .inside-left-sidebar {
    opacity: 0;
    }

    /* Ensure widgets stay rendered but slide with sidebar */
    #left-sidebar .widget,
    #left-sidebar .widget-title,
    #left-sidebar h2 {
        transition: opacity 0.2s ease-in-out;
    }

    /* Fade out widget content when collapsed for cleaner look */
    #left-sidebar.sidebar-collapsed .widget,
    #left-sidebar.sidebar-collapsed .widget-title,
    #left-sidebar.sidebar-collapsed h2 {
        opacity: 0.1;
    }

    .separate-containers .inside-left-sidebar, .separate-containers .inside-right-sidebar {
        opacity: 1;
    }

    /* Content area expands when sidebar collapses */
    .sidebar-is-collapsed .content-area {
        width: calc(100% - 70px) !important;
        margin-left: 0;
    }
}

/* Home Page Below Hero Navigation (Latest, Iphone, Macbook, etc.) */
@media (max-width: 1330px) {
    .gb-container-ac64aa63 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        overflow-x: auto;
        margin-right: auto;
        margin-left: auto;
    }
}

/* ===========================================
 * 2. WooCommerce Elements
 * =========================================== */

/**
 * Store Notice Banner
 * Styles the WooCommerce store-wide notice
 */
.woocommerce-store-notice, p.demo_store {
    padding: 10px 0 !important;
    font-size: 16px !important;
    background-color: var(--base) !important;
}
/* Hide the store notice on mobile */
@media screen and (max-width: 475px) {
    nav#secondary-navigation{
       display: none;
    }

}

/**
 * Product Grid Layout
 * Styles for product displays and grids
 */
.wc-block-grid__product-title {
    color: var(--contrast) !important;
    font-size: 16px !important;
}

.wc-block-grid__product-price {
    color: var(--link) !important;
    font-size: 21px;
    font-weight: 700;
}

a:hover .wc-block-grid__product-title {
    text-decoration: underline !important;
}

@media only screen and (max-width: 768px) {
    .wc-block-grid.wp-block-product-category.wc-block-product-category.has-5-columns.has-multiple-rows ul.wc-block-grid__products {
        display: flex !important;
        flex-wrap: wrap;
    }
    .wc-block-grid.wp-block-product-category.wc-block-product-category.has-5-columns.has-multiple-rows ul.wc-block-grid__products li.wc-block-grid__product {
        flex: 1 0 50% !important;
    }
}

/**
 * Sale Badge Styling
 * Customizes appearance of sale badges
 */
.wc-block-grid .wc-block-grid__product-onsale,
.wc-block-grid__product-image .wc-block-grid__product-onsale {
    background: var(--base) !important;
    border: none !important;
    color: var(--base-3) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 13px !important;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
    border-radius: 4px !important;
    padding: 8px 8px !important; /* changed from 11px */
}

.woocommerce ul.products li.product.sales-flash-overlay .onsale {
    top: 10px !important;
    right: 10px !important;
}

/**
 * Price Display Styling
 * Improves price visibility and contrast
 */
.gb-container .woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.gb-container .woocommerce ul.products li.product .price del {
    opacity: 1;
}

.woocommerce ul.products li.product .price del {
    opacity: 0.9 !important;
}

/**
 * Mini Cart Design
 * Styles the cart icon and counter
 */
.cart-contents {
    position: relative;
    display: inline-block;
    padding: 10px;
    color: var(--contrast-2);
    text-decoration: none;
}

.cart-contents .gp-icon.shopping-cart {
    font-size: 1.5em;
    vertical-align: middle;
    color: white;
}

.cart-contents .gp-icon.shopping-cart:hover {
    color: var(--base);
}

.cart-contents .gp-icon.shopping-cart svg path[fill="none"] {
    display: none;
}

.cart-contents .cart-contents-count {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    padding: 4px;
    font-size: 12px;
    position: absolute;
    top: -10px;
    right: -10px;
    line-height: 1;
    text-align: center;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-contents.mobile-cart {
    display: none;
}

@media (max-width: 1200px) {
    .cart-contents:not(.mobile-cart) {
        display: none;
    }

    .cart-contents.mobile-cart {
        display: inline-block;
    }

    .cart-contents .gp-icon.shopping-cart {
        font-size: 1.2em;
    }

    .cart-contents .cart-contents-count {
        padding: 2px;
        font-size: 10px;
        top: -5px;
        right: -5px;
        width: 20px;
        height: 20px;
    }
}

.main-navigation a.cart-contents.mobile-cart::before,
.secondary-navigation a.cart-contents.mobile-cart::before {
    content: none;
}

/**
 * Breadcrumb Navigation
 * Styles WooCommerce breadcrumbs
 */
.woocommerce-breadcrumb a {
    color: var(--link) !important;
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: var(--link-hover) !important;
}

.separate-containers .inside-article {
    padding: 20px;
}

/* ===========================================
 * 3. Form & Input Elements
 * =========================================== */

/**
 * Button Styling
 * Applies consistent button styling
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
    border-radius: 6px;
}

/**
 * Input Field Design
 * Consistent styling for form inputs
 */
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
    border-radius: 6px;
}

/**
 * Newsletter Form Layout
 * Mailchimp form styling
 */
.mc4wp-form-fields input[type="email"] {
    width: 50%;
}

/* ===========================================
 * 4. Layout & Components
 * =========================================== */

/**
 * Social Media Icons
 * Mobile-friendly social icon display
 */
@media (max-width: 768px) {
    .gb-icon {
        display: flex;
        flex-direction: column;
    }
}

/**
 * Cookie Notice Banner
 * Optimizes the Complianz cookie notice
 */
.cmplz-cookiebanner .cmplz-body {
    display: none !important;
}

.cmplz-cookiebanner .cmplz-divider {
    display: none !important;
}

.cmplz-cookiebanner {
    transition: none !important;
    padding: 10px !important;
}

@media (max-width: 768px) {
    .cmplz-cookiebanner .cmplz-buttons {
        flex-direction: row !important;
        justify-content: space-between;
        gap: 10px;
    }
}

@media only screen and (max-width: 480px) {
    .cmplz-cookiebanner .cmplz-message {
        overflow: hidden !important;
        max-height: 4vh;
    }
}

/**
 * Utility Classes
 * Common spacing utilities
 */
.margin-top {
    margin-top: 20px;
}

.margin-bottom {
    margin-bottom: 20px;
}

.padding {
    padding: 20px;
}



/* ===========================================
 * 5. Review Display Limit
 * =========================================== */

/**
 * Homepage and Footer review text control
 */
.review-content {
    font-weight: 700;
    margin-bottom: 22px;
    max-height: 200px;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/**
 * Reviewer name overflow control
 */
.review-name-widget .gb-headline-text, .review-name-container .gb-headline-text {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/**
 * Side widget review name overflow control
 */
.review-name-widget .gb-headline-text {
	max-width: 150px;
}
.review-content-widget {
    max-height: 200px;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/**
 * Footer review and Side Widget URL links change color and when hover
 */
.review-name-container .gb-headline-text,
.review-name-widget .gb-headline-text {
    color: var(--link);
}
.review-name-container:hover .gb-headline-text,
.review-name-widget:hover .gb-headline-text {
color: var(--contrast);
}

/* ===========================================
 * 6. Flickity Carousel
 * =========================================== */

/**
 * Adjusted container sizes for Flickity carousel
 */

 /* Set the flex property to column to properly display the containers */
.carousel {
    flex-direction: column;
}

/* Width set for 3 columns display per frame */
.carousel .reviews.type-reviews {
    width: 27%;
    height: 386px;
    margin: 8px 37px;
    padding-left: 20px;
    padding-right: 20px;
}

/**
 * Page dots and arrow buttons
 */

/* Adjust position of the column dots */
.flickity-page-dots {
	bottom: -35px;
}

/* Background color for arrow buttons */
.flickity-button {
    background: #e1e1e1;
}

/* Hover background color for arrow buttons */
.flickity-button:hover {
    background: #c0c5ce;
}

/**
 * Responsive adjustments for Flickity carousel
 */

/* Small Screen Laptop */
@media screen and (max-width: 1024px) {
    .carousel .reviews.type-reviews {
        width: 39%;
        padding: 0;
    }
    .review-content {
        -webkit-line-clamp: 5;
    }
}

/* Tablet View */
@media screen and (max-width: 768px) {
    .carousel .reviews.type-reviews {
        width: 44%;
    }
    .flickity-button {
        display: none !important;
    }
}

/* Mobile View */
@media screen and (max-width: 525px) {
    .carousel .reviews.type-reviews {
        width: 95%;
    }
}

/* ===========================================
 * 7. Modal Filter
 * =========================================== */

/**
 * Modal filter text adjustments
 */
.filter-content ul li {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item {
  margin: 0 0 0 10px;
}

@media (max-width: 1024px) {
    body.filters-in-modal .yith-wcan-filters,
	.yith-wcan-filters-opener {
        display: block !important;
    }
}

/* ===========================================
 * 8. Newsletter Form
 * =========================================== */

/**
 * Submit button centered 
 */
div#frm_field_166_container .frm_submit {
    text-align: center;
}

/* ===========================================
 * 9. Chatbot Appearance
 * =========================================== */
.assistant-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.assistant-chat-button {
    background-color: #ffffff;
    color: #333333;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    border: 2px solid var(--base);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.assistant-chat-button:hover {
    background-color: #f1f1f1;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 10px rgba(0, 0, 0, 0.3);
}

.assistant-logo {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.button-text {
    font-weight: bold;
    white-space: nowrap;
    color: #333333;
}

.assistant-popup-bubble {
    margin-bottom: 10px;
    background-color: var(--woo-sale);
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    white-space: wrap;
    display: none; /* Hidden by default - takes NO space */
    transform: translateY(10px);
    transition: transform 0.3s ease;
    position: relative;
    border: 2px solid #e1e1e1;
}

/* White border triangle (larger, behind) */
.assistant-popup-bubble::before {
    content: '';
    position: absolute;
    bottom: -11px;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid #fff;
}

/* Blue fill triangle (smaller, in front) */
.assistant-popup-bubble::after {
    content: '';
    position: absolute;
    bottom: -9px;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--woo-sale); 
}

/* Show bubble on desktop only */
@media screen and (min-width: 1025px) {
    .assistant-widget-container.show-bubble .assistant-popup-bubble,
    .assistant-widget-container:hover .assistant-popup-bubble {
        display: block;
		opacity: 1;
        transform: translateY(0);
        animation: fadeInBubble 0.3s ease;
    }
}

@keyframes fadeInBubble {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Target picture for prod site */
a.assistant-chat-button picture {
    display: flex;
}

/* Hide old chatbot button */
.bpFab {
    display: none;
}

/* Ensure bubble is always hidden on mobile/tablet */
@media screen and (max-width: 1024px) {
    .assistant-popup-bubble {
        display: none !important;
    }
}

/* ===========================================
 * 10. Chatbot Header alignment fix
 * =========================================== */
/* Header contact horizontal alignment */
/* .bpHeaderExpandedContentContainer {
    justify-items: start !important;
    } */
    
    /* Header bottom links vertical alignment */
    /* .bpHeaderExpandedContentGroup {
    flex-direction: column !important;
    gap: 0 !important;
} */

/* Header Left margin for header links */
/* .bpHeaderExpandedContentDescriptionItemsContainer[data-terms]+.bpHeaderExpandedContentDescriptionItemsContainer[data-privacy] {
    margin-left: 0 !important;
} */