/*
* @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;
    --primary-gradient-dark: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
}

/* ===================================================================
   [-- 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; 
}


/* ===================================================================
   [-- UTILITY CLASSES: SPACING --]
   =================================================================== */

/*
 * This system provides a consistent scale for applying margin and padding.
 * Naming convention: {property}{sides}-{size}
 * e.g., .mt-3 = margin-top: 1rem;
 * e.g., .px-4 = padding-left: 1.5rem; padding-right: 1.5rem;
 *
 * The `!important` flag is used intentionally. Utility classes are meant
 * to be overrides that apply a specific, forceful style.
 */

/* --- Spacing Scale Variables --- */
:root {
    --spacer-0: 0;
    --spacer-1: 0.25rem; /* 4px */
    --spacer-2: 0.5rem;  /* 8px */
    --spacer-3: 1rem;    /* 16px */
    --spacer-4: 1.5rem;  /* 24px */
    --spacer-5: 3rem;    /* 48px */
}

/* --- Margin Classes --- */
.m-0  { margin: var(--spacer-0) !important; }
.mt-0 { margin-top: var(--spacer-0) !important; }
.mb-0 { margin-bottom: var(--spacer-0) !important; }
.ml-0 { margin-left: var(--spacer-0) !important; }
.mr-0 { margin-right: var(--spacer-0) !important; }
.mx-0 { margin-left: var(--spacer-0) !important; margin-right: var(--spacer-0) !important; }
.my-0 { margin-top: var(--spacer-0) !important; margin-bottom: var(--spacer-0) !important; }

.m-1  { margin: var(--spacer-1) !important; }
.mt-1 { margin-top: var(--spacer-1) !important; }
.mb-1 { margin-bottom: var(--spacer-1) !important; }
.ml-1 { margin-left: var(--spacer-1) !important; }
.mr-1 { margin-right: var(--spacer-1) !important; }
.mx-1 { margin-left: var(--spacer-1) !important; margin-right: var(--spacer-1) !important; }
.my-1 { margin-top: var(--spacer-1) !important; margin-bottom: var(--spacer-1) !important; }

.m-2  { margin: var(--spacer-2) !important; }
.mt-2 { margin-top: var(--spacer-2) !important; }
.mb-2 { margin-bottom: var(--spacer-2) !important; }
.ml-2 { margin-left: var(--spacer-2) !important; }
.mr-2 { margin-right: var(--spacer-2) !important; }
.mx-2 { margin-left: var(--spacer-2) !important; margin-right: var(--spacer-2) !important; }
.my-2 { margin-top: var(--spacer-2) !important; margin-bottom: var(--spacer-2) !important; }

.m-3  { margin: var(--spacer-3) !important; }
.mt-3 { margin-top: var(--spacer-3) !important; }
.mb-3 { margin-bottom: var(--spacer-3) !important; }
.ml-3 { margin-left: var(--spacer-3) !important; }
.mr-3 { margin-right: var(--spacer-3) !important; }
.mx-3 { margin-left: var(--spacer-3) !important; margin-right: var(--spacer-3) !important; }
.my-3 { margin-top: var(--spacer-3) !important; margin-bottom: var(--spacer-3) !important; }

.m-4  { margin: var(--spacer-4) !important; }
.mt-4 { margin-top: var(--spacer-4) !important; }
.mb-4 { margin-bottom: var(--spacer-4) !important; }
.ml-4 { margin-left: var(--spacer-4) !important; }
.mr-4 { margin-right: var(--spacer-4) !important; }
.mx-4 { margin-left: var(--spacer-4) !important; margin-right: var(--spacer-4) !important; }
.my-4 { margin-top: var(--spacer-4) !important; margin-bottom: var(--spacer-4) !important; }

.m-5  { margin: var(--spacer-5) !important; }
.mt-5 { margin-top: var(--spacer-5) !important; }
.mb-5 { margin-bottom: var(--spacer-5) !important; }
.ml-5 { margin-left: var(--spacer-5) !important; }
.mr-5 { margin-right: var(--spacer-5) !important; }
.mx-5 { margin-left: var(--spacer-5) !important; margin-right: var(--spacer-5) !important; }
.my-5 { margin-top: var(--spacer-5) !important; margin-bottom: var(--spacer-5) !important; }

/* Margin Auto (useful for centering) */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* --- Padding Classes --- */
.p-0  { padding: var(--spacer-0) !important; }
.pt-0 { padding-top: var(--spacer-0) !important; }
.pb-0 { padding-bottom: var(--spacer-0) !important; }
.pl-0 { padding-left: var(--spacer-0) !important; }
.pr-0 { padding-right: var(--spacer-0) !important; }
.px-0 { padding-left: var(--spacer-0) !important; padding-right: var(--spacer-0) !important; }
.py-0 { padding-top: var(--spacer-0) !important; padding-bottom: var(--spacer-0) !important; }

.p-1  { padding: var(--spacer-1) !important; }
.pt-1 { padding-top: var(--spacer-1) !important; }
.pb-1 { padding-bottom: var(--spacer-1) !important; }
.pl-1 { padding-left: var(--spacer-1) !important; }
.pr-1 { padding-right: var(--spacer-1) !important; }
.px-1 { padding-left: var(--spacer-1) !important; padding-right: var(--spacer-1) !important; }
.py-1 { padding-top: var(--spacer-1) !important; padding-bottom: var(--spacer-1) !important; }

.p-2  { padding: var(--spacer-2) !important; }
.pt-2 { padding-top: var(--spacer-2) !important; }
.pb-2 { padding-bottom: var(--spacer-2) !important; }
.pl-2 { padding-left: var(--spacer-2) !important; }
.pr-2 { padding-right: var(--spacer-2) !important; }
.px-2 { padding-left: var(--spacer-2) !important; padding-right: var(--spacer-2) !important; }
.py-2 { padding-top: var(--spacer-2) !important; padding-bottom: var(--spacer-2) !important; }

.p-3  { padding: var(--spacer-3) !important; }
.pt-3 { padding-top: var(--spacer-3) !important; }
.pb-3 { padding-bottom: var(--spacer-3) !important; }
.pl-3 { padding-left: var(--spacer-3) !important; }
.pr-3 { padding-right: var(--spacer-3) !important; }
.px-3 { padding-left: var(--spacer-3) !important; padding-right: var(--spacer-3) !important; }
.py-3 { padding-top: var(--spacer-3) !important; padding-bottom: var(--spacer-3) !important; }

.p-4  { padding: var(--spacer-4) !important; }
.pt-4 { padding-top: var(--spacer-4) !important; }
.pb-4 { padding-bottom: var(--spacer-4) !important; }
.pl-4 { padding-left: var(--spacer-4) !important; }
.pr-4 { padding-right: var(--spacer-4) !important; }
.px-4 { padding-left: var(--spacer-4) !important; padding-right: var(--spacer-4) !important; }
.py-4 { padding-top: var(--spacer-4) !important; padding-bottom: var(--spacer-4) !important; }

