/*
Theme Name: Madrara Digital Glass
Theme URI: https://medrara.sa
Author: Madrara Digital Solutions
Author URI: https://medrara.sa
Description: A premium glassmorphism WordPress theme with frosted glass cards, deep blue gradients, and elegant Arabic/English bilingual support. Built for WooCommerce digital product stores.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: madrara-glass
Tags: woocommerce, rtl-language-support, custom-logo, custom-menu, glassmorphism, ecommerce

Madrara Digital Glass — Rain & Clouds Premium Theme
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Arabic:wght@300;400;500;600;700;800&display=swap');

/* ────────────────────────────────────
   🌙 DARK MODE: "Midnight Rain" (Default)
   ──────────────────────────────────── */
:root,
[data-theme="dark"] {
    /* ── Backgrounds ── */
    --mg-bg-deep: #080C16;
    --mg-bg-mid: #0E1626;
    --mg-bg-light: #162238;
    --mg-bg-gradient: radial-gradient(ellipse at 50% 0%, #16243A 0%, #080D18 100%);

    /* ── Glass ── */
    --mg-glass: rgba(255, 255, 255, 0.03);
    --mg-glass-strong: rgba(255, 255, 255, 0.06);
    --mg-glass-border: rgba(255, 255, 255, 0.08); /* Neutralized for true glassmorphism */
    --mg-glass-hover: rgba(255, 255, 255, 0.09);
    --mg-glass-blur: 24px;
    --mg-header-bg: rgba(8, 12, 22, 0.85); /* Solid header to prevent bright image bleed */

    /* ── Accent ── */
    --mg-accent-1: #C5A03A; /* Softer, elegant gold */
    --mg-accent-2: #4a90d9;
    --mg-accent-3: #5b72c8;
    --mg-accent-gradient: linear-gradient(135deg, #C5A03A, #DDC06E);
    --mg-accent-silver: #c0c8d4;

    /* ── Text ── */
    --mg-text: #F8FAFC;
    --mg-text-soft: #94A3B8;
    --mg-text-muted: rgba(255, 255, 255, 0.40);
    --mg-text-gold: #C5A03A;

    /* ── Input fields ── */
    --mg-input-bg: rgba(255, 255, 255, 0.04);
    --mg-input-border: rgba(255, 255, 255, 0.12);
    --mg-input-text: #F8FAFC;
    --mg-input-placeholder: #64748B;

    /* ── Radii ── */
    --mg-radius: 14px;
    --mg-radius-sm: 8px;
    --mg-radius-xs: 4px;
    --mg-radius-pill: 50px;

    /* ── Shadows ── */
    --mg-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --mg-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
    --mg-shadow-glow: 0 0 24px rgba(197, 160, 58, 0.15);

    /* ── Transitions ── */
    --mg-ease: 0.35s cubic-bezier(.4, 0, .2, 1);

    /* ── Fonts ── */
    --mg-font: 'Inter', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Layout ── */
    --mg-sidebar-w: 260px;
    --mg-header-h: 70px;
    --mg-gap: 28px; /* Increased for breathing room */
    --mg-max-w: 1300px;

    /* ── Parallax decorative spots ── */
    --mg-parallax-spot-1: rgba(201, 168, 76, 0.05);
    --mg-parallax-spot-2: rgba(74, 144, 217, 0.05);
}

/* ────────────────────────────────────
   ☀️ LIGHT MODE: "Morning Dew"
   ──────────────────────────────────── */
[data-theme="light"] {
    /* ── Backgrounds ── */
    --mg-bg-deep: #F4F7FA;
    --mg-bg-mid: #EAEFF4;
    --mg-bg-light: #FFFFFF;
    --mg-bg-gradient: radial-gradient(ellipse at 50% 0%, #FFFFFF 0%, #F0F4F8 100%);

    /* ── Glass ── */
    --mg-glass: rgba(255, 255, 255, 0.85);
    --mg-glass-strong: rgba(255, 255, 255, 0.95);
    --mg-glass-border: rgba(0, 0, 0, 0.06);
    --mg-glass-hover: #FFFFFF;
    --mg-glass-blur: 24px;
    --mg-header-bg: rgba(255, 255, 255, 0.90);

    /* ── Accent ── */
    --mg-accent-1: #A67C1E; /* Deeper, refined gold for light mode */
    --mg-accent-2: #3a7bc8;
    --mg-accent-3: #4b62b8;
    --mg-accent-gradient: linear-gradient(135deg, #A67C1E, #C8992D);
    --mg-accent-silver: #64748B;

    /* ── Text ── */
    --mg-text: #0F172A;
    --mg-text-soft: #475569;
    --mg-text-muted: rgba(15, 23, 42, 0.40);
    --mg-text-gold: #A67C1E;

    /* ── Input fields ── */
    --mg-input-bg: rgba(0, 0, 0, 0.03);
    --mg-input-border: rgba(0, 0, 0, 0.12);
    --mg-input-text: #0F172A;
    --mg-input-placeholder: #94A3B8;

    /* ── Shadows ── */
    --mg-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    --mg-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04);
    --mg-shadow-glow: 0 0 24px rgba(166, 124, 30, 0.12);

    /* ── Parallax decorative spots (lighter for light mode) ── */
    --mg-parallax-spot-1: rgba(166, 124, 30, 0.03);
    --mg-parallax-spot-2: rgba(58, 123, 200, 0.03);
}

/* ────────────────────────────────────
   🔄 SMOOTH THEME TRANSITION (0.4s cross-fade)
   ──────────────────────────────────── */
body,
body *,
body *::before,
body *::after {
    transition: background-color 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--mg-font);
    background: var(--mg-bg-gradient);
    background-attachment: fixed;
    color: var(--mg-text);
    line-height: 1.6;
    font-size: 15px; /* Base sleek font size */
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: var(--mg-text);
    text-decoration: none;
    transition: var(--mg-ease);
}

a:hover {
    color: var(--mg-accent-1);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   GLASS CARD SYSTEM
   ============================================================ */
.mg-glass {
    background: var(--mg-glass);
    backdrop-filter: blur(var(--mg-glass-blur));
    -webkit-backdrop-filter: blur(var(--mg-glass-blur));
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius);
    transition: var(--mg-ease);
}

.mg-glass:hover {
    background: var(--mg-glass-hover);
    box-shadow: var(--mg-shadow);
}

.mg-glass-strong {
    background: var(--mg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--mg-radius);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.mg-site-wrapper {
    display: flex;
    min-height: 100vh;
}

.mg-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mg-content {
    flex: 1;
    padding: var(--mg-gap);
    max-width: var(--mg-max-w);
    margin: 0 auto;
    width: 100%;
}

/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */
.mg-sidebar {
    width: 80px; /* Slim by default */
    background: var(--mg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--mg-glass-border);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    position: fixed;
    top: 20px;
    left: 20px;
    height: calc(100vh - 40px);
    z-index: 100;
    overflow-x: hidden;
    overflow-y: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, background 0.4s ease;
}

.mg-sidebar:hover {
    width: var(--mg-sidebar-w);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    background: var(--mg-glass-strong);
    overflow-y: auto;
}

.mg-sidebar-logo {
    padding: 10px 24px 30px;
    text-align: center;
}

.mg-sidebar-logo img {
    max-width: 70px;
    margin: 0 auto;
    filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.3));
}

.mg-sidebar-logo .mg-brand-name {
    display: block;
    font-size: 11px;
    color: var(--mg-text-muted);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    white-space: nowrap;
}

.mg-sidebar:hover .mg-sidebar-logo .mg-brand-name {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.1s;
}

.mg-sidebar-nav {
    list-style: none;
    padding: 0;
    flex: 1;
}

.mg-sidebar-nav li {
    margin: 2px 12px;
}

.mg-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: var(--mg-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--mg-text-soft);
    transition: var(--mg-ease);
    white-space: nowrap;
}

.mg-sidebar-nav a span:not(.mg-nav-icon) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mg-sidebar:hover .mg-sidebar-nav a span:not(.mg-nav-icon) {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.1s;
}

.mg-sidebar-nav a:hover {
    background: var(--mg-glass-strong);
    color: var(--mg-text);
}

.mg-sidebar-nav a.active {
    background: var(--mg-accent-gradient);
    color: #1a1a2e;
    font-weight: 600;
    box-shadow: var(--mg-shadow-glow);
}

.mg-sidebar-nav .mg-nav-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.mg-sidebar-bottom {
    padding: 16px 24px;
    border-top: 1px solid var(--mg-glass-border);
    white-space: nowrap;
}

.mg-sidebar-bottom > div > div:nth-child(2) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mg-sidebar:hover .mg-sidebar-bottom > div > div:nth-child(2) {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.1s;
}

/* Push main content past fixed floating sidebar */
.mg-main-area {
    margin-left: 120px; /* 80px slim sidebar + 20px left + 20px gap */
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   TOP HEADER BAR
   ============================================================ */
.mg-header {
    height: var(--mg-header-h);
    background: var(--mg-header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--mg-glass-border);
    display: flex;
    align-items: center;
    padding: 0 30px;
    position: sticky;
    top: 0;
    z-index: 90;
}

.mg-header-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

.mg-header-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--mg-radius-pill);
    font-size: 14px;
    font-weight: 500;
    color: var(--mg-text-soft);
    transition: var(--mg-ease);
}

.mg-header-nav a:hover,
.mg-header-nav a.active {
    background: var(--mg-glass-strong);
    color: var(--mg-text);
}

.mg-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-inline-start: auto; /* Pushes to the left in RTL, right in LTR */
}

.mg-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: var(--mg-glass);
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-pill);
    cursor: pointer;
    transition: var(--mg-ease);
}

.mg-header-user:hover {
    background: var(--mg-glass-strong);
}

.mg-header-user img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--mg-accent-1);
}

.mg-header-user-name {
    font-size: 13px;
    font-weight: 600;
}

.mg-header-user-sub {
    font-size: 11px;
    color: var(--mg-text-muted);
}

/* ============================================================
   HERO / WELCOME BANNER
   ============================================================ */
.mg-hero {
    background: var(--mg-glass-strong);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius);
    padding: 48px;
    margin-bottom: var(--mg-gap);
    position: relative;
    overflow: hidden;
}

.mg-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(197, 160, 58, 0.08), transparent 70%);
    pointer-events: none;
}

.mg-hero h2 {
    font-size: 21px; /* Scaled down for elegance */
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.mg-hero p {
    color: var(--mg-text-soft);
    font-size: 14px; /* Scaled down */
    line-height: 1.7;
}

/* Slider dots */
.mg-hero-dots {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.mg-hero-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mg-text-muted);
    transition: var(--mg-ease);
    cursor: pointer;
}

.mg-hero-dots span.active {
    background: var(--mg-accent-1);
    width: 24px;
    border-radius: 4px;
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.mg-product-grid {
    display: grid;
    /* Increased minmax for less clutter */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--mg-gap);
}

.mg-product-card {
    background: var(--mg-glass);
    backdrop-filter: blur(var(--mg-glass-blur));
    -webkit-backdrop-filter: blur(var(--mg-glass-blur));
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius);
    overflow: hidden;
    position: relative; /* Bug #10 fix: anchor for absolutely-positioned Reward Badge */
    transition: var(--mg-ease);
    display: flex;
    flex-direction: column;
}

.mg-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mg-shadow);
    border-color: rgba(255, 255, 255, 0.20);
}

.mg-product-card-img {
    width: 100%;
    aspect-ratio: 1; /* Perfect square */
    object-fit: contain;
    padding: 24px; /* More breathing room */
}

.mg-product-card-body {
    padding: 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mg-product-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--mg-text);
    margin-bottom: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mg-product-card-cat {
    font-size: 11px;
    color: var(--mg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.mg-product-card-price {
    margin-top: auto; /* Push price down */
    font-size: 18px; /* Slightly larger for clarity */
    font-weight: 800;
    color: var(--mg-accent-1);
}

.mg-product-card-footer {
    padding: 0 20px 18px;
}

.mg-product-card .mg-btn {
    width: 100%;
    text-align: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.mg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--mg-radius-sm);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--mg-font);
    border: none;
    cursor: pointer;
    transition: var(--mg-ease);
    text-decoration: none;
}

.mg-btn-primary {
    background: var(--mg-accent-gradient);
    color: #1a1a2e;
    box-shadow: 0 4px 16px rgba(201, 168, 76, 0.25);
}

.mg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.35);
    color: #1a1a2e;
}

.mg-btn-glass {
    background: var(--mg-glass);
    border: 1px solid var(--mg-glass-border);
    color: var(--mg-text);
}

.mg-btn-glass:hover {
    background: var(--mg-glass-strong);
}

.mg-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: var(--mg-radius-xs);
}

/* ============================================================
   CART SIDEBAR
   ============================================================ */
.mg-cart-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--mg-header-h) + var(--mg-gap));
    align-self: flex-start;
}

.mg-cart-card {
    background: var(--mg-glass);
    backdrop-filter: blur(var(--mg-glass-blur));
    -webkit-backdrop-filter: blur(var(--mg-glass-blur));
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius);
    padding: 20px;
}

.mg-cart-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mg-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mg-glass-border);
}

.mg-cart-item:last-child {
    border-bottom: none;
}

.mg-cart-item-img {
    width: 48px;
    height: 48px;
    border-radius: var(--mg-radius-xs);
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
}

.mg-cart-item-info {
    flex: 1;
    min-width: 0;
}

.mg-cart-item-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-cart-item-price {
    font-size: 12px;
    color: var(--mg-accent-1);
    font-weight: 600;
}

.mg-cart-total {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--mg-glass-border);
    font-weight: 700;
}

.mg-cart-total-val {
    color: var(--mg-accent-1);
    font-size: 18px;
}

/* ============================================================
   WALLET CARDS
   ============================================================ */
.mg-wallet-card {
    background: var(--mg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.mg-wallet-card::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.08), transparent 70%);
    pointer-events: none;
}

