/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
/* Theme Name: Astra Child */

/* --- General Header --- */
#custom-header { background: #ffffff; border-bottom: 1px solid #eee; }
.top-bar { background: #000; color: #fff; text-align: center; padding: 5px 0; font-size: 12px; }
.main-nav-container { display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; }
.logo a { font-weight: bold; font-size: 24px; text-transform: uppercase; color: #000; text-decoration: none; }

/* --- Desktop Icons --- */
.header-icons { display: flex; gap: 25px; align-items: center; }
.header-icons a { color: #000; text-decoration: none; font-size: 24px; }

/* --- Cart Layout --- */
.cart-custom { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-weight: 800; 
    font-size: 16px; 
    border-left: 1px solid #e0e0e0; 
    padding-left: 20px; 
    text-transform: uppercase; 
    color: #000; 
    text-decoration: none;
}
.cart-icon-wrapper { 
    position: relative; 
    font-size: 24px; 
    display: flex;
    align-items: center;
}
.cart-count { 
    position: absolute; 
    top: -12px; 
    right: -10px; 
    background: #008080; 
    color: #fff; 
    font-size: 10px; 
    width: 18px; 
    height: 18px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border-radius: 50%; 
    font-weight: bold; 
}

/* --- Search Overlay --- */
.search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.98); z-index: 9999; display: flex; justify-content: center; align-items: center; }
.overlay-content { width: 60%; text-align: center; }
.close-search { position: absolute; top: 20px; right: 40px; font-size: 30px; cursor: pointer; }
.search-field-wrapper { display: flex; align-items: center; border-bottom: 1px solid #008080; padding: 10px 0; }
.search-field-wrapper input { border: none; flex-grow: 1; padding: 10px; font-size: 18px; outline: none; }

/* --- Responsive Helpers --- */
@media (min-width: 769px) { .mobile-only { display: none !important; } }
@media (max-width: 768px) { 
    .desktop-only { display: none !important; } 
    .main-nav-container { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
    .logo { flex-grow: 1; text-align: center; }
    .mobile-cart .cart-count { background: #008080; color: #fff; border-radius: 50%; padding: 2px 6px; font-size: 10px; }
}

/* Fix Mobile Cart Badge */
.mobile-cart-link {
    position: relative;
    display: inline-block;
    color: #000;
    font-size: 22px;
}

.mobile-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #008080;
    color: #fff;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: bold;
}

/* Fix Hamburger Menu Toggle */
.mobile-menu-toggle {
    font-size: 24px;
    cursor: pointer;
    color: #000;
    padding: 10px; /* Increases touch target area */
}

/* Ensure the mobile cart count is always visible */
.mobile-cart .mobile-cart-count {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #000 !important;
    color: #fff !important;
}

/* Ensure Mobile Cart Badge displays */
.mobile-cart-count {
    display: inline-flex !important;
    background: #000 !important;
    color: #fff !important;
    width: 16px;
    height: 16px;
    font-size: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right: -5px;
}
.mobile-cart-link { position: relative; }
/* Remove Blue Box and Borders */
.mobile-menu-toggle button {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Ensure Teal Green Icon and Left Alignment */
.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 !important;
    margin-right: auto; 
}

.mobile-menu-toggle i {
    color: teal !important;
    font-size: 24px;
}

.panel-overlay {
    position: fixed;
    top: 0;
    right: -100%; /* Initially hidden off-screen */
    width: 350px;
    height: 100%;
    background: #fff;
    transition: right 0.3s ease;
    z-index: 9999;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

/* Active State: Slides in */
.panel-overlay.is-active {
    right: 0;
}

.panel-content {
    padding: 40px;
    height: 100%;
    overflow-y: auto;
}

.empty-cart-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.empty-cart-custom .button {
    margin-top: 15px;
    padding: 10px 20px;
    background: #006666;
    color: #fff;
    text-decoration: none;
}

/* Style for the close button */
.close-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 128, 128, 0.2); /* Slight teal transparent background */
    color: #008080; /* Teal icon color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    border: 1px solid rgba(0, 128, 128, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
}

/* Hover effect for extra "fancy" feel */
.close-panel:hover {
    background-color: rgba(0, 128, 128, 0.4);
    transform: rotate(90deg);
}

.account-tabs {
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
}

.tab-link {
    flex: 1;
    padding: 15px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #888;
}

.tab-link.active {
    border-bottom: 2px solid #000;
    color: #000;
}

.tab-content {
    padding: 20px 0;
}

/* Ensure content is hidden by default */
.tab-content {
    display: none;
}

/* Ensure active tab content shows */
.tab-content[style*="display: block"] {
    display: block !important;
}

/* Style for the tabs to look like your image */
.account-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.tab-link {
    width: 50%;
    padding: 15px;
    background: #f4f4f4;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.tab-link.active {
    background: #005bb7; /* Matches your blue button */
    color: #fff;
}

/* Force Teal Background and White Text */
.button, 
input[type="submit"], 
.tab-link.active,
.empty-cart-custom .button {
    background-color: #008080 !important;
    color: #ffffff !important;
    border-color: #008080 !important;
}

/* Ensure the button text stays white on hover */
.button:hover, 
input[type="submit"]:hover {
    background-color: #006666 !important;
    color: #ffffff !important;
}

/* Specific fix for the tabbed menu buttons */
.account-tabs .tab-link {
    background-color: #f4f4f4 !important; /* Inactive tab background */
    color: #333 !important;
}

.account-tabs .tab-link.active {
    background-color: #008080 !important;
    color: #ffffff !important;
}

/* Ensure the active button is always teal */
.tab-link.active {
    background-color: #008080 !important;
    color: #ffffff !important;
    border-color: #008080 !important;
}

/* Ensure the inactive button is visible */
.tab-link {
    background-color: #f4f4f4 !important;
    color: #333 !important;
}

#register-form .u-column1 {
    display: none !important;
}

.hero-slider {
  width: 100%;
  height: 500px; /* Adjust height as desired */
}
.hero-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide {
    position: relative;
    width: 100%;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: auto; /* Or your preferred fixed height */
}
.swiper {
    width: 100%;
    /* Ensure the container has height */
    height: 500px; /* Adjust this to your image height */
}

.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the space without distortion */
}

/* Make navigation arrows pure white */
.swiper-button-next, 
.swiper-button-prev {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Adds a subtle shadow so they are visible on light images */
}

/* Make pagination bullets pure white */
.swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.6; /* Inactive bullets are slightly transparent */
}

/* Make the active pagination bullet fully opaque white */
.swiper-pagination-bullet-active {
    background: #ffffff !important;
    opacity: 1 !important;
}

/* Apply a gradient mask to the hero slider container */
#hero-banner-section .swiper {
    /* Adjust the '80%' to control how much of the bottom fades */
    /* Adjust '20px' to control how gradual the fade is */
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    
    /* Ensure the mask doesn't interfere with your pagination dots */
    overflow: visible; 
}