.p-5  { padding: var(--spacer-5) !important; }
.pt-5 { padding-top: var(--spacer-5) !important; }
.pb-5 { padding-bottom: var(--spacer-5) !important; }
.pl-5 { padding-left: var(--spacer-5) !important; }
.pr-5 { padding-right: var(--spacer-5) !important; }
.px-5 { padding-left: var(--spacer-5) !important; padding-right: var(--spacer-5) !important; }
.py-5 { padding-top: var(--spacer-5) !important; padding-bottom: var(--spacer-5) !important; }

/* ===================================================================
   [-- 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 with Live Search (THEME-AWARE)
* @version     : 1.1.0
*/

/* ===================================================================
   [-- 2.1. HEADER TOP BAR --]
   =================================================================== */
.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;
}

/* ===================================================================
   [-- 2.2. HEADER MAIN SECTION --]
   =================================================================== */
.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 */
}

/* ===================================================================
   [-- 2.3. SEARCH BAR & LIVE RESULTS (NEW & UPDATED) --]
   =================================================================== */
.header-main__search { 
    position: relative; /* Crucial for positioning the results dropdown */
    flex-grow: 1; 
    max-width: 600px; 
}

.search-form-container {
    display: flex; 
    border: 1px solid var(--theme-border); 
    border-radius: 5px; 
    overflow: hidden; 
    background-color: var(--theme-input-bg);
    width: 100%;
}

.search-category { 
    border: none; 
    padding: 0 15px; 
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    cursor: pointer;
    outline: none;
    border-right: 1px solid var(--theme-border);
}

.header-main__search input.search-input { 
    border: none; 
    padding: 12px 15px; 
    flex-grow: 1; 
    outline: none; 
    background-color: transparent;
    color: var(--theme-text-primary);
    width: 100%; /* Ensure it takes full available space */
}
.header-main__search input.search-input::placeholder {
    color: var(--theme-text-secondary);
}

/* This targets the submit button inside the form */
.search-form-container .btn-xpayr {
    background: var(--primary-gradient);
    color: #FFFFFF; 
    border: none; 
    padding: 0 20px; 
    cursor: pointer;
    border-radius: 0; /* Remove radius to fit cleanly */
}

.search-results-container {
    position: absolute;
    top: calc(100% + 5px); /* Position it right below the search bar with a small gap */
    left: 0;
    right: 0;
    background-color: var(--theme-bg); /* Use main theme background */
    border: 1px solid var(--theme-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 1001; /* Must be higher than other header elements */
    max-height: 450px;
    overflow-y: auto;
    border-radius: 5px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--theme-border);
    text-decoration: none;
    color: var(--theme-text-primary);
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background-color: var(--theme-bg-secondary);
    color: var(--primary-color);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
    border: 1px solid var(--theme-border);
}

.search-result-info {
    display: flex;
    flex-direction: column;
}

.search-result-name {
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}

.search-result-price {
    font-size: 0.9em;
    color: var(--theme-text-secondary);
}

.search-results-footer {
    display: block;
    padding: 12px 15px;
    background-color: var(--theme-bg-secondary);
    border-top: 1px solid var(--theme-border);
    text-align: center;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}
.search-results-footer:hover {
    background-color: var(--theme-border);
}

.search-no-results,
.search-loading-spinner {
    padding: 25px 15px;
    text-align: center;
    color: var(--theme-text-secondary);
}


/* ===================================================================
   [-- 2.4. HEADER ACTIONS --]
   =================================================================== */
.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);
}

/* ===================================================================
   [-- 2.5. HEADER NAVIGATION --]
   =================================================================== */
.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 {
    position: relative; /* Needed for submenu positioning */
}
.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); 
}

/* Dropdown / Submenu Styles */
.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: -11px; /* Adjust for nested alignment */
    left: 100%; 
}

/* ===================================================================
   [-- 2.6. LANGUAGE SWITCHER --]
   =================================================================== */
.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;
}
.language-switcher .language-list a:hover { 
    background-color: var(--theme-border); 
}

/*
* @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(3, 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);
}

/* --- Tablet Responsive Adjustments (2 Columns) --- */
@media (max-width: 992px) {
    .account-content-wrapper .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Mobile Responsive Adjustments (1 Column) --- */
@media (max-width: 576px) {
    .account-content-wrapper .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.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.
 */

/** 
 * Default style for the network name badge (assumed to be mainnet).
 * Applies a clean, light blue theme.
 */
.product-card__network {
    background-color: #e7f3ff; /* A light, clean blue */
    color: #0052cc;            /* A strong, darker blue for text */
    border: 1px solid #d0eaff;
}

/* 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); }

/*
 * Styles for the active state of the compare button.
 * Uses the primary theme color to differentiate it from the favorite button.
 */
.btn-icon.compare-btn.is-active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* --- 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 DASHBOARD --]
   =================================================================== */

/* --- Statistics Card Grid --- */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

/* --- Individual Stat Card --- */
.stat-card {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-card__icon {
    font-size: 2.2rem; /* 35px */
    color: var(--primary-color);
    margin-bottom: 15px;
}

.stat-card__number {
    font-size: 2rem; /* 32px */
    font-weight: 700;
    color: var(--theme-text-primary);
    line-height: 1.2;
}

.stat-card__label {
    font-size: 0.9375rem; /* 15px */
    color: var(--theme-text-secondary);
    margin-top: 5px;
}

/* --- Recent Orders Section --- */
.recent-orders-section {
    margin-top: 50px;
}

.recent-orders-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--theme-border);
}

/* --- Responsive Adjustments for Dashboard --- */
@media (max-width: 768px) {
    .dashboard-stats-grid {
        /* Stack cards on smaller screens */
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   [ 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; }


/**
 * File: /public/assets/css/account.css (example path)
 *
 * This file contains styles for the account sections, including the
 * referral program page. It styles the general layout boxes, statistics,
 * referral link component, and provides a robust, clean style for all
 * tables within the account area using the `.account-table` class.
 *
 * @version 1.1.0 (Table Styling Implementation)
 */

/* --- General Account Box Styling --- */
.account-box {
    background-color: var(--theme-bg);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.account-box-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 5px 0;
}

.account-box-description {
    font-size: 14px;
    color: var(--theme-text-secondary);
    margin: 0;
}

/* --- Referral Link Section --- */
.referral-link-container {
    display: flex;
    margin-top: 15px;
}

.referral-link-container input[type="text"] {
    flex-grow: 1;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg);
    color: var(--theme-text-secondary);
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 6px 0 0 6px;
    outline: none;
    font-family: var(--font-family-base);
}

.referral-link-container input[readonly] {
    cursor: text;
}

.referral-link-container button {
    flex-shrink: 0;
    border-radius: 0 6px 6px 0;
    border-left: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Statistics Grid --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.stat-item {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.stat-item .stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-gradient-dark);
    line-height: 1.2;
}

.stat-item .stat-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text-secondary);
}


