/*
* @project     : XPayr E-commerce Theme
* @author      : x.com/0mbo0
* @version     : 1.0.8 (Module System)
* @description : Module 1: Root variables, basic styles, and helper classes. This is the foundation for all other style modules.
*/

/* ===================================================================
   [-- 1.1. THEME VARIABLES --]
   =================================================================== */
:root {
    /* --- Light Theme (Default) --- */
    --theme-bg: #FFFFFF;
    --theme-bg-secondary: #F7FAFC;
    --theme-text-primary: #1A202C; /* Near black for headings and strong text */
    --theme-text-secondary: #4A5568; /* Dark gray for body text */
    --theme-text-mbo: #D2C8CA;
    --theme-border: #E2E8F0;
    --theme-input-bg: #FFFFFF;

    /* --- Brand & Other Static Colors (These do not change with theme) --- */
    --primary-color: #00B2FF;
    --primary-color-dark: #4E49E6;
    --primary-gradient: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    --star-color: #FFD700;
    --discount-bg: #FF4500;
    
    /* --- Font Family --- */
    --font-family-base: 'Poppins', sans-serif;
}

html[data-theme="dark"] {
    /* --- Dark Theme Overrides --- */
    --theme-bg: #121212;
    --theme-bg-secondary: #1A202C;
    --theme-text-primary: #F7FAFC;
    --theme-text-secondary: #A0AEC0;
    --theme-text-mbo: #D2C8CA;
    --theme-border: #2D3748;
    --theme-input-bg: #2D3748;
}

/* ===================================================================
   [-- 1.2. BASIC STYLES (THEME-AWARE) --]
   =================================================================== */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}
body { 
    font-family: var(--font-family-base); 
    font-size: 16px; 
    line-height: 1.6; 
    color: var(--theme-text-secondary); 
    background-color: var(--theme-bg); 
    transition: background-color 0.2s ease, color 0.2s ease;
}
a { 
    color: var(--theme-text-secondary); 
    text-decoration: none; 
    transition: color 0.3s ease; 
}
a:hover { 
    color: var(--primary-color); 
}
ul { 
    list-style: none; 
}
img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}

/* ===================================================================
   [-- 1.3. HELPER & GENERIC CLASSES (THEME-AWARE) --]
   =================================================================== */
.container { 
    max-width: 1240px; 
    margin: 0 auto; 
    padding: 0 15px; 
}

.page-content {
    padding-top: 50px;
    padding-bottom: 50px;
}

.btn { 
    display: inline-block; 
    padding: 10px 25px;
    font-size: 16px;
    border-radius: 5px; 
    font-weight: 600; 
    text-align: center; 
    border: 1px solid transparent; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn:focus {
    outline: 0;
    /* This uses a static color, which is acceptable for focus rings */
    box-shadow: 0 0 0 0.2rem rgba(0, 178, 255, 0.25); 
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px; 
}

.btn-sm {
    padding: 6px 16px;
    font-size: 14px;
    border-radius: 4px;
}

.btn-primary { 
    background-color: var(--primary-color); 
    color: #FFFFFF; /* Text on primary buttons should always be white */
}

.btn-primary:hover { 
    background-color: #009de6; /* A slightly darker shade of the primary color */
    color: #FFFFFF; 
}

.btn-secondary { 
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
}
.btn-secondary:hover {
    background-color: var(--theme-border);
}

.btn-light { 
    background-color: #FFFFFF; 
    color: #1A202C; 
    border: 1px solid #E2E8F0; 
}
html[data-theme="dark"] .btn-light {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border-color: var(--theme-border);
}


html[data-theme="dark"] .bg-light {
    background-color: var(--theme-bg-secondary) !important;
}

.btn-xpayr {
    background: var(--primary-gradient);
    border: none;
    color: #FFFFFF; /* Text on gradient buttons should always be white */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 178, 255, 0.3);
}

.btn-xpayr:hover {
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(78, 73, 230, 0.4);
}

.section-header,
.section-header-center {
    display: flex; 
    align-items: center; 
    margin-bottom: 30px; 
}
.section-header { justify-content: space-between; }
.section-header-center { justify-content: center; }

.section-title { 
    font-size: 28px; 
    color: var(--theme-text-primary); 
    margin-bottom: 30px;
}

.section-title-underlined { 
    position: relative; 
    display: inline-block; 
    padding-bottom: 10px; 
    margin-bottom: 30px; 
    font-size: 28px; 
    color: var(--theme-text-primary); 
}

.section-title-underlined::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 3px; 
    background-color: var(--primary-color); 
}

.tabs-nav { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 25px; 
}

.tabs-nav .tab-link { 
    padding-bottom: 5px; 
    font-weight: 600; 
    color: var(--theme-text-secondary); 
    border-bottom: 2px solid transparent; 
}

.tabs-nav .tab-link.active, .tabs-nav .tab-link:hover { 
    color: var(--primary-color); 
    border-bottom-color: var(--primary-color); 
}

.view-all-link { 
    font-weight: 600; 
    color: var(--theme-text-primary);
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 2: Header Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 2.1. HEADER STYLES --]
   =================================================================== */
.header-top { 
    background-color: var(--theme-bg-secondary);
    border-bottom: 1px solid var(--theme-border); 
    padding: 8px 0; 
    font-size: 13px; 
}
.header-top .container { 
    display: flex; justify-content: space-between; align-items: center; 
}
.header-top__right {
    display: flex; align-items: center; gap: 20px;
}

.header-main { 
    padding: 25px 0; 
    background-color: var(--theme-bg);
}
.header-main .container { 
    display: flex; justify-content: space-between; align-items: center; gap: 20px; 
}
.header-main__logo img { 
    max-height: 40px; flex-shrink: 0;
}
html[data-theme="dark"] .header-main__logo img {
    filter: brightness(0) invert(1); /* Invert logo colors for dark mode */
}

.header-main__search { 
    display: flex; 
    border: 1px solid var(--theme-border); 
    border-radius: 5px; 
    overflow: hidden; 
    flex-grow: 1; 
    max-width: 600px; 
    background-color: var(--theme-input-bg);
}
.search-category { 
    border: none; 
    padding: 0 15px; 
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    cursor: pointer;
    outline: none;
}
.header-main__search input { 
    border: none; 
    padding: 12px 15px; 
    flex-grow: 1; 
    outline: none; 
    background-color: transparent;
    color: var(--theme-text-primary);
}
.header-main__search input::placeholder {
    color: var(--theme-text-secondary);
}

.search-button {
    background: var(--primary-gradient);
    color: #FFFFFF; 
    border: none; 
    padding: 0 20px; 
    cursor: pointer;
}

.header-main__actions { 
    display: flex; align-items: center; gap: 20px;
}
.header-main__actions .action-item { 
    position: relative; 
    font-size: 22px;
    color: var(--theme-text-secondary);
}
.action-item .badge { 
    position: absolute; top: -6px; right: -10px;
    background: var(--primary-gradient);
    color: #FFFFFF; 
    width: 18px; height: 18px; border-radius: 50%; 
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--theme-bg); /* Use theme bg for border */
}

.header-nav { 
    background-color: var(--theme-bg);
    border-top: 1px solid var(--theme-border); 
    border-bottom: 1px solid var(--theme-border); 
}
.header-nav .container { 
    display: flex; align-items: center; gap: 30px; 
}
.nav-category-btn { 
    background: var(--theme-bg-secondary); 
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
    border-radius: 5px; 
    padding: 12px 25px; 
    font-weight: 600; 
}
.nav-category-btn i { margin-right: 8px; }

.nav-menu { display: flex; gap: 20px; flex-wrap: wrap; }
.nav-menu li a { 
    padding: 15px 0; display: block; font-weight: 600; 
    color: var(--theme-text-primary); 
}
.nav-menu li.has-dropdown > a .fa-chevron-down {
    font-size: 0.7em; margin-left: 8px; transition: transform 0.3s ease;
}
.nav-menu li.has-dropdown:hover > a .fa-chevron-down { transform: rotate(180deg); }

.language-switcher { position: relative; display: flex; align-items: center; }
.language-switcher .language-list {
    display: none; position: absolute; top: 100%; left: 0;
    background-color: var(--theme-bg-secondary);
    min-width: 120px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 100;
    list-style: none; padding: 5px 0; margin-top: 5px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
}
.language-switcher.is-open .language-list { display: block; }
.language-switcher .language-list a {
    color: var(--theme-text-primary);
    padding: 8px 15px; text-decoration: none; display: block;
    font-size: 0.9em; white-space: nowrap;
}
html:not([data-theme="dark"]) .language-switcher .language-list a:hover { background-color: #f1f1f1; }
html[data-theme="dark"] .language-switcher .language-list a:hover { background-color: var(--theme-border); }

.nav-submenu {
    display: none; position: absolute; top: 100%; left: 0;
    min-width: 220px;
    background-color: var(--theme-bg);
    border: 1px solid var(--theme-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 5px; padding: 10px 0; z-index: 1000; list-style: none;
}
.nav-menu li:hover > .nav-submenu { display: block; }
.nav-submenu li a {
    padding: 10px 20px; white-space: nowrap; display: block; width: 100%;
    color: var(--theme-text-primary);
}
.nav-submenu li a:hover {
    background-color: var(--theme-bg-secondary);
    color: var(--primary-color);
}
.nav-submenu li.has-dropdown > .nav-submenu { top: -10px; left: 100%; }

/*
* @project     : XPayr E-commerce Theme
* @description : Module 3: Hero Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 3.1. HERO SECTION STYLES --]
   =================================================================== */
.hero-section { 
    padding: 30px 0; 
    background-color: var(--theme-bg);
}
.grid-hero { 
    display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: stretch; 
}

/* --- Main Slider --- */
.hero-slider-container { 
    position: relative; overflow: hidden; border-radius: 10px; 
    background-color: var(--theme-bg-secondary);
}
.hero-slider-wrapper { 
    position: relative; width: 100%; height: 100%; 
}
.hero-slide { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; 
    background-position: center right; padding: 60px; display: flex; flex-direction: column; 
    justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.8s ease-in-out, visibility 0.8s; 
}
.hero-slide.active { 
    position: relative; opacity: 1; visibility: visible; z-index: 2; 
}
.hero-content { max-width: 50%; }
.hero-content .subtitle { 
    font-size: 18px; font-weight: 500; color: var(--theme-text-secondary); 
}
.hero-content .title { 
    font-size: 48px; font-weight: 700; color: var(--theme-text-primary); 
    line-height: 1.2; margin: 10px 0; 
}
.hero-content .description { 
    margin-bottom: 30px; color: var(--theme-text-secondary); 
}
.slider-dots-container { margin-top: 15px; text-align: left; }
.slider-dots .dot { 
    display: inline-block; width: 10px; height: 10px; border-radius: 50%; 
    background-color: var(--theme-border); 
    margin-right: 8px; cursor: pointer; transition: background-color 0.3s ease; 
}
.slider-dots .dot.active { background-color: var(--primary-color); }
.slider-nav { 
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; 
    background-color: rgba(0, 0, 0, 0.1); 
    border: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    border-radius: 50%; width: 40px; height: 40px; 
    cursor: pointer; transition: all 0.3s ease; 
}
html:not([data-theme="dark"]) .slider-nav {
    background-color: rgba(255, 255, 255, 0.7);
}
.slider-nav:hover { 
    background-color: var(--primary-color); color: #FFFFFF; 
}
.slider-nav.prev { left: 20px; }
.slider-nav.next { right: 20px; }


/* --- Side Banner Styles --- */
.hero-side-banner {
    position: relative; border-radius: 10px; overflow: hidden;
    background-color: var(--theme-bg-secondary);
    aspect-ratio: 3 / 4; 
}
.hero-side-banner-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    z-index: 1;
}
.hero-side-banner-slide.active { opacity: 1; visibility: visible; z-index: 2; }
.hero-side-banner-slide::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.6) 100%);
    z-index: 3;
}
.hero-side-banner-content-wrapper {
    position: relative; z-index: 4; width: 100%; height: 100%;
    padding: 30px; display: flex; flex-direction: column;
    text-align: center; justify-content: space-between; 
}