.mg-wallet-name {
    font-size: 12px;
    color: var(--mg-text-soft);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mg-wallet-balance {
    font-size: 24px; /* Scaled down for elegance */
    font-weight: 800;
    margin: 6px 0;
    letter-spacing: -0.01em;
}

.mg-virtual-card {
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.15), rgba(74, 144, 217, 0.1));
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 12px;
    font-size: 13px;
}

.mg-virtual-card-number {
    font-size: 15px;
    letter-spacing: 3px;
    font-weight: 600;
    margin: 10px 0;
}

/* ============================================================
   PAYMENT STEPS
   ============================================================ */
.mg-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.mg-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--mg-text-muted);
    font-weight: 500;
}

.mg-step.active {
    color: var(--mg-text);
}

.mg-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--mg-glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.mg-step.active .mg-step-num {
    background: var(--mg-accent-gradient);
    color: #1a1a2e;
    border-color: var(--mg-accent-1);
}

.mg-step-line {
    width: 30px;
    height: 2px;
    background: var(--mg-glass-border);
}

/* ============================================================
   FORMS (Checkout, etc.)
   ============================================================ */
.mg-input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-sm);
    color: var(--mg-text);
    font-size: 14px;
    font-family: var(--mg-font);
    transition: var(--mg-ease);
    outline: none;
}

.mg-input::placeholder {
    color: var(--mg-text-muted);
}

.mg-input:focus {
    border-color: var(--mg-accent-1);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
    background: rgba(255, 255, 255, 0.08);
}

.mg-form-group {
    margin-bottom: 16px;
}

.mg-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--mg-text-soft);
    margin-bottom: 6px;
}

.mg-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.mg-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--mg-gap);
    flex-wrap: wrap;
}

.mg-filter-btn {
    padding: 10px 20px;
    background: var(--mg-glass);
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-pill);
    color: var(--mg-text-soft);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--mg-ease);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mg-font);
}

.mg-filter-btn:hover,
.mg-filter-btn.active {
    background: var(--mg-glass-strong);
    color: var(--mg-text);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   WORLD SWITCHER (Category Tabs)
   ============================================================ */
.mg-cat-tabs {
    display: flex;
    gap: 4px;
    background: var(--mg-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-pill);
    padding: 5px;
    margin-bottom: var(--mg-gap);
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
}

.mg-cat-tabs::-webkit-scrollbar {
    display: none;
}

.mg-cat-tab {
    padding: 10px 22px;
    border-radius: var(--mg-radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--mg-text-soft);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    white-space: nowrap;
    border: none;
    background: none;
    font-family: var(--mg-font);
    letter-spacing: 0.02em;
    position: relative;
}

.mg-cat-tab:hover {
    color: var(--mg-text);
    background: rgba(212, 175, 55, 0.06);
}

.mg-cat-tab.active {
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.15), inset 0 0 0 1px rgba(212, 175, 55, 0.2);
}

/* Cross-fade animation for product cards during filter */
.mg-product-card {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.mg-product-card.mg-fade-out {
    opacity: 0;
    transform: scale(0.95);
}

.mg-product-card.mg-fade-in {
    opacity: 1;
    transform: scale(1);
}

[data-theme="light"] .mg-cat-tab.active {
    background: rgba(181, 142, 36, 0.12);
    color: #B58E24;
    box-shadow: 0 0 20px rgba(181, 142, 36, 0.1), inset 0 0 0 1px rgba(181, 142, 36, 0.2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.mg-footer {
    padding: 24px 30px;
    border-top: 1px solid var(--mg-glass-border);
    text-align: center;
    font-size: 13px;
    color: var(--mg-text-muted);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.mg-section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.mg-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--mg-radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: rgba(201, 168, 76, 0.15);
    color: var(--mg-accent-1);
    border: 1px solid rgba(201, 168, 76, 0.25);
}

.mg-divider {
    height: 1px;
    background: var(--mg-glass-border);
    margin: var(--mg-gap) 0;
}

.mg-text-gold {
    color: var(--mg-accent-1);
}

.mg-text-soft {
    color: var(--mg-text-soft);
}

.mg-text-muted {
    color: var(--mg-text-muted);
}

.mg-text-center {
    text-align: center;
}

/* ============================================================
   WooCommerce OVERRIDES
   ============================================================ */
.woocommerce-page,
.single-product {
    background: var(--mg-bg-gradient);
}

/* Override WC default button styling */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: var(--mg-radius-sm) !important;
    font-weight: 600 !important;
    font-family: var(--mg-font) !important;
    padding: 12px 24px !important;
    transition: var(--mg-ease) !important;
    box-shadow: 0 4px 16px rgba(201, 168, 76, 0.2) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.35) !important;
}

/* WC notices */
.woocommerce-message,
.woocommerce-info {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) !important;
    color: var(--mg-text) !important;
    backdrop-filter: blur(10px);
}

.woocommerce-error {
    background: rgba(217, 79, 92, 0.1) !important;
    border: 1px solid rgba(217, 79, 92, 0.3) !important;
    border-radius: var(--mg-radius-sm) !important;
    color: #ff8a8a !important;
}

/* WC form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    padding: 14px 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) !important;
    color: var(--mg-text) !important;
    font-family: var(--mg-font) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--mg-accent-1) !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1) !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .mg-sidebar {
        transform: translateX(-100%);
        transition: transform var(--mg-ease);
    }

    .mg-sidebar.open {
        transform: translateX(0);
    }

    .mg-main-area {
        margin-left: 0;
    }

    .mg-cart-sidebar {
        display: none;
    }

    .mg-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --mg-gap: 12px;
    }

    .mg-header {
        padding: 0 16px;
    }

    .mg-header-nav {
        display: none;
    }

    .mg-hero {
        padding: 24px;
    }

    .mg-hero h2 {
        font-size: 18px;
    }

    .mg-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mg-form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   BOTTOM MOBILE NAV
   ============================================================ */
.mg-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--mg-glass-border);
    z-index: 200;
    padding: 8px 0;
}

.mg-bottom-nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
}

.mg-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--mg-text-muted);
    padding: 6px 12px;
}

.mg-bottom-nav a.active {
    color: var(--mg-accent-1);
}

.mg-bottom-nav .mg-bnav-icon {
    font-size: 20px;
}

@media (max-width: 1024px) {
    .mg-bottom-nav {
        display: block;
    }

    .mg-content {
        padding-bottom: 80px;
    }
}

/* ============================================================
   RTL SUPPORT
   ============================================================ */
html[dir="rtl"] .mg-sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--mg-glass-border);
}

html[dir="rtl"] .mg-main-area {
    margin-left: 0;
    margin-right: var(--mg-sidebar-w);
}

@media (max-width: 1024px) {
    html[dir="rtl"] .mg-sidebar {
        transform: translateX(100%);
    }

    html[dir="rtl"] .mg-sidebar.open {
        transform: translateX(0);
    }

    html[dir="rtl"] .mg-main-area {
        margin-right: 0;
    }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes mg-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mg-animate-in {
    animation: mg-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Continuous Marquee */
@keyframes mg-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Marquee Carousel */
.mg-marquee-wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.mg-marquee-content {
    display: flex;
    flex-shrink: 0;
    gap: 20px;
    animation: mg-marquee 30s linear infinite;
}

@keyframes mg-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.mg-carousel-item {
    transition: transform 0.2s ease;
}

.mg-carousel-item:hover {
    transform: translateY(-3px);
}

.mg-carousel-image img {
    transition: transform 0.3s ease;
}

.mg-carousel-item:hover .mg-carousel-image img {
    transform: scale(1.05);
}

/* Pause animation on hover */
.mg-marquee-wrapper:hover .mg-marquee-content {
    animation-play-state: paused;
}

/* 3D Tilt Hover Effects */
.mg-tilt-card {
    transition: transform 0.1s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    transform-style: preserve-3d;
}

.mg-tilt-card:hover {
    box-shadow: 0 10px 40px rgba(201, 168, 76, 0.2);
    border-color: rgba(201, 168, 76, 0.5);
    z-index: 10;
}

/* Fly to Cart Animation Elements */
.mg-fly-item {
    position: fixed;
    z-index: 9999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mg-accent-gradient);
    box-shadow: var(--mg-shadow-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    pointer-events: none;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), top 0.8s cubic-bezier(0.5, 0, 1, 0.5), left 0.8s linear;
}

/* Parallax Layers — theme-aware to prevent dual-layer color glitch */
.mg-parallax-bg {
    position: fixed;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    z-index: -1;
    background-image:
        radial-gradient(circle at 20% 30%, var(--mg-parallax-spot-1, rgba(201, 168, 76, 0.05)) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--mg-parallax-spot-2, rgba(74, 144, 217, 0.05)) 0%, transparent 40%);
    transition: background-image 0.4s ease, opacity 0.4s ease, transform 0.1s ease-out;
}

/* Virtual Card Flip */
.mg-flip-container {
    perspective: 1000px;
    cursor: pointer;
}

.mg-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.mg-flip-container.flipped .mg-flip-inner {
    transform: rotateY(180deg);
}

.mg-flip-front,
.mg-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
}

.mg-flip-front {
    z-index: 2;
}

.mg-flip-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, rgba(26, 53, 85, 0.9), rgba(10, 22, 40, 0.9));
    border: 1px solid var(--mg-accent-1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--mg-text);
    padding: 18px 20px;
}

/* Confetti */
.mg-confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
}

@keyframes mg-confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Glowing Inputs */
.mg-input-glow {
    transition: all 0.3s ease;
}

.mg-input-glow:focus,
.mg-input-glow:focus-within {
    border-color: var(--mg-accent-1) !important;
    box-shadow: 0 0 15px rgba(201, 168, 76, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Sticky Filters */
.mg-sticky-filters {
    position: sticky;
    top: calc(var(--mg-header-h) + 10px);
    z-index: 80;
    background: rgba(10, 22, 40, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 10px 16px;
    border-radius: var(--mg-radius-sm);
    box-shadow: var(--mg-shadow-sm);
}

/* Split Cart Adjustments */
@media (min-width: 1025px) {
    .mg-cart-split {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }

    .mg-cart-list {
        flex: 1;
    }

    .mg-cart-summary {
        width: 380px;
        position: sticky;
        top: calc(var(--mg-header-h) + 20px);
    }
}

@media (max-width: 1024px) {
    .mg-cart-sticky-bottom {
        position: fixed;
        bottom: 50px;
        /* above bottom nav */
        left: 0;
        right: 0;
        z-index: 90;
        background: var(--mg-glass-strong);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        padding: 16px;
        border-top: 1px solid var(--mg-glass-border);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================================
   GLOBAL TEXT VISIBILITY FIX (All Forms Across All Pages)
   ============================================================ */

/* All labels */
label,
.woocommerce label,
.woocommerce-form__label-for-checkbox,
.woocommerce-privacy-policy-text,
.uap-login-form label,
.uap-register-form label,
.woocommerce-form-login label,
.woocommerce-form-register label,
.comment-form label {
    color: var(--mg-text) !important;
}

/* All input fields and textareas */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select,
.woocommerce-Input,
.input-text,
#uap_login_username,
#uap_login_password {
    color: var(--mg-input-text) !important;
    background: var(--mg-input-bg) !important;
    border-color: var(--mg-input-border) !important;
    border-radius: var(--mg-radius-sm);
    padding: 12px 16px;
    font-family: var(--mg-font);
    font-size: 14px;
}

::placeholder {
    color: var(--mg-input-placeholder) !important;
    opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--mg-accent-1) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
    outline: none;
}

/* WooCommerce specific overrides */
.woocommerce h2,
.woocommerce h3,
.woocommerce-account h2,
.woocommerce-account h3,
.woocommerce-page h2,
.woocommerce-page p,
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel p,
.woocommerce-product-details__short-description p {
    color: var(--mg-text) !important;
}

/* Single product title fix */
.single-product .product_title,
.single-product h1.product_title {
    color: var(--mg-text) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* All anchors within content should respect theme */
.mg-content a {
    color: var(--mg-accent-1);
}

.mg-content a:hover {
    color: var(--mg-text-gold);
}

/* Select dropdown options (dark bg fallback) */
select option {
    background: var(--mg-bg-deep);
    color: var(--mg-text);
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.mg-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 34px;
    border-radius: 17px;
    border: 1px solid var(--mg-glass-border);
    background: var(--mg-glass);
    cursor: pointer;
    font-size: 16px;
    color: var(--mg-text);
    transition: all 0.4s ease;
}

.mg-theme-toggle:hover {
    background: var(--mg-glass-hover);
    border-color: var(--mg-accent-1);
    box-shadow: var(--mg-shadow-glow);
    transform: translateY(-2px);
}

/* Icon states */
.mg-theme-toggle .mg-icon-sun {
    display: none;
}

.mg-theme-toggle .mg-icon-moon {
    display: inline;
}

[data-theme="light"] .mg-theme-toggle .mg-icon-sun {
    display: inline;
}

[data-theme="light"] .mg-theme-toggle .mg-icon-moon {
    display: none;
}

/* ============================================================
   WOOCOMMERCE ICON OVERLAP FIX
   ============================================================ */
/* Prevent WooCommerce default pseudo-element checkmarks/squares from overlapping text */
.woocommerce-MyAccount-navigation-link::before,
.woocommerce-MyAccount-navigation-link::after,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.product_list_widget li::before {
    display: none !important;
    content: none !important;
}

/* ============================================================
   UAP WALLET CARDS — Full Visibility Fix
   ============================================================ */
/* Force wallet card text to be readable */
.uap-aw-card,
.uap-aw-wallet-card,
.uaw-wallet-card,
[class*="uap-aw"] {
    color: var(--mg-text) !important;
}

.uap-aw-card h3,
.uap-aw-card h4,
.uap-aw-card .uaw-balance,
.uap-aw-card .uaw-balance-amount,
.uap-aw-card label,
.uap-aw-card span,
.uap-aw-card p,
.uaw-wallet-card h3,
.uaw-wallet-card h4,
.uaw-wallet-card span,
.uaw-wallet-card p,
.uaw-wallet-card label,
.mg-wallet-balance-amount {
    color: #FFFFFF !important;
}

/* Recharge options & account ID text */
.uaw-recharge-options,
.uaw-recharge-options *,
.uaw-account-id,
.uaw-card-footer,
.uaw-card-footer * {
    color: rgba(255, 255, 255, 0.85) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Wallet card glass overlay (ensure readable on gradient backgrounds) */
.uap-aw-card::before,
.uaw-wallet-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}

.uap-aw-card>*,
.uaw-wallet-card>* {
    position: relative;
    z-index: 1;
}

/* Wallet buttons */
.uap-aw-card .button,
.uap-aw-card a.button,
.uaw-wallet-card .button {
    background: var(--mg-accent-gradient) !important;
    color: #0B1221 !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 8px 18px !important;
}

/* ============================================================
   UAP PORTAL / AFFILIATE DASHBOARD — Text Fixes
   ============================================================ */
/* Portal headings and body text */
.uap-ap-wrap h1,
.uap-ap-wrap h2,
.uap-ap-wrap h3,
.uap-ap-wrap h4,
.uap-ap-wrap p,
.uap-ap-wrap span,
.uap-ap-wrap label,
.uap-ap-wrap td,
.uap-ap-wrap th,
.uap-ap-wrap li,
#uap_affiliate_page h1,
#uap_affiliate_page h2,
#uap_affiliate_page h3,
#uap_affiliate_page p {
    color: var(--mg-text) !important;
}

/* Portal navigation tabs */
.uap-ap-wrap .uap-nav-tabs li a,
.uap-ap-wrap .uap-tab-title {
    color: var(--mg-text-soft) !important;
}

.uap-ap-wrap .uap-nav-tabs li.active a,
.uap-ap-wrap .uap-nav-tabs li a:hover {
    color: var(--mg-accent-1) !important;
}

/* Portal info blocks */
.uap-ap-wrap .uap-profile-box-info,
.uap-ap-wrap .uap-profile-box-info span {
    color: var(--mg-text) !important;
}

/* ============================================================
   CART — Product Thumbnail Fix
   ============================================================ */
/* Ensure cart product images are visible and properly sized */
.woocommerce-cart-form .product-thumbnail {
    width: 80px !important;
    min-width: 80px !important;
}

.woocommerce-cart-form .product-thumbnail img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border-radius: var(--mg-radius-sm) !important;
    border: 1px solid var(--mg-glass-border) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Cart table text */
.woocommerce-cart-form td,
.woocommerce-cart-form th,
.woocommerce-cart-form td a,
.woocommerce-cart-form .product-name a {
    color: var(--mg-text) !important;
}

/* Cart totals */
.cart_totals h2,
.cart_totals td,
.cart_totals th,
.cart_totals .amount,
.order-total .amount {
    color: var(--mg-text) !important;
}

/* ============================================================
   BUTTONS — Proper Contrast in Both Modes
   ============================================================ */
/* Gold buttons should always have dark text */
.mg-btn-primary,
.button.alt,
.checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--mg-accent-gradient) !important;
    color: #0B1221 !important;
    font-weight: 600 !important;
    border: none !important;
}

.mg-btn-primary:hover,
.button.alt:hover,
.checkout-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Glass buttons */
.mg-btn-glass,
.button:not(.alt),
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt) {
    color: var(--mg-text) !important;
    border-color: var(--mg-glass-border) !important;
}