/*
 * NEW: General Table Styles
 * These rules apply to any table with the `.account-table` class,
 * ensuring consistent and clean styling for all data tables in the
 * account section.
 */
.account-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px; /* Provides space between the title and the table */
}

.account-table th,
.account-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
    vertical-align: middle; /* Ensures content aligns nicely, especially with icons */
}

.account-table thead th {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Removes the bottom border from the last row for a cleaner look */
.account-table tbody tr:last-child td {
    border-bottom: none;
}


/* --- Rewards Table Specific Enhancements --- */
#claimable-rewards-tbody .token-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle; /* Already set above, but good for specificity */
}

#claimable-rewards-tbody .reward-token-name {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--theme-text-primary);
}

#claimable-rewards-tbody .reward-balance {
    font-family: monospace;
    font-size: 15px;
    font-weight: 500;
}

#claimable-rewards-tbody .claim-reward-btn {
    font-weight: 600;
    min-width: 80px; /* Ensures buttons have a consistent width */
}

/**
 * File: /public/assets/css/style.css
 * Add this new module to the end of your stylesheet.
 *
 * @project     : XPayr E-commerce Theme
 * @version     : 1.8.0 (KYC Module Integration)
 * @description : Module 25: KYC Verification Page Styles
 */

/* ===================================================================
   [-- 25.1. KYC PAGE STYLES (THEME-AWARE) --]
   =================================================================== */
.kyc-status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding: 15px;
    background-color: var(--theme-bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--theme-border);
}

.kyc-status-header > span:first-child {
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* Re-using the generic status badge styles */
.status-badge.status-pending_document,
.status-badge.status-rejected {
    background-color: rgba(220, 53, 69, 0.1); /* Red-ish */
    color: #dc3545;
}

.status-badge.status-pending_review {
    background-color: rgba(255, 193, 7, 0.1); /* Yellow-ish */
    color: #ffc107;
}

.status-badge.status-approved {
    background-color: rgba(40, 167, 69, 0.1); /* Green-ish */
    color: #28a745;
}
.status-badge.status-not_started {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border);
}


/* Informational boxes for different states */
.kyc-info-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid transparent;
}

.kyc-info-box i {
    font-size: 24px;
    margin-top: 2px;
}

.kyc-info-box p {
    margin: 0;
    font-weight: 500;
    line-height: 1.6;
}