.hero-side-banner .subtitle,
.hero-side-banner .title {
    color: #ffffff !important;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
}
.hero-side-banner .subtitle { font-size: 16px; font-weight: 500; margin-bottom: 5px; }
.hero-side-banner .title { font-size: 32px; font-weight: 700; line-height: 1.2; margin-bottom: 25px; }

.countdown-timer { display: flex; gap: 10px; justify-content: center; }
.time-box {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 5px; padding: 8px; width: 60px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.time-box span { font-size: 22px; font-weight: 700; color: #1A202C; display: block; }
.time-box small { font-size: 11px; color: #4A5568; }

/* ===================================================================
   [-- 3.2. HERO RESPONSIVE STYLES --]
   =================================================================== */
@media (max-width: 992px) {
    .grid-hero {
        grid-template-columns: 1fr; 
    }
    
    .hero-slide, .hero-side-banner {
        min-height: 400px;
    }
    
    .hero-content {
        max-width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    
    .slider-dots-container {
        justify-content: center;
        padding-left: 0;
    }
}

@media (max-width: 576px) {
    .hero-content .title { font-size: 36px; }
    .hero-slide, .hero-side-banner { min-height: 350px; }
    .hero-slide { padding: 40px 20px; }
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 4: Features Bar Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 4.1. FEATURES BAR SECTION STYLES --]
   =================================================================== */
.features-bar-section { 
    padding: 20px 0; 
    background-color: var(--theme-bg);
}

.features-bar-section .container {
    display: flex;
    justify-content: space-around; /* Use space-around for better distribution */
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-item i {
    font-size: 32px;
    color: var(--theme-text-primary);
    flex-shrink: 0;
}

.feature-item strong {
    display: block;
    color: var(--theme-text-primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}

/* 
 * The parent `div` for the text now also uses flexbox for vertical alignment.
 * This ensures the title is centered with the icon, even without a subtitle.
 */
.feature-item div {
    display: flex;
    align-items: center; /* Vertically center the text content */
    height: 100%; /* Ensure it takes full height to center properly */
}

.feature-item strong {
    display: block;
    color: var(--dark-color);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2; /* Added for better text flow */
}

/* 
 * This rule is no longer used since the `<span>` was removed from the PHP,
 * but it is harmless to keep for potential future use.
 */
.feature-item span {
    font-size: 13px;
    color: var(--text-color);
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 5: Product Tabs & Grids (THEME-AWARE)
*/

/* ===================================================================
   [-- 5.1. PRODUCT TABS & GRID STYLES --]
   =================================================================== */
.product-tabs-section {
    padding: 60px 0;
    background-color: var(--theme-bg);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Generic Product Card styling */
.product-card {
    background-color: var(--theme-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px; /* Slightly larger radius for a modern look */
    overflow: hidden;
    transition: all 0.3s ease; /* Transition all properties for smooth hover */
}

html[data-theme="light"] .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
html[data-theme="dark"] .product-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color-dark);
}

.product-card__image {
    position: relative;
    background-color: var(--theme-bg-secondary);
    text-align: center;
    overflow: hidden; /* Keep the scaled image within bounds */
}

.product-card__image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card__image img {
    transform: scale(1.05);
}

.product-card__badge-discount,
.product-card__badge-status {
    position: absolute;
    top: 15px;
    color: #FFFFFF;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px; /* Pill shape */
    z-index: 2;
}

.product-card__badge-discount {
    left: 15px;
    background-color: var(--discount-bg);
}

.product-card__badge-status {
    right: 15px;
    background-color: var(--theme-text-secondary);
}

.product-card__content {
    padding: 20px;
    text-align: left;
}

.product-card__category {
    font-size: 12px;
    color: var(--theme-text-secondary);
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.product-card__title {
    font-size: 16px; /* Slightly larger for better readability */
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 10px;
    height: 48px; /* Adjusted height for 2 lines */
    overflow: hidden;
    line-height: 1.5;
}

.product-card__title a {
    color: inherit; /* Inherit color from the parent h3 */
    text-decoration: none;
}

.product-card__title a:hover {
    color: var(--primary-color);
}

.product-card__rating {
    margin-bottom: 10px;
    color: var(--star-color);
    font-size: 13px;
}
html[data-theme="dark"] .product-card__rating {
    opacity: 0.9;
}

.product-card__price .old-price {
    text-decoration: line-through;
    color: var(--theme-text-secondary);
    opacity: 0.7;
    margin-right: 8px;
    font-size: 13px;
}

.product-card__price .new-price {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px; /* Slightly larger price */
}


.product-card__labels-container {
    position: absolute;
    top: 15px;      /* Matches your original discount badge's top spacing */
    right: 15px;    /* Positions it on the right side */
    display: flex;
    flex-direction: row; /* Aligns labels horizontally next to each other */
    align-items: center;
    gap: 6px;       /* Creates a small space between multiple labels */
    z-index: 2;     /* Ensures it's on the same visual layer as the discount badge */
}

/* Styling for each individual label inside the new container */
.product-card__label {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/**
 * Cart Page Network Display Styles
 * Version: 1.0.0
 * Styles for displaying network information on the shopping cart page.
 */

/* Style for the network badge displayed under each product name in the cart */
.product-network-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem; /* Space between icon and text */
    font-size: 0.8rem;
    color: #555;
    margin-top: 0.25rem;
    padding: 0.1rem 0.5rem;
    background-color: #f1f1f1;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.product-network-badge svg {
    width: 14px;
    height: 14px;
}

/* Style for the testnet version of the badge */
.product-network-badge.is-testnet {
    background-color: #fff0e1;
    color: #f56c00;
    border-color: #ffe0b8;
}

.product-network-badge.is-testnet svg {
    opacity: 0.8;
}

/* Testnet styling for the entire currency group container */
.cart-currency-group.is-testnet {
    border: 2px dashed #f56c00;
}

.cart-currency-group.is-testnet .cart-table-header {
    background-color: var(--theme-bg-secondary);
}

/* Ensure remove button alignment is correct with the new badge */
.product-info .remove-item-btn {
    margin-top: 0.5rem;
    display: block;
}

/**
 * Network Display Styles for Product Cards
 * Version: 1.0.0
 * Provides styling for the newly added network name and icon elements.
 */

/* Container for category and network name to position them apart */
.product-card__meta-top,
.product-list-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem; /* Small space below */
    gap: 0.5rem;
}

/* Style for the network name text (works on all cards) */
.product-card__network {
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    color: #6c757d; /* Bootstrap's text-muted color */
    background-color: #f8f9fa; /* Bootstrap's gray-100 */
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0; /* Prevents the network name from shrinking */
}

/* Style for the network icon SVG next to the price (works on all cards) */
.network-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.375rem; /* Space between icon and price */
    vertical-align: middle;
    position: relative;
    top: -1px; /* Minor vertical alignment adjustment */
}

.network-icon svg {
    width: 1em;  /* Scales with the parent font size */
    height: 1em;
    color: #6c757d; /* Muted color for the generic icon */
}

/* Specific styling for the list item card header */
.product-list-item__header {
    margin-bottom: 0.5rem;
}
.product-list-item__title {
    margin-bottom: 0; /* Remove default margin */
}
/**
 * Testnet Product Styles
 * Version: 1.0.0
 * Provides visual distinction for products on a test network.
 */

/* Style for the testnet network name badge */
.product-card__network.is-testnet {
    background-color: #fff0e1; /* A light orange/yellow */
    color: #f56c00;            /* A darker orange */
    border: 1px solid #ffe0b8;
}

/* Style for the testnet network icon */
.network-icon.is-testnet {
    opacity: 0.7; /* Makes the icon slightly faded */
    /* You can also add a filter for a grayscale effect if you prefer */
    /* filter: grayscale(50%); */
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.0.8 (Module System)
* @description : Module 6: Deals Banner Section Styles
*/

/*
* @project     : XPayr E-commerce Theme
* @description : Module 6: Deals Banner Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 6.1. DEALS BANNER SECTION STYLES --]
   =================================================================== */
.deals-banner-section {
    padding: 30px 0;
    background-color: var(--theme-bg);
}

.deals-banner-section .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.deal-banner {
    border-radius: 10px;
    padding: 30px;
    min-height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    display: flex;
    align-items: center;
    background-color: var(--theme-bg-secondary); /* THEME */
    transition: transform 0.3s ease;
}

.deal-banner:hover {
    transform: translateY(-5px);
}

.deal-banner__content h2,
.deal-banner__content h3 {
    font-weight: 700;
    color: var(--theme-text-primary); /* THEME */
    margin: 0;
    line-height: 1.2;
}

.deal-banner__content h2 {
    font-size: 24px;
}

.deal-banner__content h3 {
    font-size: 32px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .deals-banner-section .container {
        grid-template-columns: 1fr; /* Stack on tablets and smaller */
    }
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 7: Deals Of The Week Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 7.1. PRODUCT LISTING SECTION STYLES --]
   =================================================================== */
.product-listing-section {
    padding: 60px 0;
    background-color: var(--theme-bg);
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 
 * This is a generic class, so we use the updated theme variables
 * to ensure consistency across the site.
 */
.view-all-link {
    font-weight: 600;
    color: var(--theme-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.view-all-link:hover {
    color: var(--primary-color);
}

/**
 * =================================================================
 * [DEFINITIVE FIX V3.0] Universal Countdown Timer Styling
 * =================================================================
 * @version 3.0.0
 * @description This single, comprehensive block styles all countdown timers
 *              for all use cases (large/light, small/dark) and corrects the
 *              parent container layout for right-alignment.
 *              REPLACES ALL PREVIOUS COUNTDOWN CSS.
 */

/*
 * STEP 1: Parent Container Alignment
 * Makes the header a flex container to push the title to the left
 * and the countdown timer to the right.
 */
.section-header-timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Allows items to stack on very small screens */
    gap: 20px;       /* Adds space between title and timer if they wrap */
}

/*
 * STEP 2: Base Layout for ALL Inline Timers
 * Establishes the fundamental flex layout without any specific styling.
 */
.countdown-timer-inline {
    display: flex;
    align-items: right;
    gap: 5px; /* Default gap between items */
    background-color: transparent; /* NO BACKGROUND by default */
    padding: 0; /* NO PADDING by default */
}

/*
 * STEP 3: Styling for the LARGE, LIGHT Variant (e.g., Deals of the Week)
 * This targets the larger version of the timer specifically.
 */
.countdown-timer-inline.large {
    gap: 3px; /* A slightly larger gap for the large version */
}

.countdown-timer-inline.large .time-box {
    background-color: #f7f7f7; /* A very light grey instead of pure white */
    color: #333333;
    padding: 8px 12px; /* Smaller padding */
    border-radius: 6px;
    font-size: 1.4rem; /* Smaller font size */
    font-weight: 600;
    line-height: 1;
    text-align: center;
    min-width: 48px; /* Slightly narrower boxes */
    border: 1px solid #e5e5e5; /* Subtle border */
}

.countdown-timer-inline.large > span {
    color: var(--primary-color, #E5007D);
    font-size: 1.4rem; /* Smaller font size for the colon */
    font-weight: 700;
}


/*
 * STEP 4: Styling for the SMALL, DARK Variant (e.g., Best Deals card)
 * This ensures the timer looks good on darker backgrounds or inside cards.
 */
.countdown-timer-inline.dark .time-box-small {
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent dark background */
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
}

.countdown-timer-inline.dark > span {
    color: #ffffff;
    opacity: 0.8;
    font-size: 1rem;
    font-weight: 600;
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 8: Promotional Banners Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 8.1. PROMOTIONAL BANNERS SECTION STYLES --]
   =================================================================== */
.promo-banners-section {
    padding: 60px 0;
    background-color: var(--theme-bg);
}

.promo-banners-section .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.promo-banner {
    padding: 40px;
    min-height: 200px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--theme-bg-secondary); /* THEME */
    position: relative; /* Needed for overlay */
    overflow: hidden; /* Keep overlay contained */
    transition: transform 0.3s ease;
}

.promo-banner:hover {
    transform: scale(1.03);
}

/* Add a dark overlay for text legibility, good for both themes */
.promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(75deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

.promo-banner__content {
    position: relative; /* Place content above the overlay */
    z-index: 2;
}


.promo-banner__content h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #FFFFFF; /* Text should always be white for legibility */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.promo-banner__content p {
    font-size: 16px;
    margin: 5px 0 0;
    color: #FFFFFF; /* Text should always be white for legibility */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .promo-banners-section .container {
        grid-template-columns: 1fr;
    }
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 10: Best Deals Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 10.1. BEST DEALS SECTION STYLES --]
   =================================================================== */
.best-deals-section { 
    padding: 60px 0; 
    background-color: var(--theme-bg-secondary);
}

.best-deals-grid { 
    display: grid; 
    grid-template-columns: 1fr 1.2fr 1fr; 
    gap: 30px; 
    align-items: start; 
}

.best-deals-column { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

/* Horizontal Product Card used in Best Deals */
.product-card-horizontal { 
    display: flex; 
    gap: 15px; 
    padding: 15px; 
    border: 1px solid var(--theme-border); 
    border-radius: 8px; 
    background-color: var(--theme-bg);
}

.product-card-horizontal__image { 
    flex-shrink: 0; 
    width: 120px; 
    position: relative; 
}

.product-card-horizontal__image img { 
    width: 100%; height: 100%; object-fit: cover; border-radius: 5px; 
}

.product-card-horizontal__content { 
    flex-grow: 1; display: flex; flex-direction: column;
}

.product-card-horizontal .product-card__title { 
    height: auto; margin-bottom: 5px; flex-grow: 1;
}

.product-card-horizontal .product-card__rating { 
    font-size: 12px; margin-bottom: 5px; 
}

/* Countdown Timer */
.countdown-timer-inline.dark { 
    display: flex; align-items: center; gap: 4px;
    padding-top: 10px; font-weight: 600;
    color: var(--theme-text-primary);
}
.time-box-small { 
    background-color: rgba(0, 178, 255, 0.1); /* Subtle blue background for both themes */
    color: var(--primary-color);
    padding: 4px 8px; border-radius: 3px; font-size: 14px;
}
.countdown-timer-inline.dark span {
    color: var(--primary-color); font-weight: 700;
}

/* Spotlight Product in Best Deals */
.spotlight-product { 
    padding: 20px; border: 1px solid var(--theme-border); 
    border-radius: 8px; text-align: center; 
    background-color: var(--theme-bg);
}

.spotlight-product__image { 
    max-width: 100%; max-height: 250px; object-fit: contain; margin: 0 auto 15px auto; 
}

.spotlight-product .product-card__rating.center { 
    justify-content: center; display: flex; align-items: center; gap: 5px; 
}

.spotlight-product .product-card__rating span { 
    color: var(--theme-text-secondary); 
    font-size: 14px; 
}

.spotlight-product__title { 
    font-size: 16px; font-weight: 500; margin: 10px 0; line-height: 1.4;
    color: var(--theme-text-primary);
}

.spotlight-product__price { 
    font-size: 24px; font-weight: 700; color: var(--primary-color); margin: 10px 0; 
}

.spotlight-product__price .old-price { 
    font-size: 18px; color: var(--theme-text-secondary); opacity: 0.7;
    text-decoration: line-through; margin-right: 10px;
}

.spotlight-product .countdown-timer-inline.dark.center { justify-content: center; }

.spotlight-product__stock-info { 
    display: flex; justify-content: space-between; 
    font-size: 14px; margin: 15px 0 5px;
    color: var(--theme-text-secondary);
}

.stock-progress-bar { 
    width: 100%; height: 8px; background-color: var(--theme-border); 
    border-radius: 4px; overflow: hidden; 
}

.stock-progress-bar .progress { 
    height: 100%; background-color: var(--primary-color); border-radius: 4px; 
}

.spotlight-product__nav { 
    display: flex; justify-content: space-between; margin-top: 20px; 
}

.nav-arrow { 
    color: var(--theme-text-secondary); font-weight: 600; font-size: 14px; 
}

.spotlight-product__meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
}
.spotlight-product__meta-top .product-card__rating.center {
    justify-content: flex-start;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .best-deals-grid {
        grid-template-columns: 1fr;
    }
}

/**
 * Multi-Column Product List Item Styles
 * Version: 1.2.0
 * This version updates the header to stack the title and testnet badge
 * vertically for a cleaner design.
 */

/* Header container to stack title and testnet badge vertically */
.product-list-item__header {
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: flex-start; /* Aligns items to the left */
    gap: 0.3rem; /* Small space between title and badge */
    margin-bottom: 0.5rem;
}

.product-list-item__title {
    margin: 0;
    line-height: 1.3;
}

/* Ensure the testnet badge has a smaller font and fits well */
.product-list-item__header .product-card__network {
    font-size: 0.7rem; /* Make the badge text slightly smaller */
    padding: 0.1rem 0.4rem;
    line-height: 1.4;
    /* No margin-top needed anymore as it's stacked below */
}


/* --- Vertical Price Styling (Unchanged) --- */
.product-list-item__price.vertical-prices {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.price-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.price-stack .old-price {
    font-size: 0.8em;
    color: #999;
    text-decoration: line-through;
}

.price-stack .new-price {
    font-weight: 600;
    color: #007bff;
}

/* --- General Meta Alignment (Unchanged) --- */
.product-list-item__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.product-list-item__details {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure it takes full width */
}

/**
 * @project     : XPayr E-commerce Theme
 * @version     : 1.2.0 (Multi-level Mega Menu)
 * @description : Styles for the main category dropdown, updated to support
 *                multi-level submenus that appear on hover.
 */

/* ===================================================================
   [-- DROPDOWN MENU STYLES --]
   =================================================================== */

/* Main container for the dropdown functionality. */
.category-dropdown-container {
    position: relative; /* Establishes a positioning context for the dropdown. */
}

/* 
 * The main dropdown menu panel (Level 1).
 * This appears when the "ALL CATEGORIES" button is clicked.
 */
.category-dropdown {
    position: absolute;
    top: 100%; /* Positioned right below the button container. */
    left: 0;
    width: 250px; /* Fixed width for the dropdown panel. */
    background-color: var(--theme-bg);
    border: 1px solid var(--border-color);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensures it appears above other content. */
    
    /* Initially hidden with a smooth transition. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* The active state to show the main dropdown panel. */
.category-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 
 * Styles for individual list items in ANY level of the menu.
 * `position: relative` is crucial for positioning submenus.
 */
.category-dropdown li,
.category-submenu li {
    position: relative; 
    list-style: none; /* Ensure no bullets are shown. */
}

/* Styles for links in ANY level of the menu. */
.category-dropdown li a,
.category-submenu li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    color: var(--dark-color);
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Remove border from the last item of any list. */
.category-dropdown li:last-child a,
.category-submenu li:last-child a {
    border-bottom: none;
}

/* Hover effect for links in ANY level. */
.category-dropdown li a:hover,
.category-submenu li a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

/* 
 * Styles for the submenu panel (Level 2 and beyond).
 * These are hidden by default and appear on hover.
 */
.category-submenu {
    display: none; /* HIDDEN BY DEFAULT. */
    position: absolute;
    left: 100%; /* Position to the right of the parent `li`. */
    top: -1px; /* Align top edge neatly with the parent item. */
    width: 250px; /* Same width as the main dropdown. */
    background-color: var(--theme-bg);
    border: 1px solid var(--border-color);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for depth. */
    z-index: 1001; /* Must be higher than the main dropdown. */
    padding: 0;
    border-radius: 5px;
}

/* 
 * The core logic: When hovering over a `li` that has children,
 * display its DIRECT child `ul` (the submenu).
 */
.category-dropdown li.has-children:hover > .category-submenu {
    display: block;
}

/* 
 * Styles for the arrow indicator on items that have submenus.
 * This is now placed inside the `renderCategoryMenu` function.
 */
.category-dropdown li.has-children > a .fa-chevron-right {
    float: right;
    font-size: 0.7em;
    margin-top: 4px; /* Adjust vertical alignment if needed. */
    color: #aaa;
    transition: color 0.2s ease;
}

/* Change arrow color on hover to match the text. */
.category-dropdown li.has-children > a:hover .fa-chevron-right {
    color: var(--primary-color);
}

/* Reset icon styles from the original theme for submenus if needed */
.category-submenu li a i {
    /* If you want icons in submenus, style them here. Otherwise, leave it. */
    width: 20px;
    text-align: center;
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 11: Multi-Category Product Listing Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 11.1. MULTI-CATEGORY LISTING SECTION STYLES --]
   =================================================================== */
.multi-category-section { 
    padding: 60px 0; 
    background-color: var(--theme-bg);
}

.multi-category-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
}

.category-column__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-border); 
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.category-column__title { 
    font-size: 18px; 
    color: var(--theme-text-primary); 
    margin: 0;
}

.view-all-link-small {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-secondary);
}
.view-all-link-small:hover {
    color: var(--primary-color);
}


.product-list-item { 
    margin-bottom: 15px; 
}

.product-list-item a { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 8px; /* Add some padding for better hover effect */
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.product-list-item a:hover {
    background-color: var(--theme-bg-secondary);
}

.product-list-item img { 
    width: 60px; 
    height: 60px; 
    object-fit: cover; 
    border-radius: 5px; 
    flex-shrink: 0; 
    border: 1px solid var(--theme-border);
}

.product-list-item p { 
    font-size: 14px; 
    color: var(--theme-text-primary); 
    font-weight: 500; 
    margin: 0 0 5px; 
    line-height: 1.3; 
}

.product-list-item span { 
    font-size: 14px; 
    color: var(--primary-color); 
    font-weight: 600; 
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .multi-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .multi-category-grid {
        grid-template-columns: 1fr;
    }
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 12: Full-width Promo Banner Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 12.1. FULL-WIDTH PROMO BANNER STYLES --]
   =================================================================== */

.full-width-promo-banner { 
    position: relative;
    padding: 80px 0;
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed;
    /* Use theme's primary text color as the dark fallback */
    background-color: var(--theme-text-primary); /* THEME */
    color: #FFFFFF; /* Text color is always white for contrast */
}

.full-width-promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 26, 46, 0.8); /* Overlay color is theme-independent */
    z-index: 1;
}

.full-width-promo-banner .container {
    position: relative;
    z-index: 2;
}


/**
 * NEW: The main content wrapper.
 * This is the flex container that aligns the text and button.
 * - justify-content: space-between; pushes text left, button right.
 * - align-items: center; vertically aligns them in the middle.
 */
.promo-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/**
 * Text and Button blocks.
 */
.promo-text-content {
    max-width: 60%; /* To prevent text from touching the button on smaller screens */
    text-align: left; /* Text within this block is left-aligned */
}

/* No specific style needed for promo-button-wrapper, it will be pushed right automatically */

.promo-text-content h2,
.promo-text-content p { 
    color: var(--light-color);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.promo-text-content h2 { 
    font-size: 3rem; 
    font-weight: 700; 
    line-height: 1.2;
    margin-bottom: 0.5em;
}

.promo-text-content h2 span { 
    color: var(--primary-color); 
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.0.8 (Module System)
* @description : Module 13: Featured Categories Section Styles
*/

/* ===================================================================
   [-- 13.1. FEATURED CATEGORIES SECTION STYLES --]
   =================================================================== */
.product-tabs-section .section-header-center:first-of-type {
    margin-bottom: 10px; /* Reduces space between title and tabs */
}

.product-tabs-section .section-header-center:nth-of-type(2) {
    margin-bottom: 30px; /* Restores default space below tabs */
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 14: Recent Posts Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 14.1. RECENT POSTS SECTION STYLES --]
   =================================================================== */
.recent-posts-section { 
    padding: 60px 0; 
    background-color: var(--theme-bg);
}

.posts-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
}

.post-card { 
    background-color: var(--theme-bg);
    border: 1px solid var(--theme-border); 
    border-radius: 8px; 
    overflow: hidden;
    transition: all 0.3s ease;
}

html[data-theme="light"] .post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
html[data-theme="dark"] .post-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color-dark);
}

.post-card__image-container { /* Add a container for better overflow control */
    overflow: hidden;
}
.post-card__image { 
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
    transition: transform 0.4s ease;
}

.post-card:hover .post-card__image {
    transform: scale(1.05);
}

.post-card__content { 
    padding: 20px; 
}

.post-card__meta { 
    display: flex; 
    gap: 20px; 
    font-size: 13px; 
    margin-bottom: 10px; 
    color: var(--theme-text-secondary);
}

.post-card__meta i { 
    margin-right: 5px; 
}

.post-card__title { 
    font-size: 18px; 
    color: var(--theme-text-primary); 
    margin-bottom: 15px;
    line-height: 1.4;
}

.post-card__title a {
    color: inherit;
    text-decoration: none;
}

.post-card__title a:hover {
    color: var(--primary-color);
}

.post-card__readmore { 
    font-weight: 600; 
    color: var(--primary-color); 
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .posts-grid {
        grid-template-columns: 1fr;
    }
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 15: Brands Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 15.1. BRANDS SECTION STYLES --]
   =================================================================== */
.brands-section { 
    padding: 40px 0; 
    border-top: 1px solid var(--theme-border); 
    background-color: var(--theme-bg);
}

.brands-section .container { 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 20px; 
}

.brand-logo img { 
    max-height: 35px; 
    opacity: 0.6; 
    transition: all 0.3s ease; /* Transition all properties for smooth effect */
    filter: grayscale(100%);
}

.brand-logo:hover img { 
    opacity: 1; 
    filter: grayscale(0%);
}

/* Specific override for dark mode to make logos visible */
html[data-theme="dark"] .brand-logo img {
    filter: grayscale(100%) invert(100%);
    opacity: 0.7;
}

html[data-theme="dark"] .brand-logo:hover img {
    filter: grayscale(0%) invert(0%);
    opacity: 1;
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 16: Footer Section Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 16.1. FOOTER SECTION STYLES --]
   =================================================================== */
.site-footer-final { 
    background-color: var(--theme-bg-secondary); 
    color: var(--theme-text-secondary);
}

.footer-main { 
    padding: 60px 0; 
    border-top: 1px solid var(--theme-border); 
}

.footer-main .container { 
    display: grid; 
    /* This variable should be defined elsewhere, but we assume it exists */
    grid-template-columns: var(--footer-grid-columns, 2fr 1fr 1fr 1.5fr); 
    gap: 40px; 
}

.footer-logo { 
    max-width: 150px; 
    margin-bottom: 20px; 
}
html[data-theme="dark"] .footer-logo {
    filter: brightness(0) invert(1);
}

.footer-widget p { 
    margin-bottom: 10px; 
    line-height: 1.7;
}

.social-icons { 
    margin-top: 20px; 
    display: flex; 
    gap: 10px; 
}

.social-icons a { 
    display: inline-flex; 
    width: 40px; 
    height: 40px; 
    border: 1px solid var(--theme-border); 
    border-radius: 50%; 
    align-items: center; 
    justify-content: center; 
    background-color: var(--theme-bg); 
    color: var(--theme-text-primary);
    transition: all 0.3s ease;
}

.social-icons a:hover { 
    background-color: var(--primary-color); 
    color: #FFFFFF; 
    border-color: var(--primary-color); 
}

.widget-title { 
    font-size: 18px; 
    color: var(--theme-text-primary); 
    margin-bottom: 20px; 
}

.footer-widget ul li { 
    margin-bottom: 10px; 
}
.footer-widget ul li a {
    color: var(--theme-text-secondary);
}
.footer-widget ul li a:hover {
    color: var(--primary-color);
}

.newsletter-form { 
    display: flex; 
    margin-top: 20px; 
    border: 1px solid var(--theme-border); 
    border-radius: 5px; 
    overflow: hidden; 
    background-color: var(--theme-bg);
}

.newsletter-form input { 
    flex-grow: 1; 
    border: none; 
    padding: 12px; 
    background: transparent;
    color: var(--theme-text-primary);
    outline: none; 
}
.newsletter-form input::placeholder {
    color: var(--theme-text-secondary);
}

.newsletter-form button { 
    background-color: var(--theme-text-primary); 
    color: var(--theme-bg); 
    border: none; 
    padding: 0 20px; 
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: var(--primary-color);
    color: #FFFFFF;
}

/* AJAX messages are theme-agnostic */
.newsletter-message {
    margin-top: 10px; padding: 10px; border-radius: 4px;
    font-size: 14px; text-align: center; display: none;
}
.newsletter-message.success,
.newsletter-message.error { display: block; }
.newsletter-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.newsletter-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.footer-bottom { 
    padding: 20px 0; 
    border-top: 1px solid var(--theme-border); 
    background-color: var(--theme-bg); 
}

.footer-bottom .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.crypto-pay-btn img { 
    height: 40px; 
}
html[data-theme="dark"] .crypto-pay-btn img {
    background: #fff;
    border-radius: 4px;
    padding: 4px;
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 17: Responsive Styles (FINAL & CORRECTED MOBILE HEADER V6)
*/

/* ===================================================================
   [-- 17.1. RESPONSIVE STYLES --]
   =================================================================== */

/* --- Default State (Desktop) is handled by Module 2, no changes needed --- */

/* --- For Small Laptops & Large Tablets (max-width: 1200px) --- */
@media (max-width: 1200px) {
    .container { max-width: 960px; }
    .best-deals-grid { grid-template-columns: 1fr; }
    .spotlight-product { order: -1; }
    .features-bar-section .container { justify-content: center; }
}

/* --- For Tablets (max-width: 992px) --- */
@media (max-width: 992px) {
    .container { max-width: 720px; }
    .grid-hero { grid-template-columns: 1fr; }
    .hero-content { max-width: 100%; text-align: center; }
    .product-grid, .multi-category-grid, .posts-grid, .deals-banner-section .container {
        grid-template-columns: repeat(2, 1fr);
    }
    #favorites-product-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .promo-banners-section .container { grid-template-columns: 1fr; }
    .footer-main .container { grid-template-columns: 1fr 1fr; }
    
    .header-main__search { max-width: none; }
    .header-main__actions { gap: 10px; }
    .header-main__actions .action-item { font-size: 20px; }
    .header-main__user-actions .btn { padding: 8px 16px; font-size: 14px; }
}

/* --- For Mobile Phones (max-width: 768px) --- */
@media (max-width: 768px) {
    .container { max-width: 100%; padding: 0 15px; }

    /* Corrected Mobile Header Layout using Grid */
    .header-main .container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 15px;
        align-items: center;
    }
    .header-main__actions { grid-area: 1 / 1 / 2 / 2; }
    .header-main__logo { grid-area: 1 / 2 / 2 / 3; justify-self: center; }
    .header-main__user-actions { grid-area: 1 / 3 / 2 / 4; }
    .header-main__search { grid-area: 2 / 1 / 3 / 4; width: 100%; }
    
    /* Hide the text-based icons, only show the user button part */
    .header-main__actions .header-main__action-icons {
        display: none;
    }
    .header-main__user-actions {
        display: flex;
    }
    
    /* Style the user button for mobile */
    .header-main__user-actions .user-welcome-button span {
        display: none; /* Hide username text */
    }
    .header-main__user-actions .user-welcome-button {
        padding: 8px 12px; /* Make it more square-like */
        font-size: 16px;
    }
     .header-main__user-actions .user-welcome-button i {
        margin: 0 !important;
    }

    /* Corrected Mobile Navigation Menu */
    .header-nav .container { flex-direction: column; align-items: stretch; gap: 0; padding: 15px; }
    .nav-menu { width: 100%; order: 2; flex-direction: column; align-items: stretch; gap: 5px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--theme-border); }
    .nav-menu li a { padding: 10px 0; text-align: center; }
    .category-dropdown-container { width: 100%; }
    .nav-category-btn { width: 100%; justify-content: center; }
    .category-dropdown { width: 100%; border-radius: 8px; }
    .category-dropdown li.has-children:hover > .category-submenu { display: none; }
    
    /* Single Column Grids on Mobile */
    .product-grid, #favorites-product-grid, .posts-grid, .deals-banner-section .container, .footer-main .container, .multi-category-grid { grid-template-columns: 1fr !important; }
    
    .product-card-horizontal { flex-direction: column; align-items: center; text-align: center; }
    .product-card-horizontal__image { width: 100%; height: 200px; }
    .footer-bottom .container { flex-direction: column; gap: 15px; text-align: center; }
}


/*
* @project     : XPayr E-commerce Theme
* @description : Module 14: Recent Posts Section Styles (Updated for Slider & THEME-AWARE)
*/

/* ===================================================================
   [-- 14.1. RECENT POSTS SECTION STYLES --]
   =================================================================== */
.recent-posts-section { 
    padding: 60px 0;
    overflow: hidden; /* Prevents horizontal scrollbar on the page */
    background-color: var(--theme-bg);
}

/* New slider navigation arrows */
.slider-navigation-arrows {
    display: flex;
    gap: 10px;
}

.arrow-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--theme-border);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--theme-text-secondary);
}

.arrow-btn:hover {
    background-color: var(--primary-color);
    color: #FFFFFF; /* Static white for best contrast on primary color */
    border-color: var(--primary-color);
}

.arrow-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The container that creates the "window" for the slider */
.posts-slider-container {
    overflow: hidden;
}

/* The wrapper that holds and moves all the post cards */
.posts-slider-wrapper {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease-in-out;
}

/* 
 * This re-uses the .post-card class from the previous module.
 * We ensure its flex properties are set correctly for the slider context.
 */
.posts-slider-wrapper .post-card {
    flex: 0 0 calc((100% / 3) - 20px); /* 3 cards visible, accounting for gap */
}

/* Responsive adjustments for the post slider */
@media (max-width: 992px) {
    .posts-slider-wrapper .post-card {
        flex: 0 0 calc((100% / 2) - 15px); /* 2 cards visible */
    }
}

@media (max-width: 768px) {
    .posts-slider-wrapper .post-card {
        flex: 0 0 100%; /* 1 card visible */
    }
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 15: Brands Section Styles (Updated for Infinite Carousel & THEME-AWARE)
*/

/* ===================================================================
   [-- 15.1. BRANDS SECTION STYLES --]
   =================================================================== */
.brands-section { 
    padding: 40px 0; 
    border-top: 1px solid var(--theme-border);
    background-color: var(--theme-bg);
}

.brands-slider-container {
    width: 100%;
    overflow: hidden;
    /* Create a fading effect on the edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.brands-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 60px; /* Space between logos */
    width: fit-content; /* Let the width be determined by its content */
    animation: scroll 20s linear infinite;
}

/* Pause animation on hover */
.brands-slider-container:hover .brands-slider-wrapper {
    animation-play-state: paused;
}

.brand-logo {
    flex-shrink: 0; /* Prevent logos from shrinking */
}

.brand-logo img { 
    max-height: 35px;
    width: auto;
    opacity: 0.6; 
    transition: all 0.3s ease;
    filter: grayscale(100%);
}

.brand-logo:hover img { 
    opacity: 1; 
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* Specific override for dark mode to make logos visible */
html[data-theme="dark"] .brand-logo img {
    filter: grayscale(100%) invert(1) brightness(2); /* Invert and brighten for visibility */
    opacity: 0.7;
}
html[data-theme="dark"] .brand-logo:hover img {
    filter: none; /* Remove all filters on hover */
    opacity: 1;
}


/* Keyframes for the scrolling animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move the wrapper by the width of its first half */
        transform: translateX(-50%);
    }
}

/*
 * ================================================================
 * [MULTI-CATEGORY LISTING SECTION STYLES - THEME-AWARE]
 * ================================================================
 */
.multi-category-section {
    background-color: var(--theme-bg);
}

/* Main grid for the entire section */
.multi-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Individual column styling */
.category-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-column__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--theme-border);
    padding-bottom: 10px;
}