/* Add-to-cart buttons on shop cards */
.add_to_cart_button,
.product_type_simple,
.product_type_variable {
    background: var(--mg-accent-gradient) !important;
    color: #0B1221 !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 10px 20px !important;
}

/* ============================================================
   QUANTITY SELECTORS — Visible in Both Modes
   ============================================================ */
.quantity .qty,
.quantity input[type="number"] {
    color: var(--mg-input-text) !important;
    background: var(--mg-input-bg) !important;
    border: 1px solid var(--mg-input-border) !important;
    border-radius: var(--mg-radius-xs) !important;
    text-align: center;
    width: 60px !important;
}

/* Plus/Minus buttons */
.quantity .plus,
.quantity .minus {
    color: var(--mg-text) !important;
    background: var(--mg-glass-strong) !important;
    border: 1px solid var(--mg-glass-border) !important;
}

/* ============================================================
   SIDEBAR & SECONDARY TEXT — Color Overrides
   ============================================================ */
/* Sidebar secondary info */
.mg-sidebar-bottom,
.mg-sidebar-bottom span,
.mg-sidebar-bottom div {
    color: var(--mg-text-soft) !important;
}

/* WooCommerce price display */
.price,
.price .amount,
.price del,
.price ins,
.woocommerce-Price-amount {
    color: var(--mg-text) !important;
}

.price ins .amount,
ins .woocommerce-Price-amount {
    color: var(--mg-accent-1) !important;
}

/* WooCommerce account page */
.woocommerce-MyAccount-navigation ul li a {
    color: var(--mg-text-soft) !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--mg-accent-1) !important;
    font-weight: 600;
}

.woocommerce-MyAccount-content,
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content a {
    color: var(--mg-text) !important;
}

/* ============================================================
   LIGHT MODE — Extra Contrast Boosts
   ============================================================ */
[data-theme="light"] .mg-sidebar {
    background: rgba(255, 255, 255, 0.85) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mg-sidebar-nav a {
    color: #0F172A !important;
}

/* Fix contrast: Dark text on Gold background for active state */
[data-theme="light"] .mg-sidebar-nav a.active {
    color: #0F172A !important;
    background: var(--mg-accent-gradient) !important;
}

[data-theme="light"] .mg-sidebar-nav a:hover:not(.active) {
    color: #B58E24 !important;
    background: rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .mg-glass {
    background: rgba(255, 255, 255, 0.70) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .uap-aw-card::before,
[data-theme="light"] .uaw-wallet-card::before {
    background: rgba(0, 0, 0, 0.15);
}

/* ============================================================
   WALLET RECHARGE BUTTON — High Visibility
   ============================================================ */
.uaw-recharge-options button,
.uaw-recharge-options .button,
.uaw-recharge-options input[type="submit"],
.uaw-add-funds-btn {
    background: var(--mg-accent-gradient) !important;
    color: #0B1221 !important;
    font-weight: 700 !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.uaw-recharge-options button:hover,
.uaw-recharge-options .button:hover,
.uaw-recharge-options input[type="submit"]:hover,
.uaw-add-funds-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
}

/* ============================================================
   RESPONSIVE DESIGN (MOBILE & TABLET)
   ============================================================ */
@media (max-width: 900px) {
    .mg-sidebar {
        display: none !important; /* Hide sidebar on mobile, use bottom nav */
    }
    
    .mg-main-area {
        margin-left: 0;
    }
    
    .mg-content {
        padding: 24px 16px; /* Added breathing room */
    }
    
    .mg-hero {
        padding: 30px 20px;
    }
    
    .mg-product-grid {
        gap: 16px; /* Increased gap */
    }
    
    /* Ensure bottom nav doesn't overlap content */
    body {
        padding-bottom: 80px; 
    }
}

/* ============================================================
   LIGHT MODE CONTRAST FIXES
   ============================================================ */
/* Ensure all gold buttons have dark text for contrast (fixes "Return to shop" white text bug) */
.button, 
.button.wc-backward, 
[data-theme="light"] .mg-btn,
[data-theme="light"] .button,
[data-theme="light"] input[type="submit"],
[data-theme="light"] input[type="button"],
[data-theme="light"] button {
    color: #0F172A !important;
}

.mg-glass, .mg-product-card {
    /* Slightly stronger border for definition in light mode */
    border: 1px solid rgba(0, 0, 0, 0.08); 
}
[data-theme="light"] .mg-glass, 
[data-theme="light"] .mg-product-card,
[data-theme="light"] .woocommerce-cart-form,
[data-theme="light"] .cart-empty {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
}

/* ============================================================
   WOOCOMMERCE VARIABLE PRODUCTS (GLASSMORPHISM)
   ============================================================ */
.woocommerce div.product form.cart .variations {
    width: 100%;
    margin-bottom: 24px;
    border: none;
}
.woocommerce div.product form.cart .variations th {
    text-align: left;
    padding: 10px 0;
    color: var(--mg-text-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}
.woocommerce div.product form.cart .variations td {
    padding: 10px 0;
}
.woocommerce div.product form.cart .variations select {
    width: 100%;
    padding: 14px 20px;
    background: var(--mg-input-bg) !important;
    border: 1px solid var(--mg-input-border) !important;
    border-radius: var(--mg-radius-sm);
    color: var(--mg-text) !important;
    font-family: var(--mg-font);
    font-size: 15px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: var(--mg-ease);
}
.woocommerce div.product form.cart .variations select:focus {
    border-color: var(--mg-accent-1) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
    outline: none;
}
/* Custom dropdown arrow wrapper */
.woocommerce div.product form.cart .variations .value {
    position: relative;
}
.woocommerce div.product form.cart .variations .value::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: var(--mg-text-soft);
}
/* Ensure reset link looks elegant */
.woocommerce div.product form.cart .reset_variations {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--mg-text-soft) !important;
    text-decoration: underline;
}
.woocommerce div.product form.cart .reset_variations:hover {
    color: var(--mg-accent-1) !important;
}
.woocommerce-variation-price, 
.woocommerce-variation-availability {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--mg-glass-strong);
    border-radius: var(--mg-radius-xs);
    border: 1px solid var(--mg-glass-border);
}

/* ============================================================
   ADD TO CART ANIMATIONS
   ============================================================ */
.mg-btn.ajax_add_to_cart.loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}
.mg-btn.ajax_add_to_cart.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: mg-spin 0.6s linear infinite;
}
[data-theme="light"] .mg-btn.ajax_add_to_cart.loading::after {
    border-top-color: #0F172A;
    border-color: rgba(0,0,0,0.2) rgba(0,0,0,0.2) #0F172A rgba(0,0,0,0.2);
}

@keyframes mg-spin {
    to { transform: rotate(360deg); }
}

.mg-btn.ajax_add_to_cart.added {
    background: #10B981 !important; /* Success Green */
    border-color: #10B981 !important;
    color: #fff !important;
}

/* ============================================================
   RTL SUPPORT (ARABIC)
   ============================================================ */
body.mg-rtl .mg-sidebar {
    left: auto;
    right: 20px;
}
body.mg-rtl .mg-main-area {
    margin-left: 0;
    margin-right: 120px;
}
body.mg-rtl .mg-sidebar:hover {
    box-shadow: -10px 20px 50px rgba(0, 0, 0, 0.25); /* Shadow shifts to the left */
}
/* Mobile RTL overrides */
@media (max-width: 900px) {
    body.mg-rtl .mg-main-area {
        margin-right: 0;
    }
}

/* ============================================================
   SIDEBAR BOTTOM — HISTORY LINK HOVER STATE
   ============================================================ */
.mg-sidebar:hover .mg-sidebar-bottom a span:last-child {
    opacity: 1 !important;
    visibility: visible !important;
    transition-delay: 0.1s;
}

.mg-sidebar-bottom a:hover {
    background: var(--mg-glass-strong);
    color: var(--mg-text) !important;
}

/* ============================================================
   SIDEBAR LOGO — FIT PROPERLY IN COLLAPSED STATE
   ============================================================ */
.mg-sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 10px 20px !important;
}

.mg-sidebar-logo img {
    width: 44px !important;
    height: 44px !important;
    max-width: none !important;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.3));
    transition: width 0.3s ease, height 0.3s ease;
}

.mg-sidebar:hover .mg-sidebar-logo img {
    width: 60px !important;
    height: 60px !important;
}

/* ============================================================
   SVG NAV ICONS — INHERIT CURRENT COLOR
   ============================================================ */
.mg-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    flex-shrink: 0;
}

.mg-nav-icon svg {
    display: block;
}

/* ============================================================
   WOOCOMMERCE CHECKOUT — GLASSMORPHISM STYLING
   ============================================================ */

/* Form fields — use EXPLICIT dark backgrounds to override WooCommerce defaults */
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select,
body .woocommerce-page form .form-row input.input-text,
body .woocommerce-page form .form-row textarea,
body .woocommerce-page form .form-row select,
body .woocommerce-checkout #payment .form-row input.input-text,
body .woocommerce #customer_details input,
body .woocommerce #customer_details select,
body .woocommerce #customer_details textarea,
body .woocommerce-page #customer_details input,
body .woocommerce-page #customer_details select,
body .woocommerce-page #customer_details textarea,
body .woocommerce form input[type="text"],
body .woocommerce form input[type="email"],
body .woocommerce form input[type="tel"],
body .woocommerce form input[type="number"],
body .woocommerce form input[type="password"],
body .select2-container--default .select2-selection--single {
    background-color: rgba(30, 33, 45, 0.85) !important;
    background: rgba(30, 33, 45, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: #e8e4dd !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    outline: none !important;
    -webkit-appearance: none !important;
}

/* Light mode override for inputs */
[data-theme="light"] .woocommerce form .form-row input.input-text,
[data-theme="light"] .woocommerce form .form-row textarea,
[data-theme="light"] .woocommerce form .form-row select,
[data-theme="light"] .woocommerce form input[type="text"],
[data-theme="light"] .woocommerce form input[type="email"],
[data-theme="light"] .woocommerce form input[type="tel"],
[data-theme="light"] .woocommerce form input[type="number"],
[data-theme="light"] .woocommerce form input[type="password"],
[data-theme="light"] .woocommerce #customer_details input,
[data-theme="light"] .woocommerce #customer_details select,
[data-theme="light"] .woocommerce #customer_details textarea,
[data-theme="light"] .select2-container--default .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1a1a2e !important;
}

body .woocommerce form .form-row input.input-text:focus,
body .woocommerce form .form-row textarea:focus,
body .woocommerce form .form-row select:focus {
    border-color: var(--mg-accent-1) !important;
    box-shadow: 0 0 0 3px rgba(166, 124, 30, 0.15) !important;
}

/* Billing details heading & form labels — must be visible */
body .woocommerce-billing-fields h3,
body .woocommerce-shipping-fields h3,
body .woocommerce-additional-fields h3,
body .woocommerce-checkout h3,
body .woocommerce form .form-row label,
body .woocommerce-page form .form-row label {
    color: #e8e4dd !important;
    font-weight: 600;
}