.kyc-info-box.success {
    background-color: #F0FFF4;
    color: #2F855A;
    border-color: #9AE6B4;
}
.kyc-info-box.success i { color: #2F855A; }

.kyc-info-box.info {
    background-color: #EBF8FF;
    color: #2C5282;
    border-color: #90CDF4;
}
.kyc-info-box.info i { color: #2C5282; }

.kyc-info-box.error {
    background-color: #FFF5F5;
    color: #C53030;
    border-color: #FC8181;
}
.kyc-info-box.error i { color: #C53030; }

.reject-reason {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
.kyc-info-box.error .reject-reason strong {
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}
.kyc-info-box.error .reject-reason p {
    font-style: italic;
    font-weight: normal;
}

/* KYC Form specific styles */
.kyc-form {
    max-width: 600px;
}

.kyc-form .form-group {
    margin-bottom: 25px;
}

.kyc-form .file-drop-area {
    min-height: 150px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.kyc-form .file-drop-area.is-dragging {
    background-color: rgba(0, 178, 255, 0.05);
    border-color: var(--primary-color);
}

.kyc-form .file-drop-area .file-preview {
    padding: 10px;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.kyc-form #submit-kyc-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

/**
 * @project     : XPayr E-commerce Theme
 * @version     : 1.8.1 (Dark Theme for KYC Notifications)
 * @description : Module 26: Dark Theme Overrides for KYC Info Boxes
 */

/* ===================================================================
   [-- 26.1. KYC INFO BOXES - DARK THEME --]
   =================================================================== */

/* 
 * This block applies styles only when the dark theme is active.
 * It changes the light backgrounds of the info boxes to darker,
 * semi-transparent shades and lightens the text for high contrast.
 */
html[data-theme="dark"] .kyc-info-box.success {
    background-color: rgba(40, 167, 69, 0.2);  /* Dark, transparent green */
    color: #9AE6B4;                           /* Light green text */
    border-color: rgba(40, 167, 69, 0.6);
}
html[data-theme="dark"] .kyc-info-box.success i {
    color: #9AE6B4;
}

html[data-theme="dark"] .kyc-info-box.info {
    background-color: rgba(44, 82, 130, 0.25); /* Dark, transparent blue */
    color: #90CDF4;                            /* Light blue text */
    border-color: rgba(44, 82, 130, 0.7);
}
html[data-theme="dark"] .kyc-info-box.info i {
    color: #90CDF4;
}

html[data-theme="dark"] .kyc-info-box.error {
    background-color: rgba(220, 53, 69, 0.2);  /* Dark, transparent red */
    color: #FC8181;                            /* Light red text */
    border-color: rgba(220, 53, 69, 0.6);
}
html[data-theme="dark"] .kyc-info-box.error i {
    color: #FC8181;
}
html[data-theme="dark"] .kyc-info-box.error .reject-reason {
    border-top-color: rgba(255, 255, 255, 0.1); /* Lighter border for the separator */
}

/* Added for the 'not_started' state introduced earlier */
html[data-theme="dark"] .kyc-info-box.notice {
    background-color: rgba(246, 224, 94, 0.15); /* Dark, transparent yellow */
    color: #F6E05E;                             /* Light yellow text */
    border-color: rgba(246, 224, 94, 0.5);
}
html[data-theme="dark"] .kyc-info-box.notice i {
    color: #F6E05E;
}

/**
 * File: /public/assets/css/style.css
 * This block contains only the styles for Module 1: Layout & Breadcrumbs.
 *
 * @version 1.0.0 (Module 1 Only)
 */

/* ===================================================================
   [-- PRODUCT DETAIL PAGE - MODULE 1: LAYOUT & BREADCRUMBS --]
   =================================================================== */

/* --- Main Container & Grid --- */
.product-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 15px;
}

.product-grid-layout {
    display: grid;
    /* The reference image has a slightly narrower left column for thumbnails */
    grid-template-columns: 0.9fr 1.1fr; 
    gap: 40px;
    align-items: flex-start;
}

/* --- Breadcrumb --- */
.product-breadcrumb {
    margin-bottom: 30px;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
}

.breadcrumb-item a {
    color: var(--theme-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary-color);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    margin: 0 0.75rem;
    color: var(--theme-text-secondary);
    opacity: 0.7;
}

/* The final, active item in the breadcrumb */
.breadcrumb-item.active {
    color: var(--theme-text-primary);
    font-weight: 500;
}

/* --- Responsive Adjustments for Main Layout --- */
@media (max-width: 992px) {
    .product-grid-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ===================================================================
   [-- PRODUCT DETAIL PAGE - MODULE 2: PRODUCT GALLERY --]
   =================================================================== */

.product-gallery {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.thumbnail-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 80px; /* Fixed width for the thumbnail column */
    flex-shrink: 0;
}

.thumbnail-item {
    border: 2px solid var(--theme-border);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.thumbnail-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.thumbnail-item:hover {
    border-color: var(--theme-text-secondary);
}

.thumbnail-item.active {
    border-color: var(--primary-color);
}

.main-image-wrapper {
    position: relative;
    flex-grow: 1; /* Takes up the remaining space */
    border-radius: 10px;
    overflow: hidden;
}

#main-product-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.2; /* Taller aspect ratio for the main image */
    object-fit: cover;
    display: block;
}

/* --- Responsive Adjustments for Gallery --- */
@media (max-width: 768px) {
    .product-gallery {
        /* On smaller screens, thumbnails go below the main image */
        flex-direction: column-reverse;
    }

    .thumbnail-gallery {
        flex-direction: row;
        width: 100%;
        /* Create a scrollable horizontal list of thumbnails */
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }
}

/* Container */
.product-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Title */
.product-title-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 18px;
  box-sizing: border-box;
}
.product-title {
  display: block;
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  text-align: left;
  word-break: break-word;
  white-space: normal;
}

/* Price + Rating row */
.product-meta-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
  box-sizing: border-box;
  padding: 0 8px;
}

/* Price (Left) */
.product-price-container {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  justify-content: flex-start;
}
.current-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--theme-text-primary);
}
.old-price {
  font-size: 16px;
  color: var(--theme-text-secondary);
  text-decoration: line-through;
  opacity: 0.85;
}
.discount-badge {
  background-color: #dc3545;
  color: #fff;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
}

/* Rating (Right) */
.product-rating-container {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  white-space: nowrap;
}
.product-rating {
  display: flex;
  gap: 4px;
  align-items: center;
  color: #FFD700; /* Yellow stars */
}
.review-count {
  font-size: 14px;
  color: var(--theme-text-secondary);
}

/* Remove divider line */
.product-info-divider {
  display: none;
}

/* Responsive */
@media (max-width: 900px) {
  .product-meta-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .product-price-container,
  .product-rating-container {
    width: 100%;
    justify-content: center;
  }
  .product-title {
    font-size: 28px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .product-title { font-size: 22px; }
  .current-price { font-size: 20px; }
  .discount-badge { padding: 4px 8px; font-size: 12px; }
}


/* ===================================================================
   [-- PRODUCT DETAIL PAGE - MODULE 4: COUNTDOWN TIMER --]
   =================================================================== */

.sale-countdown-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 1px solid #dc3545;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
}

.timer-icon-and-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #dc3545;
    text-transform: uppercase;
}

.timer-digits {
    font-size: 24px;
    font-weight: 700;
    font-family: monospace; /* Gives a classic digital clock feel */
    color: var(--theme-text-primary);
    letter-spacing: 2px;
}

/**
 * File: /public/assets/css/style.css
 * Add these new styles for Module 5.
 */

/* ===================================================================
   [-- PRODUCT DETAIL PAGE - MODULE 5: OPTIONS & ACTIONS --]
   =================================================================== */

.product-brand {
    font-size: 15px;
    margin-bottom: 25px;
    color: var(--theme-text-secondary);
}

.product-brand a {
    color: var(--theme-text-primary);
    font-weight: 600;
    text-decoration: none;
}

.product-brand a:hover {
    text-decoration: underline;
}

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

.option-label {
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 10px;
    display: block;
    font-size: 15px;
}

.option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.option-btn {
    padding: 8px 20px;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg);
    color: var(--theme-text-secondary);
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.option-btn:hover {
    border-color: var(--theme-text-primary);
    color: var(--theme-text-primary);
}

.option-btn.active {
    background-color: var(--theme-text-primary);
    color: var(--theme-bg);
    border-color: var(--theme-text-primary);
}

html[data-theme="dark"] .option-btn {
    background-color: transparent;
}

html[data-theme="dark"] .option-btn.active {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}

.product-main-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.btn-add-to-cart {
    flex-grow: 1;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--theme-text-primary);
    color: var(--theme-bg);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-add-to-cart:hover {
    opacity: 0.8;
}

html[data-theme="dark"] .btn-add-to-cart {
    background-color: #fff;
    color: #000;
}

.btn-icon {
    width: 52px;
    height: 52px;
    font-size: 20px;
    flex-shrink: 0;
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-icon.is-active {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

/* ===================================================================
   [ PRODUCT DETAIL PAGE - REVIEWS MODULE ]
   =================================================================== */

/* ===================== General Layout ===================== */
.product-details-bottom-section {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid var(--theme-border);
}

.product-details-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: flex-start;
}

.review-summary-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 40px;
}

.summary-card {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* ===================== Rating Display ===================== */
.rating-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.rating-display .stars {
    font-size: 14px;
    color: var(--star-color);
    margin-bottom: 8px;
}

.rating-display .review-count-text {
    font-size: 13px;
    color: var(--theme-text-secondary);
    line-height: 1.4;
}

/* ===================== Recommendation Display ===================== */
.recommend-display .percentage {
    font-size: 36px;
    font-weight: 700;
    color: var(--theme-text-primary);
    display: block;
    line-height: 1.1;
}

.recommend-display span {
    font-size: 14px;
    color: var(--theme-text-secondary);
}

/* ===================== Rating Breakdown ===================== */
.rating-breakdown .rating-bar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.rating-breakdown .star-label {
    font-size: 12px;
    color: var(--theme-text-secondary);
    width: 50px;
    text-align: left;
}

.rating-breakdown .progress-bar {
    flex-grow: 1;
    height: 6px;
    background-color: var(--theme-border);
    border-radius: 3px;
    overflow: hidden;
}

.rating-breakdown .progress-bar-fill {
    height: 100%;
    background-color: var(--star-color);
    border-radius: 3px;
}

.rating-breakdown .percentage-label {
    font-size: 12px;
    color: var(--theme-text-secondary);
    width: 30px;
    text-align: right;
}

/* ===================== Reviews List ===================== */
.reviews-list-container {
    margin-bottom: 40px;
}

.review-item {
    padding: 25px;
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    margin-bottom: 20px;
}

.review-item:last-child {
    margin-bottom: 0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.review-author {
    font-weight: 600;
    font-size: 16px;
    color: var(--theme-text-primary);
}

.review-date {
    font-size: 13px;
    color: var(--theme-text-secondary);
    margin-bottom: 15px;
}

.review-comment {
    color: var(--theme-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

.review-reply {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--theme-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 14px;
}

.review-reply strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--theme-text-primary);
    margin-bottom: 10px;
}

.review-reply p {
    margin-bottom: 0;
    font-style: italic;
    color: var(--theme-text-secondary);
}

/* ===================== Review Form ===================== */
.review-form-container {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 30px;
}

.review-form-container h4 {
    color: var(--theme-text-primary);
    margin-top: 0;
    margin-bottom: 20px;
}

.login-prompt {
    padding: 15px;
    border-radius: 5px;
    background-color: #fff9e6;
    border: 1px solid #ffecb3;
}

html[data-theme="dark"] .login-prompt {
    background-color: rgba(255, 236, 179, 0.1);
    border-color: rgba(255, 236, 179, 0.2);
}

/* ===== Review Stars ===== */

.review-rating i.fas,
.rating-display .stars i.fas {
    color: #f7c500 !important; /* solid star = yellow */
}

.review-rating i.far,
.rating-display .stars i.far {
    color: #ccc !important;    /* empty star = gray */
}

/* Form yıldızları */
.star-rating-input i.fas {
    color: #f7c500 !important;
}

.star-rating-input i.far {
    color: #ccc !important;
}

/* Hover efekt */
.star-rating-input i:hover,
.star-rating-input i:hover ~ i {
    color: #f7c500 !important;
}

/* Description & Tabs Column (Right) */
.description-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--theme-border);
    margin-bottom: 25px;
}
.description-tabs .tab-link {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 5px;
    margin-bottom: -1px;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.description-tabs .tab-link:hover {
    color: var(--theme-text-primary);
}
.description-tabs .tab-link.active {
    color: var(--theme-text-primary);
    border-bottom-color: var(--primary-color);
}

.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-content h4 {
    font-size: 18px;
    color: var(--theme-text-primary);
    margin-bottom: 10px;
}
.tab-content p {
    color: var(--theme-text-secondary);
    line-height: 1.7;
}

.product-tags-container {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--theme-border);
}
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tag-link {
    background-color: var(--theme-bg-secondary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border);
    text-decoration: none;
    transition: all 0.2s ease;
}
.tag-link:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.video-responsive-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}
.video-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===================================================================
   [-- PRODUCT REVIEWS & TABS - RESPONSIVE ADJUSTMENTS --]
   =================================================================== */