.category-column__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-primary);
}

.view-all-link-small {
    font-size: 13px;
    color: var(--theme-text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.view-all-link-small:hover {
    color: var(--primary-color);
}

/* Individual product list item */
.product-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-list-item__image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    overflow: hidden;
}

.product-list-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-list-item__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-list-item__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    color: var(--theme-text-primary);
}

.product-list-item__title a {
    color: inherit;
    text-decoration: none;
}

.product-list-item__title a:hover {
    color: var(--primary-color);
}

/* Meta line containing both rating and price */
.product-list-item__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.product-list-item__rating {
    font-size: 12px;
    color: var(--star-color);
}

.product-list-item__rating .fa-regular {
    color: var(--theme-border);
}

/* Price styling */
.product-list-item__price {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.product-list-item__price .old-price {
    color: var(--theme-text-secondary);
    opacity: 0.7;
    text-decoration: line-through;
    font-weight: 400;
    font-size: 13px;
}

.product-list-item__price .new-price {
    color: var(--primary-color);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 992px) {
    .multi-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .multi-category-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   PRODUCT ACTIONS & MODERN MODAL (FINAL THEME-AWARE FIX)
   ================================================================= */

/* --- 1. Product Card Hover Actions --- */
.product-card__image-container,
.product-list-item__image,
.product-card-horizontal__image {
    position: relative;
    overflow: hidden;
}

.product-actions-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
    z-index: 2;
}

.product-actions {
    display: flex; gap: 10px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.product-actions .action-btn {
    display: flex; justify-content: center; align-items: center;
    width: 40px; height: 40px;
    background-color: #ffffff;
    color: #333;
    border-radius: 50%; border: none; cursor: pointer;
    font-size: 16px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}
.product-actions .action-btn:hover {
    background-color: var(--primary-color-dark);
    color: #ffffff;
    transform: translateY(-2px);
}
.product-actions .action-btn.is-active { background-color: #dc3545; color: #ffffff; }
.product-actions .action-btn.compare-btn.is-active { background-color: #28a745; color: #ffffff; }

.product-card__image-container:hover .product-actions-overlay,
.product-list-item__image:hover .product-actions-overlay,
.product-card-horizontal__image:hover .product-actions-overlay {
    opacity: 1; visibility: visible;
}
.product-card__image-container:hover .product-actions,
.product-list-item__image:hover .product-actions,
.product-card-horizontal__image:hover .product-actions {
    transform: translateY(0);
}


/* --- 2. Modern Modal Styles (THEME-AWARE) --- */
.modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1040;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}
#quickViewModal.modal-quick-view {
    position: fixed; top: 50%; left: 50%; z-index: 1050;
    width: 90%; max-width: 900px; max-height: 90vh;
    transform: translate(-50%, -50%) scale(0.95);
    background-color: var(--theme-bg);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    overflow-y: auto; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s 0.3s;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
#quickViewModal.modal-quick-view.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition-delay: 0s; }

.modal-header {
    display: flex; justify-content: flex-end; padding: 10px 20px;
    position: sticky; top: 0;
    background: var(--theme-bg);
    border-bottom: 1px solid var(--theme-border);
    z-index: 10;
}
.modal-close-btn {
    background: none; border: none; font-size: 28px; line-height: 1;
    color: var(--theme-text-secondary);
    cursor: pointer; padding: 5px;
}
.modal-close-btn:hover { color: var(--theme-text-primary); }
.modal-body { padding: 0 30px 30px 30px; }

.quick-view-product { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.quick-view__image-gallery { flex: 1 1 40%; min-width: 280px; }
.quick-view__image-gallery .main-image { width: 100%; height: auto; border-radius: 8px; }
.quick-view__product-details { flex: 1 1 55%; display: flex; flex-direction: column; }
.quick-view__title {
    font-size: 28px; font-weight: 600; margin: 0 0 10px 0;
    color: var(--theme-text-primary);
}
.quick-view__rating { margin-bottom: 15px; color: var(--star-color); }
.quick-view__rating i.fa-regular { color: var(--theme-border); }
.quick-view__price { margin-bottom: 20px; display: flex; align-items: baseline; gap: 15px; }
.quick-view__price .old-price { font-size: 18px; color: var(--theme-text-secondary); text-decoration: line-through; }
.quick-view__price .new-price { font-size: 26px; font-weight: 700; color: var(--primary-color); }

.quick-view__description { 
    margin-bottom: 25px; 
    line-height: 1.6; 
    color: var(--theme-text-mbo);
}
.quick-view__description p {
    margin: 0;
    color: var(--theme-text-mbo); /* THEME FIX */
}

.quick-view__main-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.quantity-input {
    width: 70px; height: 44px; padding: 0 10px; text-align: center;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
    border-radius: 4px; font-size: 16px;
}
.quick-view__main-actions .btn { padding: 10px 25px; font-size: 16px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.quick-view__main-actions .btn-primary { background-color: var(--primary-color-dark); color: #fff; }
.quick-view__main-actions .btn-primary:hover { opacity: 0.9; }
.quick-view__main-actions .btn-secondary {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
}
.quick-view__main-actions .btn-secondary:hover { background-color: var(--theme-border); }

.quick-view__meta-actions { display: flex; gap: 20px; padding-top: 15px; border-top: 1px solid var(--theme-border); }
.action-link { background: none; border: none; padding: 0; cursor: pointer; color: var(--theme-text-secondary); font-size: 14px; text-decoration: none; transition: color 0.2s; }
.action-link:hover { color: var(--primary-color); }
.action-link i { margin-right: 6px; }
.action-link.favorite-btn.is-active { color: #dc3545; font-weight: 600; }
.action-link.compare-btn.is-active { color: #28a745; font-weight: 600; }

/* =================================================================
   [ AUTHENTICATION PAGES STYLES (THEME-AWARE) ]
   ================================================================= */

.auth-page {
    background-color: var(--theme-bg);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 85vh;
    padding: 60px 15px;
}

.auth-container {
    width: 100%;
    transition: max-width 0.3s ease-in-out;
}
.auth-container.login-container { max-width: 480px; }
.auth-container.register-container { max-width: 550px; }

.auth-form-wrapper {
    background-color: var(--theme-bg-secondary);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
}
html[data-theme="dark"] .auth-form-wrapper {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.auth-title {
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
    color: var(--theme-text-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-secondary);
    margin-bottom: 8px;
}
.form-group .required { color: #e53e3e; }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select {
    width: 100%;
    padding: 13px 16px;
    font-size: 16px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background-color: var(--theme-input-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: var(--theme-text-primary);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A0AEC0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* Dark mode arrow color */
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}
html:not([data-theme="dark"]) .form-group select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}


.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 178, 255, 0.2);
}

.form-options {
    display: flex; justify-content: flex-end; margin-bottom: 30px;
}
.forgot-password-link {
    font-size: 14px; color: var(--primary-color-dark);
    text-decoration: none; font-weight: 500; transition: color 0.3s;
}
.forgot-password-link:hover { color: var(--primary-color); text-decoration: underline; }

.form-group-checkbox {
    display: flex; align-items: center; margin-bottom: 30px;
}
.form-group-checkbox input[type="checkbox"] {
    width: 18px; height: 18px; margin-right: 12px;
    accent-color: var(--primary-color-dark);
}
.form-group-checkbox label {
    font-size: 14px; color: var(--theme-text-secondary);
    font-weight: 500; margin-bottom: 0;
}

.btn-auth {
    width: 100%; padding: 15px; font-size: 16px; font-weight: 700;
    color: #fff; border: none; border-radius: 8px; cursor: pointer;
    transition: all 0.3s ease; background: var(--primary-gradient);
    display: flex; justify-content: center; align-items: center; letter-spacing: 0.5px;
}
.btn-auth:hover {
    box-shadow: 0 8px 20px -6px rgba(78, 73, 230, 0.45);
    transform: translateY(-3px);
}
.btn-auth:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-auth .fa-arrow-right { margin-left: 10px; transition: transform 0.2s ease-out; }
.btn-auth:hover .fa-arrow-right { transform: translateX(5px); }

.auth-footer {
    text-align: center; margin-top: 30px;
    padding-top: 25px; border-top: 1px solid var(--theme-border);
}
.auth-footer p { font-size: 15px; color: var(--theme-text-secondary); margin: 0; }
.auth-footer a {
    color: var(--primary-color-dark); font-weight: 600;
    text-decoration: none; transition: color 0.2s ease;
}
.auth-footer a:hover { color: var(--primary-color); text-decoration: underline; }


/*
* @project     : XPayr E-commerce Theme
* @description : Module 18: Compare Page Styles (FINAL & FULLY RESPONSIVE)
*/

/* ===================================================================
   [-- 18.1. COMPARE PAGE STYLES --]
   =================================================================== */
.compare-grid-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 40px; margin-bottom: 40px; }
.compare-empty-state { text-align: center; padding: 80px 20px; border: 2px dashed var(--theme-border); border-radius: 10px; background-color: var(--theme-bg-secondary); margin-top: 40px; margin-bottom: 40px; }
.compare-empty-state .empty-icon { font-size: 48px; color: var(--primary-color); margin-bottom: 20px; }
.compare-empty-state h2 { font-size: 24px; color: var(--theme-text-primary); margin-bottom: 10px; }
.compare-empty-state p { color: var(--theme-text-secondary); font-size: 16px; }

.compare-grid { display: grid; border: 1px solid var(--theme-border); background-color: var(--theme-bg); border-radius: 8px; overflow: hidden; min-width: 800px; }
.compare-grid.product-count-1 { grid-template-columns: 200px 1fr; }
.compare-grid.product-count-2 { grid-template-columns: 200px repeat(2, 1fr); }
.compare-grid.product-count-3 { grid-template-columns: 200px repeat(3, 1fr); }
.compare-grid.product-count-4 { grid-template-columns: 200px repeat(4, 1fr); }

.compare-column { display: flex; flex-direction: column; }
.compare-column:not(:last-child) { border-right: 1px solid var(--theme-border); }
.labels-column { background-color: var(--theme-bg-secondary); color: var(--theme-text-primary); font-weight: 600; }
.labels-column .compare-feature-row { justify-content: flex-end; text-align: right; padding-right: 20px; }
.compare-feature-row { display: flex; flex-direction: column; justify-content: center; padding: 15px; min-height: 60px; border-bottom: 1px solid var(--theme-border); }
.compare-column .compare-feature-row:last-child { border-bottom: none; }

.compare-feature-row.product-info-header { height: 250px; padding: 20px; text-align: center; position: relative; justify-content: flex-start; }
.compare-feature-row.description-row { height: 120px; align-items: flex-start; }
.compare-feature-row.actions-row, .compare-feature-row.actions-row-header { background-color: var(--theme-bg-secondary); min-height: 120px; height: auto; }

.product-column .product-image-link { display: block; margin: 10px auto; max-height: 120px; }
.product-column .product-image-link img { max-height: 120px; object-fit: contain; }
.product-column .product-title { font-size: 16px; font-weight: 600; line-height: 1.4; margin-top: auto; }
.product-column .product-title a { color: var(--theme-text-primary); }
.product-column .product-title a:hover { color: var(--primary-color); }
.product-column .product-price { font-size: 18px; font-weight: 700; color: var(--primary-color); }
.product-column .product-description { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.stock-status.in-stock { color: #28a745; }
.stock-status.out-of-stock { color: #dc3545; }
.stock-status i { margin-right: 5px; }

.btn-remove-compare { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background-color: var(--theme-bg-secondary); color: var(--theme-text-secondary); font-size: 14px; border: 1px solid var(--theme-border); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-remove-compare:hover { background-color: #dc3545; color: #FFFFFF; border-color: #dc3545; }
.actions-row .add-to-cart-btn { margin-bottom: 8px; }
.actions-row .favorite-btn .fa-regular.fa-heart::before { content: "\f004"; }
.actions-row .favorite-btn.is-active { background-color: rgba(220, 53, 69, 0.1); color: #dc3545; border-color: rgba(220, 53, 69, 0.2); }

/* --- RESPONSIVE FIXES FOR COMPARE PAGE --- */
@media (max-width: 992px) {
    .compare-grid { min-width: 0; } /* Allow grid to shrink */
}

@media (max-width: 768px) {
    .compare-grid { display: block; border: none; background: none; }
    .compare-column.labels-column { display: none; }
    .compare-column.product-column {
        border: 1px solid var(--theme-border);
        border-radius: 8px;
        margin-bottom: 20px;
        background-color: var(--theme-bg);
    }
    .compare-column:not(:last-child) { border-right: 1px solid var(--theme-border); }
    .compare-column .compare-feature-row {
        flex-direction: row; justify-content: space-between; align-items: center;
        min-height: 0; padding: 10px 15px; text-align: right;
    }
    .compare-feature-row::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 15px;
        color: var(--theme-text-primary);
        text-align: left;
    }
    .compare-feature-row.product-info-header { height: auto; flex-direction: column; text-align: center; }
    .compare-feature-row.description-row { height: auto; flex-direction: column; align-items: flex-start; text-align: left; }
    .compare-feature-row.description-row::before { margin-bottom: 10px; width: 100%; }
    .compare-feature-row.actions-row { height: auto; flex-direction: column; gap: 10px; padding: 15px; }
    .compare-feature-row.actions-row .btn { flex: 1; width: 100%; margin: 0; }
    .compare-feature-row.actions-row-header { display: none; } /* Hide the 'Actions' label row on mobile */
}


/*
* @project     : XPayr E-commerce Theme
* @description : Module 19: 404 Error Page Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 19.1. 404 ERROR PAGE STYLES --]
   =================================================================== */
.error-page-container {
    text-align: center;
    padding: 80px 20px;
    background-color: var(--theme-bg);
}

.error-code {
    font-size: 120px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 20px;
    text-shadow: 4px 4px 0px var(--theme-border);
}

.error-title {
    font-size: 36px;
    color: var(--theme-text-primary);
    margin-bottom: 15px;
}

.error-message {
    font-size: 18px;
    color: var(--theme-text-secondary);
    max-width: 500px;
    margin: 0 auto 20px auto;
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.7.0 (Theme-Aware Account Styles)
* @description : Module 20: Favorites Page (Light/Dark Theme Enabled)
*/

/* ===================================================================
   [-- 20.1. FAVORITES PAGE STYLES --]
   =================================================================== */

/**
 * Grid Spacing for the product grid on the favorites page.
 * This rule is for layout only and does not need theme variables.
 */
#favorites-product-grid {
    margin-top: 40px;
    margin-bottom: 40px;
}

/**
 * Empty State for when the favorites list is empty.
 * Styles are updated to use theme-aware variables.
 */
.favorites-empty-state {
    text-align: center;
    padding: 80px 20px;
    border: 2px dashed var(--theme-border); /* THEME */
    border-radius: 10px;
    background-color: var(--theme-bg-secondary); /* THEME */
    margin-top: 40px;
    margin-bottom: 40px;
}

.favorites-empty-state .empty-icon {
    font-size: 48px;
    color: #dc3545; /* Red accent color is suitable for both themes */
    margin-bottom: 20px;
}

.favorites-empty-state h2 {
    font-size: 24px;
    color: var(--theme-text-primary); /* THEME */
    margin-bottom: 10px;
}

.favorites-empty-state p {
    color: var(--theme-text-secondary); /* THEME */
    font-size: 16px;
}

/*
* @project     : XPayr E-commerce Theme
* @description : Module 21: Shopping Cart Page Styles (THEME-AWARE)
*/

/* ===================================================================
   [-- 21.1. CART PAGE STYLES (UNIFIED SUMMARY UPDATE) --]
   =================================================================== */
#cart-page-content { background-color: var(--theme-bg); }
#cart-page-content .container { margin-top: 40px; margin-bottom: 40px; }
.cart-main-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; }
.cart-header-actions { display: flex; align-items: center; gap: 10px; }
.cart-actions-bar {
  margin-bottom: 2rem;
}

.cart-promo-banner {
    display: flex; align-items: center; gap: 10px; padding: 12px 20px; margin-bottom: 40px;
    background-color: rgba(0, 178, 255, 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(0, 178, 255, 0.2);
    border-radius: 8px; font-size: 15px; font-weight: 500;
}

.cart-grid-unified {
    display: grid; grid-template-columns: minmax(0, 2fr) 1fr;
    gap: 40px; align-items: flex-start;
}
.cart-items-container { display: flex; flex-direction: column; gap: 40px; }

.cart-currency-group {
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg-secondary);
    border-radius: 8px; overflow: hidden;
}
.cart-table { width: 100%; }
.cart-table-header {
    display: grid; grid-template-columns: 3fr 1fr 1.5fr 1fr; padding: 10px 15px;
    background-color: var(--theme-bg);
    border-bottom: 1px solid var(--theme-border);
    font-weight: 600; color: var(--theme-text-secondary);
    text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px;
}
.header-cell.total-col, .cart-cell.total-col { text-align: right; }
.header-cell.quantity-col, .cart-cell.quantity-col { text-align: center; }

.cart-table-row {
    display: grid; grid-template-columns: 3fr 1fr 1.5fr 1fr; align-items: center;
    padding: 15px; border-bottom: 1px solid var(--theme-border);
}
.cart-table-row:last-child { border-bottom: none; }

.product-info { display: flex; align-items: center; gap: 15px; }
.product-info img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid var(--theme-border); }
.product-name { color: var(--theme-text-primary); font-weight: 500; display: block; margin-bottom: 5px; }
.remove-item-btn { background: none; border: none; color: var(--theme-text-secondary); font-size: 13px; cursor: pointer; padding: 2px; transition: color 0.2s; }
.remove-item-btn:hover { color: #dc3545; }

.quantity-selector {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg);
    border-radius: 4px; overflow: hidden; width: fit-content; margin: 0 auto;
}
.quantity-selector .quantity-btn { background: var(--theme-bg-secondary); border: none; cursor: pointer; padding: 8px 12px; font-size: 16px; line-height: 1; color: var(--theme-text-primary); }
.quantity-selector .quantity-input { width: 40px; text-align: center; border: none; font-size: 16px; background: transparent; color: var(--theme-text-primary); -moz-appearance: textfield; }
.quantity-selector .quantity-input::-webkit-outer-spin-button, .quantity-selector .quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.currency-group-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px; background-color: var(--theme-bg);
    border-top: 1px solid var(--theme-border);
}
.summary-grand-total { font-size: 18px; font-weight: 600; color: var(--theme-text-primary); display: flex; gap: 10px; align-items: baseline; }
.summary-grand-total span:first-child { font-size: 14px; color: var(--theme-text-secondary); font-weight: 500;}

.order-summary-box {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px; padding: 30px; position: sticky; top: 20px;
}
.summary-title { font-size: 22px; color: var(--theme-text-primary); margin: 0 0 20px 0; }
.summary-section { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--theme-border); }
.summary-section:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.summary-section label { font-size: 14px; font-weight: 600; color: var(--theme-text-secondary); display: block; margin-bottom: 8px; }

.coupon-form { display: flex; gap: 10px; margin-bottom: 5px; }
.coupon-form input {
    flex-grow: 1; border: 1px solid var(--theme-border); border-radius: 4px;
    padding: 10px; font-size: 14px;
    background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
}
.coupon-form button { flex-shrink: 0; }

.form-control {
    width: 100%; padding: 10px; border: 1px solid var(--theme-border);
    border-radius: 4px; background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
}
textarea.form-control { resize: vertical; }

.address-prompt { font-size: 14px; color: var(--theme-text-secondary); }
.address-prompt a { margin-left: 5px; text-decoration: underline; color: var(--primary-color); }

.checkout-actions { margin-top: 20px; }
.terms-agreement { display: flex; align-items: center; gap: 10px; }
.terms-agreement label { font-size: 14px; color: var(--theme-text-secondary); line-height: 1.4; margin: 0; }
.terms-agreement a { color: var(--theme-text-primary); font-weight: 500; text-decoration: underline; }

.pay-with-web3-btn:disabled {
    background: var(--theme-text-secondary);
    cursor: not-allowed; border: none; opacity: 0.7;
}

.cart-empty-state {
    text-align: center; padding: 80px 20px; border: 2px dashed var(--theme-border);
    border-radius: 10px; background-color: var(--theme-bg-secondary);
}
.cart-empty-state .empty-icon { font-size: 48px; color: var(--primary-color); margin-bottom: 20px; }
.cart-empty-state h2 { font-size: 24px; color: var(--theme-text-primary); margin-bottom: 10px; }
.cart-empty-state p { color: var(--theme-text-secondary); font-size: 16px; }

.payment-action-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.payment-status-feedback {
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    min-height: 20px; /* To prevent layout shift */
}
.payment-status-feedback.error { color: #dc3545; }
.payment-status-feedback.success { color: #28a745; }


@media (max-width: 992px) {
    .cart-grid-unified { grid-template-columns: 1fr; }
    .order-summary-column { grid-row: 1; margin-bottom: 40px; }
    .order-summary-box { position: static; }
}
@media (max-width: 768px) {
    .cart-table-header { display: none; }
    .cart-table-row, .cart-table-body { display: block; }
    .cart-table-row { padding: 20px 0; }
    .cart-cell { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--theme-border); }
    .cart-cell:last-child { border-bottom: none; }
    .cart-cell.product-col { border-bottom: none; padding-bottom: 15px; }
    .cart-cell::before { content: attr(data-label); font-weight: 600; color: var(--theme-text-primary); }
    .cart-cell.product-col::before { display: none; }
    .cart-cell.quantity-col .quantity-selector { margin: 0; }
}

/* =================================================================
   [ Account Page - Order Detail Styles ]
   ================================================================= */

/* --- Main Header --- */
.order-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.order-number-highlight {
    color: var(--bs-secondary-color);
    font-weight: 500;
}
.order-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* --- Meta Info (Date, Tx Hash) --- */
.order-meta-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.transaction-hash-link-inline {
    font-family: var(--bs-font-monospace);
    color: var(--primary-color);
    text-decoration: none;
}
.transaction-hash-link-inline:hover {
    text-decoration: underline;
}
.transaction-hash-link-inline .fa-xs {
    font-size: 0.7em;
    vertical-align: super;
    margin-left: 2px;
}

/* --- Item List --- */
.order-items-list {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}
.order-item-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.order-item-card:last-child {
    border-bottom: none;
}
.item-image-link {
    flex-shrink: 0;
}
.item-image-link img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--bs-border-radius-sm);
}
.item-details {
    flex-grow: 1;
}
.item-name {
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
    display: block;
}
.item-name:hover {
    color: var(--primary-color);
}
.item-sku {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}
.item-pricing, .item-total {
    flex-shrink: 0;
    min-width: 120px;
    text-align: right;
}
.item-total {
    font-weight: 600;
}

/* --- Summary Grid --- */
.order-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .order-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.address-box {
    line-height: 1.6;
}
.address-box h5 {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}
.address-box address {
    margin: 0;
    font-style: normal;
}
.financial-summary {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1.5rem;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.summary-row.grand-total {
    font-size: 1.2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}
.summary-divider {
    margin: 1rem 0;
}

/* --- Footer --- */
.order-detail-footer {
    margin-top: 2rem;
}

/* =================================================================
   [ Account Page - Order Detail Styles (Site Logo Update) ]
   ================================================================= */

/* --- [NEW] Branding and Meta Info Section --- */
.order-branding-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.site-logo-container {
    flex-basis: 150px; /* Give the logo a fixed base width */
    flex-grow: 1;
}
.invoice-logo {
    max-width: 180px;
    height: auto;
    max-height: 60px;
}
/* Dark theme adjustment for the logo */
html[data-theme="dark"] .invoice-logo {
    filter: brightness(0) invert(1);
}
.order-meta-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    text-align: right;
    flex-grow: 1;
}
@media (max-width: 576px) {
    .order-branding-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    .order-meta-info {
        text-align: left;
    }
}

/* --- General Divider --- */
.order-divider {
    margin-top: 0;
    margin-bottom: 2rem;
}

/* --- Print-Specific Styles --- */
@media print {
    body {
        background-color: #fff;
        color: #000;
    }
    .account-sidebar,
    .order-detail-header .print-button,
    .order-detail-footer .back-button,
    header, /* Assuming your site header has a <header> tag */
    footer /* Assuming your site footer has a <footer> tag */
    {
        display: none !important;
    }
    .account-content, .account-content-wrapper, .order-detail-header {
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
    }
    .order-summary-grid {
        grid-template-columns: 1fr 1fr; /* Ensure two columns on print */
    }
    a {
        text-decoration: none;
        color: inherit;
    }
    .transaction-hash-link-inline .fa-external-link-alt {
        display: none;
    }
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.7.0 (Theme-Aware Account Styles)
* @description : Module 22: Account Page Styles (Light/Dark Theme Enabled)
*/

/* ===================================================================
   [-- 22.1. ACCOUNT PAGE GENERIC STYLES --]
   =================================================================== */
.account-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: flex-start;
}
.account-sidebar {
    background-color: var(--theme-bg); /* UPDATED */
    border: 1px solid var(--theme-border); /* UPDATED */
    border-radius: 12px;
    padding: 24px;
}
.account-sidebar__profile {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 24px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--theme-border); /* UPDATED */
}
.profile-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.profile-info .profile-name {
    font-weight: 600;
    color: var(--theme-text-primary); /* UPDATED */
    font-size: 16px;
}
.profile-info .profile-email {
    font-size: 14px;
    color: var(--theme-text-secondary); /* UPDATED */
}
.account-nav ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-radius: 8px;
    font-weight: 500;
    color: var(--theme-text-secondary); /* UPDATED */
    transition: all 0.2s ease;
}
.account-nav ul li a i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--theme-text-secondary); /* UPDATED */
    transition: color 0.2s ease;
}
.account-nav ul li a:hover {
    background-color: var(--theme-bg-secondary); /* UPDATED */
    color: var(--primary-color-dark);
}
.account-nav ul li a:hover i {
    color: var(--primary-color-dark);
}
.account-nav ul li a.active {
    background: var(--primary-gradient);
    color: #FFFFFF; /* White text on gradient is always fine */
    box-shadow: 0 4px 12px -1px rgba(78, 73, 230, 0.3);
}
.account-nav ul li a.active i {
    color: #FFFFFF; /* White icon on gradient is always fine */
}
.account-content {
    background-color: var(--theme-bg); /* UPDATED */
    border: 1px solid var(--theme-border); /* UPDATED */
    border-radius: 12px;
    padding: 30px;
}
.account-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--theme-border); /* UPDATED */
}
.account-content-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0 0 25px 0;
    padding-bottom: 20px; /* Adds space between the text and the border */
    border-bottom: 1px solid var(--theme-border); /* Adds the separator line */
}
.account-content-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: var(--theme-text-primary); /* UPDATED */
    margin: 0 0 20px 0;
}
.form-separator {
    border: 0;
    border-top: 1px solid var(--theme-border); /* UPDATED */
    margin: 40px 0;
}
.account-form .form-row-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
/* Responsive adjustments for this block */
@media (max-width: 992px) {
    .account-layout {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   [-- 22.2. PROFILE FORM (THEME-AWARE) --]
   =================================================================== */

/* --- Main grid for the Edit Profile section --- */
.profile-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: flex-start;
}

/* --- Containers for the grid columns --- */
.profile-fields-col, 
.profile-options-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- General Form Element Styles --- */
.account-form .form-group { margin-bottom: 0; }
.account-form .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text-secondary); /* THEME */
    margin-bottom: 8px;
}
.account-form .form-group input[type="text"],
.account-form .form-group input[type="email"],
.account-form .form-group input[type="tel"],
.account-form .form-group input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--theme-border); /* THEME */
    border-radius: 8px;
    font-size: 15px;
    background-color: var(--theme-bg); /* THEME */
    color: var(--theme-text-primary); /* THEME */
    transition: border-color 0.2s, box-shadow 0.2s;
}
.account-form .form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 178, 255, 0.2);
}

