/**
 * Premium CSS – QuocHuy MMO
 * ============================================================
 * True Luxury Aesthetic: High Contrast Black & Metallic Gold.
 * No muddy glassmorphism. Crisp text, clean edges, premium feel.
 * ============================================================
 */

/* ── 1. CORE VARIABLES (TRUE LUXURY) ────────────────────── */
body[data-layout="premium"] {
  --bg-body: #050505; /* True Black for highest contrast */
  --bg-card: #111111; /* Deep charcoal for cards */
  --bg-hover: #1a1a1a;
  
  --border-light: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(212, 175, 55, 0.3);
  
  --text-main: #ffffff; /* Pure white for high readability */
  --text-muted: #a1a1aa; /* Light silver for secondary text */
  
  --gold-metallic: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
  --gold-flat: #D4AF37;
  --gold-glow: rgba(212, 175, 55, 0.4);
  
  background: var(--bg-body) !important;
  color: var(--text-main) !important;
}

/* ── 2. GLOBAL OVERRIDES ─────────────────────────────────── */
body[data-layout="premium"] a { color: var(--gold-flat); transition: all 0.3s ease; }
body[data-layout="premium"] a:hover { color: #FCF6BA; }

body[data-layout="premium"] h1, 
body[data-layout="premium"] h2, 
body[data-layout="premium"] h3, 
body[data-layout="premium"] h4, 
body[data-layout="premium"] h5, 
body[data-layout="premium"] h6 {
  color: var(--text-main);
  font-weight: 700;
}

body[data-layout="premium"] .section-title {
  background: var(--gold-metallic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: 0.5px;
}

body[data-layout="premium"] .section-desc,
body[data-layout="premium"] .section-subtitle,
body[data-layout="premium"] p {
  color: var(--text-muted) !important;
}

body[data-layout="premium"] .section-products,
body[data-layout="premium"] .section-news,
body[data-layout="premium"] .section-about,
body[data-layout="premium"] .home-categories,
body[data-layout="premium"] .home-steps,
body[data-layout="premium"] .product-section,
body[data-layout="premium"] .footer {
  background: transparent !important;
  border-top: 1px solid var(--border-light);
}

/* ── 3. HEADER & NAV ─────────────────────────────────────── */
body[data-layout="premium"] .top-bar {
  background: #000 !important;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-muted);
}

body[data-layout="premium"] .header {
  background: #0a0a0a !important;
  border-bottom: 1px solid var(--border-gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

/* Fix Logo: Make it look intentional on dark bg */
body[data-layout="premium"] .logo {
  background: #ffffff !important; /* Solid white to hold the logo */
  border-radius: 6px;
  padding: 6px 12px;
  border: 1px solid var(--gold-flat);
  box-shadow: 0 0 15px var(--gold-glow);
}

/* Search Bar */
body[data-layout="premium"] .search-bar {
  background: #111;
  border: 1px solid var(--border-light);
  border-radius: 4px;
}
body[data-layout="premium"] .search-bar:focus-within {
  border-color: var(--gold-flat);
  box-shadow: 0 0 10px var(--gold-glow);
}
body[data-layout="premium"] .search-cat { border-right: 1px solid var(--border-light); background: transparent; }
body[data-layout="premium"] .search-cat select,
body[data-layout="premium"] .search-input {
  background: transparent !important;
  color: var(--text-main) !important;
}
body[data-layout="premium"] .search-cat select option { background: #111; color: #fff; }
body[data-layout="premium"] .search-input::placeholder { color: #555; }
body[data-layout="premium"] .search-btn {
  background: var(--gold-metallic) !important;
  color: #000 !important;
  font-weight: 800;
  border-radius: 0 4px 4px 0;
}

/* Main Nav */
body[data-layout="premium"] .main-nav {
  background: #050505 !important;
  border-bottom: 1px solid var(--border-light);
}
body[data-layout="premium"] .nav-item a {
  background: transparent !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none !important;
  border: 1px solid transparent;
}
body[data-layout="premium"] .nav-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-muted) !important;
}
body[data-layout="premium"] .nav-item a:hover,
body[data-layout="premium"] .nav-item.active a {
  background: #111 !important;
  color: var(--gold-flat) !important;
  border: 1px solid var(--border-gold) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.15) !important;
}
body[data-layout="premium"] .nav-item a:hover .nav-icon,
body[data-layout="premium"] .nav-item.active a .nav-icon {
  background: var(--gold-metallic) !important;
  color: #000 !important;
  box-shadow: 0 0 5px var(--gold-glow);
}
body[data-layout="premium"] .nav-item a::after {
  background: var(--gold-flat) !important;
  height: 2px;
}

/* Action Boxes (Cart, Wallet, Auth) */
body[data-layout="premium"] .action-box {
  background: #111 !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px;
}
body[data-layout="premium"] .action-box:hover {
  border-color: var(--gold-flat) !important;
  background: #1a1a1a !important;
}
body[data-layout="premium"] .action-icon {
  background: #000 !important;
  color: var(--gold-flat) !important;
  border: 1px solid var(--border-gold);
}
body[data-layout="premium"] .cart-badge {
  background: var(--gold-metallic) !important;
  color: #000 !important;
}
body[data-layout="premium"] .action-label { color: var(--text-muted) !important; }
body[data-layout="premium"] .action-value { color: var(--text-main) !important; }
body[data-layout="premium"] .auth-texts a { color: var(--text-main) !important; }
body[data-layout="premium"] .auth-texts a:last-child { color: var(--gold-flat) !important; }

/* Contact CTA (Zalo) */
body[data-layout="premium"] .contact-cta {
  background: #111 !important;
  border: 1px solid var(--border-light) !important;
}
body[data-layout="premium"] .contact-cta .ring {
  background: var(--gold-metallic) !important;
  color: #000 !important;
  box-shadow: 0 0 10px var(--gold-glow);
}
body[data-layout="premium"] .contact-cta .cta-label { color: var(--text-muted) !important; }
body[data-layout="premium"] .contact-cta .cta-phone { color: var(--gold-flat) !important; }

/* ── 4. CARDS (PRODUCTS, CATEGORIES, STEPS) ──────────────── */
body[data-layout="premium"] .feature-card,
body[data-layout="premium"] .step-card,
body[data-layout="premium"] .product-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

body[data-layout="premium"] .feature-card:hover,
body[data-layout="premium"] .step-card:hover,
body[data-layout="premium"] .product-card:hover {
  border-color: var(--gold-flat) !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.8), 0 0 15px var(--border-gold) !important;
  background: var(--bg-hover) !important;
}

body[data-layout="premium"] .feature-card h3,
body[data-layout="premium"] .step-card h3,
body[data-layout="premium"] .card-name {
  color: var(--text-main) !important;
}

body[data-layout="premium"] .feature-thumb {
  background: #000 !important;
  color: var(--gold-flat) !important;
  border: 1px solid var(--border-gold) !important;
}

body[data-layout="premium"] .step-card { text-align: center; padding-top: 40px; }
body[data-layout="premium"] .step-number {
  background: var(--gold-metallic) !important;
  color: #000 !important;
  border: 4px solid #000 !important;
  width: 50px; height: 50px; font-size: 24px; top: -25px;
  box-shadow: 0 0 15px var(--gold-glow);
}

/* Product Card Details */
body[data-layout="premium"] .card-img {
  background: #050505 !important; /* Pure black image area */
  border-bottom: 1px solid var(--border-light) !important;
}

body[data-layout="premium"] .card-icon {
  background: #111 !important;
  color: var(--gold-flat) !important;
  border: 1px solid var(--border-gold) !important;
}

body[data-layout="premium"] .card-meta {
  background: #000 !important;
  border: 1px solid var(--border-light) !important;
}
body[data-layout="premium"] .meta-item { color: var(--text-muted) !important; }

body[data-layout="premium"] .buy-btn {
  background: var(--gold-metallic) !important;
  color: #000 !important;
  border: none !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}
body[data-layout="premium"] .buy-btn:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 15px var(--gold-glow);
}

.premium-price {
  background: var(--gold-metallic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  font-size: 18px;
}

/* Badges & Tags */
body[data-layout="premium"] .card-badge,
body[data-layout="premium"] .ctag {
  background: #000 !important;
  border: 1px solid var(--gold-flat) !important;
  color: var(--gold-flat) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}
body[data-layout="premium"] .card-badge.badge-prem {
  background: var(--gold-metallic) !important;
  color: #000 !important;
  border: none !important;
}

/* ── 5. FLASH SALE (DARK LUXURY) ─────────────────────────── */
/* Override default slider/flash sale backgrounds */
body[data-layout="premium"] .slide-bg { background: #0a0a0a !important; }
body[data-layout="premium"] .premium-flash-sale {
  background: #0a0a0a !important;
  border-top: 1px solid var(--border-gold) !important;
  border-bottom: 1px solid var(--border-gold) !important;
}
.flash-title { color: var(--gold-flat) !important; }
.c-unit { background: #000 !important; color: var(--gold-flat) !important; border: 1px solid var(--border-gold) !important; }
.flash-card { background: #111 !important; border: 1px solid var(--border-light) !important; }
.flash-card:hover { border-color: var(--gold-flat) !important; }
.flash-price-new { color: var(--gold-flat) !important; }
.flash-buy-btn { background: var(--gold-metallic) !important; color: #000 !important; }

/* ── 6. SUBPAGES (DEPOSIT, CHECKOUT, HISTORY) ────────────── */
body[data-layout="premium"] .deposit-card,
body[data-layout="premium"] .deposit-history,
body[data-layout="premium"] .ck-section,
body[data-layout="premium"] .summary-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
  color: var(--text-main) !important;
  border-radius: 8px !important;
}

body[data-layout="premium"] .page-header h1,
body[data-layout="premium"] .card-title,
body[data-layout="premium"] .section-title {
  background: var(--gold-metallic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-layout="premium"] .page-header p { color: var(--text-muted) !important; }

/* Pills & Methods */
body[data-layout="premium"] .user-bal-pill {
  background: #000 !important;
  color: var(--gold-flat) !important;
  border: 1px solid var(--border-gold) !important;
}
body[data-layout="premium"] .pay-methods { background: #000 !important; border: 1px solid var(--border-light) !important; }
body[data-layout="premium"] .pay-method { color: var(--text-muted) !important; }
body[data-layout="premium"] .pay-method.active {
  background: #111 !important;
  color: var(--gold-flat) !important;
  border: 1px solid var(--border-gold) !important;
}

/* Inputs & Forms */
body[data-layout="premium"] .field label { color: var(--text-muted) !important; }
body[data-layout="premium"] .field input,
body[data-layout="premium"] .field select {
  background: #000 !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-main) !important;
}
body[data-layout="premium"] .field input:focus,
body[data-layout="premium"] .field select:focus {
  border-color: var(--gold-flat) !important;
  box-shadow: 0 0 5px var(--gold-glow) !important;
}
body[data-layout="premium"] .field select option { background: #111; color: #fff; }

body[data-layout="premium"] .qr-box {
  background: #000 !important;
  border: 1px dashed var(--gold-flat) !important;
}
body[data-layout="premium"] .qr-box img { border: 2px solid var(--gold-flat) !important; }
body[data-layout="premium"] .qr-box div { color: var(--text-muted) !important; }
body[data-layout="premium"] .qr-box div:first-of-type { color: var(--gold-flat) !important; }

body[data-layout="premium"] .btn-submit,
body[data-layout="premium"] .checkout-sidebar .buy-btn,
body[data-layout="premium"] .pay-modal .buy-btn {
  background: var(--gold-metallic) !important;
  color: #000 !important;
  font-weight: 800 !important;
  border: none !important;
}

/* Tables & Checkout */
body[data-layout="premium"] .deposit-history th,
body[data-layout="premium"] .deposit-history td,
body[data-layout="premium"] table td,
body[data-layout="premium"] table th {
  border-bottom: 1px solid var(--border-light) !important;
}
body[data-layout="premium"] .deposit-history th,
body[data-layout="premium"] table th { color: var(--gold-flat) !important; }

body[data-layout="premium"] .cart-item { border-bottom: 1px solid var(--border-light) !important; }
body[data-layout="premium"] .item-details h4 { color: var(--text-main) !important; }
body[data-layout="premium"] .item-price { color: var(--gold-flat) !important; }
body[data-layout="premium"] .item-actions div { background: #000 !important; border: 1px solid var(--border-light) !important; color: var(--text-main) !important; }
body[data-layout="premium"] .qty-btn { color: var(--gold-flat) !important; }
body[data-layout="premium"] .remove-btn { color: #ef4444 !important; }
body[data-layout="premium"] .summary-row { color: var(--text-muted) !important; }
body[data-layout="premium"] .summary-row span:last-child { color: var(--text-main) !important; }
body[data-layout="premium"] .summary-row.total { border-top: 1px solid var(--border-gold) !important; color: var(--gold-flat) !important; }
body[data-layout="premium"] .total-price { color: var(--gold-flat) !important; }

/* Modals */
body[data-layout="premium"] .pay-modal,
body[data-layout="premium"] .modal-content {
  background: #111 !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--text-main) !important;
}
body[data-layout="premium"] .pm-header,
body[data-layout="premium"] .modal-header {
  background: #000 !important;
  border-bottom: 1px solid var(--border-light) !important;
}
body[data-layout="premium"] #pm-title,
body[data-layout="premium"] .modal-title { color: var(--gold-flat) !important; }
body[data-layout="premium"] .bank-info { background: #000 !important; border: 1px solid var(--border-light) !important; color: var(--text-main) !important; }
body[data-layout="premium"] .bank-name { color: var(--gold-flat) !important; }

/* Trust Bar & Footer */
body[data-layout="premium"] .trust-bar { background: #0a0a0a !important; border-bottom: 1px solid var(--border-light) !important; }
body[data-layout="premium"] .trust-item { color: var(--text-main) !important; }
body[data-layout="premium"] .trust-ico { background: #111 !important; color: var(--gold-flat) !important; border: 1px solid var(--border-gold) !important; }
body[data-layout="premium"] .footer { background: #050505 !important; }
body[data-layout="premium"] .footer h3 { color: var(--gold-flat) !important; }
body[data-layout="premium"] .footer-bottom { background: #000 !important; border-top: 1px solid var(--border-light) !important; }

/* ── 7. SERVICE PAGES (FACEBOOK, GMAIL, TOOL...) ─────────── */
body[data-layout="premium"] .service-hero {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
}

body[data-layout="premium"] .service-hero-card {
  background: #000 !important;
  border: 1px solid var(--border-gold) !important;
  box-shadow: 0 0 15px var(--gold-glow) !important;
}

body[data-layout="premium"] .hero-callout-title {
  color: var(--gold-flat) !important;
}

body[data-layout="premium"] .hero-list li {
  color: var(--text-muted) !important;
}
body[data-layout="premium"] .hero-list li i {
  color: var(--gold-flat) !important;
}

body[data-layout="premium"] .hero-badge {
  background: #000 !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-light) !important;
}
body[data-layout="premium"] .hero-badge i {
  color: var(--gold-flat) !important;
}

/* ── 8. SUBPAGES (HISTORY, DEPOSIT, CHECKOUT, AUTH) ────────────── */
body[data-layout="premium"] .topbar {
  background: #050505 !important;
  border-bottom: 1px solid var(--border-light) !important;
}

body[data-layout="premium"] .table-card,
body[data-layout="premium"] .ck-section,
body[data-layout="premium"] .deposit-card,
body[data-layout="premium"] .deposit-history,
body[data-layout="premium"] .summary-card,
body[data-layout="premium"] .auth-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.8) !important;
}

body[data-layout="premium"] th {
  background: #111 !important;
  color: var(--gold-flat) !important;
  border-bottom: 1px solid var(--border-gold) !important;
}

body[data-layout="premium"] td {
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-muted) !important;
}

body[data-layout="premium"] .section-title,
body[data-layout="premium"] .card-title,
body[data-layout="premium"] .page-title {
  color: var(--gold-flat) !important;
}

body[data-layout="premium"] .back-home {
  color: var(--gold-flat) !important;
}

body[data-layout="premium"] .auth-wrapper {
  background: #000 !important;
}
body[data-layout="premium"] .pay-methods {
  background: transparent !important;
}
body[data-layout="premium"] .pay-method {
  color: var(--text-muted) !important;
  border: 1px solid var(--border-light) !important;
}
body[data-layout="premium"] .pay-method.active {
  background: #111 !important;
  color: var(--gold-flat) !important;
  border: 1px solid var(--border-gold) !important;
}
body[data-layout="premium"] .qr-box {
  background: #111 !important;
  border: 2px dashed var(--border-gold) !important;
}

/* ── 9. GUIDE & NEWS PAGES ────────────── */
body[data-layout="premium"] .guide-card,
body[data-layout="premium"] .news-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.8) !important;
  color: var(--text-main) !important;
}

body[data-layout="premium"] .guide-card:hover,
body[data-layout="premium"] .news-card:hover {
  border-color: var(--border-gold) !important;
  box-shadow: 0 0 15px var(--gold-glow) !important;
  transform: translateY(-4px) !important;
}

body[data-layout="premium"] .guide-icon,
body[data-layout="premium"] .news-img {
  background: #111 !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--gold-flat) !important;
}

body[data-layout="premium"] .guide-info h4,
body[data-layout="premium"] .news-title {
  color: var(--gold-flat) !important;
}

body[data-layout="premium"] .guide-info p,
body[data-layout="premium"] .news-desc,
body[data-layout="premium"] .news-meta {
  color: var(--text-muted) !important;
}