[data-theme="light"] .woocommerce-billing-fields h3,
[data-theme="light"] .woocommerce-shipping-fields h3,
[data-theme="light"] .woocommerce-additional-fields h3,
[data-theme="light"] .woocommerce-checkout h3,
[data-theme="light"] .woocommerce form .form-row label {
    color: #1a1a2e !important;
}

/* Coupon bar styling */
body .woocommerce-info,
body .woocommerce .woocommerce-info {
    background: rgba(30, 33, 45, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e8e4dd !important;
    border-top-color: var(--mg-accent-1) !important;
    border-radius: 12px !important;
}

[data-theme="light"] .woocommerce-info,
[data-theme="light"] .woocommerce .woocommerce-info {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1a1a2e !important;
}

/* Select2 dropdown styling */
.select2-container--default .select2-selection--single {
    height: auto !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--mg-text) !important;
    line-height: normal !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}

.select2-dropdown {
    background: var(--mg-bg-deep) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) !important;
}

.select2-results__option {
    color: var(--mg-text) !important;
    padding: 10px 16px !important;
}

.select2-results__option--highlighted {
    background: var(--mg-glass-strong) !important;
    color: var(--mg-accent-1) !important;
}

/* Form labels */
.woocommerce form .form-row label,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
    color: var(--mg-text) !important;
    font-weight: 600;
}

.woocommerce form .form-row label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Order review table */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
    color: var(--mg-text);
}

.woocommerce table.shop_table,
.woocommerce-checkout .shop_table {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius) !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.woocommerce table.shop_table th {
    background: var(--mg-accent-gradient) !important;
    color: var(--mg-bg-deep) !important;
    font-weight: 700;
    padding: 14px 20px !important;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
}

.woocommerce table.shop_table td {
    color: var(--mg-text-soft) !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--mg-glass-border) !important;
    border-left: none !important;
    border-right: none !important;
}

.woocommerce table.shop_table tr:last-child td {
    border-bottom: none !important;
}

.woocommerce table.shop_table .order-total td {
    font-weight: 800 !important;
    color: var(--mg-accent-1) !important;
    font-size: 1.1em;
}

/* Payment methods section */
.woocommerce-checkout #payment {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.woocommerce-checkout #payment .payment_methods {
    border-bottom: 1px solid var(--mg-glass-border) !important;
    padding: 20px !important;
}

.woocommerce-checkout #payment .payment_methods li {
    list-style: none;
}

.woocommerce-checkout #payment .payment_methods li label {
    color: var(--mg-text) !important;
    font-weight: 500;
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--mg-glass) !important;
    color: var(--mg-text-soft) !important;
    border-radius: var(--mg-radius-sm) !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--mg-glass-border) !important;
}

/* Place order button */
.woocommerce-checkout #payment .place-order {
    padding: 20px !important;
}

.woocommerce #place_order,
.woocommerce-checkout #payment #place_order {
    background: var(--mg-accent-gradient) !important;
    color: var(--mg-bg-deep) !important;
    border: none !important;
    border-radius: var(--mg-radius-pill) !important;
    padding: 16px 40px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    font-family: var(--mg-font) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    text-transform: none !important;
}

.woocommerce #place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(166, 124, 30, 0.35) !important;
}

/* Privacy policy + terms links */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    color: var(--mg-text-soft) !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
    color: var(--mg-accent-1) !important;
}

/* Checkout headings */
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    color: var(--mg-text) !important;
}

/* Required asterisk */
.woocommerce form .form-row .required {
    color: var(--mg-accent-1) !important;
}

/* Notices */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) !important;
    color: var(--mg-text) !important;
    border-top-color: var(--mg-accent-1) !important;
}

.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before {
    color: var(--mg-accent-1) !important;
}

/* Cart page styling */
.woocommerce .woocommerce-cart-form .shop_table td,
.woocommerce .cart-collaterals th,
.woocommerce .cart-collaterals td {
    color: var(--mg-text-soft) !important;
    border-color: var(--mg-glass-border) !important;
}

/* Cart buttons */
.woocommerce .button,
.woocommerce button.button {
    background: var(--mg-glass-strong) !important;
    color: var(--mg-text) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 10px 20px !important;
    font-family: var(--mg-font) !important;
    transition: var(--mg-ease) !important;
    cursor: pointer !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover {
    background: var(--mg-accent-gradient) !important;
    color: var(--mg-bg-deep) !important;
    border-color: var(--mg-accent-1) !important;
}

/* Empty cart message */
.woocommerce .cart-empty,
.woocommerce .return-to-shop {
    color: var(--mg-text-soft) !important;
    text-align: center;
}

/* ============================================================
   FLOATING PLATINUM UPGRADE BANNER
   ============================================================ */
@keyframes mg-plat-glow {
    0%, 100% { box-shadow: 0 4px 20px rgba(201, 168, 76, 0.3); }
    50%      { box-shadow: 0 8px 40px rgba(201, 168, 76, 0.55); }
}

@keyframes mg-plat-slide {
    from { transform: translateY(100px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.mg-platinum-float {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 999;
    animation: mg-plat-slide 0.6s ease forwards;
}

.mg-platinum-float-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--mg-accent-gradient);
    padding: 14px 20px 14px 16px;
    border-radius: 16px;
    animation: mg-plat-glow 3s ease-in-out infinite;
    position: relative;
}

.mg-platinum-float-star {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    flex-shrink: 0;
}

.mg-platinum-float-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.mg-platinum-float-text strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--mg-bg-deep);
}

.mg-platinum-float-text span {
    font-size: 11px;
    color: rgba(26, 26, 46, 0.75);
    white-space: nowrap;
}

.mg-platinum-float-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: var(--mg-bg-deep);
    color: var(--mg-accent-1) !important;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mg-platinum-float-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.mg-platinum-float-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mg-bg-deep);
    color: var(--mg-text-soft);
    border: 2px solid var(--mg-glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    transition: var(--mg-ease);
}

.mg-platinum-float-close:hover {
    background: var(--mg-accent-1);
    color: var(--mg-bg-deep);
}

/* On mobile, make the banner full-width */
@media (max-width: 600px) {
    .mg-platinum-float {
        bottom: 70px;
        right: 12px;
        left: 12px;
    }
    .mg-platinum-float-inner {
        padding: 12px 14px;
        gap: 10px;
    }
    .mg-platinum-float-text span {
        display: none;
    }
}

/* ============================================================
   CHECKOUT PAGE LAYOUT — PREVENT OVERLAY / BROKEN LAYOUT
   ============================================================ */
body.woocommerce-checkout .woocommerce {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

body.woocommerce-checkout .col2-set {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 {
    flex: 1;
    min-width: 280px;
}

/* Checkout title */
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .page-title {
    color: var(--mg-text) !important;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 24px;
}

/* View cart button in notice — style it */
body .woocommerce-message .button.wc-forward {
    background: var(--mg-accent-gradient) !important;
    color: var(--mg-bg-deep) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
}

/* WooCommerce checkout sections */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

body.woocommerce-checkout .form-row-wide {
    grid-column: 1 / -1;
}

/* Header bar SVG icon alignment */
.mg-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mg-theme-toggle svg,
.mg-header-actions svg {
    display: block;
}

/* Bottom nav SVG icons */
.mg-bnav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mg-bnav-icon svg {
    display: block;
}

/* ============================================================
   CHECKOUT — COMPREHENSIVE DARK MODE TEXT FIXES
   ============================================================ */

/* ALL text inside WooCommerce checkout must be visible */
body .woocommerce-checkout,
body .woocommerce-checkout p,
body .woocommerce-checkout span,
body .woocommerce-checkout label,
body .woocommerce-checkout a,
body .woocommerce-checkout div,
body .woocommerce-checkout li,
body .woocommerce-checkout td,
body .woocommerce-checkout th {
    color: var(--mg-text) !important;
}

/* Links stay gold */
body .woocommerce-checkout a {
    color: var(--mg-accent-1) !important;
}

/* Payment method radio label text */
body .woocommerce-checkout #payment .payment_methods li label,
body .woocommerce-checkout #payment .payment_methods li,
body .woocommerce-checkout #payment .wc_payment_method label,
body #payment .payment_methods li label {
    color: var(--mg-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Payment box description text */
body .woocommerce-checkout #payment div.payment_box,
body .woocommerce-checkout #payment div.payment_box p {
    background: rgba(30, 33, 45, 0.6) !important;
    color: var(--mg-text-soft) !important;
    border-radius: 10px !important;
    padding: 14px !important;
    margin-top: 10px;
}

body .woocommerce-checkout #payment div.payment_box::before {
    display: none !important;
}

/* Privacy policy + terms text */
body .woocommerce-checkout .woocommerce-privacy-policy-text,
body .woocommerce-checkout .woocommerce-privacy-policy-text p,
body .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
body .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p,
body .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper span,
body .woocommerce-checkout .form-row.woocommerce-validated label,
body .woocommerce-checkout .woocommerce-form__label-for-checkbox span {
    color: var(--mg-text-soft) !important;
    font-size: 13px !important;
}

/* Terms checkbox label */
body .woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    color: var(--mg-text-soft) !important;
}

/* Order table values (subtotal, total amounts) */
body .woocommerce table.shop_table td .woocommerce-Price-amount,
body .woocommerce table.shop_table td .amount,
body .woocommerce table.shop_table .product-name,
body .woocommerce table.shop_table .product-total,
body .woocommerce table.shop_table .cart-subtotal td,
body .woocommerce table.shop_table .order-total td,
body .woocommerce-checkout-review-order-table td,
body .woocommerce-checkout-review-order-table .amount {
    color: var(--mg-text) !important;
}

body .woocommerce table.shop_table .order-total .amount {
    color: var(--mg-accent-1) !important;
    font-weight: 800 !important;
    font-size: 1.15em !important;
}

/* Product name in table */
body .woocommerce table.shop_table td.product-name {
    color: var(--mg-text) !important;
}

/* Coupon link */
body .woocommerce-checkout .woocommerce-info a.showcoupon,
body .woocommerce-checkout .showlogin {
    color: var(--mg-accent-1) !important;
    font-weight: 600;
}

/* Placeholder text */
body .woocommerce form input::placeholder,
body .woocommerce form textarea::placeholder {
    color: var(--mg-text-muted) !important;
    opacity: 0.7;
}

/* ─── Checkout Section Cards ─── */
/* Wrap billing details and order review in glass cards */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-checkout-review-order {
    background: rgba(30, 33, 45, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 24px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

[data-theme="light"] .woocommerce-billing-fields,
[data-theme="light"] .woocommerce-additional-fields,
[data-theme="light"] .woocommerce-checkout-review-order {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Section headings inside cards */
body.woocommerce-checkout h3 {
    color: var(--mg-text) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .woocommerce-checkout h3 {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* "Your order" heading */
body.woocommerce-checkout #order_review_heading {
    color: var(--mg-text) !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    margin-top: 10px;
}

/* Payment section as separate card */
body.woocommerce-checkout #payment {
    background: rgba(30, 33, 45, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

[data-theme="light"] .woocommerce-checkout #payment {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Place order button - make it bigger and more prominent */
body .woocommerce #place_order,
body .woocommerce-checkout #payment #place_order {
    width: 100% !important;
    text-align: center !important;
    padding: 18px 40px !important;
    font-size: 16px !important;
    margin-top: 10px;
}

/* Radio buttons styling */
body .woocommerce-checkout #payment input[type="radio"] {
    accent-color: var(--mg-accent-1);
    width: 18px;
    height: 18px;
}

/* Checkout page separator */
body.woocommerce-checkout hr {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Light mode text overrides */
[data-theme="light"] .woocommerce-checkout p,
[data-theme="light"] .woocommerce-checkout span,
[data-theme="light"] .woocommerce-checkout label,
[data-theme="light"] .woocommerce-checkout div,
[data-theme="light"] .woocommerce-checkout li,
[data-theme="light"] .woocommerce-checkout td {
    color: #1a1a2e !important;
}

[data-theme="light"] .woocommerce-checkout a {
    color: var(--mg-accent-1) !important;
}

[data-theme="light"] .woocommerce-checkout #payment div.payment_box {
    background: rgba(245, 245, 245, 0.9) !important;
}

/* ============================================================
   CHECKOUT — PAYMENT CARD IMAGES FIX
   ============================================================ */
/* Payment method logos (Visa, Mada, etc.) — give them a white bg so visible in dark mode */
body .woocommerce-checkout #payment .payment_methods img,
body #payment .payment_box img {
    max-height: 32px !important;
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 4px 6px 4px 0 !important;
    background: #fff !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Payment methods list - spacing */
body .woocommerce-checkout #payment .payment_methods {
    list-style: none !important;
    padding: 16px !important;
    margin: 0 !important;
}

body .woocommerce-checkout #payment .payment_methods li {
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body .woocommerce-checkout #payment .payment_methods li:last-child {
    border-bottom: none !important;
}

/* Payment method label - flex layout */
body .woocommerce-checkout #payment .payment_methods li label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
}