/* --- Submit Buttons --- */
.profile-submit-btn,
.password-submit-btn {
    width: max-content;
    padding: 14px 40px;
    font-size: 16px;
}
.password-submit-btn {
    margin-top: 10px;
}

/* --- Avatar Upload Section --- */
.file-drop-area {
    position: relative;
    border: 2px dashed var(--theme-border); /* THEME */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background-color: var(--theme-bg-secondary); /* THEME */
    transition: border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}
.file-drop-area:hover { border-color: var(--primary-color); }
.file-drop-area .file-input { position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer; opacity: 0; }
.file-drop-area .file-drop-text { color: var(--theme-text-secondary); } /* THEME */
.file-drop-area .file-drop-text i { font-size: 20px; margin-bottom: 8px; }
.file-drop-area .file-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-top: 15px;
    border: 2px solid var(--theme-bg); /* THEME */
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.file-drop-area .file-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* --- Account Type Section --- */
.radio-group { display: flex; gap: 20px; align-items: center; }
.radio-group label {
    font-weight: 500;
    font-size: 14px;
    color: var(--theme-text-primary); /* THEME */
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .profile-main-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   [-- 22.3. ACCOUNT PAGE - ADDRESSES (THEME-AWARE) --]
   =================================================================== */

.address-page-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: flex-start;
}
.account-section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--theme-text-primary); /* THEME */
    margin: 0 0 25px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--theme-border); /* THEME */
}
#no-addresses-message {
    font-size: 16px;
    color: var(--theme-text-secondary); /* THEME */
    line-height: 1.6;
}
.minimalist-form .form-group {
    margin-bottom: 20px;
}
.minimalist-form .form-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--theme-text-secondary); /* THEME */
    margin-bottom: 8px;
}
.minimalist-form .form-group input[type="text"],
.minimalist-form .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--theme-border); /* THEME */
    border-radius: 8px;
    font-size: 15px;
    background-color: var(--theme-bg); /* THEME */
    color: var(--theme-text-primary); /* THEME */
    transition: border-color 0.2s, box-shadow 0.2s;
}
.minimalist-form .form-group input[type="text"]::placeholder,
.minimalist-form .form-group textarea::placeholder {
    color: var(--theme-text-secondary); /* THEME */
    opacity: 0.7;
}
.minimalist-form .form-group input[type="text"]:focus,
.minimalist-form .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color); /* Use brand color for focus */
    box-shadow: 0 0 0 3px rgba(0, 178, 255, 0.2);
}
.btn.btn-dark-solid {
    background-color: var(--theme-text-primary); /* THEME */
    color: var(--theme-bg); /* THEME */
    border: 1px solid var(--theme-text-primary); /* THEME */
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s;
}
.btn.btn-dark-solid:hover {
    opacity: 0.8;
}
.address-card {
    border: 1px solid var(--theme-border); /* THEME */
    background-color: var(--theme-bg); /* THEME */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.address-card-body strong {
    font-size: 16px;
    color: var(--theme-text-primary); /* THEME */
}
.address-card-body p {
    font-size: 15px;
    color: var(--theme-text-secondary); /* THEME */
    margin: 5px 0 0 0;
    line-height: 1.5;
}
.delete-address-btn {
    background: none;
    border: none;
    color: #e53e3e;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 5px;
}
.delete-address-btn:hover {
    text-decoration: underline;
}
@media (max-width: 992px) {
    .address-page-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.7.0 (Theme-Aware Account Styles)
* @description : Module 23: Support Tickets (Light/Dark Theme Enabled)
*/

/* ===================================================================
   [-- 23.1. SUPPORT TICKET LIST & FORMS --]
   =================================================================== */
.support-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
#new-ticket-form-container {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--theme-border); /* THEME */
}
.support-tickets-table-container {
    margin-top: 25px;
    overflow-x: auto;
}
.support-tickets-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.support-tickets-table th, .support-tickets-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--theme-border); /* THEME */
}
.support-tickets-table th {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--theme-text-secondary); /* THEME */
}
.support-tickets-table td a {
    color: var(--theme-text-primary); /* THEME */
    font-weight: 500;
}
.support-tickets-table td a:hover {
    color: var(--primary-color);
}