/*
 * Breakpoint for Tablets and smaller devices (e.g., iPad portrait)
 * Stacks the main two columns (Reviews and Description/Tabs).
 */
@media (max-width: 992px) {
    .product-details-grid {
        /* Change the two-column grid to a single column */
        grid-template-columns: 1fr;
        /* Adjust the gap for vertical stacking */
        gap: 40px;
    }

    .product-details-bottom-section {
        /* Reduce top margin/padding on smaller screens */
        margin-top: 40px;
        padding-top: 40px;
    }
}

/*
 * Breakpoint for small tablets and large phones
 * Stacks the three summary cards.
 */
@media (max-width: 768px) {
    .review-summary-cards {
        /* Change the three-column grid to a single column */
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .recommend-display .percentage {
        /* Slightly reduce the large percentage font size */
        font-size: 32px;
    }
    
    .review-item,
    .review-form-container {
        /* Reduce padding on smaller screens */
        padding: 20px;
    }
}

/*
 * Breakpoint for smaller mobile phones
 * Further refines layout for very narrow screens.
 */
@media (max-width: 480px) {
    .review-header {
        /* Stack author name and star rating vertically */
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .description-tabs {
        /* Allow tabs to wrap if they don't fit in one line */
        flex-wrap: wrap;
    }

    .review-item,
    .review-form-container {
        padding: 15px;
    }
}

/* ===================================================================
   [-- PRODUCT DETAIL PAGE - MODULE 5 ENHANCEMENTS: META & SHARE --]
   =================================================================== */

/* --- Meta Info Cards (Product Type & Network) --- */
.product-meta-cards {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.meta-card {
    flex: 1;
    padding: 15px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background-color: var(--theme-bg-secondary);
    text-align: center;
}

.meta-card-label {
    display: block;
    font-size: 13px;
    color: var(--theme-text-secondary);
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 500;
}

.meta-card-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.meta-card-value small {
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.meta-card-value.is-testnet-network {
    color: #fd7e14; /* A distinct orange color for testnets */
    font-weight: 600;
}

/* --- Meta Details Grid (Brand, Availability, SKU) --- */
.product-meta-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--theme-border);
    font-size: 15px;
}

.meta-detail-item strong {
    display: block;
    color: var(--theme-text-secondary);
    margin-bottom: 4px;
    font-weight: 500;
}

.meta-detail-item a,
.meta-detail-item span {
    color: var(--theme-text-primary);
    font-weight: 600;
}
.meta-detail-item a {
    text-decoration: none;
}
.meta-detail-item a:hover {
    text-decoration: underline;
}

.availability-status.in-stock {
    color: #198754; /* Green for success */
}
.availability-status.out-of-stock {
    color: #dc3545; /* Red for danger */
}

/* --- Categories List --- */
.product-categories-list {
    margin-bottom: 25px;
    font-size: 15px;
}

.product-categories-list strong {
    display: block;
    color: var(--theme-text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}

.category-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-links a {
    background-color: var(--theme-bg-secondary);
    padding: 5px 12px;
    border-radius: 5px;
    color: var(--theme-text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.category-links a:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* --- Social Share --- */
.product-share {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.product-share strong {
    font-weight: 600;
    color: var(--theme-text-primary);
    font-size: 15px;
}

.share-links {
    display: flex;
    gap: 10px;
}

.share-link {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-border);
    border-radius: 50%;
    color: var(--theme-text-secondary);
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    background-color: transparent;
}

.share-link:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}


/* ===================================================================
   [-- RELATED PRODUCTS SECTION --]
   =================================================================== */

.related-products-section {
    padding: 60px 0;
    margin-top: 60px;
    border-top: 1px solid var(--theme-border);
    background-color: var(--theme-bg-secondary);
}

/* 
 * The .section-header and .section-title classes are assumed to be
 * globally styled. If not, you can use these base styles.
 */
.related-products-section .section-header {
    text-align: center;
    margin-bottom: 40px;
}

.related-products-section .section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
}

/* 
 * The .product-grid and its responsive styles are assumed to be
 * globally defined from other modules. If not, you would need
 * to add grid layout styles here.
 */

@media (max-width: 768px) {
    .related-products-section {
        padding: 40px 0;
        margin-top: 40px;
    }

    .related-products-section .section-header {
        margin-bottom: 30px;
    }

    .related-products-section .section-title {
        font-size: 24px;
    }
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.9.0 (Category Page Module)
* @description : Module 27: Category Page Layout, Sidebar Filters, and Controls
*/

/* ===================================================================
   [-- 27.1. CATEGORY PAGE LAYOUT --]
   =================================================================== */
.category-layout {
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar width and main content */
    gap: 30px;
    align-items: flex-start;
}

/* ===================================================================
   [-- 27.2. CATEGORY SIDEBAR & FILTERS --]
   =================================================================== */
.category-sidebar {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 20px;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--theme-border);
}

.sidebar-header h4 {
    margin: 0;
    font-size: 18px;
    color: var(--theme-text-primary);
}

.btn-clear-filters {
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 5px;
}
.btn-clear-filters:hover {
    color: #dc3545; /* Red for clear action */
}

.filter-group {
    border-bottom: 1px solid var(--theme-border);
    padding: 15px 0;
}
.filter-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.filter-group__header i {
    transition: transform 0.3s ease;
}

.filter-group.collapsed .filter-group__header i {
    transform: rotate(-90deg);
}

.filter-group__body {
    max-height: 300px; /* Default open height */
    overflow-y: auto;
    padding-top: 15px;
    transition: max-height 0.4s ease-out, padding-top 0.4s ease-out;
}
.filter-group.collapsed .filter-group__body {
    max-height: 0;
    padding-top: 0;
    overflow: hidden;
}

/* Custom Checkbox Styles */
.form-check {
    position: relative;
    display: block;
    margin-bottom: 10px;
}
.form-check-label {
    padding-left: 28px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 15px;
    color: var(--theme-text-secondary);
}
.form-check-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.form-check-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg);
    border-radius: 3px;
    transition: all 0.2s ease;
}
.form-check-input:checked ~ .form-check-label::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.form-check-label::after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.form-check-input:checked ~ .form-check-label::after {
    display: block;
}

/* Category Filter List */
.category-filter-list li { margin-bottom: 8px; }
.category-filter-list li a { color: var(--theme-text-secondary); font-size: 15px; }
.category-filter-list li a:hover { color: var(--primary-color); }
.category-filter-list li.active a { color: var(--primary-color); font-weight: 600; }

/* ===================================================================
   [-- 27.3. CATEGORY CONTENT & CONTROLS --]
   =================================================================== */
.category-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
}