/* Checkout info/coupon bar styling */
body .woocommerce-checkout .woocommerce-info {
    background: rgba(30, 33, 45, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    color: var(--mg-text) !important;
    margin-bottom: 20px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body .woocommerce-checkout .woocommerce-info::before {
    color: var(--mg-accent-1) !important;
}

[data-theme="light"] .woocommerce-checkout .woocommerce-info {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Checkout message (product added) banner */
body .woocommerce-checkout .woocommerce-message {
    background: rgba(30, 33, 45, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    color: var(--mg-text) !important;
    margin-bottom: 20px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body .woocommerce-checkout .woocommerce-message::before {
    color: #10B981 !important;
}

[data-theme="light"] .woocommerce-checkout .woocommerce-message {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   AFFILIATE PORTAL PAGE — GLASSMORPHISM REDESIGN
   ============================================================ */
/* Portal page title */
body .uap-affiliate-portal .entry-title,
body .affiliate-portal .entry-title,
body .page-template-default h1.entry-title {
    font-size: 2rem;
    font-weight: 800;
}

/* Portal profile/banner section */
body .uap-profile-box,
body .uap-user-page-profile,
body .uap-affiliate-profile-box {
    background: var(--mg-glass-strong) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow: hidden;
    margin-bottom: 24px;
}

[data-theme="light"] .uap-profile-box,
[data-theme="light"] .uap-user-page-profile,
[data-theme="light"] .uap-affiliate-profile-box {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Portal stats/dashboard cards */
body .uap-profile-box-item,
body .uap-overview-item,
body .uap-dashboard-item {
    background: rgba(30, 33, 45, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    color: var(--mg-text) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body .uap-profile-box-item:hover,
body .uap-overview-item:hover,
body .uap-dashboard-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .uap-profile-box-item,
[data-theme="light"] .uap-overview-item,
[data-theme="light"] .uap-dashboard-item {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Portal stats number values */
body .uap-profile-box-item .uap-profile-box-item__value,
body .uap-overview-item h3,
body .uap-dashboard-item h3,
body .uap-dashboard-item .uap-dashboard-value {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: var(--mg-accent-1) !important;
}

/* Portal tabs/navigation */
body .uap-ap-tabs,
body .uap-profile-tabs {
    background: rgba(30, 33, 45, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

body .uap-ap-tabs a,
body .uap-profile-tabs a,
body .uap-ap-tabs .uap-ap-tab {
    padding: 10px 18px !important;
    border-radius: 8px !important;
    color: var(--mg-text-soft) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: var(--mg-ease) !important;
}

body .uap-ap-tabs a:hover,
body .uap-profile-tabs a:hover,
body .uap-ap-tabs .uap-ap-tab:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--mg-text) !important;
}

body .uap-ap-tabs a.uap-ap-tab-active,
body .uap-profile-tabs a.active,
body .uap-ap-tabs .uap-ap-tab.active {
    background: var(--mg-accent-gradient) !important;
    color: var(--mg-bg-deep) !important;
}

[data-theme="light"] .uap-ap-tabs,
[data-theme="light"] .uap-profile-tabs {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Portal links */
body .uap-ap-overview-link a,
body .uap-dashboard-item a {
    color: var(--mg-accent-1) !important;
    text-decoration: none !important;
    font-weight: 600;
}

/* Portal text */
body .uap-ap-content,
body .uap-ap-content p,
body .uap-ap-content span,
body .uap-ap-content div,
body .uap-ap-content h1,
body .uap-ap-content h2,
body .uap-ap-content h3,
body .uap-ap-content h4,
body .uap-ap-content label {
    color: var(--mg-text) !important;
}

/* Portal tables */
body .uap-ap-content table,
body .uap-ap-content .uap-ap-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: rgba(30, 33, 45, 0.4) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

body .uap-ap-content table th {
    background: var(--mg-accent-gradient) !important;
    color: var(--mg-bg-deep) !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
    text-align: left;
}

body .uap-ap-content table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: var(--mg-text) !important;
}

[data-theme="light"] .uap-ap-content table,
[data-theme="light"] .uap-ap-content .uap-ap-table {
    background: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .uap-ap-content table td {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* Portal buttons */
body .uap-ap-content .button,
body .uap-ap-content input[type="submit"],
body .uap-ap-content .uap-btn {
    background: var(--mg-accent-gradient) !important;
    color: var(--mg-bg-deep) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body .uap-ap-content .button:hover,
body .uap-ap-content input[type="submit"]:hover,
body .uap-ap-content .uap-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Portal form inputs */
body .uap-ap-content input[type="text"],
body .uap-ap-content input[type="email"],
body .uap-ap-content input[type="url"],
body .uap-ap-content input[type="password"],
body .uap-ap-content textarea,
body .uap-ap-content select {
    background: rgba(30, 33, 45, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    color: var(--mg-text) !important;
    font-family: var(--mg-font) !important;
}

[data-theme="light"] .uap-ap-content input[type="text"],
[data-theme="light"] .uap-ap-content input[type="email"],
[data-theme="light"] .uap-ap-content input[type="url"],
[data-theme="light"] .uap-ap-content input[type="password"],
[data-theme="light"] .uap-ap-content textarea,
[data-theme="light"] .uap-ap-content select {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================
   MY ACCOUNT PAGE — REDIRECT TO PORTAL FOR LOGGED-IN USERS
   ============================================================ */
/* Hide default WooCommerce My Account nav (since Portal is better) */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    display: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
}

/* My Account text colors */
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content p,
body.woocommerce-account .woocommerce-MyAccount-content a,
body.woocommerce-account .woocommerce-MyAccount-content span {
    color: var(--mg-text) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--mg-accent-1) !important;
}

/* ============================================================
   WOOCOMMERCE FORM FIELDS — DARK/LIGHT MODE SUPPORT
   ============================================================ */
/* All form inputs, selects, and textareas */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="url"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="number"],
.woocommerce-page input[type="password"],
.woocommerce-page select,
.woocommerce-page textarea,
#billing_phone,
#billing_email,
#order_comments {
    background: var(--mg-input-bg) !important;
    border: 1px solid var(--mg-input-border) !important;
    color: var(--mg-input-text) !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 12px 16px !important;
    font-family: var(--mg-font) !important;
    font-size: 14px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-page input:focus,
.woocommerce-page select:focus,
.woocommerce-page textarea:focus {
    border-color: var(--mg-accent-1) !important;
    box-shadow: 0 0 0 3px rgba(197, 160, 58, 0.15) !important;
    outline: none !important;
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
    color: var(--mg-input-placeholder) !important;
}

/* Labels */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce h3,
.woocommerce h2 {
    color: var(--mg-text) !important;
}

/* ============================================================
   WOOCOMMERCE CHECKOUT PAGE
   ============================================================ */
/* Checkout form wrapper */
.woocommerce-checkout .woocommerce {
    color: var(--mg-text) !important;
}

/* Coupon bar */
.woocommerce-checkout .woocommerce-info {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-top: 3px solid var(--mg-accent-1) !important;
    color: var(--mg-text) !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 14px 20px !important;
}

.woocommerce-checkout .woocommerce-info a {
    color: var(--mg-accent-1) !important;
}

/* Billing / Shipping sections */
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    background: var(--mg-glass) !important;
    backdrop-filter: blur(var(--mg-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius) !important;
    padding: 28px !important;
}

/* Order review / summary section */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    color: var(--mg-text) !important;
}

.woocommerce-checkout #order_review {
    background: var(--mg-glass) !important;
    backdrop-filter: blur(var(--mg-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius) !important;
    padding: 28px !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table {
    background: transparent !important;
    color: var(--mg-text) !important;
    border: none !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    color: var(--mg-text) !important;
    border-bottom: 1px solid var(--mg-glass-border) !important;
    padding: 12px 8px !important;
    background: transparent !important;
}

.woocommerce-checkout-review-order-table thead th {
    color: var(--mg-text-soft) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--mg-accent-1) !important;
    border-top: 2px solid var(--mg-glass-border) !important;
}

/* Payment methods */
.woocommerce-checkout #payment {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius) !important;
    padding: 20px !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--mg-glass-border) !important;
    padding-bottom: 16px !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
    color: var(--mg-text) !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    color: var(--mg-text) !important;
    font-weight: 500 !important;
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--mg-glass-strong) !important;
    color: var(--mg-text-soft) !important;
    border-radius: var(--mg-radius-sm) !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--mg-glass-strong) !important;
}

/* Place order button */
.woocommerce-checkout #place_order {
    background: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: var(--mg-font) !important;
    cursor: pointer !important;
    transition: var(--mg-ease) !important;
    width: 100% !important;
}

.woocommerce-checkout #place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(197, 160, 58, 0.35) !important;
}

/* ============================================================
   WOOCOMMERCE CART PAGE
   ============================================================ */
/* Cart table */
.woocommerce-cart table.shop_table {
    background: var(--mg-glass) !important;
    backdrop-filter: blur(var(--mg-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius) !important;
    color: var(--mg-text) !important;
}

.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
    color: var(--mg-text) !important;
    border-bottom: 1px solid var(--mg-glass-border) !important;
}

.woocommerce-cart table.shop_table td.product-name a {
    color: var(--mg-text) !important;
    font-weight: 600 !important;
}

.woocommerce-cart table.shop_table td.product-name a:hover {
    color: var(--mg-accent-1) !important;
}

/* Cart quantity input */
.woocommerce-cart .quantity input.qty {
    background: var(--mg-input-bg) !important;
    border: 1px solid var(--mg-input-border) !important;
    color: var(--mg-input-text) !important;
    border-radius: var(--mg-radius-sm) !important;
    text-align: center !important;
    width: 60px !important;
}

/* Cart totals */
.woocommerce-cart .cart_totals {
    background: var(--mg-glass) !important;
    backdrop-filter: blur(var(--mg-glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius) !important;
    padding: 20px !important;
}

.woocommerce-cart .cart_totals h2 {
    color: var(--mg-text) !important;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    color: var(--mg-text) !important;
    border-bottom: 1px solid var(--mg-glass-border) !important;
}

/* Update cart / Proceed to checkout buttons */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart .wc-proceed-to-checkout a {
    background: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: var(--mg-radius-sm) !important;
    font-weight: 700 !important;
    font-family: var(--mg-font) !important;
    cursor: pointer !important;
    transition: var(--mg-ease) !important;
    text-decoration: none !important;
}

.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart .wc-proceed-to-checkout a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(197, 160, 58, 0.35) !important;
}

/* Remove item (×) button */
.woocommerce-cart table.shop_table td.product-remove a {
    color: #ef4444 !important;
    font-size: 18px !important;
}

/* ============================================================
   WOOCOMMERCE NOTICES & MESSAGES
   ============================================================ */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    color: var(--mg-text) !important;
    border-radius: var(--mg-radius-sm) !important;
}

.woocommerce-message {
    border-top: 3px solid #22c55e !important;
}

.woocommerce-error {
    border-top: 3px solid #ef4444 !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
    background: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: var(--mg-radius-sm) !important;
    font-weight: 600 !important;
}

/* ============================================================
   SIDEBAR LOGIN LINK — HIDE WHEN LOGGED IN
   ============================================================ */
/* Hide the login sidebar menu item when user is already logged in */
body.logged-in .mg-sidebar-nav li a[href*="login"],
body.logged-in .mg-sidebar-nav li a[href*="wp-login"],
body.logged-in .mg-sidebar-nav li a[href*="my-account"] .mg-nav-login-icon {
    display: none !important;
}

/* ============================================================
   FOOTER — FIX OVERLAP ON PORTAL PAGE
   ============================================================ */
.mg-footer {
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   ============================================================ */

/* ── TABLET (≤1024px) ── */
@media (max-width: 1024px) {
    /* Header: show hamburger, truncate user name */
    .mg-menu-toggle {
        display: flex !important;
    }

    .mg-header-user-name {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Single product page — stack image + summary */
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        float: none !important;
        width: 100% !important;
    }

    /* Category tabs: horizontal scroll instead of wrapping */
    .mg-category-tabs,
    .woocommerce .mg-header-nav,
    nav.mg-header-nav {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }

    .mg-category-tabs::-webkit-scrollbar {
        display: none;
    }
}

/* ── PHONE (≤768px) ── */
@media (max-width: 768px) {
    /* Header: compact layout */
    .mg-header {
        height: 56px;
        gap: 8px;
    }

    .mg-header-user-name {
        max-width: 100px;
        font-size: 12px !important;
    }

    /* Hide Orders|Account links on small screens */
    .mg-header-user-wrapper > div > div:last-child {
        display: none !important;
    }

    /* Product cards — better sizing */
    .mg-product-card-title {
        font-size: 13px;
    }

    .mg-product-card-price {
        font-size: 15px;
    }

    .mg-product-card-body {
        padding: 10px 12px;
    }

    .mg-product-card-footer {
        padding: 0 12px 12px;
    }

    .mg-btn {
        padding: 10px 16px;
        font-size: 12px;
    }

    /* Category filter tabs: scroll horizontally */
    .mg-category-tabs,
    .mg-shop-categories {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        padding: 0 8px !important;
    }

    .mg-category-tabs::-webkit-scrollbar,
    .mg-shop-categories::-webkit-scrollbar {
        display: none;
    }

    .mg-category-tabs button,
    .mg-category-tabs a,
    .mg-shop-categories button,
    .mg-shop-categories a {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* WooCommerce checkout: stack form fields */
    .woocommerce-checkout .col2-set,
    .woocommerce-checkout #customer_details {
        display: flex !important;
        flex-direction: column !important;
    }

    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2,
    .woocommerce-checkout #customer_details .col-1,
    .woocommerce-checkout #customer_details .col-2 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
    }

    .woocommerce-checkout #order_review {
        padding: 16px !important;
    }

    /* Checkout place order button */
    .woocommerce-checkout #place_order {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }

    /* WooCommerce cart */
    .woocommerce-cart table.shop_table {
        font-size: 13px !important;
    }

    .woocommerce-cart .cart_totals {
        padding: 14px !important;
    }

    /* Single product page */
    .woocommerce div.product {
        padding: 0 8px !important;
    }

    .woocommerce div.product div.images {
        margin-bottom: 16px !important;
    }

    .woocommerce div.product div.summary {
        padding: 16px !important;
    }

    /* Floating Platinum banner — full width on mobile */
    .mg-platinum-float {
        left: 8px !important;
        right: 8px !important;
        bottom: 72px !important; /* Above bottom nav */
    }

    .mg-platinum-float-inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Bottom nav safe area for modern phones */
    .mg-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 8px) !important;
    }

    /* Footer — push above bottom nav */
    .mg-footer {
        padding-bottom: 80px !important;
    }

    /* Affiliate Portal — responsive */
    .uap-account-page-wrapper,
    .uap-ap-wrap {
        padding: 8px !important;
    }

    /* Wallet grid */
    .mg-wallet-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── SMALL PHONE (≤480px) ── */
@media (max-width: 480px) {
    /* Even smaller header */
    .mg-header-user-name {
        display: none !important;
    }

    /* Switch product grid to single column for tiny screens */
    .mg-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .mg-product-card-img {
        padding: 12px;
    }

    /* Hero — tight padding */
    .mg-hero {
        padding: 16px !important;
    }

    .mg-hero h2 {
        font-size: 16px !important;
    }

    .mg-hero p {
        font-size: 12px !important;
    }

    /* Footer text */
    .mg-footer p {
        font-size: 11px;
    }
}
/* ============================================================
   SIDEBAR (Desktop only)
   ============================================================ */
.mg-sidebar {
    display: flex;
    flex-direction: column;
    width: 80px;
    background: var(--mg-glass);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--mg-glass-border);
    border-radius: 24px;
    padding: 20px 0;
    position: fixed;
    top: 20px;
    left: 20px;
    height: calc(100vh - 40px);
    z-index: 100;
    overflow-x: hidden;
    transition: width 0.4s ease;
}

.mg-sidebar:hover {
    width: var(--mg-sidebar-w);
}

/* Hide sidebar on mobile */
@media (max-width: 1024px) {
    .mg-sidebar {
        display: none !important;
    }
}

/* ============================================================
   HEADER NAVIGATION (Mobile only)
   ============================================================ */
.mg-header-nav {
    display: flex;
    align-items: center;
    margin-left: 20px;
    flex: 1;
}

/* Hide header nav on desktop, show on mobile */
@media (min-width: 1025px) {
    .mg-header-nav {
        display: none !important;
    }
    .mg-menu-toggle {
        display: none !important;
    }
}

/* Mobile styles */
@media (max-width: 1024px) {
    .mg-header-nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        background: var(--mg-glass-strong);
        backdrop-filter: blur(20px);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        padding: 80px 20px 20px;
        overflow-y: auto;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
        border-right: 1px solid var(--mg-glass-border);
        margin-left: 0;
        flex: none;
        display: block;
    }

    .mg-header-nav.open {
        transform: translateX(0);
    }

    .mg-header-nav .mg-header-nav-list,
    .mg-header-nav ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mg-header-nav .mg-header-nav-list a,
    .mg-header-nav ul a {
        display: block !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--mg-text) !important;
        border-radius: var(--mg-radius-sm) !important;
        text-align: center;
    }

    .mg-header-nav .mg-header-nav-list a:hover,
    .mg-header-nav ul a:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--mg-accent-1) !important;
    }

    .mg-header-nav .mg-header-nav-list a.active,
    .mg-header-nav ul a.active {
        background: var(--mg-accent-gradient) !important;
        color: #1a1a2e !important;
        font-weight: 700 !important;
    }

    /* Mobile logo inside drawer */
    .mg-mobile-logo {
        display: block !important;
        text-align: center;
        padding: 0 0 30px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--mg-glass-border);
    }

    .mg-mobile-logo img {
        max-width: 80px;
        height: auto;
        margin: 0 auto;
    }

    /* Hamburger button */
    .mg-menu-toggle {
        display: flex !important;
    }
}