/* Status Badge Styles (Dark mode needs specific overrides) */
.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.status-badge.status-open { background-color: rgba(0, 178, 255, 0.1); color: #33c3ff; }
.status-badge.status-answered { background-color: rgba(40, 167, 69, 0.1); color: #28a745; }
.status-badge.status-closed { background-color: var(--theme-bg-secondary); color: var(--theme-text-secondary); border: 1px solid var(--theme-border); }

#create-ticket-form button[type="submit"],
#ticket-reply-form button[type="submit"] {
    margin-top: 20px;
}

/* ===================================================================
   [-- 23.2. TICKET VIEW & REPLIES --]
   =================================================================== */
.ticket-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--theme-border); /* THEME */
}
.ticket-id-display {
    font-size: 14px;
    color: var(--theme-text-secondary); /* THEME */
    font-weight: 500;
}
.ticket-replies-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 600px;
    overflow-y: auto;
    padding: 10px;
    background-color: var(--theme-bg-secondary); /* THEME */
    border-radius: 8px;
}
.ticket-reply {
    max-width: 80%;
    padding: 15px;
    border-radius: 12px;
}
.reply-author {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.reply-author strong { font-size: 14px; }
.reply-author .reply-date { font-size: 12px; color: #888; }
.reply-message {
    font-size: 15px;
    line-height: 1.6;
    word-wrap: break-word;
}
.reply-user {
    align-self: flex-end;
    background-color: var(--primary-color-dark);
    color: #FFFFFF; /* THEME */
    border-bottom-right-radius: 0;
}
.reply-user .reply-author .reply-date { color: rgba(255,255,255,0.7); }

.reply-admin {
    align-self: flex-start;
    background-color: var(--theme-bg); /* THEME */
    color: var(--theme-text-primary); /* THEME */
    border: 1px solid var(--theme-border); /* THEME */
    border-bottom-left-radius: 0;
}
.ticket-closed-notice {
    margin-top: 30px;
    padding: 15px;
    background-color: var(--theme-bg-secondary); /* THEME */
    border: 1px solid var(--theme-border); /* THEME */
    border-radius: 8px;
    text-align: center;
    color: var(--theme-text-secondary); /* THEME */
}
.reply-message p:last-child {
    margin-bottom: 0;
}

/* ===================================================================
   [-- 23.3. SUMMERNOTE EDITOR CUSTOM STYLES (THEME-AWARE) --]
   =================================================================== */
.note-editor.note-frame {
    border: 1px solid var(--theme-border); /* THEME */
    border-radius: 8px;
    box-shadow: none;
}
.note-editor.note-frame:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 178, 255, 0.2);
}
.note-toolbar {
    background-color: var(--theme-bg-secondary); /* THEME */
    border-bottom: 1px solid var(--theme-border); /* THEME */
    border-radius: 8px 8px 0 0;
}
.note-editable {
    background-color: var(--theme-bg); /* THEME */
    min-height: 250px;
}
.note-statusbar {
    background-color: var(--theme-bg-secondary); /* THEME */
    border-top: 1px solid var(--theme-border); /* THEME */
    border-radius: 0 0 8px 8px;
}