.grid-view-controls {
    display: flex;
    gap: 5px;
}
.view-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg);
    color: var(--theme-text-secondary);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.view-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.view-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.sort-controls select {
    min-width: 200px;
    background-color: var(--theme-bg);
    color: var(--theme-text-primary);
}


/* ===================================================================
   [-- 27.4. PAGINATION & FOOTER --]
   =================================================================== */
.category-pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--theme-border);
}
.product-count-info {
    font-size: 14px;
    color: var(--theme-text-secondary);
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 5px;
}
.page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg);
    color: var(--theme-text-secondary);
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.page-item.disabled .page-link {
    opacity: 0.6;
    cursor: not-allowed;
}
.page-item:not(.disabled) .page-link:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    cursor: default;
}

/* ===================================================================
   [-- 27.3. PRODUCT GRIDS (FINAL & SEPARATED) --]
   =================================================================== */

/**
 * 1. GENERIC GRID STYLES (for Homepage Modules, etc.)
 * Defaults to a 4-column layout as requested.
 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Default 4-column layout for homepage */
    gap: 30px;
}

/* Generic responsive rules for homepage grids */
@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}


/**
 * 2. CATEGORY PAGE SPECIFIC GRID STYLES
 * These rules use the #product-grid ID to override the generic styles
 * and apply only on the category page.
 */
#product-grid {
    grid-template-columns: repeat(3, 1fr); /* Default 3-column layout for category page */
    min-height: 400px;
    position: relative;
}

/* View switcher classes for the category page */
#product-grid.grid-view-2 {
    grid-template-columns: repeat(2, 1fr);
}
#product-grid.grid-view-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive adjustments specific to the CATEGORY PAGE grid */
@media (max-width: 1200px) {
    #product-grid.grid-view-4 { /* If user selected 4-col view on a slightly smaller screen */
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 992px) {
     #product-grid.grid-view-3,
     #product-grid.grid-view-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    /* On mobile, all views become 1 column */
    #product-grid,
    #product-grid.grid-view-2,
    #product-grid.grid-view-3,
    #product-grid.grid-view-4 {
        grid-template-columns: 1fr;
    }
}

/* Loader styles remain the same and are correctly placed */
.loader-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 10;
}
html[data-theme="dark"] .loader-container {
    background-color: rgba(18, 18, 18, 0.6);
}
.loader {
    width: 48px; height: 48px;
    border: 5px solid var(--theme-border);
    border-bottom-color: var(--primary-color);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.10.0 (Dynamic Page Module)
* @description : Module 28: Styles for Generic Dynamic Pages
*/

/* ===================================================================
   [-- 28.1. GENERIC PAGE STYLES (THEME-AWARE) --]
   =================================================================== */

/* Main container for the generic page content */
.generic-page .container {
    max-width: 900px; /* Limit content width for better readability */
}

/* Page Header styling for title and breadcrumbs */
.page-header-container {
    text-align: center;
    padding: 30px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--theme-border);
}

.page-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0 0 15px 0;
}

/* Center the breadcrumb below the title */
.page-header-container .breadcrumb {
    justify-content: center;
    background-color: transparent;
    padding: 0;
}

/* Featured image styling */
.page-featured-image {
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.page-featured-image img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
}

/* Main content area styling */
.page-main-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--theme-text-secondary);
}

.page-main-content h1,
.page-main-content h2,
.page-main-content h3,
.page-main-content h4,
.page-main-content h5,
.page-main-content h6 {
    color: var(--theme-text-primary);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: 600;
}
.page-main-content p {
    margin-bottom: 1.2em;
}
.page-main-content a {
    color: var(--primary-color);
    text-decoration: underline;
}
.page-main-content a:hover {
    color: var(--primary-color-dark);
}
.page-main-content ul,
.page-main-content ol {
    margin-bottom: 1.2em;
    padding-left: 25px;
}
.page-main-content li {
    margin-bottom: 0.5em;
}
.page-main-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    color: var(--theme-text-primary);
    background-color: var(--theme-bg-secondary);
    padding-top: 10px;
    padding-bottom: 10px;
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.11.0 (FAQ Page Module)
* @description : Module 29: Styles for the FAQs Page
*/

/* ===================================================================
   [-- 29.1. FAQS PAGE LAYOUT & SIDEBAR --]
   =================================================================== */

.faq-layout {
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar width and main content */
    gap: 50px; /* Wider gap for a cleaner look */
    align-items: flex-start;
}

.faq-sidebar {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 20px; /* Space from the top of the viewport */
}

.faq-category-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background-color: var(--theme-bg-secondary);
    overflow: hidden; /* Ensures border-radius is applied to children */
}