/* ============================================================
   MAIN CONTENT AREA - Adjust for sidebar on desktop
   ============================================================ */
.mg-main-area {
    margin-left: 120px;
    transition: margin-left 0.4s ease;
}

@media (max-width: 1024px) {
    .mg-main-area {
        margin-left: 0;
    }
}
/* ============================================================
   SINGLE PRODUCT PAGE — THEME INTEGRATION
   ============================================================ */
/* Product image container */
.woocommerce div.product div.images {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius) !important;
    padding: 20px !important;
    overflow: hidden;
}

/* Product summary */
.woocommerce div.product div.summary {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius) !important;
    padding: 28px !important;
}

.woocommerce div.product .product_title {
    color: var(--mg-text) !important;
    font-family: var(--mg-font) !important;
    font-weight: 700 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--mg-accent-1) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

.woocommerce div.product .product_meta {
    color: var(--mg-text-soft) !important;
}

.woocommerce div.product .product_meta a {
    color: var(--mg-accent-1) !important;
}

/* Quantity input on product page */
.woocommerce div.product .quantity input.qty {
    background: var(--mg-input-bg) !important;
    border: 1px solid var(--mg-input-border) !important;
    color: var(--mg-input-text) !important;
    border-radius: var(--mg-radius-sm) !important;
    text-align: center !important;
}

/* Add to cart button */
.woocommerce div.product button.single_add_to_cart_button {
    background: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--mg-font) !important;
    cursor: pointer !important;
    transition: var(--mg-ease) !important;
}

.woocommerce div.product button.single_add_to_cart_button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(197, 160, 58, 0.35) !important;
}

/* Related products heading */
.woocommerce div.product .related.products h2,
.woocommerce div.product .upsells.products h2 {
    color: var(--mg-text) !important;
    font-weight: 700 !important;
}

/* Tabs (Description, Reviews, etc.) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: transparent !important;
    border: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) var(--mg-radius-sm) 0 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--mg-text-soft) !important;
    font-weight: 500 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--mg-glass-strong) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--mg-text) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: 0 0 var(--mg-radius-sm) var(--mg-radius-sm) !important;
    padding: 20px !important;
    color: var(--mg-text) !important;
}

/* ============================================================
   PLATINUM BUTTON — CONTRAST FIX
   ============================================================ */
/* Fix gold text on gold background — use dark text for readability */
a[href*="platinum"].mg-btn-primary,
a.mg-platinum-btn,
.wp-block-button a[href*="platinum"] {
    color: #1a1a2e !important;
    font-weight: 700 !important;
}

/* Specific fix for Platinum offers page CTA buttons */
.mg-platinum-offer-btn,
.page-template-platinum a.mg-btn,
.single-page a.mg-btn-primary[href*="platinum"],
.wp-block-buttons .wp-block-button a {
    background: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: var(--mg-radius-sm) !important;
}

/* WP Block buttons in general */
.wp-block-button__link {
    background: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    border-radius: var(--mg-radius-sm) !important;
    font-weight: 600 !important;
    font-family: var(--mg-font) !important;
    padding: 12px 24px !important;
}

/* ============================================================
   CHECKOUT — BILLING SECTION INPUT FIX (Grey container)
   ============================================================ */
/* Target the WooCommerce block and classic checkout billing inputs */
.wc-block-checkout__billing-fields input,
.wc-block-checkout__billing-fields select,
.wc-block-checkout__billing-fields textarea,
.wc-block-checkout__shipping-fields input,
.wc-block-checkout__shipping-fields select,
.woocommerce-billing-fields input,
.woocommerce-billing-fields select,
.woocommerce-billing-fields textarea,
.woocommerce-shipping-fields input,
.woocommerce-shipping-fields select {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1a1a2e !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 12px 16px !important;
    font-family: var(--mg-font) !important;
    font-size: 14px !important;
}

/* Dark mode: override with darker inputs */
[data-theme="dark"] .woocommerce-billing-fields input,
[data-theme="dark"] .woocommerce-billing-fields select,
[data-theme="dark"] .woocommerce-billing-fields textarea,
[data-theme="dark"] .woocommerce-shipping-fields input,
[data-theme="dark"] .woocommerce-shipping-fields select,
[data-theme="dark"] .wc-block-checkout__billing-fields input,
[data-theme="dark"] .wc-block-checkout__shipping-fields input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--mg-text) !important;
}

/* Billing section container itself */
.woocommerce-billing-fields__field-wrapper,
.wc-block-checkout__billing-fields {
    color: var(--mg-text) !important;
}

/* ============================================================
   AFFILIATE PORTAL — MOBILE LAYOUT FIX
   ============================================================ */
/* Full-width portal on mobile */
@media (max-width: 768px) {
    /* Portal profile card — fill width */
    .uap-account-overview,
    .uap-ap-overview-wrap,
    .uap-profile-card,
    #uap_account_page,
    .uap-ap-wrap {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
    }

    /* Prevent word-breaking in profile text */
    .uap-ap-wrap *,
    .uap-account-overview * {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }

    /* Portal cover/profile image area */
    .uap-profile-cover,
    .uap-ap-profile-cover {
        width: 100% !important;
        height: 180px !important;
        border-radius: var(--mg-radius) var(--mg-radius) 0 0 !important;
    }

    /* Profile details text */
    .uap-ap-profile-details,
    .uap-profile-info {
        padding: 12px !important;
        font-size: 13px !important;
    }

    /* Portal dashboard links grid */
    .uap-ap-dashboard-links,
    .uap-dashboard-widgets {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* ============================================================
   FOOTER — PREVENT OVERLAP ON ALL PAGES
   ============================================================ */
.mg-footer {
    text-align: center !important;
    padding: 16px 20px !important;
    font-size: 12px !important;
    color: var(--mg-text-muted) !important;
    border-top: 1px solid var(--mg-glass-border) !important;
    margin-top: 20px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* On mobile, extra bottom padding for bottom nav */
@media (max-width: 1024px) {
    .mg-footer {
        padding-bottom: 80px !important;
    }
}

/* ============================================================
   CHECKOUT ORDER NOTES — DARK MODE TEXTAREA FIX
   ============================================================ */
.woocommerce-checkout textarea,
.woocommerce-checkout #order_comments,
.woocommerce-additional-fields textarea,
#order_comments {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--mg-text, #e0e0e0) !important;
    border-radius: var(--mg-radius-sm, 8px) !important;
    padding: 12px 16px !important;
    font-family: var(--mg-font) !important;
    font-size: 14px !important;
    resize: vertical !important;
}

/* Light mode: order notes textarea */
[data-theme="light"] .woocommerce-checkout textarea,
[data-theme="light"] #order_comments {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1a1a2e !important;
}

/* ============================================================
   CHECKOUT — WHITE BOX FIXES (shipping-fields, additional-fields)
   ============================================================ */
/* The white bar above "Additional information" */
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
    background: transparent !important;
}

/* Inner wrappers that may have white backgrounds */
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    background: transparent !important;
}

/* Heading inside additional fields */
.woocommerce-additional-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-billing-fields h3 {
    color: var(--mg-text) !important;
    font-family: var(--mg-font) !important;
}

/* ============================================================
   CHECKOUT — PAYMENT METHODS BOX DARK THEME
   ============================================================ */
.woocommerce-checkout-payment,
#payment {
    background: var(--mg-glass, rgba(255,255,255,0.04)) !important;
    border: 1px solid var(--mg-glass-border, rgba(255,255,255,0.08)) !important;
    border-radius: var(--mg-radius, 16px) !important;
    color: var(--mg-text, #e0e0e0) !important;
}

/* Payment method labels */
.woocommerce-checkout-payment .wc_payment_method label {
    color: var(--mg-text) !important;
}

/* Payment description box */
.woocommerce-checkout-payment .payment_box {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--mg-text-soft, #b0b0b0) !important;
    border-radius: var(--mg-radius-sm, 8px) !important;
}

/* Payment icons backgrounds */
.woocommerce-checkout-payment .payment_method_wctelr img,
.woocommerce-checkout-payment .payment_method_wc_telr_apple_pay img {
    filter: brightness(0.85) !important;
    border-radius: 4px !important;
}

/* Place Order button */
.woocommerce-checkout #place_order {
    background: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: var(--mg-radius-sm, 8px) !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: var(--mg-font) !important;
    cursor: pointer !important;
    transition: var(--mg-ease) !important;
    width: 100% !important;
}

.woocommerce-checkout #place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(197, 160, 58, 0.35) !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table,
.woocommerce table.shop_table {
    color: var(--mg-text) !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--mg-text) !important;
}

/* Terms and privacy text */
.woocommerce-terms-and-conditions-wrapper {
    color: var(--mg-text-soft) !important;
}

.woocommerce-terms-and-conditions-wrapper a {
    color: var(--mg-accent-1) !important;
}

/* ============================================================
   MY ACCOUNT — DASHBOARD DARK THEME
   ============================================================ */
/* WooCommerce account page */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: transparent !important;
    color: var(--mg-text) !important;
}

/* Navigation links */
.woocommerce-MyAccount-navigation ul li a {
    color: var(--mg-text-soft) !important;
    padding: 10px 16px !important;
    display: block !important;
    border-radius: var(--mg-radius-sm) !important;
    transition: var(--mg-ease) !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--mg-accent-1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Dashboard text */
.woocommerce-account .woocommerce-MyAccount-content p {
    color: var(--mg-text) !important;
}

.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--mg-accent-1) !important;
}

/* ============================================================
   PLATINUM UPGRADE BANNER — DARK THEME
   ============================================================ */
/* Any white upgrade/promo banner on the site */
.woocommerce-info,
.woocommerce-message,
.platinum-cta-banner,
.upgrade-platinum-banner,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    background: var(--mg-glass, rgba(255,255,255,0.04)) !important;
    border: 1px solid var(--mg-glass-border, rgba(255,255,255,0.08)) !important;
    border-left: 4px solid var(--mg-accent-1, #c5a03a) !important;
    color: var(--mg-text) !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 16px 20px !important;
}

/* Promo banner links */
.woocommerce-info a,
.woocommerce-message a {
    color: var(--mg-accent-1) !important;
    font-weight: 600 !important;
}

/* ============================================================
   AFFILIATE PORTAL — FULL WIDTH + FOOTER FIX
   ============================================================ */
/* Force portal content to fill entire width */
.uap-user-page-content,
.uap-ap-wrap,
#uap_account_page,
.uap-account-overview,
.uap-ap-overview-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Profile info text — prevent bad word breaks */
.uap-public-affiliate-profile-info,
.uap-ap-profile-details {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Portal navigation tabs */
.uap-ap-tabs,
.uap-dashboard-tabs {
    background: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) !important;
    overflow: hidden !important;
}

.uap-ap-tabs a,
.uap-dashboard-tabs a {
    color: var(--mg-text-soft) !important;
    padding: 10px 16px !important;
}

