/* =========================================
   MODERN E-COMMERCE THEME (Fixes Giant Icons & Layouts)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand Colors */
    --primary-blue: #1e3a8a; 
    --secondary-blue: #2563eb; 
    --bg-color: #f8fafc; /* Very light cool gray */
    --white: #ffffff;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    
    /* UI Elements */
    --radius-sm: 6px;
    --radius-md: 10px;
    --transition: all 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body { background-color: var(--bg-color); color: var(--text-dark); line-height: 1.6; padding-bottom: 70px; }
@media (min-width: 769px) { body { padding-bottom: 0; } }

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* =========================================
   MOBILE BOTTOM MENU
   ========================================= */
.mobile-bottom-menu { 
    display: none; position: fixed; bottom: 0; left: 0; width: 100%; 
    background: var(--white); box-shadow: 0 -4px 15px rgba(0,0,0,0.08); 
    z-index: 1000; justify-content: space-around; padding: 10px 0; 
    border-top: 1px solid var(--border-color); border-radius: 15px 15px 0 0;
}
.menu-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; }
.menu-item.active { color: var(--secondary-blue); }
.menu-item svg { width: 22px !important; height: 22px !important; }
@media (max-width: 768px) { .mobile-bottom-menu { display: flex; } }

/* =========================================
   BANNER TO CATEGORY FIX
   ========================================= */
.bannerSwiper { margin-top: 15px; margin-bottom: 0 !important; border-radius: var(--radius-md); overflow: hidden; }

/* =========================================
   CATEGORY SWIPER (PC: 6, Mobile: 3)
   ========================================= */
.category-wrapper { 
    display: flex; gap: 10px; overflow-x: auto; 
    padding: 15px 0 5px 0; scrollbar-width: none; 
}
.category-wrapper::-webkit-scrollbar { display: none; }