.faq-category-nav a {
    display: block;
    padding: 15px 20px;
    color: var(--theme-text-secondary);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--theme-border);
    transition: all 0.2s ease-in-out;
}

.faq-category-nav li:last-child a {
    border-bottom: none;
}

.faq-category-nav a:hover {
    background-color: var(--theme-bg);
    color: var(--theme-text-primary);
}

.faq-category-nav a.active {
    background-color: var(--primary-color);
    color: #FFFFFF;
    font-weight: 600;
    border-color: var(--primary-color);
}


/* ===================================================================
   [-- 29.2. FAQS CONTENT & ACCORDION --]
   =================================================================== */

.faq-category-section {
    margin-bottom: 50px;
}
.faq-category-section:last-child {
    margin-bottom: 0;
}

.faq-category-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--theme-border);
}

.faq-accordion .faq-item {
    border-bottom: 1px solid var(--theme-border);
}

.faq-accordion .faq-item:first-child {
    border-top: 1px solid var(--theme-border);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    color: var(--theme-text-primary);
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-icon {
    font-size: 16px;
    color: var(--theme-text-secondary);
    transition: transform 0.3s ease;
}

/* Accordion item open state */
.faq-item.active .faq-question {
    color: var(--primary-color);
}
.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding-bottom 0.4s ease-out;
}

.faq-answer-content {
    padding-bottom: 0px; /* Initially no padding */
    line-height: 1.7;
    color: var(--theme-text-secondary);
}

.faq-item.active .faq-answer {
    /* max-height will be set by JS, but a large value works as a fallback */
    max-height: 1000px; 
}
.faq-item.active .faq-answer-content {
    padding-bottom: 25px;
}

/* Styling for content coming from DB (similar to generic page) */
.faq-answer-content p { margin-bottom: 1em; }
.faq-answer-content p:last-child { margin-bottom: 0; }
.faq-answer-content a { color: var(--primary-color); text-decoration: underline; }
.faq-answer-content ul, .faq-answer-content ol { padding-left: 20px; margin-bottom: 1em; }
.faq-answer-content li { margin-bottom: 0.5em; }

/* ===================================================================
   [-- 29.3. FAQS RESPONSIVE ADJUSTMENTS --]
   =================================================================== */