/* Summernote Dark Theme Overrides */
html[data-theme="dark"] .note-editor .note-toolbar,
html[data-theme="dark"] .note-editor .note-statusbar {
    background-color: #2D3748;
}
html[data-theme="dark"] .note-editor .note-editable {
    color: var(--theme-text-primary);
}
html[data-theme="dark"] .note-editor .btn-light {
    color: var(--theme-text-primary);
    background-color: var(--theme-bg-secondary);
}


/*
* @project     : XPayr E-commerce Theme
* @version     : 1.7.0 (Theme-Aware Account Styles)
* @description : Module 24: Faucet Module (Light/Dark Theme Enabled)
*/

/* ===================================================================
   [-- 24.1. DYNAMIC FAUCET MODULE STYLES --]
   =================================================================== */
.faucet-subtitle {
    margin-top: -15px;
    margin-bottom: 25px;
    color: var(--theme-text-secondary); /* THEME */
}
.faucet-dynamic-container .form-group {
    margin-bottom: 20px;
}
.faucet-dynamic-container .form-group label {
    font-weight: 500;
}
.faucet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}
.faucet-actions .btn {
    flex-grow: 1;
}
.faucet-actions .btn-secondary {
    background-color: var(--theme-bg-secondary); /* THEME */
    border: 1px solid var(--theme-border); /* THEME */
    color: var(--theme-text-primary); /* THEME */
    font-weight: 600;
}
html[data-theme="dark"] .faucet-actions .btn-secondary:hover {
    background-color: var(--theme-border); /* Darken hover for dark mode */
}
html:not([data-theme="dark"]) .faucet-actions .btn-secondary:hover {
    background-color: #E2E8F0; /* Original light mode hover */
}
#dynamic-faucet-form-container {
    border-top: 1px solid var(--theme-border); /* THEME */
    margin-top: 20px;
    padding-top: 20px;
    min-height: 250px; /* To prevent page jumping */
}
.faucet-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}
.faucet-loader::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-border); /* THEME */
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Status message styles */
.faucet-status-message {
    padding: 10px 15px; border-radius: 6px; margin-bottom: 20px; font-weight: 500;
}
.faucet-status-message.error { background-color: #FFF5F5; color: #C53030; border: 1px solid #FC8181; }
.faucet-status-message.notice { background-color: #FFFAF0; color: #975A16; border: 1px solid #F6E05E; }

/* Feedback line for JS updates */
.faucet-status-feedback {
    margin-top: 20px; padding: 10px 15px; border-radius: 6px; font-weight: 500;
    line-height: 1.5; word-break: break-all; display: none;
}
.faucet-status-feedback:not(:empty) { display: block; }
.faucet-status-feedback.info { background-color: #EBF4FF; color: #2C5282; }
.faucet-status-feedback.success { background-color: #F0FFF4; color: #2F855A; }
.faucet-status-feedback.error { background-color: #FFF5F5; color: #C53030; }
.faucet-status-feedback.notice { background-color: #FFFAF0; color: #975A16; }

/* Responsive adjustments */
@media (min-width: 576px) {
    .faucet-actions { flex-wrap: nowrap; }
}


/* ===================================================================
   [-- 25. THEME SWITCHER BUTTON --]
   =================================================================== */
.theme-switcher-btn {
    background-color: transparent; border: none; cursor: pointer; font-size: 15px;
    color: var(--theme-text-secondary); padding: 5px; display: flex;
    align-items: center; justify-content: center;
}
.theme-switcher-btn:hover { color: var(--primary-color-dark); }
.theme-switcher-btn .icon-moon, .theme-switcher-btn .icon-sun { display: none; }
html:not([data-theme="dark"]) .theme-switcher-btn .icon-moon { display: inline-block; }
html[data-theme="dark"] .theme-switcher-btn .icon-sun { display: inline-block; }


/* =================================================================
   [ FORMS & WALLET SELECTOR MODAL STYLES - THEME AWARE & CORRECTED ]
   This style block is shared between frontend and backend.
   This is the corrected version with proper text colors for dark mode.
   ================================================================= */

/* --- Wallet Selector Modal (Redesigned & Theme-Aware) --- */
.wallet-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wallet-modal-overlay.visible {
    display: flex;
    opacity: 1;
}

.wallet-modal-content {
    background: var(--bs-body-bg, #ffffff);
    color: var(--bs-body-color, #212529);
    border-radius: 16px;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.wallet-modal-overlay.visible .wallet-modal-content {
    transform: scale(1);
}

.wallet-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.wallet-modal-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-heading-color, inherit); /* Use heading color variable */
}

.wallet-modal-close-btn {
    border: none;
    background: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.wallet-modal-close-btn:hover {
    opacity: 1;
}

.wallet-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wallet-button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background-color: var(--bs-secondary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.wallet-button:hover {
    border-color: var(--primary-color, #007bff);
    background-color: var(--bs-secondary-bg-subtle, #e9ecef);
    transform: translateY(-2px);
}

.wallet-button img {
    width: 32px;
    height: 32px;
    margin-right: 16px;
    border-radius: 6px;
}

.wallet-button .wallet-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}

.wallet-modal-footer {
    padding: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.wallet-modal-logo {
    width: 100px;
    height: 24px;
    background-image: url('/admin/assets/css/xpayr.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

/* ===============================================================
   [FIX] Dark Theme Overrides for Modal - NOW WITH TEXT COLORS
   =============================================================== */
html[data-theme="dark"] .wallet-modal-content {
    background-color: #1A202C; /* Dark background */
    border: 1px solid #2D3748;
    color: #E2E8F0; /* Light base text color for the modal */
}

html[data-theme="dark"] .wallet-modal-header,
html[data-theme="dark"] .wallet-modal-footer {
    border-color: #2D3748;
}

/* [FIX] Explicitly set heading and close button colors for dark theme */
html[data-theme="dark"] .wallet-modal-header h4 {
    color: #FFFFFF;
}
html[data-theme="dark"] .wallet-modal-close-btn {
    color: #A0AEC0;
}

html[data-theme="dark"] .wallet-button {
    background-color: #2D3748;
    border-color: #4A5568;
}

/* [FIX] Explicitly set wallet name text color for dark theme */
html[data-theme="dark"] .wallet-button .wallet-name {
    color: #E2E8F0;
}

html[data-theme="dark"] .wallet-button:hover {
    border-color: var(--primary-color);
    background-color: #4A5568;
}

html[data-theme="dark"] .wallet-modal-logo {
    filter: brightness(0) invert(1);
}

/* =================================================================
     [ COOKIE STYLES & SCRIPT - SELF-CONTAINED ]
     ================================================================= */

.cookie-alert-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    background-color: #212529; color: #f8f9fa;
    padding: 15px 20px; z-index: 1050; display: none;
    font-size: 14px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(100%); transition: transform 0.4s ease-in-out;
}
.cookie-alert-banner.is-visible { transform: translateY(0); }
.cookie-alert-content {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1200px; margin: 0 auto; gap: 20px; flex-wrap: wrap;
}
.cookie-alert-text { margin: 0; flex-grow: 1; min-width: 200px; }
.cookie-alert-text a { color: #0d6efd; text-decoration: underline; }
.cookie-alert-button {
    background-color: #0d6efd; color: white; border: none;
    padding: 8px 18px; border-radius: 5px; cursor: pointer;
    font-weight: bold; white-space: nowrap; transition: background-color 0.2s ease;
    flex-shrink: 0;
}
.cookie-alert-button:hover { background-color: #0b5ed7; }
    @media (max-width: 576px) {
.cookie-alert-content { flex-direction: column; align-items: flex-start; text-align: center; }
.cookie-alert-button { width: 100%; margin-top: 10px; }
}

/* =================================================================
     [ MAINTENANCE STYLES & SCRIPT - SELF-CONTAINED ]
     ================================================================= */

.maintenance-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 15px;
    text-align: center;
}
.maintenance-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.maintenance-card h2 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: #1a202c;
}
.maintenance-card p {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.6;
}
[data-theme="dark"] .maintenance-card { background-color: #2d3748; }
[data-theme="dark"] .maintenance-card h2 { color: #edf2f7; }
[data-theme="dark"] .maintenance-card p { color: #a0aec0; }