/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
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: 2.0.0
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 */

/* Breadcrumb */
.breadcrumb a .elementor-icon-list-text, 
.breadcrumb a {
    color: #E02E13 !important;
}
.breadcrumb a:hover .elementor-icon-list-text {
    color: #41AAAB !important;
    opacity: 0.8;
}

/* Ensure the widget container is the anchor point */
.elementor-widget-search-form.search-bar {
    position: relative !important;
}

/* Search Bar Container */
.search-bar {
    position: fixed !important;
    top: 63px !important;
    left: 50% !important;
    
    /* Animation Start State: Push it down 20px and fade out */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transform: translateX(-50%) translateY(20px); 
    
    /* Box Constraints */
    width: 100% !important;
    max-width: 1240px !important;
    
    /* Aesthetics */
    z-index: 99999;
    background: #ffffff; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

/* Active State: Slide up to original position and fade in */
.search-bar.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
div.wpforms-container-full button[type=submit] { background: #000!important; }

/* Shop Related */
.woocommerce .elementor-505 .elementor-element.elementor-element-606d9e7e .price { line-height: 100%; }
.woocommerce a.added_to_cart { padding-left: 10px; } 

input[type=number] { border: 1px solid #41AAAB40; }

.input-text.qty::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    appearance: inner-spin-button !important;
    opacity: 1 !important;
    
    /* This moves the arrows to the right */
    margin-right: -10px !important; 
    
    /* Optional: This gives them a bit of breathing room from the numbers */
    margin-left: 8px !important; 
    
    /* Ensure they stay clickable */
    cursor: pointer;
}

/* You may also need to ensure the input doesn't clip them */
.input-text.qty {
    overflow: visible !important;
    padding-right: 20px !important; 
}
/* End Archive */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price { margin-top: 10px; } /* Side Cart */
.elementor-menu-cart__product-image img { border-radius: 6px; }
.elementor-menu-cart__subtotal { margin-top: 10px; }
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, .woocommerce-page .woocommerce-message .button { background: #41AAAB; color: #1C2137; border-radius: 6px; }
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover, .woocommerce-page .woocommerce-message .button:hover { background: #000; color: #fff; }
.woocommerce-info, .woocommerce-message { border-top-color: #41AAAB; }

/* Remove background from WPForms field containers */
.wpforms-container .wpforms-field {
    background-image: none !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* My Account */
.woocommerce-page .woocommerce-info .button { color: #111!important; }
.woocommerce-page .woocommerce-info .button:hover { background: #1C2137!important; color: #fff!important; }
/* Establish a strict positioning anchor on the Elementor icon container element */
.header-account-container {
    position: relative !important;
}

/* Format the dropdown panel layout safely as a floating layer */
.header-account-container .account-dropdown-menu {
    display: none; /* Controlled strictly by jQuery fadeIn/fadeOut now */
    position: absolute;
    left: 50%;
    transform: translateX(-50%); 
    top: 60px!important;                  
    background: #ffffff !important; 
    min-width: 160px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid #edf2f7;
    border-radius: 6px;
    padding: 8px 0;
    z-index: 99999 !important; 
}

/* REMOVED: .header-account-container:hover .account-dropdown-menu { display: block !important; } */

/* Link element typography & spacing specifications */
.account-dropdown-menu a, 
.account-dropdown-menu .dropdown-welcome {
    display: block;
    padding: 8px 16px;
    color: #2d3748 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    text-align: center;
    white-space: nowrap;
}

/* Accent state coloration for navigation links */
.account-dropdown-menu a:hover {
    background-color: #f7fafc !important;
    color: #5bc0de !important;
}

.account-dropdown-menu .dropdown-welcome {
    font-weight: 700;
    font-size: 13px !important;
    color: #718096 !important;
    padding-bottom: 4px;
}

.account-dropdown-menu .dropdown-divider {
    border: 0 !important;
    border-top: 1px solid #edf2f7 !important;
    margin: 4px 0 !important;
}

/* Sign out configuration link format styles */
.account-dropdown-menu .logout-link {
    color: #e53e3e !important; 
}
.account-dropdown-menu .logout-link:hover {
    background-color: #fff5f5 !important;
}
/* ==========================================================================
   MOBILE DROPDOWN RESPONSIVE ALIGNMENT FIX
   ========================================================================== */
@media (max-width: 767px) {
    .header-account-container .account-dropdown-menu {
        /* Reset the centering mechanics */
        left: auto !important;
        transform: none !important;
        
        /* Snap the right boundary directly to the right edge of the header icons */
        right: -30px !important; 
        
        /* Adjust positioning depth for smaller headers if needed */
        top: 50px !important; 
        
        /* Ensure it remains neat and doesn't squeeze too narrow */
        min-width: 170px !important; 
    }

    /* Update the hover bridge layer for mobile spacing */
    .header-account-container .account-dropdown-menu::before {
        top: -55px !important;
        height: 55px !important;
        left: auto !important;
        right: 0 !important;
        width: 100% !important;
    }
}