@media (max-width: 992px) {
    .faq-layout {
        grid-template-columns: 1fr; /* Stack sidebar and content */
    }
    .faq-sidebar {
        position: static; /* Remove sticky behavior */
        margin-bottom: 40px;
    }
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.12.0 (Contact Page Module)
* @description : Module 30: Styles for the Contact Page
*/

/* ===================================================================
   [-- 30.1. CONTACT PAGE LAYOUT & INFO --]
   =================================================================== */

.contact-page .page-header-container {
    text-align: left; /* Override generic centered header */
    padding: 0;
    margin-bottom: 40px;
    border-bottom: none;
}

.contact-page .page-title {
    margin-bottom: 10px;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* 40% / 60% split */
    gap: 60px;
    align-items: flex-start;
}

.info-block {
    margin-bottom: 30px;
}

.info-block h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-block p,
.info-block a {
    font-size: 16px;
    color: var(--theme-text-secondary);
    text-decoration: none;
    line-height: 1.6;
}

.info-block a:hover {
    color: var(--primary-color);
}

.social-links-block {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icon-link {
    font-size: 20px;
}


/* ===================================================================
   [-- 30.2. CONTACT FORM & CAPTCHA --]
   =================================================================== */

.contact-form-col .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form-col .form-group {
    margin-bottom: 20px;
}

.contact-form-col .form-control {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-input-bg);
    color: var(--theme-text-primary);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form-col .form-control::placeholder {
    color: var(--theme-text-secondary);
    opacity: 0.8;
}

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

.captcha-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.captcha-group .form-group {
    margin-bottom: 0;
}

.captcha-image-wrapper {
    background-color: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 5px;
    height: 60px; /* Match form input height */
    display: flex;
    align-items: center;
    justify-content: center;
}

#captcha-image {
    max-height: 100%;
    border-radius: 5px;
}

.form-message {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    display: none; /* Hidden by default */
}
.form-message.success, .form-message.error { display: block; }
.form-message.success { background-color: rgba(40, 167, 69, 0.1); color: #28a745; border: 1px solid rgba(40, 167, 69, 0.2); }
.form-message.error { background-color: rgba(220, 53, 69, 0.1); color: #dc3545; border: 1px solid rgba(220, 53, 69, 0.2); }

/* ===================================================================
   [-- 30.3. CONTACT PAGE RESPONSIVE --]
   =================================================================== */

@media (max-width: 992px) {
    .contact-layout {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .contact-form-col .form-grid-2 {
        grid-template-columns: 1fr; /* Stack form inputs */
        gap: 0;
    }
    .captcha-group {
        grid-template-columns: 1fr;
    }
    .captcha-image-wrapper {
        justify-content: flex-start;
    }
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.14.1 (Corrected Blog Styles)
* @description : Module 31: Styles for Enhanced Blog with Correct Image Aspect Ratios
*/

/* ===================================================================
   [-- 31.1. BLOG LAYOUT & SIDEBAR WIDGETS --]
   =================================================================== */

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 50px;
    align-items: flex-start;
}

.blog-sidebar .widget {
    background-color: var(--theme-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}

.widget-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--theme-border);
}

/* Lists for Categories & Languages */
.widget-list li {
    border-bottom: 1px solid var(--theme-border);
    margin: 0 -25px;
    padding: 0 25px;
}
.widget-list li:last-child { border-bottom: none; }
.widget-list a {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    color: var(--theme-text-secondary);
    font-weight: 500;
}
.widget-list a:hover span:first-child { color: var(--primary-color); }
.widget-list span:last-child {
    background-color: var(--theme-bg-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* List for Recent Posts */
.widget-list-posts li {
    padding: 15px 0;
    border-bottom: 1px solid var(--theme-border);
    margin: 0 -25px;
    padding: 15px 25px;
}
.widget-list-posts li:last-child { border-bottom: none; }
.recent-post-item { display: flex; align-items: center; gap: 15px; }

/* RECENT POSTS IMAGES (SIDEBAR) - NOT SQUARE */
.widget-post-image {
    width: 80px;
    height: 60px; /* Rectangular aspect ratio */
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}
.recent-post-item .post-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-text-primary);
    line-height: 1.4;
    margin-bottom: 5px;
}
.recent-post-item:hover .post-title { color: var(--primary-color); }
.recent-post-item .post-date { font-size: 13px; color: var(--theme-text-secondary); }

/* Tag Cloud (Keywords) */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-cloud .tag-link {
    background-color: var(--theme-bg-secondary);
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 13px;
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border);
}
.tag-cloud .tag-link:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* ===================================================================
   [-- 31.2. BLOG LISTING PAGE STYLES --]
   =================================================================== */

.post-card-list {
    background-color: var(--theme-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.post-card-list:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* BLOG LISTING PAGE IMAGE - SQUARE */
.post-card-list__image-link {
    display: block; /* Makes margin auto work */
    overflow: hidden;
    border-radius: 8px; /* Optional: adds rounded corners to the image frame */

    /* Set a max-width and center the image container */
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;

    /* Add some vertical spacing inside the card */
    margin-top: 30px;
    margin-bottom: 15px;
}

.post-card-list__image-link img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Makes the image inside the container square */
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* On hover, scale the image inside the non-scaling container */
.post-card-list:hover .post-card-list__image-link img {
    transform: scale(1.03);
}

/* Adjust padding for the content area since image now has margin */
.post-card-list__content {
    padding: 15px 30px 30px 30px;
}


.post-card-list__meta { display: flex; gap: 20px; font-size: 14px; color: var(--theme-text-secondary); margin-bottom: 10px; }
.post-card-list__meta i { margin-right: 5px; }
.post-card-list__title { font-size: 24px; margin: 0 0 15px 0; }
.post-card-list__title a { color: var(--theme-text-primary); }
.post-card-list__title a:hover { color: var(--primary-color); }
.post-card-list__excerpt { color: var(--theme-text-secondary); line-height: 1.7; margin-bottom: 20px; }
.btn-read-more { font-weight: 600; color: var(--primary-color); display: inline-flex; align-items: center; gap: 8px; }
.pagination-container { margin-top: 40px; display: flex; justify-content: center; }

/* Styling for the new language switch buttons in blog sidebar */
.widget-list .language-switch-btn {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: var(--theme-text-secondary);
    font-weight: 500;
}
.widget-list .language-switch-btn:hover span:first-child {
    color: var(--primary-color);
}

/* ===================================================================
   [-- 31.3. SINGLE POST PAGE STYLES --]
   =================================================================== */

/* SINGLE POST FEATURED IMAGE - SQUARE */
.single-post__featured-image {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    
    /* NEW: Set a max-width and center it */
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}
.single-post__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Other single post styles remain the same... */
.single-post__header { margin-bottom: 25px; }
.post-categories a { display: inline-block; background-color: rgba(0, 178, 255, 0.1); color: var(--primary-color); padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; margin-right: 8px; margin-bottom: 15px; }
.post-categories a:hover { background-color: var(--primary-color); color: #fff; }
.single-post__title { font-size: 32px; font-weight: 700; color: var(--theme-text-primary); line-height: 1.3; margin: 0 0 15px 0; }
.single-post__meta { display: flex; gap: 20px; font-size: 14px; color: var(--theme-text-secondary); padding-bottom: 20px; border-bottom: 1px solid var(--theme-border); }
.single-post__meta i { margin-right: 5px; }
.single-post__content { font-size: 16px; line-height: 1.8; color: var(--theme-text-secondary); }
.single-post__content h1, .single-post__content h2, .single-post__content h3, .single-post__content h4 { color: var(--theme-text-primary); margin-top: 1.5em; margin-bottom: 0.8em; font-weight: 600; }
.single-post__content p { margin-bottom: 1.2em; }
.single-post__content a { color: var(--primary-color); text-decoration: underline; }
.single-post__content ul, .single-post__content ol { margin-bottom: 1.2em; padding-left: 25px; }
.single-post__content li { margin-bottom: 0.5em; }
.single-post__content blockquote { border-left: 4px solid var(--primary-color); padding-left: 20px; margin: 20px 0; font-style: italic; color: var(--theme-text-primary); background-color: var(--theme-bg-secondary); padding-top: 10px; padding-bottom: 10px; }
.single-post__footer { margin-top: 40px; padding-top: 25px; border-top: 1px solid var(--theme-border); }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tags-label { font-weight: 600; color: var(--theme-text-primary); font-size: 16px; }
.post-share { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--theme-border); }
.share-label { font-weight: 600; color: var(--theme-text-primary); font-size: 16px; }
.share-buttons { display: flex; gap: 10px; }
.share-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--theme-border); border-radius: 50%; color: var(--theme-text-secondary); font-size: 16px; background-color: transparent; cursor: pointer; transition: all 0.2s ease; }
.share-btn:hover { color: #fff; border-color: var(--primary-color-dark); background-color: var(--primary-color-dark); }
.post-navigation { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 25px; border-top: 1px solid var(--theme-border); }
.nav-previous, .nav-next { flex: 1; }
.nav-next { text-align: right; }
.post-navigation a { display: inline-block; padding: 10px; border-radius: 5px; }
.post-navigation a:hover { background-color: var(--theme-bg-secondary); }
.post-navigation .nav-label { display: block; font-size: 13px; font-weight: 500; color: var(--theme-text-secondary); margin-bottom: 5px; }
.post-navigation .nav-title { font-weight: 600; color: var(--theme-text-primary); }
.post-navigation a:hover .nav-title { color: var(--primary-color); }

/* ===================================================================
   [-- 31.4. BLOG RESPONSIVE ADJUSTMENTS --]
   =================================================================== */
@media (max-width: 992px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-main-content { order: 1; }
    .blog-sidebar { order: 2; }
}
@media (max-width: 768px) {
    .post-card-list__image-link img { height: auto; } /* Let aspect-ratio handle height */
    .single-post__title { font-size: 26px; }
}

/*
* @project     : XPayr E-commerce Theme
* @version     : 1.15.0 (Shop & Category Responsive Fix)
* @description : Module 32: Responsive Styles for Shop & Category Pages
*/

/* ===================================================================
   [-- 32.1. RESPONSIVE LAYOUT FOR SHOP & CATEGORY --]
   =================================================================== */

/* --- Tablet Breakpoint (<= 992px) --- */
@media (max-width: 992px) {
    /* Stack the sidebar and main content vertically */
    .category-layout {
        grid-template-columns: 1fr;
    }

    /* Add space below the sidebar when it's stacked on top */
    .category-sidebar {
        margin-bottom: 30px;
    }

    /* Adjust product grid columns for tablets */
    #product-grid.grid-view-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Mobile Breakpoint (<= 768px) --- */
@media (max-width: 768px) {
    /* Make the product grid 2 columns wide */
    #product-grid.grid-view-3,
    #product-grid.grid-view-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stack the view controls and sort dropdown */
    .category-controls {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .sort-controls select {
        width: 100%;
    }
}

/* --- Small Mobile Breakpoint (<= 576px) --- */
@media (max-width: 576px) {
    /* Stack pagination and product count info */
    .category-pagination-footer {
        flex-direction: column;
        gap: 15px;
    }

    /* Make the product grid a single column on small phones */
    #product-grid,
    #product-grid.grid-view-2,
    #product-grid.grid-view-3,
    #product-grid.grid-view-4 {
        grid-template-columns: 1fr;
    }
}