.category-box { 
    flex: 0 0 calc((100% - 50px) / 6); 
    background: var(--white); border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); padding: 15px 5px; text-align: center; 
}
.category-icon { width: 45px !important; height: 45px !important; border-radius: 50%; margin: 0 auto 10px; display: block; object-fit: contain; padding: 5px; background: #f1f5f9; }
.category-name { font-size: 0.85rem; font-weight: 700; color: var(--text-dark); }

@media (max-width: 768px) {
    .category-box { flex: 0 0 calc((100% - 20px) / 3); padding: 10px 5px; }
    .category-icon { width: 40px !important; height: 40px !important; margin-bottom: 6px; }
    .category-name { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* =========================================
   PERFECT PRODUCT CARDS
   ========================================= */
.section-header { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 12px; margin-top: 20px; border-bottom: 2px solid var(--border-color); padding-bottom: 8px;
}
.section-title { font-size: 1.2rem; font-weight: 800; color: var(--primary-blue); }
.view-more { font-size: 0.8rem; font-weight: 700; color: var(--white); background: var(--primary-blue); padding: 4px 12px; border-radius: 4px; }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.product-card { 
    width: 100%; height: 100%; 
    background: var(--white); 
    border-radius: var(--radius-sm); 
    border: 1px solid var(--border-color); 
    display: flex; flex-direction: column; position: relative;
    transition: 0.3s;
}
.product-card:hover { border-color: var(--secondary-blue); box-shadow: 0 4px 15px rgba(0,0,0,0.08); }

.sale-badge { 
    position: absolute; top: -1px; right: -1px; 
    background: #008c09; color: white; padding: 4px 10px; 
    font-size: 0.7rem; font-weight: 700; border-radius: 0 6px 0 10px; z-index: 2; 
}

.product-img { 
    width: 100%; aspect-ratio: 4/3; object-fit: contain; 
    padding: 15px; border-bottom: 1px solid #f8fafc;
}

.product-title { 
    font-size: 0.85rem; font-weight: 600; color: var(--text-dark); 
    text-align: center; margin: 10px 8px 5px; line-height: 1.4; height: 2.8em; 
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.product-price { 
    display: flex; justify-content: center; align-items: center; gap: 8px; 
    margin: 5px 8px 10px; margin-top: auto; 
}
.old-price { text-decoration: line-through; color: var(--secondary-blue); font-size: 0.8rem; font-weight: 600; opacity: 0.7; }
.new-price { color: var(--secondary-blue); font-weight: 800; font-size: 1rem; }

.btn-buy { 
    margin: 0 10px 10px; 
    background: var(--primary-blue); color: white; 
    border-radius: 4px; padding: 8px; font-size: 0.85rem; 
    display: flex; justify-content: center; align-items: center; gap: 6px; font-weight: 600; border: none; cursor: pointer;
}
.btn-buy svg { width: 16px !important; height: 16px !important; }
.product-card:hover .btn-buy { background: var(--secondary-blue); }

/* =========================================
   GIANT ICON FIX (Info Cards)
   ========================================= */
.info-cards-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin: 30px 0; }
@media (min-width: 768px) { .info-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.info-card { background: var(--white); border: 1px solid var(--border-color); padding: 25px 20px; border-radius: var(--radius-md); text-align: center; }
.info-icon svg { 
    width: 45px !important; 
    height: 45px !important; 
    margin: 0 auto 15px; 
    color: var(--primary-blue); 
    display: block;
}
.info-title { font-size: 1.05rem; font-weight: 800; color: var(--text-dark); margin-bottom: 5px; }
.info-desc { color: var(--text-muted); font-size: 0.85rem; }

/* =========================================
   SHORT & PROFESSIONAL FOOTER
   ========================================= */
.pro-footer {
    background: #ffffff; border-top: 1px solid var(--border-color);
    padding: 25px 0; margin-top: 40px;
}
.pro-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.pro-footer-links { display: flex; gap: 20px; font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
.pro-footer-links a:hover { color: var(--primary-blue); }
.pro-footer-copyright { font-size: 0.85rem; color: #94a3b8; }
@media (min-width: 768px) { .pro-footer-inner { flex-direction: row; justify-content: space-between; } }

/* Remove browser focus rings/tap highlights from clickable controls on all pages. */
html, body, a, button, input, select, textarea, [role="button"] {
    -webkit-tap-highlight-color: transparent !important;
}

button:focus, button:focus-visible,
a:focus, a:focus-visible,
.btn:focus, .btn:focus-visible,
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible,
[role="button"]:focus, [role="button"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

* { -webkit-tap-highlight-color: transparent !important; }

/* Mobile: prevent Android/Chrome tap/focus marks on every clickable element. */
a, button, input, select, textarea, [role="button"] {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

select:focus, select:active,
button:focus, button:active,
a:focus, a:active {
    outline: none !important;
    box-shadow: none !important;
}


/* ===== FINAL DARK UI OVERRIDES ===== */
html,body{max-width:100%;overflow-x:hidden;}
body{background:#0b0f17 !important;color:#e5e7eb !important;padding-top:70px;}
.main-header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;}
.container{max-width:1200px;width:100%;}

/* Common white/light surfaces -> dark */
.auth-card,.sidebar-container,.panel-main-card,.box-card,.account-bar,.info-card,.card-white,
.premium-desc-box,.ticket-log-strip,.stat-wrapper:not(.dark-ledger),.pay-card,.advance-field,
.products-empty,.empty-state,.premium-input-box,.inc-btn{background:#111827 !important;color:#e5e7eb !important;border-color:#273244 !important;}
.auth-wrapper{background:transparent !important;}
.form-control,.custom-input{background:#0b1220 !important;color:#f8fafc !important;border-color:#334155 !important;}
.password-rules{background:#0f172a !important;border-color:#334155 !important;}
.strength-meter{background:#263244 !important;}
.terms-text,.auth-footer,.rule-item{color:#94a3b8 !important;}
.alert-danger{background:#2a1217 !important;color:#fca5a5 !important;border-color:#5b2028 !important;}
.alert-success,.alert-success-banner{background:#0d2a20 !important;color:#86efac !important;border-color:#14532d !important;}
.category-card,.product-card,.product-item{background:#111827 !important;color:#e5e7eb !important;border-color:#273244 !important;}

/* Login/Register Google button dark mode */
.google-btn{background:#111827 !important;color:#f8fafc !important;border-color:#334155 !important;}

/* Inputs and text areas */
input,textarea,select{color:#f8fafc;}
input::placeholder,textarea::placeholder{color:#64748b !important;}

/* Prevent accidental white page strips */
section,main,.content,.page-content{max-width:100%;}

/* Top-left back button */

/* ===== FINAL FULL WHITE MODE ===== */
html, body { background:#ffffff !important; color:#1e293b !important; }
body { background-color:#ffffff !important; }
.main-header { background:rgba(255,255,255,.94) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; border-bottom:1px solid #e2e8f0 !important; box-shadow:0 2px 12px rgba(148,163,184,.12) !important; }
.main-header * { color:inherit; }
.main-header .action-icon.direct-menu-toggle { color:#1e293b !important; }
.header-auth-btn { color:#1e293b !important; background:#ffffff !important; border-color:#cbd5e1 !important; }
.header-auth-register { background:#eff6ff !important; border-color:#bfdbfe !important; color:#2563eb !important; }

/* Replace every dark surface used by the previous theme. */
.auth-card,.sidebar-container,.panel-main-card,.box-card,.account-bar,.info-card,.card-white,
.premium-desc-box,.ticket-log-strip,.stat-wrapper,.pay-card,.advance-field,.products-empty,
.empty-state,.premium-input-box,.inc-btn,.category-card,.product-card,.product-item,
.google-btn,.password-rules { background:#ffffff !important; color:#1e293b !important; border-color:#e2e8f0 !important; }
.form-control,.custom-input,input,textarea,select { background:#ffffff !important; color:#1e293b !important; border-color:#cbd5e1 !important; }
input::placeholder,textarea::placeholder { color:#94a3b8 !important; }
.terms-text,.auth-footer,.rule-item,.info-desc { color:#64748b !important; }

/* Remove black/dark strips and shadows around page edges. */
section,main,.content,.page-content,.container { background-color:transparent !important; }
.pro-footer { background:#ffffff !important; box-shadow:none !important; }

/* White hamburger + strong light blur; no black backdrop. */
.direct-hamb-page { background:rgba(255,255,255,.18) !important; }
.direct-hamb-backdrop { background:rgba(255,255,255,.48) !important; backdrop-filter:blur(18px) saturate(120%) !important; -webkit-backdrop-filter:blur(18px) saturate(120%) !important; }
.direct-hamb-drawer { background:rgba(255,255,255,.97) !important; color:#1e293b !important; border-left:1px solid #e2e8f0 !important; box-shadow:-8px 0 24px rgba(148,163,184,.16) !important; }
.direct-hamb-title { color:#0f172a !important; }
.direct-hamb-item { color:#334155 !important; background:#f8fafc !important; border-color:#e2e8f0 !important; box-shadow:none !important; }
.direct-hamb-item:hover { background:#f1f5f9 !important; box-shadow:0 5px 14px rgba(148,163,184,.12) !important; }
.direct-hamb-logout { color:#dc2626 !important; background:#fef2f2 !important; }


/* ===== SCREENSHOT GREEN/WHITE THEME ===== */
:root{
  --primary-blue:#008c09 !important;
  --secondary-blue:#008c09 !important;
  --bg-color:#f4f5f7 !important;
  --text-dark:#263142 !important;
  --text-muted:#6b7280 !important;
  --border-color:#d7dee8 !important;
}
html,body{background:#f4f5f7 !important;color:#263142 !important;}
.main-header{
  background:rgba(92,101,91,.42) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:0 0 34px 34px !important;
  box-shadow:0 5px 18px rgba(0,0,0,.10) !important;
  backdrop-filter:blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
}
.main-header .logo .site-brand-name{color:#fff !important;}
.main-header .header-actions{gap:16px !important;}
.main-header .action-icon{color:#fff !important;}
.main-header .direct-menu-toggle{color:#fff !important;}
.header-auth-btn{background:#008c09 !important;color:#fff !important;border-color:#008c09 !important;}
.header-auth-register{background:#008c09 !important;color:#fff !important;border-color:#008c09 !important;}
.bannerSwiper{box-shadow:0 3px 12px rgba(0,0,0,.10) !important;border-color:#d9dee5 !important;}
.filter-container{justify-content:center !important;gap:12px !important;}
.filter-btn{
  background:#fff !important;color:#263142 !important;border:2px solid #d3dbe6 !important;
  border-radius:34px !important;padding:13px 28px !important;font-size:18px !important;font-weight:800 !important;
  box-shadow:0 3px 8px rgba(30,41,59,.10) !important;
}
.filter-btn.active{background:#008c09 !important;color:#fff !important;border-color:#008c09 !important;box-shadow:0 8px 20px rgba(0,140,9,.24) !important;}
.product-card{
  background:#fff !important;color:#263142 !important;border:1px solid #e1e5eb !important;
  border-radius:22px !important;box-shadow:0 3px 12px rgba(15,23,42,.12) !important;padding:7px !important;
}
.image-container{background:#fff !important;border-color:#e5e7eb !important;border-radius:18px !important;aspect-ratio:1/1 !important;}
.product-title-text{color:#394150 !important;background:#f1f2f4 !important;border:1px solid #e0e3e7 !important;border-radius:13px !important;padding:10px 7px !important;text-align:center !important;}
.product-subtitle{color:#6b7280 !important;}
.feature-item{color:#4b5563 !important;background:#f8fafc !important;border-left-color:#008c09 !important;}
.price-box,.price-box span.amount{color:#008c09 !important;}
.btn-demo{background:#6366ea !important;color:#fff !important;border:1px solid #6366ea !important;box-shadow:none !important;}
.btn-buy{background:#008c09 !important;color:#fff !important;border:1px solid #008c09 !important;box-shadow:none !important;}
.btn-buy:hover{background:#008c09 !important;box-shadow:none !important;}
.sale-badge{background:#008c09 !important;}
.mobile-bottom-menu{background:#fff !important;border-top:1px solid #e5e7eb !important;box-shadow:0 -4px 16px rgba(15,23,42,.10) !important;border-radius:0 !important;}
.menu-item{color:#666 !important;}
.menu-item.active{color:#008c09 !important;}
.pro-footer,.kopa-footer-section{background:#fff !important;color:#64748b !important;border-top-color:#e5e7eb !important;box-shadow:none !important;}
.kopa-contact-hdr h2,.kopa-card-title{color:#263142 !important;}
.kopa-contact-hdr h2 span{color:#008c09 !important;}
.kopa-contact-hdr p,.kopa-card-desc{color:#64748b !important;}
.kopa-grid-card{background:#fff !important;border-color:#e5e7eb !important;box-shadow:0 3px 12px rgba(15,23,42,.07) !important;}
@media(max-width:600px){
  .main-header{border-radius:0 0 34px 34px !important;}
  .filter-btn{padding:12px 25px !important;font-size:17px !important;}
  .filter-container{flex-wrap:wrap !important;}
}

/* ===== PANELSELL SCREENSHOT THEME — ALL USER PAGES ===== */
:root{--green:#008c09;--green2:#008c09;--page:#f4f5f7;--ink:#263142;--muted:#6b7280;--line:#d7dee8}
html,body{background:var(--page)!important;color:var(--ink)!important;min-height:100%;}
body{padding-top:82px!important;overflow-x:hidden!important;font-family:Arial,Helvetica,sans-serif!important;}
.main-header{position:fixed!important;top:14px!important;left:15px!important;right:15px!important;width:auto!important;height:98px!important;z-index:10000!important;padding:0!important;background:rgba(93,105,92,.42)!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:54px!important;box-shadow:0 7px 22px rgba(0,0,0,.13)!important;backdrop-filter:blur(18px) saturate(125%)!important;-webkit-backdrop-filter:blur(18px) saturate(125%)!important}
.main-header .container{max-width:none!important;width:100%!important;height:100%!important;padding:0 20px!important;box-sizing:border-box!important}
.header-inner{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:12px!important}
.header-home-btn,.header-round-btn{width:64px!important;height:64px!important;border-radius:50%!important;background:#008c09!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;border:0!important;box-shadow:0 4px 12px rgba(0,0,0,.10)!important;flex:none!important}
.header-home-btn{justify-self:start!important}.header-actions{justify-self:end!important;display:flex!important;align-items:center!important;gap:14px!important}.header-round-btn{position:relative!important;cursor:pointer!important;padding:0!important}.header-brand{justify-self:center!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;background:#008c09!important;border-radius:35px!important;padding:10px 28px!important;min-width:170px!important;box-sizing:border-box!important}.header-brand img{max-height:42px!important;max-width:190px!important;display:block!important}.header-brand .site-brand-name{font-size:24px!important;font-weight:900!important;letter-spacing:1.5px!important;color:#fff!important;white-space:nowrap!important}.header-badge{position:absolute!important;right:-2px!important;top:-5px!important;min-width:25px!important;height:25px!important;padding:0 6px!important;border-radius:20px!important;background:#ef4444!important;color:#fff!important;border:3px solid #fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:13px!important;font-weight:900!important}.header-login-btn,.header-register-btn{padding:11px 16px!important;border-radius:14px!important;background:#008c09!important;color:#fff!important;text-decoration:none!important;font-weight:800!important}.header-register-btn{background:#008c09!important}
/* Shared light cards/forms across every page */
.auth-container,.auth-card,.dark-card,.wallet-card,.checkout-card,.payment-card,.box-card,.panel-main-card,.account-bar,.info-card,.card-white,.premium-desc-box,.ticket-log-strip,.stat-wrapper,.pay-card,.advance-field,.products-empty,.empty-state,.premium-input-box,.mykey-card,.product-card,.product-item,.kopa-grid-card,.order-card,.deposit-card,.payment-method-card,.gateway-card{background:#fff!important;color:var(--ink)!important;border-color:#e1e5eb!important;box-shadow:0 4px 14px rgba(15,23,42,.08)!important}
.form-control,.custom-input,input,textarea,select{background:#fff!important;color:var(--ink)!important;border-color:#cfd7e3!important}
input::placeholder,textarea::placeholder{color:#94a3b8!important}.terms-text,.auth-footer,.rule-item,.info-desc{color:var(--muted)!important}
.mykey-title,.mykey-product,.section-title,.page-title,.orders-wrapper h1,.orders-wrapper h2,.checkout-title{color:var(--ink)!important}
.mykey-package,.mykey-row{background:#f8fafc!important;color:var(--ink)!important;border-color:#e0e5ec!important}
.status-completed{background:#dcfce7!important;color:#007a09!important}.logo-preview{background:#fff!important;border-color:#dbe3ec!important}
.product-image-wrapper{background:#fff!important}.product-image-wrapper img{background:#fff!important}
.copy-action-btn,.copy-key,.order-copy-key,.callback-copy-key{background:#008c09!important;border-color:#008c09!important;color:#fff!important}
/* Buy / checkout pages */
.buy-page,.checkout-page,.wallet-result{background:transparent!important;color:var(--ink)!important}
.buy-page *,.checkout-page *{border-color:#e1e5eb}
.buy-card,.product-buy-card,.wallet-card{background:#fff!important;color:var(--ink)!important;border-color:#e1e5eb!important;box-shadow:0 6px 18px rgba(15,23,42,.08)!important}
.qty-btn{background:#f1f3f6!important;color:var(--ink)!important;border-color:#d7dee8!important}.qty-btn:hover{background:#e9edf2!important}
.price,.new-price,.amount,.total-price{color:#008c09!important}
.btn-buy,.btn-buy-premium,.btn-action.btn-buy,.btn-pay-now,.btn-primary,.buy-now,.checkout-btn{background:#008c09!important;color:#fff!important;border-color:#008c09!important}
.btn-demo{background:#6366ea!important;color:#fff!important;border-color:#6366ea!important}
/* Remove old dark page backgrounds that are inline in individual PHP files */
body,.auth-container,.form-control,.dark-card,.wallet-card,.buy-card,.product-buy-card,.checkout-card,.checkout-container,.payment-container,.result-container{background-color:var(--page)!important}
.auth-container,.dark-card,.wallet-card,.buy-card,.product-buy-card,.checkout-card{background:#fff!important}
/* Process/result pages */
.wallet-title,.wallet-msg,.result-actions,.result-actions a{color:var(--ink)!important}.delivered-key-value{background:#f8fafc!important;color:#166534!important;border-color:#d7dee8!important}.home-link{background:#fff!important;color:var(--ink)!important;border-color:#d7dee8!important}.mykey-link{background:#008c09!important;color:#fff!important}
/* Footer */
.pro-footer,.kopa-footer-section{background:#fff!important;color:#64748b!important;border-top:1px solid #e5e7eb!important;box-shadow:none!important}
/* Hamburger */
.direct-hamb-page{background:rgba(255,255,255,.16)!important}.direct-hamb-backdrop{background:rgba(255,255,255,.46)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}.direct-hamb-drawer{background:rgba(255,255,255,.98)!important;color:var(--ink)!important;border-left:1px solid #e2e8f0!important;box-shadow:-8px 0 24px rgba(15,23,42,.12)!important}.direct-hamb-title{color:#0f172a!important}.direct-hamb-item{color:#334155!important;background:#f8fafc!important;border-color:#e2e8f0!important}.direct-hamb-item:hover{background:#f1f5f9!important}.direct-hamb-logout{color:#dc2626!important;background:#fef2f2!important}
@media(max-width:600px){body{padding-top:122px!important}.main-header{top:14px!important;left:15px!important;right:15px!important;height:98px!important}.main-header .container{padding:0 10px!important}.header-home-btn,.header-round-btn{width:64px!important;height:64px!important}.header-brand{min-width:170px!important;padding:10px 20px!important}.header-brand .site-brand-name{font-size:23px!important}.header-actions{gap:10px!important}.header-login-btn,.header-register-btn{padding:9px 11px!important;font-size:13px!important}}

/* ===== RESTORE PREVIOUS HEADER STYLE ===== */
.main-header{
  position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;
  height:auto!important;padding:12px 0!important;background:rgba(255,255,255,.94)!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;
  box-shadow:0 2px 12px rgba(148,163,184,.12)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
}
.main-header .container{max-width:1200px!important;width:100%!important;height:auto!important;padding:0 15px!important;}
.main-header .header-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:30px!important;}
.main-header .header-home-btn{width:auto!important;height:auto!important;background:none!important;color:#1e293b!important;box-shadow:none!important;border:0!important;border-radius:0!important;}
.main-header .header-brand{display:flex!important;align-items:center!important;text-decoration:none!important;background:none!important;border-radius:0!important;padding:0!important;min-width:0!important;justify-self:auto!important;}
.main-header .header-brand .site-brand-name{font-size:1.5rem!important;font-weight:800!important;color:#1e293b!important;letter-spacing:normal!important;}
.main-header .header-brand img{max-height:45px!important;max-width:190px!important;display:block!important;}
.main-header .header-actions{display:flex!important;gap:20px!important;align-items:center!important;justify-self:auto!important;}
.main-header .header-round-btn{width:auto!important;height:auto!important;background:none!important;color:#1e293b!important;box-shadow:none!important;border:0!important;border-radius:0!important;}
.main-header .header-login-btn,.main-header .header-register-btn{padding:9px 14px!important;border-radius:10px!important;background:#008c09!important;color:#fff!important;border:1px solid #008c09!important;}
@media(max-width:768px){
  body{padding-top:66px!important;}
  .main-header{top:0!important;left:0!important;right:0!important;padding:10px 0!important;border-radius:0!important;}
  .main-header .container{padding:0 15px!important;}
  .main-header .header-inner{gap:12px!important;}
  .main-header .header-brand .site-brand-name{font-size:1.25rem!important;}
  .main-header .header-actions{gap:14px!important;}
}

/* ===== FINAL HEADER BUTTONS + MOBILE TOP GAP FIX ===== */
.main-header .header-actions .action-icon,
.main-header .header-actions .action-icon svg {
  color:#1e293b !important;
  stroke:currentColor !important;
  opacity:1 !important;
  visibility:visible !important;
}
.main-header .header-actions .action-icon {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
}
.main-header .header-actions .direct-menu-toggle {
  color:#1e293b !important;
  background:transparent !important;
  border:0 !important;
}
.main-header .header-actions .header-auth-btn {
  visibility:visible !important;
  opacity:1 !important;
}
@media(max-width:768px){
  .main-container { padding-top:10px !important; }
}

/* ===== FINAL REQUESTED HEADER + HOME ACTIVITY ===== */
.main-header{height:66px!important;box-sizing:border-box!important;padding:10px 0!important}
.main-header .container,.main-header .header-inner{height:46px!important;box-sizing:border-box!important}
.main-header .header-actions{gap:14px!important}
.main-header .header-actions .action-icon[href*="my-keys"],.main-header .header-actions .action-icon[href*="cart"]{display:none!important}
.header-back-btn{width:42px!important;height:42px!important;border-radius:50%!important;background:#008c09!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
.header-back-btn svg{display:block!important}
.direct-hamb-item{font-size:15px!important;padding:12px 10px!important}
@media(max-width:768px){.main-header{height:66px!important;top:0!important;left:0!important;right:0!important;padding:10px 0!important}.main-header .container{height:46px!important}.main-header .header-inner{height:46px!important}.main-header .header-actions{gap:12px!important}.main-header .header-actions .action-icon svg{width:25px!important;height:25px!important}}

/* ===== HOME HEADER LOGO + BACK BUTTON FIX ===== */
.header-logo{display:flex!important;visibility:visible!important;opacity:1!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;align-items:center!important;justify-content:center!important;z-index:1001!important;min-width:max-content!important;}
.header-logo img{display:block!important;visibility:visible!important;opacity:1!important;object-fit:contain!important;max-width:150px!important;width:auto!important;height:32px!important;max-height:32px!important;}
.header-logo .site-brand-name{display:block!important;visibility:visible!important;opacity:1!important;color:#ffffff!important;font-size:1.15rem!important;font-weight:900!important;white-space:nowrap!important;}
@media(max-width:600px){.header-logo img{max-width:125px!important;height:30px!important;max-height:30px!important}.header-logo .site-brand-name{font-size:1.05rem!important}}

/* ===== FINAL HEADER STYLE: HOME/BACK + GREEN LOGO + HAMBURGER ===== */
.main-header .header-home-btn,
.main-header .header-back-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  border-radius:50% !important;
  background:#008c09 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 4px 12px rgba(0,140,9,.20) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.main-header .header-home-btn svg,
.main-header .header-back-btn svg{
  width:25px !important;
  height:25px !important;
  color:#fff !important;
  stroke:#fff !important;
}
.main-header .header-logo{
  background:#008c09 !important;
  color:#fff !important;
  border-radius:28px !important;
  padding:7px 22px !important;
  min-height:42px !important;
  height:42px !important;
  box-sizing:border-box !important;
  box-shadow:0 4px 12px rgba(0,140,9,.18) !important;
}
.main-header .header-logo .site-brand-name{
  color:#fff !important;
  font-size:1.15rem !important;
  font-weight:900 !important;
  letter-spacing:.5px !important;
}
.main-header .header-logo img{
  max-height:30px !important;
  max-width:150px !important;
  filter:brightness(0) invert(1) !important;
}
.main-header .header-actions .direct-menu-toggle{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#008c09 !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(0,140,9,.20) !important;
}
.main-header .header-actions .direct-menu-toggle svg{
  width:25px !important;
  height:25px !important;
  stroke:#fff !important;
  color:#fff !important;
}
@media(max-width:768px){
  .main-header .header-home-btn,
  .main-header .header-back-btn,
  .main-header .header-actions .direct-menu-toggle{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
  .main-header .header-logo{height:42px !important;min-height:42px !important;padding:7px 20px !important;}
  .main-header .header-logo .site-brand-name{font-size:1.05rem !important;}
}


/* ===== FINAL HAMBURGER MENU / GREEN LOGO ===== */
.header-logo{background:#008c09!important;color:#fff!important;border-radius:28px!important;}
.header-logo .site-brand-name{color:#fff!important;}
.direct-hamb-drawer{background:#f3f6fa!important;color:#253044!important;padding:0 20px 24px!important;border-left:1px solid #dfe5ec!important;box-shadow:-10px 0 28px rgba(15,23,42,.16)!important;}
.direct-hamb-profile{position:relative;margin:0 -20px 18px;padding:30px 18px 28px;background:#008c09!important;color:#fff!important;text-align:center;min-height:290px;box-sizing:border-box;}
.direct-hamb-close{position:absolute;right:14px;top:18px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:31px;line-height:38px;cursor:pointer;}
.direct-hamb-avatar{width:94px;height:94px;margin:8px auto 16px;border-radius:50%;background:#fff;color:#008c09;border:4px solid rgba(255,255,255,.55);box-shadow:0 0 0 4px rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;}
.direct-hamb-avatar svg{width:68px;height:68px;}
.direct-hamb-welcome{font-size:22px;font-weight:800;line-height:1.25;color:#fff!important;}
.direct-hamb-wave{font-size:27px;margin:10px 0 7px;}
.direct-hamb-email{font-size:15px;color:rgba(255,255,255,.92)!important;}
.direct-hamb-item{display:flex!important;align-items:center!important;gap:16px!important;min-height:62px!important;box-sizing:border-box!important;margin:9px 0!important;padding:14px 16px!important;border-radius:18px!important;background:#fff!important;border:1px solid #e0e6ed!important;color:#253044!important;font-size:16px!important;font-weight:800!important;text-decoration:none!important;box-shadow:0 1px 3px rgba(15,23,42,.03)!important;}
.direct-hamb-item:hover{background:#fff!important;transform:none!important;box-shadow:0 4px 12px rgba(15,23,42,.08)!important;}
.direct-hamb-icon{width:28px!important;color:#008c09!important;font-size:23px!important;font-weight:900!important;text-align:center!important;flex:none!important;}
.direct-hamb-logout{color:#d62f2f!important;background:#fff!important;border-color:#f0d4d4!important;margin-top:16px!important;}
.direct-hamb-logout .direct-hamb-icon{color:#d62f2f!important;}
@media(max-width:600px){.direct-hamb-drawer{padding:0 12px 18px!important}.direct-hamb-profile{margin:0 -12px 12px;padding:22px 12px 20px;min-height:250px}.direct-hamb-avatar{width:78px;height:78px;margin-bottom:12px}.direct-hamb-avatar svg{width:56px;height:56px}.direct-hamb-welcome{font-size:18px}.direct-hamb-wave{font-size:23px;margin:7px 0 5px}.direct-hamb-email{font-size:13px}.direct-hamb-item{min-height:54px!important;margin:7px 0!important;padding:11px 13px!important;border-radius:16px!important;font-size:14px!important;gap:12px!important}.direct-hamb-icon{width:25px!important;font-size:20px!important}.direct-hamb-close{width:38px;height:38px;font-size:28px;top:13px;right:10px}}


/* ===== FINAL HAMBURGER WIDTH + USER PHOTO FIX ===== */
.direct-hamb-drawer{width:min(70vw,520px)!important;}
.direct-hamb-avatar-form{margin:0 auto;width:max-content;}
.direct-hamb-avatar{position:relative;overflow:visible;cursor:pointer!important;}
.direct-hamb-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.direct-hamb-camera{position:absolute;right:-3px;bottom:-3px;width:30px;height:30px;border-radius:50%;background:#fff;color:#008c09;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 8px rgba(15,23,42,.2);border:2px solid #008c09;}
@media(max-width:600px){.direct-hamb-drawer{width:70vw!important;min-width:0!important;}.direct-hamb-profile{min-height:250px!important;}}


/* ===== HAMBURGER 70% + FAINT USER PHOTO BACKGROUND ===== */
.direct-hamb-profile{
  background-color:#008c09!important;
  background-image:linear-gradient(rgba(0,140,9,.72),rgba(0,140,9,.72)),var(--hamb-profile-image)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.direct-hamb-drawer{width:min(70vw,520px)!important;}
@media(max-width:600px){.direct-hamb-drawer{width:70vw!important;min-width:0!important;}}


/* ===== HEADER FINAL CORRECTION — keep header above slider ===== */
.main-header{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;
  width:100%!important;
  height:60px!important;
  min-height:60px!important;
  padding:7px 0!important;
  box-sizing:border-box!important;
  z-index:10000!important;
  background:rgba(255,255,255,.97)!important;
  border:0!important;
  border-bottom:1px solid #e5e7eb!important;
  border-radius:0!important;
  box-shadow:0 2px 10px rgba(15,23,42,.08)!important;
}
.main-header .container,
.main-header .header-inner{
  height:46px!important;
  min-height:46px!important;
  box-sizing:border-box!important;
}
.main-header .container{padding-left:24px!important;padding-right:24px!important;}
.main-header .header-inner{gap:0!important;}
.main-header .header-left-slot{width:42px!important;min-width:42px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;}
.main-header .header-home-btn,
.main-header .header-back-btn{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  padding:0!important;margin:0!important;
  border-radius:50%!important;
  background:#008c09!important;color:#fff!important;
  border:0!important;
  box-shadow:0 3px 10px rgba(0,140,9,.18)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.main-header .header-home-btn svg,
.main-header .header-back-btn svg{width:24px!important;height:24px!important;stroke:#fff!important;color:#fff!important;}
.main-header .header-logo{
  position:absolute!important;
  left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:10001!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;max-width:none!important;
  height:40px!important;min-height:40px!important;
  padding:0 18px!important;
  margin:0!important;
  border-radius:22px!important;
  background:#008c09!important;color:#fff!important;
  box-shadow:0 3px 10px rgba(0,140,9,.16)!important;
  text-decoration:none!important;
}
.main-header .header-logo .site-brand-name{
  display:block!important;
  color:#fff!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.8px!important;
  white-space:nowrap!important;
}
.main-header .header-logo img{display:none!important;}
.main-header .header-actions{
  margin-left:auto!important;
  gap:0!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
}
.main-header .header-actions .direct-menu-toggle{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  padding:0!important;margin:0!important;
  border:0!important;border-radius:50%!important;
  background:#008c09!important;color:#fff!important;
  box-shadow:0 3px 10px rgba(0,140,9,.18)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.main-header .header-actions .direct-menu-toggle svg{width:24px!important;height:24px!important;stroke:#fff!important;color:#fff!important;}

/* Keep the fixed header separate from the home slider. The home page controls its own top spacing. */
.main-container{padding-top:70px!important;}
@media(max-width:600px){
  .main-header{height:60px!important;min-height:60px!important;padding:7px 0!important;}
  .main-header .container{padding-left:24px!important;padding-right:24px!important;}
  .main-header .header-logo{height:40px!important;min-height:40px!important;padding:0 15px!important;}
  .main-header .header-logo .site-brand-name{font-size:15px!important;letter-spacing:.7px!important;}
  .main-header .header-home-btn,.main-header .header-back-btn,
  .main-header .header-actions .direct-menu-toggle{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;}
  .main-container{padding-top:70px!important;}
}

/* Remove the unwanted blue focus/active outline after tapping buttons/links. */
button:focus,a:focus,input:focus,select:focus,textarea:focus,
button:active,a:active,input:active,select:active,textarea:active{
  outline:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
*:focus{outline:none!important;}
html,body,button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent!important; }

/* ===== HEADER ACTUAL FIX - 2026-09-28 ===== */
.main-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:60px!important;
  min-height:60px!important;
  max-height:60px!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  z-index:99999!important;
  overflow:visible!important;
}
.main-header .container,
.main-header .header-inner{
  width:100%!important;
  height:60px!important;
  min-height:60px!important;
  max-height:60px!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  position:relative!important;
}
.main-header .header-left-slot{
  position:absolute!important;
  left:18px!important;
  top:0!important;
  width:42px!important;
  height:60px!important;
  min-width:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:100002!important;
}
.main-header .header-home-btn,
.main-header .header-back-btn{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#008c09!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(0,140,9,.18)!important;
}
.main-header .header-home-btn svg,
.main-header .header-back-btn svg{width:24px!important;height:24px!important;stroke:#fff!important;}
.main-header .header-logo{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  width:auto!important;
  padding:0 16px!important;
  margin:0!important;
  border-radius:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#008c09!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(0,140,9,.16)!important;
  z-index:100003!important;
}
.main-header .header-logo .site-brand-name{
  color:#fff!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.65px!important;
  white-space:nowrap!important;
}
.main-header .header-logo img{display:none!important;}
.main-header .header-actions{
  position:absolute!important;
  right:18px!important;
  top:0!important;
  height:60px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:100002!important;
}
.main-header .header-actions .direct-menu-toggle{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#008c09!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(0,140,9,.18)!important;
}
.main-header .header-actions .direct-menu-toggle svg{width:25px!important;height:25px!important;stroke:#fff!important;color:#fff!important;}

/* Keep the banner below the fixed header, without an oversized blank header area. */
.main-container{
  padding-top:70px!important;
  margin-top:0!important;
}
@media(max-width:600px){
  .main-container{padding-top:70px!important;}
}

/* Disable mobile tap highlight / focus outlines everywhere. */
*,*::before,*::after{
  -webkit-tap-highlight-color:transparent!important;
}
a,button,input,select,textarea,[role="button"]{
  -webkit-tap-highlight-color:transparent!important;
  outline:0!important;
}
a:focus,a:active,button:focus,button:active,input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,[role="button"]:focus,[role="button"]:active{
  outline:0!important;
  box-shadow:none!important;
}


/* ===== EXACT HEADER FINAL OVERRIDE ===== */
body{padding-top:60px!important;}
.main-header{height:60px!important;min-height:60px!important;max-height:60px!important;top:0!important;left:0!important;right:0!important;padding:0!important;margin:0!important;border-radius:0!important;}

/* FINAL CONSISTENCY FIX: same header sizing on every user page */
.main-header{height:60px!important;min-height:60px!important;padding:0!important;box-sizing:border-box!important;top:0!important;left:0!important;right:0!important;border-radius:0!important;}
.main-header .container,.main-header .header-inner{height:60px!important;min-height:60px!important;box-sizing:border-box!important;}
.main-header .header-logo{height:38px!important;min-height:38px!important;width:auto!important;min-width:170px!important;padding:0 16px!important;box-sizing:border-box!important;border-radius:22px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.main-header .header-logo .site-brand-name{font-size:16px!important;line-height:38px!important;font-weight:900!important;white-space:nowrap!important;letter-spacing:0!important;}
.main-header .header-auth-btn{width:68px!important;height:34px!important;min-width:68px!important;max-width:68px!important;padding:0!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;border-radius:18px!important;font-size:13px!important;line-height:34px!important;font-weight:800!important;}

@media(max-width:600px){
 .main-header .header-logo{height:36px!important;min-height:36px!important;min-width:166px!important;padding:0 14px!important;}
 .main-header .header-logo .site-brand-name{font-size:15px!important;line-height:36px!important;}
 .main-header .header-auth-btn{width:64px!important;height:32px!important;min-width:64px!important;max-width:64px!important;font-size:12px!important;line-height:32px!important;}
}

/* Login and Register cards use exactly the same width */
.auth-container{width:calc(100% - 28px)!important;max-width:640px!important;box-sizing:border-box!important;margin-left:auto!important;margin-right:auto!important;}
@media(max-width:600px){
 .auth-container{width:calc(100% - 28px)!important;max-width:640px!important;margin-left:auto!important;margin-right:auto!important;}
}


/* ===== FINAL HEADER CONSISTENCY - ALL USER PAGES ===== */
.main-header .header-logo{
  width:170px!important; min-width:170px!important; max-width:170px!important;
  height:38px!important; min-height:38px!important; max-height:38px!important;
  padding:0!important; margin:0!important; box-sizing:border-box!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
}
.main-header .header-logo .site-brand-name{
  font-size:16px!important; line-height:38px!important; font-weight:900!important;
  white-space:nowrap!important; letter-spacing:0!important; margin:0!important; padding:0!important;
}
.main-header .header-auth-btn{
  width:68px!important; min-width:68px!important; max-width:68px!important;
  height:34px!important; min-height:34px!important; max-height:34px!important;
  padding:0!important; margin:0!important; box-sizing:border-box!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  border-radius:18px!important; font-size:13px!important; line-height:34px!important; font-weight:800!important;
}
@media(max-width:600px){
  .main-header .header-logo{
    width:166px!important; min-width:166px!important; max-width:166px!important;
    height:36px!important; min-height:36px!important; max-height:36px!important;
  }
  .main-header .header-logo .site-brand-name{font-size:15px!important; line-height:36px!important;}
  .main-header .header-auth-btn{
    width:64px!important; min-width:64px!important; max-width:64px!important;
    height:32px!important; min-height:32px!important; max-height:32px!important;
    font-size:12px!important; line-height:32px!important;
  }
}

/* ===== USER REQUEST FINAL: LOGIN HEADER + REGISTER INPUT MATCH ===== */
.main-header .header-logo{
  width:170px!important; min-width:170px!important; max-width:170px!important;
  height:38px!important; min-height:38px!important; max-height:38px!important;
  padding:0!important; margin:0!important; box-sizing:border-box!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  background:#008c09!important; color:#fff!important; border-radius:22px!important;
}
.main-header .header-logo .site-brand-name{
  display:block!important; color:#fff!important; font-size:16px!important;
  line-height:38px!important; font-weight:900!important; white-space:nowrap!important;
  letter-spacing:0!important; margin:0!important; padding:0!important;
}
.main-header .header-auth-btn{
  width:68px!important; min-width:68px!important; max-width:68px!important;
  height:34px!important; min-height:34px!important; max-height:34px!important;
  padding:0!important; margin:0!important; box-sizing:border-box!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  background:#008c09!important; color:#fff!important; border:0!important;
  border-radius:18px!important; font-size:13px!important; line-height:34px!important;
  font-weight:800!important; text-decoration:none!important; box-shadow:none!important;
}
/* Register fields exactly follow Login field dimensions */
.auth-wrapper .auth-card .form-control{
  width:100%!important; height:68px!important; min-height:68px!important;
  box-sizing:border-box!important; padding:0 16px!important;
  border:2px solid #a9c9f3!important; border-radius:10px!important;
  font-size:1.05rem!important;
}
@media(max-width:600px){
  .main-header .header-logo{
    width:166px!important; min-width:166px!important; max-width:166px!important;
    height:36px!important; min-height:36px!important; max-height:36px!important;
    border-radius:22px!important;
  }
  .main-header .header-logo .site-brand-name{
    font-size:15px!important; line-height:36px!important;
  }
  .main-header .header-auth-btn{
    width:64px!important; min-width:64px!important; max-width:64px!important;
    height:32px!important; min-height:32px!important; max-height:32px!important;
    font-size:12px!important; line-height:32px!important; border-radius:18px!important;
  }
  .auth-wrapper .auth-card .form-control{
    height:48px!important; min-height:48px!important; padding:0 12px!important;
    border-width:1.5px!important; border-radius:8px!important; font-size:.92rem!important;
  }
}

/* Mobile browser address-bar stabilization: page itself never scrolls; only this inset container does. */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
#app-scroll-container {
  position: fixed !important;
  top: 0.5px !important;
  right: 0 !important;
  bottom: 0.5px !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain !important;
  scrollbar-gutter: stable;
  box-sizing: border-box !important;
}

/* ===== FINAL HOME MOBILE LAYOUT FIX v14 ===== */
@media (max-width:600px){
  /* Keep the scroll area between the fixed header and fixed bottom navigation. */
  #app-scroll-container{
    top:60px!important;
    bottom:72px!important;
    padding-bottom:10px!important;
    box-sizing:border-box!important;
  }
  /* The header already occupies the 60px top area, so do not add another large gap. */
  .main-container{
    padding-top:10px!important;
    margin-top:0!important;
  }
  /* Keep the slider fully below the header and make the image fill its slide. */
  .bannerSwiper{
    margin-top:0!important;
    margin-bottom:20px!important;
    height:180px!important;
    min-height:180px!important;
  }
  .bannerSwiper .swiper-wrapper,
  .bannerSwiper .swiper-slide{
    height:180px!important;
    min-height:180px!important;
  }
  .bannerSwiper .swiper-slide{
    display:block!important;
  }
  .bannerSwiper .swiper-slide img{
    width:100%!important;
    height:180px!important;
    min-height:180px!important;
    object-fit:cover!important;
    display:block!important;
  }
  /* Only a small gap before the fixed bottom navigation. */
  .home-activity{
    margin-bottom:8px!important;
  }
}

/* ===== FINAL MOBILE HOME / ACTIVITY SPACING FIX v24 ===== */
@media(max-width:600px){
  /* Keep the fixed header attached to the viewport; the scroll container must start at the top. */
  #app-scroll-container{
    top:0!important;
    bottom:72px!important;
    height:calc(100dvh - 72px)!important;
    min-height:0!important;
    max-height:none!important;
    padding-bottom:10px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  /* Header is 60px tall; give the slider only a small, stable gap below it. */
  .main-container{padding-top:70px!important;margin-top:0!important;}
  .bannerSwiper{margin-top:0!important;}
  /* Keep a small gap between activity and the fixed bottom navigation. */
  .home-activity{margin-bottom:10px!important;}
  .hx-bottom-item.nav-loading{color:#008c09!important;}
  .hx-bottom-item.nav-loading .hx-bottom-img{
    filter:brightness(0) saturate(100%) invert(73%) sepia(68%) saturate(1454%) hue-rotate(73deg) brightness(55%) contrast(135%)!important;
  }
}


/* ===== FINAL INNER PAGE HEADER GAP + WHITE MODE ===== */
/* Home keeps its existing 60px slider spacing; internal pages get a clean 60px gap below the fixed header. */
.hx-inner-page #app-scroll-container{
  padding-top:60px!important;
  box-sizing:border-box!important;
}
.hx-inner-page .main-header{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid #e5e7eb!important;
  box-shadow:0 2px 12px rgba(15,23,42,.08)!important;
}
.hx-inner-page{background:#f4f5f7!important;color:#263142!important;}
.hx-inner-page .main-header .header-back-btn{background:#008c09!important;color:#fff!important;}
@media(max-width:600px){
  .hx-inner-page #app-scroll-container{
    top:0!important;
    bottom:72px!important;
    height:calc(100dvh - 72px)!important;
    padding-top:60px!important;
    padding-bottom:84px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
}

/* =========================================================
   CONSISTENT MOBILE UI SIZING
   Keep typography/control sizes stable across phone widths.
   Layouts may reflow, but component dimensions do not shrink
   just because the phone is narrower.
   ========================================================= */
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

body {
    min-width: 320px;
}

/* Stable common controls */
button, input, select, textarea {
    font-family: inherit;
}

@media (max-width: 768px) {
    .container { padding-left: 15px !important; padding-right: 15px !important; }
    .section-title { font-size: 1.2rem !important; }
    .view-more { font-size: .8rem !important; }
    .product-title { font-size: .85rem !important; }
    .old-price { font-size: .8rem !important; }
    .new-price { font-size: 1rem !important; }
    .btn-buy { font-size: .85rem !important; padding: 8px !important; }
    .info-title { font-size: 1.05rem !important; }
    .info-desc { font-size: .85rem !important; }
    .menu-item { font-size: .75rem !important; }
}


/* ===== USER REQUEST: REDUCE TOP EMPTY SPACE ONLY ===== */
@media (max-width:600px){
  /* Home slider: keep just a small gap below the fixed header. */
  .main-container{padding-top:10px!important;}

  /* Add Fund: remove the extra page-specific top margin. */
  .addmoney-wrap{margin-top:10px!important;}

  /* Account: remove the extra dashboard top margin. */
  .dashboard-grid{margin-top:10px!important;}

  /* My Orders: content starts close below the fixed header. */
  .orders-wrapper{margin-top:10px!important;}
}
/* Product card inner cleanup: keep only the outer card border. */
.product-card{padding:0!important;}
.image-container{border:0!important;border-radius:18px 18px 0 0!important;margin-bottom:7px!important;}
.product-title-text{border:0!important;background:transparent!important;border-radius:0!important;}
@media(max-width:600px){
  .product-card{padding:0!important;}
  .image-container{border:0!important;border-radius:17px 17px 0 0!important;}
}


/* ===== USER REQUEST: slider top gap + product image directly to title ===== */
@media (max-width:600px){
  .main-container{padding-top:20px!important;margin-top:0!important;}
  .bannerSwiper{margin-top:0!important;}
  .image-container{margin-bottom:0!important;}
}
.image-container{margin-bottom:0!important;}

/* ===== PRODUCT TITLE BACKGROUND ===== */
.product-title-text,
.product-title-premium {
    background: #f1f2f4 !important;
    border: 1px solid #e0e3e7 !important;
    border-radius: 13px !important;
    padding: 10px 7px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.product-title-premium {
    height: auto !important;
    min-height: 44px !important;
    margin: 0 0 12px 0 !important;
}

/* ===== PRODUCT CARD: slightly narrower inner controls ===== */
@media (max-width: 600px){
  .product-title-premium,
  .product-info-box > .btn-demo,
  .product-info-box > .btn-buy-premium,
  .product-price-box{
    width: calc(100% - 12px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .product-price-box{
    justify-content: center !important;
  }
}

/* ===== FINAL FIX: category line + auth spacing ===== */
@media (max-width:600px){
  .filter-container{
    margin-top:10px!important;
    margin-bottom:10px!important;
    padding-top:3px!important;
    padding-bottom:3px!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }
  .filter-container::before,.filter-container::after{content:none!important;display:none!important;border:0!important;box-shadow:none!important;}
  .auth-page,
  body:has(.auth-container),
  body:has(.auth-wrapper){
    padding-top:76px!important;
  }
  .auth-container,
  .auth-wrapper{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin:10px auto 28px!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
  .auth-container > *,
  .auth-wrapper .auth-card{
    box-sizing:border-box!important;
  }
  .auth-container .auth-container,
  .auth-wrapper .auth-card{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* FINAL HEADER EQUAL-SIZE FIX — 2026-09-30 */
.main-header .header-home-btn,
.main-header .header-back-btn,
.main-header .header-actions .direct-menu-toggle{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  max-width:42px!important;
  max-height:42px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
}
.main-header .header-home-btn .header-custom-home-icon,
.main-header .header-back-btn .header-custom-home-icon{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
  object-fit:contain!important;
  display:block!important;
}
.main-header .header-actions .direct-menu-toggle svg{
  width:24px!important;
  height:24px!important;
}
.main-header .header-logo{
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:600px){
  .main-header .header-home-btn,
  .main-header .header-back-btn,
  .main-header .header-actions .direct-menu-toggle{
    width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  }
  .main-header .header-logo{
    height:42px!important;min-height:42px!important;max-height:42px!important;
  }
}

/* ===== GLASS HEADER / USER REQUEST 2026-09-30 ===== */
/* Let the page content remain visible through the header, matching the glass-style reference. */
.main-header{
  background:rgba(24,24,24,.42)!important;
  border:1px solid rgba(255,255,255,.26)!important;
  border-bottom:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 7px 24px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(18px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(125%)!important;
}
.main-header .header-home-btn,
.main-header .header-back-btn{
  background:#008c09!important;
  box-shadow:0 4px 12px rgba(0,140,9,.22)!important;
}
.main-header .header-logo{background:#008c09!important;color:#fff!important;box-shadow:none!important;}
.main-header .header-actions .direct-menu-toggle{color:#fff!important;opacity:1!important;}
.main-header .header-actions .direct-menu-toggle svg{stroke:#fff!important;color:#fff!important;}
/* Notification controls are intentionally absent/hidden; keep only Home, brand and Menu/Login. */
.main-header .notification,
.main-header .notification-btn,
.main-header .notification-icon,
.main-header .header-notification,
.main-header [aria-label*="Notification" i],
.main-header [aria-label*="Notifications" i]{display:none!important;}

@media(max-width:600px){
  .main-header{
    background:rgba(24,24,24,.42)!important;
    backdrop-filter:blur(16px) saturate(125%)!important;
    -webkit-backdrop-filter:blur(16px) saturate(125%)!important;
  }
}

/* FINAL ACTUAL TRANSPARENT HEADER — 2026-09-30 */
.main-header,
.main-header:hover,
.main-header:active,
.main-header:focus,
.main-header:focus-within{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border-top-color:transparent!important;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:rgba(255,255,255,.18)!important;
  backdrop-filter:blur(20px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(140%)!important;
}
.main-header::before,
.main-header::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}

/* ===== TRUE GLASS HEADER FINAL FIX 2026-09-30 ===== */
/* The scroll viewport must extend underneath the fixed transparent header. */
#app-scroll-container{
  top:0!important;
  padding-top:0!important;
}
.hx-inner-page #app-scroll-container{
  top:0!important;
  padding-top:0!important;
}
.main-header,
.main-header:hover,
.main-header:active,
.main-header:focus,
.main-header:focus-within{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:blur(20px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(140%)!important;
}
.main-header::before,
.main-header::after{
  content:none!important;
  display:none!important;
  background:transparent!important;
  opacity:0!important;
  box-shadow:none!important;
}

/* FINAL HEADER GLASS ACTUAL FIX — content must pass behind the fixed header */
.main-header,
.hx-inner-page .main-header,
.hx-home-page .main-header,
.main-header:hover,
.main-header:active,
.main-header:focus,
.main-header:focus-within{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-top-color:transparent!important;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:rgba(255,255,255,.18)!important;
  box-shadow:none!important;
  backdrop-filter:blur(20px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(140%)!important;
}
.main-header::before,
.main-header::after,
.hx-inner-page .main-header::before,
.hx-inner-page .main-header::after,
.hx-home-page .main-header::before,
.hx-home-page .main-header::after{
  content:none!important;
  display:none!important;
  background:none!important;
  opacity:0!important;
  box-shadow:none!important;
}
#app-scroll-container,
.hx-inner-page #app-scroll-container{
  top:0!important;
  padding-top:0!important;
}
@media(max-width:600px){
  #app-scroll-container,
  .hx-inner-page #app-scroll-container{
    top:0!important;
    padding-top:0!important;
    height:calc(100dvh - 72px)!important;
    bottom:72px!important;
  }
  .main-container,
  .hx-inner-page .main-container{
    padding-top:0!important;
    margin-top:0!important;
  }
}

/* ===== FINAL FIX: fixed header must never cover page content ===== */
#app-scroll-container,
.hx-inner-page #app-scroll-container,
.hx-home-page #app-scroll-container{
  position:fixed!important;
  top:60px!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding-top:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
@media(max-width:600px){
  #app-scroll-container,
  .hx-inner-page #app-scroll-container,
  .hx-home-page #app-scroll-container{
    top:60px!important;
    bottom:72px!important;
    height:auto!important;
    padding-top:0!important;
  }
  .main-container,
  .hx-inner-page .main-container,
  .hx-home-page .main-container{
    padding-top:10px!important;
    margin-top:0!important;
  }
}


/* User request: make the fixed header darker and clearly distinct from page content. */
.main-header,
.main-header:hover,
.main-header:active,
.main-header:focus,
.main-header:focus-within,
.hx-inner-page .main-header,
.hx-home-page .main-header {
  background: rgba(0,92,6, 0.94) !important;
  background-color: rgba(0,92,6, 0.94) !important;
  background-image: none !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22) !important;
}

/* User request: bright white glowing fixed header, clearly separated from page background. */
.main-header,
.main-header:hover,
.main-header:active,
.main-header:focus,
.main-header:focus-within,
.hx-inner-page .main-header,
.hx-home-page .main-header {
  background: rgba(255, 255, 255, 0.97) !important;
  background-color: rgba(255, 255, 255, 0.97) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 0 18px rgba(255,255,255,0.95), 0 8px 26px rgba(30, 41, 59, 0.18) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

/* FINAL FIX: brighter fixed header and extra-white space above the home slider */
.main-header{background:rgba(255,255,255,.99)!important;background-color:#fff!important;border:1px solid rgba(255,255,255,.98)!important;border-bottom:1px solid #e7edf5!important;box-shadow:0 0 0 2px rgba(255,255,255,.92),0 5px 24px rgba(255,255,255,.98),0 8px 24px rgba(31,41,55,.14)!important;backdrop-filter:blur(22px) saturate(120%)!important;-webkit-backdrop-filter:blur(22px) saturate(120%)!important;z-index:9999!important}
@media(max-width:600px){body{background:#f7faff!important}.main-container{background:linear-gradient(to bottom,#fff 0,#fff 95px,#f7faff 190px)!important;padding-top:20px!important;margin-top:0!important}.bannerSwiper{margin-top:0!important;position:relative!important;z-index:1!important}}


/* FINAL REQUEST: keep the fixed header white, restore the slider-top area to its previous page background. */
.main-header, .main-header:hover, .main-header:active, .main-header:focus, .main-header:focus-within, .hx-inner-page .main-header, .hx-home-page .main-header { background:#fff !important; background-color:#fff !important; background-image:none !important; border:1px solid #fff !important; border-bottom:1px solid #e7edf5 !important; box-shadow:0 0 18px rgba(255,255,255,.95), 0 8px 26px rgba(30,41,59,.18) !important; backdrop-filter:blur(22px) saturate(150%) !important; -webkit-backdrop-filter:blur(22px) saturate(150%) !important; }
@media(max-width:600px){ body{background:#f4f5f7 !important;} .main-container{background:transparent !important; background-image:none !important; padding-top:20px !important; margin-top:0 !important;} .bannerSwiper{margin-top:0 !important; position:relative !important; z-index:1 !important;} }

/* FINAL STABILITY FIX: identical fixed header dimensions on every page and in every state */
.main-header,
.main-header:hover,
.main-header:active,
.main-header:focus,
.main-header:focus-within,
.hx-home-page .main-header,
.hx-inner-page .main-header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  height: 60px !important; min-height: 60px !important; max-height: 60px !important;
  margin: 0 !important; padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: #fff !important; background-color: #fff !important; background-image: none !important;
  border: 0 !important; border-bottom: 1px solid #e7edf5 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 18px rgba(255,255,255,.95), 0 5px 18px rgba(30,41,59,.14) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  z-index: 99999 !important;
}
.main-header .container,
.main-header .header-inner {
  width: 100% !important;
  height: 60px !important; min-height: 60px !important; max-height: 60px !important;
  margin: 0 !important; padding: 0 18px !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 0 !important;
}
.main-header .header-left-slot {
  position: relative !important; left: auto !important; top: auto !important;
  width: 42px !important; min-width: 42px !important; max-width: 42px !important;
  height: 60px !important; min-height: 60px !important; max-height: 60px !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  flex: 0 0 42px !important;
}
.main-header .header-home-btn,
.main-header .header-back-btn,
.main-header .header-actions .direct-menu-toggle {
  width: 42px !important; min-width: 42px !important; max-width: 42px !important;
  height: 42px !important; min-height: 42px !important; max-height: 42px !important;
  padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
  border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 42px !important;
}
.main-header .header-logo {
  position: absolute !important; left: 50% !important; top: 50% !important;
  transform: translate(-50%,-50%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 40px !important; min-height: 40px !important; max-height: 40px !important;
  width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 150px) !important;
  margin: 0 !important; padding: 0 18px !important; box-sizing: border-box !important;
  border-radius: 22px !important; line-height: 1 !important;
  background: #008c09 !important; color: #fff !important;
  box-shadow: none !important; white-space: nowrap !important;
}
.main-header .header-logo .site-brand-name {
  display: block !important; margin: 0 !important; padding: 0 !important;
  font-size: 16px !important; line-height: 20px !important; font-weight: 900 !important;
  letter-spacing: .6px !important; white-space: nowrap !important;
}
.main-header .header-actions {
  position: relative !important; margin: 0 !important; padding: 0 !important;
  height: 60px !important; min-height: 60px !important; max-height: 60px !important;
  display: flex !important; align-items: center !important; justify-content: flex-end !important;
  gap: 0 !important; flex: 0 0 42px !important;
}
.main-header .header-actions .direct-menu-toggle { background: #008c09 !important; color: #fff !important; }
@media (max-width: 600px) {
  .main-header, .main-header:hover, .main-header:active, .main-header:focus, .main-header:focus-within,
  .hx-home-page .main-header, .hx-inner-page .main-header {
    top: 0 !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important;
    padding: 0 !important; border-radius: 0 !important;
  }
  .main-header .container, .main-header .header-inner { height: 60px !important; min-height: 60px !important; max-height: 60px !important; padding: 0 18px !important; }
  .main-header .header-logo { height: 40px !important; min-height: 40px !important; max-height: 40px !important; max-width: calc(100vw - 130px) !important; padding: 0 14px !important; }
  .main-header .header-logo .site-brand-name { font-size: 15px !important; line-height: 20px !important; letter-spacing: .35px !important; }
}

<style id="LOGIN-10PX-GAP">
/* Login page: 10px outer horizontal gap */
.login-page .login-container,.login-page .auth-container,.login-page .login-card,.login-container,.auth-container,.login-card { margin-left:10px !important; margin-right:10px !important; width:auto !important; max-width:none !important; box-sizing:border-box !important; }
</style>