.uap-ap-tabs a.active,
.uap-ap-tabs a.active,
.uap-ap-tabs a:hover,
.uap-dashboard-tabs a.active {
    color: var(--mg-accent-1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ── CRITICAL RESPONSIVE AFFILIATE LAYOUT OVERRIDE (Tablets & Phones) ── */
@media (max-width: 1024px) {
    /* Completely dismantle UAP table/flex grids on mobile/tablet */
    .uap-user-page,
    .uap-ap-wrap,
    .uap-user-page-content,
    .uap-ap-menu,
    .uap-ap-content,
    .uap-template-4,
    [class*="uap-template-"],
    [class*="uap-ap-theme-"],
    .uap-profile-box-wrapper,
    .uap-banner-wrapper,
    .uap-ap-top-header {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        position: relative !important;
        table-layout: auto !important;
    }

    /* Target UAP structural elements explicitly to prevent split columns */
    .mg-main-area,
    .mg-content,
    .entry-content,
    article.page {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Force the avatar/profile banner to span horizontally, not vertically */
    .uap-ap-menu {
        margin-bottom: 20px !important;
        height: auto !important;
    }

    .uap-avatar-wrap,
    .uap-ap-profile-image {
        margin: 0 auto !important;
    }
}

/* ============================================================
   ABSOLUTE FINAL FIXES: WOOCOMMERCE BLOCKS + WHITE BOXES
   ============================================================ */
/* Aggressive dark mode for WooCommerce Checkout Blocks */
.wc-block-components-panel,
.wc-block-components-checkout-step,
.wc-block-components-checkout-step__container,
.wc-block-components-checkout-step__content,
.wc-block-checkout__shipping-fields,
.wc-block-checkout__additional-fields,
.wc-block-checkout__payment-method,
.wc-block-components-review-list-item,
.wc-block-components-totals-item,
.wc-block-components-panel__content,
.is-large.wc-block-cart .wc-block-cart-items,
.is-large.wc-block-cart .wc-block-cart__totals-title,
.wc-block-components-notice-banner,
.wc-block-checkout__actions_row {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mg-text) !important;
}

/* Any remaining white backgrounds in Checkout/Cart/Account */
.woocommerce, 
.woocommerce-page,
.woocommerce-checkout,
.woocommerce-cart,
.woocommerce-account {
    --wp--preset--color--base: transparent !important;
    --wp--preset--color--contrast: var(--mg-text) !important;
}

/* Force text colors in blocks */
.wc-block-components-checkout-step__title,
.wc-block-components-panel__title,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    color: var(--mg-text) !important;
}

/* Platinum Upgrade Banner / WooCommerce Notices */
.woocommerce-NoticeGroup,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    color: var(--mg-text) !important;
}

/* ============================================================
   CART TOTALS WIDGET OVERFLOW FIX ON MOBILE & TABLET
   ============================================================ */
@media (max-width: 1024px) {
    .woocommerce-cart .cart_totals table.shop_table th,
    .woocommerce-cart .cart_totals table.shop_table td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border-radius: 0 !important;
        padding: 12px !important;
    }

    .woocommerce-cart .cart_totals table.shop_table th {
        border-radius: var(--mg-radius-sm) var(--mg-radius-sm) 0 0 !important;
    }

    .woocommerce-cart .cart_totals table.shop_table td {
        border-radius: 0 0 var(--mg-radius-sm) var(--mg-radius-sm) !important;
        margin-bottom: 12px !important;
        border-bottom: none !important;
    }
}

/* ============================================================
   AFFILIATE PORTAL COMPREHENSIVE DARK MODE & SUBPAGES
   ============================================================ */
/* Maximum Specificity Text Visibility Override */
body .uap-ap-wrap, 
body .uap-user-page-wrapper,
body .uap-ap-wrap label, 
body .uap-ap-wrap span, 
body .uap-ap-wrap p, 
body .uap-ap-wrap div, 
body .uap-ap-wrap strong,
body .uap-ap-wrap h1, body .uap-ap-wrap h2, body .uap-ap-wrap h3, 
body .uap-ap-wrap h4, body .uap-ap-wrap h5, body .uap-ap-wrap h6,
body .uap-labels, body .uap-form-label, body .uap-form-text,
body .uap-ap-field-label, body .uap-profile-name, body .uap-account-title,
body .uap-page-title, body .uap-list-item, body .uap-list-header {
    color: var(--mg-text) !important;
}

/* Sidebar & Navigation Menus */
body .uap-ap-menu,
body .uap-ap-menu-item a,
body .uap-ap-submenu-item a,
body .uap-ap-menu-sign,
body .uap-ap-menu-tab-item {
    color: var(--mg-text-soft) !important;
}

body .uap-ap-menu-item a:hover,
body .uap-ap-menu-item-selected a,
body .uap-ap-menu-tab-item-selected a,
body .uap-ap-menu-item:hover > a,
body .uap-ap-menu-item-selected > a {
    color: var(--mg-accent-1) !important;
    background: transparent !important;
}

/* Force UAP active tabs to use the gold gradient instead of default cyan */
body .uap-ap-menu-tab-item-selected,
body .uap-ap-menu-item-selected {
    background: var(--mg-accent-gradient) !important;
    border-radius: var(--mg-radius-sm) !important;
}

body .uap-ap-menu-tab-item-selected a,
body .uap-ap-menu-item-selected a {
    color: #1a1a2e !important;
    font-weight: 700 !important;
}

/* Specific elements needing accent colors */
body .uap-ap-wrap a:not(.uap-btn):not(.button):not(.mg-btn),
body .uap-dashboard-widget h4 {
    color: var(--mg-accent-1) !important;
}

/* STRIP WHITE BACKGROUNDS: Glassmorphism panels, stuffboxes, forms */
body .uap-ap-wrap .uap-profile-box-wrapper,
body .uap-ap-wrap .uap-dashboard-widget,
body .uap-ap-wrap .uap-ap-tabs,
body .uap-ap-wrap .uap-dashboard-tabs,
body .uap-ap-wrap .uap-account-overview,
body .uap-ap-wrap .uap-ap-content,
body .uap-ap-wrap .uap-stuffbox,
body .uap-ap-wrap .uap-special-box,
body .uap-ap-wrap .uap-banners-wrapp,
body .uap-ap-wrap .uap-wallet-wrap,
body .uap-ap-wrap .uap-register-form,
body .uap-ap-wrap .uap-form,
body .uap-ap-wrap .uap-box,
body .uap-ap-wrap .uap-ap-field,
body .uap-ap-wrap .inside,
body .uap-ap-wrap .uap-payment-box,
body form.uap-edit-account-form {
    background: var(--mg-glass) !important;
    background-color: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) !important;
    box-shadow: none !important;
}

/* Remove internal borders separating form sections that look bad in dark mode */
body .uap-form-line, body .uap-inside-box {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Input fields inside the portal overrides (Strip white boxes) */
body .uap-ap-wrap input[type="text"],
body .uap-ap-wrap input[type="password"],
body .uap-ap-wrap input[type="email"],
body .uap-ap-wrap input[type="number"],
body .uap-ap-wrap select,
body .uap-ap-wrap textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) !important;
    color: var(--mg-text) !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-shadow: none !important;
}

/* Placeholder styling inside inputs */
body .uap-ap-wrap input::placeholder,
body .uap-ap-wrap textarea::placeholder {
    color: var(--mg-text-soft) !important;
    opacity: 0.6 !important;
}

/* Portal Tables */
body .uap-ap-wrap table {
    background: var(--mg-glass) !important;
    background-color: var(--mg-glass) !important;
    border: 1px solid var(--mg-glass-border) !important;
    border-radius: var(--mg-radius-sm) !important;
    overflow: hidden !important;
    width: 100% !important;
}

body .uap-ap-wrap table th {
    background: var(--mg-accent-gradient) !important;
    background-color: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    border: none !important;
    padding: 12px 16px !important;
}

body .uap-ap-wrap table td {
    color: var(--mg-text-soft) !important;
    border-bottom: 1px solid var(--mg-glass-border) !important;
    padding: 12px 16px !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Pagination */
body .uap-pagination {
    margin-top: 20px !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
}

body .uap-pagination a,
body .uap-pagination span {
    background: var(--mg-glass) !important;
    background-color: var(--mg-glass) !important;
    color: var(--mg-text) !important;
    border: 1px solid var(--mg-glass-border) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
}

body .uap-pagination span.current {
    background: var(--mg-accent-gradient) !important;
    background-color: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    font-weight: bold !important;
}

/* Subpage Buttons (Save Settings, Generate Link, Submit) */
body .uap-ap-wrap input[type="submit"],
body .uap-ap-wrap button,
body .uap-ap-wrap .uap-btn,
body .uap-ap-wrap .button,
body .uap-ap-wrap .btn {
    background: var(--mg-accent-gradient) !important;
    background-color: var(--mg-accent-gradient) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: var(--mg-radius-sm) !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

body .uap-ap-wrap input[type="submit"]:hover,
body .uap-ap-wrap button:hover,
body .uap-ap-wrap .uap-btn:hover {
    box-shadow: 0 4px 15px rgba(197, 160, 58, 0.3) !important;
    transform: translateY(-2px) !important;
}
.woocommerce-info,
.woocommerce-message,
.uap-banner,
.uap-ap-banner,
.discount-banner,
div[class*="banner"] {
    background-color: var(--mg-glass, rgba(255,255,255,0.04)) !important;
    color: var(--mg-text) !important;
    border: 1px solid var(--mg-glass-border, rgba(255,255,255,0.08)) !important;
}

/* Affiliate Portal Mobile Layout + Footer Fix */
@media (max-width: 768px) {
    /* Nuke any side-by-side flex/table layouts from UAP core */
    .uap-user-page,
    .uap-ap-wrap,
    #uap_account_page,
    .uap-public-ap-top-header,
    .uap-ap-side-menu,
    .uap-ap-content-wrapper,
    div[class*="uap-ap-row"],
    div[class*="uap-ap-col"],
    div[class*="uap-profile-"] {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure the main page wrapper doesn't collapse to 0 height */
    .mg-site-main,
    .entry-content,
    article.page {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Fix ALL Profile Text breaking */
    .uap-public-affiliate-profile-info,
    .uap-public-ap-extra-details,
    .uap-public-ap-title,
    .uap-user-page-name,
    .uap-user-page-mess {
        font-size: 14px !important;
        white-space: normal !important;
        word-break: break-word !important; /* Allow normal breaking */
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important;
        position: relative !important;
    }

    /* Target nested text spans to prevent vertical stacking */
    .uap-user-page-name *,
    .uap-user-page-mess * {
        white-space: normal !important;
        word-break: normal !important;
        display: inline-block !important; /* keep text together horizontally */
    }

    /* Center the profile picture on mobile */
    .uap-public-ap-profile-img,
    .uap-user-page-avatar {
        margin: 0 auto 15px auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 120px !important;
        float: none !important;
    }

    }

    /* Fix Footer Overlap Priority (push to bottom) */
    .uap-affiliate-portal-footer,
    .mg-footer,
    .mh-footer,
    footer,
    .site-footer {
        position: relative !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
        margin-top: 60px !important;
        padding-bottom: 90px !important; /* Safe area for bottom nav */
    }


/* ════════════════════════════════════════════════════════════════
 *  18. MEDRARA NATIVE AFFILIATE PORTAL (CUSTOM OVERRIDE)
 * ════════════════════════════════════════════════════════════════ */

.mg-affiliate-portal {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    font-family: inherit;
    color: var(--text-color);
}

/* Glass Panels */
.mg-affiliate-portal .glass-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* 🚀 THEME "FLUSH-FORCE" (Forcing Full Width) */
.mg-affiliate-portal-wrapper,
.mg-affiliate-portal-wrapper .mg-dynamic-page-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Absolute UAP Container Normalization (Preventing Shifts) */
.mg-affiliate-portal div, 
.mg-affiliate-portal section,
.uap-user-page-wrapper,
.uap-ap-wrap,
#uap_account_page,
.uap-public-ap-top-header {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

.mg-affiliate-portal .uap-ap-menu,
.mg-affiliate-portal .uap-public-ap-menu-subtabs {
    display: none !important;
}

.mg-section-header {
    margin-bottom: 25px;
    padding-left: 20px;
    border-left: 4px solid var(--mg-accent-1);
    background: rgba(255, 255, 255, 0.03);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 8px 8px 0;
}

/* Legacy UAP Header Banner Optimization (Refined) */
.uap-user-page-top-wrapper {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    border-left: 5px solid var(--mg-accent-1);
}

.uap-user-page-top-wrapper .uap-left-side {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.uap-user-page-top-wrapper .uap-user-page-avatar img {
    border: 3px solid var(--mg-accent-1) !important;
    padding: 3px !important;
    background: rgba(0,0,0,0.3) !important;
}

.uap-user-page-top-wrapper .uap-middle-side {
    flex: 1 !important;
}

.uap-user-page-top-wrapper .uap-account-page-top-mess {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 5px !important;
}

.uap-user-page-top-wrapper .uap-right-side {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 15px 25px !important;
    border-radius: 12px !important;
    border: 1px solid var(--glass-border) !important;
    text-align: right !important;
}

.uap-user-page-top-wrapper .uap-stats-label {
    color: var(--mg-accent-1) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.uap-user-page-top-wrapper .uap-stats-content {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-top: 2px !important;
}

.mg-section-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Top Bar */
.mg-portal-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.mg-portal-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.mg-portal-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}
.mg-portal-greeting h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}
.mg-portal-rank {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(132, 112, 255, 0.2);
    color: var(--primary-color);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 5px;
}
.mg-quick-stat {
    text-align: right;
}
.mg-stat-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.mg-stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #4CAF50;
}

/* Main Layout (Synchronized Flex Flow) */
.mg-portal-body {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 10px 20px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mg-portal-sidebar {
    position: relative !important;
    flex: 0 0 90px !important;
    width: 90px !important;
    height: auto !important;
    min-height: 600px;
    z-index: 100 !important;
    padding: 15px 5px !important;
    align-self: flex-start;
}

.mg-portal-content {
    flex: 1 !important;
    width: auto !important;
    margin-left: 0 !important; /* Resetting previous hack */
    min-height: calc(100vh - 180px);
    padding: 0 0 50px 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible !important;
}

@media (max-width: 992px) {
    .mg-portal-body {
        flex-direction: column !important;
    }
    .mg-portal-sidebar {
        flex: 0 0 auto !important;
        width: 100% !important;
        flex-direction: row !important;
        display: flex !important;
        overflow-x: auto !important;
        padding: 10px !important;
    }
    .mg-portal-content {
        width: 100% !important;
    }
}

@media (max-width: 992px) {
    .mg-portal-sidebar {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: 10px !important;
    }
    .mg-portal-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .mg-nav-main-link {
        flex-direction: row !important;
        padding: 10px 15px !important;
        white-space: nowrap;
    }
}

/* Sidebar Nav */
.mg-portal-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mg-nav-group {
    border-radius: 8px;
    overflow: hidden;
}
.mg-nav-main-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    border-radius: 12px;
    margin-bottom: 5px;
}
.mg-nav-main-link i {
    font-size: 1.5rem;
    width: auto;
    text-align: center;
}
.mg-nav-main-link span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}
.mg-nav-caret {
    display: none !important; /* Hide caret in mini-sidebar */
}
.mg-nav-group:hover .mg-nav-main-link {
    background: rgba(255, 255, 255, 0.08);
    color: var(--mg-accent-1);
    transform: translateY(-2px);
}
.mg-nav-group.active .mg-nav-main-link {
    background: var(--mg-accent-gradient);
    color: #1a1a2e !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}
.mg-nav-sub {
    display: none !important; /* Hide sub-menus in mini-sidebar for now to keep it clean */
}
.mg-nav-sub li a {
    display: block;
    padding: 10px 15px 10px 47px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.2s ease;
}
.mg-nav-sub li:hover a {
    color: var(--primary-color);
}
.mg-nav-sub li.active a {
    color: #fff;
    background: rgba(255,255,255,0.05);
    border-right: 3px solid var(--primary-color);
}

/* Content Area */
.mg-portal-content {
    background: transparent;
}

/* Dashboard Overview */
.mg-portal-section-header h3 {
    margin: 0 0 20px;
    font-size: 1.4rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 10px;
    color: #fff !important;
}
.mg-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}
.mg-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}
.mg-stat-card.highlight {
    background: linear-gradient(135deg, rgba(82, 0, 255, 0.2), rgba(0, 198, 255, 0.1));
    border-color: rgba(132, 112, 255, 0.4);
}
.mg-stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-color);
}
.mg-stat-card.highlight .mg-stat-icon {
    background: var(--primary-color);
    color: #fff;
}
.mg-stat-data {
    display: flex;
    flex-direction: column;
}
.mg-stat-title {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.mg-stat-number {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-color);
}

/* Activity Details */
.mg-overview-details h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #fff;
}
.mg-activity-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mg-activity-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.mg-activity-row strong {
    color: var(--text-color);
}
.mg-activity-row.highlight-row {
    background: rgba(132, 112, 255, 0.1);
    border: 1px solid rgba(132, 112, 255, 0.2);
}

/* Backwards Compatibility inside custom containers */
.mg-portal-content .uap-ap-wrap {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
 *  LEGACY UAP COMPONENTS FORCED INTO NATIVE GLASSMORPHISM THEME
 * ════════════════════════════════════════════════════════════════ */

.mg-portal-content .uap-profile-box-wrapper {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    padding: 24px !important;
    color: var(--text-color) !important;
    margin-bottom: 20px !important;
}

.mg-portal-content h3, 
.mg-portal-content h4, 
.mg-portal-content .uap-ap-title {
    border-bottom: 1px solid var(--glass-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Tables Injection inside Portal Content */
.mg-portal-content table.uap-account-table {
    border: none !important;
    background: transparent !important;
}
.mg-portal-content table.uap-account-table thead th {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
    border: none !important;
    border-bottom: 2px solid rgba(255,255,255,0.1) !important;
    padding: 15px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
}
.mg-portal-content table.uap-account-table tbody td {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 15px !important;
    color: var(--text-muted) !important;
}
.mg-portal-content table.uap-account-table tbody tr:hover td {
    background: rgba(132, 112, 255, 0.05) !important;
}

/* Legacy Inputs */
.mg-portal-content input[type="text"],
.mg-portal-content input[type="password"],
.mg-portal-content input[type="email"],
.mg-portal-content select,
.mg-portal-content textarea {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    transition: 0.3s ease !important;
}
.mg-portal-content input:focus,
.mg-portal-content select:focus,
.mg-portal-content textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(132, 112, 255, 0.2) !important;
    outline: none !important;
}

/* Legacy Buttons */
.mg-portal-content input[type="submit"],
.mg-portal-content button,
.mg-portal-content .uap-ap-button {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: 0.3s ease !important;
}
.mg-portal-content input[type="submit"]:hover,
.mg-portal-content button:hover,
.mg-portal-content .uap-ap-button:hover {
    background: #6a5acd !important;
    box-shadow: 0 4px 15px rgba(132, 112, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Extra Info Wrappers */
.mg-portal-content .uap-info-box-wrap {
    background: rgba(0, 198, 255, 0.05) !important;
    border-left: 4px solid var(--primary-color) !important;
    padding: 15px !important;
    border-radius: 0 8px 8px 0 !important;
    color: var(--text-muted) !important;
    margin-bottom: 20px !important;
}

/* Responsiveness */
@media screen and (max-width: 900px) {
    .mg-portal-body {
        grid-template-columns: 1fr;
    }
    .mg-portal-sidebar {
        margin-bottom: 20px;
    }
    .mg-portal-top-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .mg-quick-stat {
        text-align: left;
    }
    
    /* Make tables responsive */
    .mg-portal-content table.uap-account-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}
/* ============================================================
   HEADER NAVIGATION MENU (Desktop & Mobile)
   ============================================================ */
.mg-header-nav {
    display: flex;
    align-items: center;
    margin-left: 20px;
    flex: 1;
}

.mg-header-nav .mg-header-nav-list,
.mg-header-nav ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mg-header-nav .mg-header-nav-list li,
.mg-header-nav ul li {
    margin: 0;
    padding: 0;
}

.mg-header-nav .mg-header-nav-list a,
.mg-header-nav ul a {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--mg-radius-pill);
    font-size: 14px;
    font-weight: 500;
    color: var(--mg-text-soft);
    text-decoration: none;
    transition: all 0.2s ease;
}

.mg-header-nav .mg-header-nav-list a:hover,
.mg-header-nav ul a:hover {
    color: var(--mg-text);
    background: rgba(255, 255, 255, 0.05);
}

.mg-header-nav .mg-header-nav-list a.active,
.mg-header-nav ul a.active {
    background: var(--mg-accent-gradient);
    color: #1a1a2e;
}
/* Mobile menu */
@media (max-width: 1024px) {
    .mg-menu-toggle {
        display: flex !important;
    }
    .mg-header-nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: var(--mg-glass-strong);
        backdrop-filter: blur(20px);
        transition: left 0.3s ease;
        z-index: 1000;
        padding: 80px 20px 20px;
        overflow-y: auto;
    }
    .mg-header-nav.open {
        left: 0;
    }
}
/* Mobile menu button (hamburger) */
.mg-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    gap: 5px;
    z-index: 1001;
}

.mg-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--mg-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mg-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mg-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mg-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MOBILE DRAWER - Complete Fix
   ============================================================ */
@media (max-width: 1024px) {
    .mg-header-nav {
        position: fixed;
        top: 0;
        left: -100%; /* Start fully hidden */
        width: 280px;
        height: 100vh;
        background: var(--mg-glass-strong);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transform: none; /* Remove transform, use left position */
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        overflow-x: hidden; /* Prevent horizontal scroll */
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
        border-right: 1px solid var(--mg-glass-border);
        display: flex;
        flex-direction: column;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 16px 16px 0; /* Rounded corners on right side */
    }

    /* When open, slide in */
    .mg-header-nav.open {
        left: 0; /* Slide in completely */
    }

    /* Logo at the TOP */
    .mg-mobile-logo {
        display: block !important;
        text-align: center;
        padding: 40px 20px 20px;
        border-bottom: 1px solid var(--mg-glass-border);
        margin-bottom: 20px;
        flex-shrink: 0;
    }

    .mg-mobile-logo img {
        max-width: 100px;
        height: auto;
        margin: 0 auto;
    }

    /* Menu links with icons - scrollable area */
    .mg-header-nav .mg-header-nav-list,
    .mg-header-nav ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 20px 60px !important; /* Extra bottom padding for scrolling */
        flex: 1;
    }

    .mg-header-nav .mg-header-nav-list li,
    .mg-header-nav ul li {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mg-header-nav .mg-header-nav-list a,
    .mg-header-nav ul a {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--mg-text) !important;
        border-radius: 12px !important; /* Rounded corners for links */
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    /* Icon styling */
    .mg-header-nav .mg-header-nav-list .mg-nav-icon,
    .mg-header-nav ul .mg-nav-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mg-header-nav .mg-header-nav-list .mg-nav-icon svg,
    .mg-header-nav ul .mg-nav-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
    }

    .mg-header-nav .mg-header-nav-list a:hover,
    .mg-header-nav ul a:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--mg-accent-1) !important;
    }

    .mg-header-nav .mg-header-nav-list a.active,
    .mg-header-nav ul a.active {
        background: var(--mg-accent-gradient) !important;
        color: #1a1a2e !important;
        font-weight: 700 !important;
    }

    /* Hamburger button */
    .mg-menu-toggle {
        display: flex !important;
        position: relative;
        z-index: 1001;
    }

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }
}

/* Dark mode specific: more solid background for better readability */
[data-theme="dark"] .mg-header-nav {
    background: rgba(8, 12, 22, 0.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Light mode: keep glass but slightly opaque */
[data-theme="light"] .mg-header-nav {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Hide header nav on desktop */
@media (min-width: 1025px) {
    .mg-header-nav {
        display: none !important;
    }
    .mg-menu-toggle {
        display: none !important;
    }
}
/* ============================================================
   CLOUD MENU BUTTON (Clean & Elegant)
   ============================================================ */
.mg-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--mg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--mg-glass-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
    position: relative;
}

.mg-menu-toggle:hover {
    background: var(--mg-glass-strong);
    transform: scale(1.05);
    border-color: var(--mg-accent-1);
}

.mg-cloud-icon {
    width: 28px;
    height: 28px;
    stroke: var(--mg-text);
    fill: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* Active state when menu is open */
.mg-menu-toggle.active {
    background: var(--mg-accent-gradient);
    border-color: transparent;
}

.mg-menu-toggle.active .mg-cloud-icon {
    stroke: #1a1a2e;
    fill: rgba(0, 0, 0, 0.1);
}

/* Cloud floating animation */
@keyframes cloudFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

.mg-cloud-icon {
    animation: cloudFloat 3s ease-in-out infinite;
}

/* Dark mode specific: more solid background for better readability */
[data-theme="dark"] .mg-menu-toggle {
    background: rgba(15, 25, 45, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .mg-menu-toggle:hover {
    background: rgba(30, 45, 70, 0.9);
    border-color: var(--mg-accent-1);
}

/* Light mode */
[data-theme="light"] .mg-menu-toggle {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mg-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--mg-accent-1);
}

/* Mobile styles */
@media (max-width: 1024px) {
    .mg-menu-toggle {
        display: flex;
        margin-left: 12px;
    }
}

/* Hide on desktop */
@media (min-width: 1025px) {
    .mg-menu-toggle {
        display: none !important;
    }
}

/* Dark mode specific: more solid background for better readability */
[data-theme="dark"] .mg-menu-toggle {
    background: rgba(15, 25, 45, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .mg-menu-toggle:hover {
    background: rgba(30, 45, 70, 0.9);
    border-color: var(--mg-accent-1);
}

/* Light mode */
[data-theme="light"] .mg-menu-toggle {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mg-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--mg-accent-1);
}

/* Mobile styles */
@media (max-width: 1024px) {
    .mg-menu-toggle {
        display: flex;
        margin-left: 12px;
    }
}

/* Hide on desktop */
@media (min-width: 1025px) {
    .mg-menu-toggle {
        display: none !important;
    }
}
/* Dark mode specific for drawer */
[data-theme="dark"] .mg-header-nav {
    background: rgba(8, 12, 22, 0.96) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light mode for drawer */
[data-theme="light"] .mg-header-nav {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}
/* Dark mode adjustments */
[data-theme="dark"] .mg-menu-toggle.active .mg-cloud-icon {
    stroke: #c5a03a;
}

[data-theme="light"] .mg-menu-toggle.active .mg-cloud-icon {
    stroke: #a67c1e;
}

/* RTL Support for mobile menu */
body.mg-rtl .mg-header-nav {
    left: auto;
    right: 0;
    transform: translateX(100%);
    border-right: none;
    border-left: 1px solid var(--mg-glass-border);
}

body.mg-rtl .mg-header-nav.open {
    transform: translateX(0);
}

body.mg-rtl .mg-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(-45deg);
}

body.mg-rtl .mg-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(45deg);
}
/* Avatar Modal - Base styles */
.mg-avatar-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
}

/* Center on all devices */
.mg-avatar-modal-content {
    background: #1a1a2e;
    border-radius: 20px;
    width: 300px;
    max-width: 90%;
    padding: 20px;
    text-align: center;
    margin: 0 auto;
}

[data-theme="light"] .mg-avatar-modal-content {
    background: #fff;
}

/* Rest of your modal styles... */
.mg-avatar-modal-header {
    position: relative;
    margin-bottom: 15px;
}

.mg-avatar-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

[data-theme="light"] .mg-avatar-modal-header h3 {
    color: #333;
}

.mg-avatar-modal-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #aaa;
}

.mg-avatar-options {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 15px;
    padding: 15px 10px;
    margin: 10px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    white-space: nowrap;
}

.mg-avatar-option {
    flex: 0 0 auto;
    scroll-snap-align: start;
    cursor: pointer;
    text-align: center;
    width: 80px;
}

.mg-avatar-option img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #444;
    display: block;
    margin: 0 auto;
}

.mg-avatar-option span {
    display: block;
    font-size: 11px;
    color: #aaa;
    margin-top: 5px;
    white-space: normal;
    word-break: keep-all;
}

.mg-avatar-modal-footer .mg-btn {
    padding: 10px 20px;
    background: #c5a03a;
    color: #1a1a2e;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}
/* Center avatar modal on ALL devices - FIXED */
.mg-avatar-modal {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Only show when opened via JavaScript */
.mg-avatar-modal[style*="display: flex"],
.mg-avatar-modal[style*="display:flex"] {
    display: flex !important;
}