/* ==========================================================================
   BRO138 EXHAUSTIVE LUXURY DARK MODE ENGINE (OBSIDIAN & GOLD THEME)
   ========================================================================== */

:root {
  --dm-bg-base: #080a0f;
  --dm-bg-surface: #0f121a;
  --dm-bg-card: #131722;
  --dm-bg-card-hover: #181d2c;
  --dm-bg-card-alt: #1a2030;
  
  --dm-text-pure: #ffffff;
  --dm-text-main: #e2e8f0;
  --dm-text-muted: #94a3b8;
  --dm-text-subtle: #64748b;
  
  --dm-gold-main: #ffd700;
  --dm-gold-accent: #f5b400;
  --dm-gold-glow: rgba(245, 180, 0, 0.4);
  
  --dm-border-gold: rgba(245, 180, 0, 0.3);
  --dm-border-subtle: rgba(255, 255, 255, 0.08);
}

/* Base Document */
html, body {
  background-color: var(--dm-bg-base) !important;
  color: var(--dm-text-main) !important;
}

/* All headings, titles and text */
h1, h2, h3, h4, h5, h6, .pa-title, .pd-title, .product-title, .title {
  color: var(--dm-text-pure) !important;
}

p, span, li, dt, dd, label, small {
  color: var(--dm-text-main);
}

a {
  color: var(--dm-gold-accent);
}

a:hover {
  color: var(--dm-gold-main);
}

/* ==========================================================================
   1. NAVIGATION & TOPBAR
   ========================================================================== */
.topbar {
  background: #06070a !important;
  border-bottom: 1.5px solid var(--dm-border-gold) !important;
}

.topbar-right a {
  color: var(--dm-gold-accent) !important;
}

.navbar, .navbar-logo {
  background: linear-gradient(135deg, rgba(13, 16, 24, 0.98) 0%, rgba(8, 10, 15, 0.98) 100%) !important;
  border-bottom: 1.5px solid var(--dm-border-gold) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8) !important;
}

/* Search Bar */
.search, .search-box, .search-input, .m-search-input {
  background: #141824 !important;
  border: 1px solid var(--dm-border-gold) !important;
  color: #ffffff !important;
}

.search-input::placeholder, .m-search-input::placeholder {
  color: var(--dm-text-subtle) !important;
}

.search-btn, .search button {
  background: linear-gradient(135deg, #f5b400, #d97706) !important;
  color: #000000 !important;
  border: none !important;
}

.search-suggest, .search-suggest-dropdown, .search-results-popup {
  background: #111520 !important;
  border: 1.5px solid var(--dm-border-gold) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.9) !important;
  color: #ffffff !important;
}

.search-suggest-item, .suggest-item {
  color: var(--dm-text-main) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.search-suggest-item:hover, .suggest-item:hover {
  background: rgba(245, 180, 0, 0.15) !important;
  color: var(--dm-gold-main) !important;
}

/* ==========================================================================
   2. PRODUCT DETAIL PAGE (COMPLETE OVERRIDE OF WHITE BLOCKS)
   ========================================================================== */
.pd-wrapper, .product-detail, .pd-container, .pd-main, .pd-right, .pd-sidebar,
.pd-card, .pd-buy-box, .pd-promo-card, .pd-summary-card, .pd-main-card,
.pd-box, .pd-info-card, .pd-content-box, .pd-layout, .pd-left {
  background: var(--dm-bg-card) !important;
  border: 1px solid var(--dm-border-gold) !important;
  color: var(--dm-text-main) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px;
}

/* Sticky Header on Scroll */
.pd-sticky-header, .sticky-bar, .sticky-product-header {
  background: linear-gradient(135deg, rgba(15, 18, 26, 0.98) 0%, rgba(10, 12, 18, 0.98) 100%) !important;
  border-bottom: 1.5px solid var(--dm-border-gold) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
}

.pd-sticky-title {
  color: #ffffff !important;
}

.pd-sticky-price {
  color: var(--dm-gold-main) !important;
}

.pd-sticky-share-btn, .pd-sticky-btn-chat {
  background: #181d2c !important;
  border: 1px solid var(--dm-border-gold) !important;
  color: var(--dm-gold-main) !important;
}

.pd-sticky-btn-cart {
  background: #1a2030 !important;
  border: 1.5px solid var(--dm-gold-accent) !important;
  color: var(--dm-gold-accent) !important;
}

.pd-sticky-btn-buy {
  background: linear-gradient(135deg, #ffe066 0%, #f5b400 100%) !important;
  color: #000 !important;
  font-weight: 800 !important;
}

/* Product Gallery & Thumbnails */
.pd-main-image-wrap, .pd-gallery, .pd-gallery-main {
  background: #090b10 !important;
  border: 1px solid var(--dm-border-gold) !important;
  border-radius: 14px;
}

.pd-thumb-item, .thumbnail-btn, .gallery-thumb {
  background: #141824 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px;
}

.pd-thumb-item.active, .pd-thumb-item:hover, .thumbnail-btn.active {
  border-color: var(--dm-gold-main) !important;
  box-shadow: 0 0 12px var(--dm-gold-glow) !important;
}

/* Mega Categories Header Nav -> Pure White */
.mega-cats a, .mega-cats-wrapper a, #megaCatsScroll a, .mega-cats-wrapper .mega-cats a {
  color: #ffffff !important;
  font-weight: 600 !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.mega-cats a:hover, .mega-cats a.active, #megaCatsScroll a:hover {
  color: #ffd700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7) !important;
}

/* Breadcrumbs -> Pure White */
.pd-breadcrumb, .pd-breadcrumb a, .pd-breadcrumb span,
.breadcrumbs, .breadcrumbs a, .breadcrumbs span,
.breadcrumb, .breadcrumb a, .breadcrumb span,
.pa-breadcrumb, .pa-breadcrumb a, .pa-breadcrumb span {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  opacity: 0.95 !important;
}

.pd-breadcrumb a:hover, .breadcrumbs a:hover, .breadcrumb a:hover, .pa-breadcrumb a:hover {
  color: #ffd700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6) !important;
  text-decoration: underline !important;
}

.pd-breadcrumb span, .breadcrumbs span, .breadcrumb span {
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 4px !important;
}

.pd-breadcrumb .current, .breadcrumb .current, .breadcrumbs .current {
  color: #ffd700 !important;
  font-weight: 700 !important;
}

/* Short Description / Info Box */
.pd-short-desc, .pd-desc-content, .pd-description, .pd-specs-wrap {
  background: #0d1017 !important;
  border: 1px solid rgba(245, 180, 0, 0.25) !important;
  border-radius: 12px;
  color: #cbd5e1 !important;
  padding: 16px;
}

.pd-short-desc p, .pd-short-desc ul, .pd-short-desc li {
  color: #cbd5e1 !important;
}

.pd-short-desc strong {
  color: var(--dm-gold-main) !important;
}

/* Pricing, Stock, and Badges */
.pd-price, .pd-price-now, .price-current {
  color: var(--dm-gold-main) !important;
  text-shadow: 0 0 14px var(--dm-gold-glow) !important;
}

.pd-price-old, .price-original {
  color: var(--dm-text-subtle) !important;
}

.stock-badge, .pd-discount-badge {
  background: var(--dm-gold-accent) !important;
  color: #000 !important;
  font-weight: 800 !important;
}

/* Side Promo Cards, Installment, and Tabs */
.installment-box, .inst-box, .stock-status-box, .sidebar-promo-card,
.paylater-promo, .inst-summary {
  background: #141824 !important;
  border: 1px solid var(--dm-border-gold) !important;
  color: var(--dm-text-main) !important;
  border-radius: 12px;
}

.inst-tab-btn, .tab-btn {
  background: #0f121c !important;
  color: var(--dm-text-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.inst-tab-btn.active, .inst-tab-btn:hover, .tab-btn.active {
  background: #1e2436 !important;
  color: var(--dm-gold-main) !important;
  border-color: var(--dm-gold-accent) !important;
}

.inst-month-item, .installment-item {
  background: #0d1017 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}

/* Specifications Table & Data Tables */
table, .pd-specs-table, .spec-table, .benchmark-table, .inst-table {
  background: #0d1017 !important;
  border: 1px solid var(--dm-border-gold) !important;
  color: #cbd5e1 !important;
  border-radius: 12px;
  overflow: hidden;
}

table th, .pd-specs-table th, .spec-table th, .benchmark-table th {
  background: #181d2c !important;
  color: var(--dm-gold-main) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  font-weight: 800;
}

table td, .pd-specs-table td, .spec-table td, .benchmark-table td {
  background: #0d1017 !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

table tr:hover td {
  background: #141926 !important;
}

/* ==========================================================================
   3. PRODUCT RECOMMENDATIONS & ARCHIVE GRID
   ========================================================================== */
.product-archive, .pa-container, .related-products-section, .recom-section,
.product-grid-container {
  background: transparent !important;
}

.product-card, .pa-card, .recom-card, .product-grid-item, .card {
  background: var(--dm-bg-card) !important;
  border: 1px solid var(--dm-border-gold) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  border-radius: 14px;
}

.product-card:hover, .pa-card:hover, .recom-card:hover {
  transform: translateY(-4px);
  border-color: var(--dm-gold-main) !important;
  box-shadow: 0 12px 30px rgba(245, 180, 0, 0.25) !important;
}

.pa-filter-badge {
  background: #141824 !important;
  border: 1px solid var(--dm-border-gold) !important;
  color: #cbd5e1 !important;
}

.pa-filter-badge strong {
  color: var(--dm-gold-main) !important;
}

.pa-filter-badge .clear {
  background: #1e2436 !important;
  color: var(--dm-text-main) !important;
}

/* ==========================================================================
   4. CHAT / CS WIDGET
   ========================================================================== */
.chat-container, .chat-modal, .chat-box, .chat-conversations-list,
.chat-messages-container {
  background: #0f121a !important;
  border-color: var(--dm-border-gold) !important;
  color: #ffffff !important;
}

.chat-conversation-item {
  background: #131722 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
}

.chat-conversation-item:hover {
  background: #181d2c !important;
}

.chat-conversation-item.active {
  background: #1e2538 !important;
}

.chat-conversation-name {
  color: #ffffff !important;
}

.chat-message-bubble {
  background: #181d2c !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chat-message.mine .chat-message-bubble {
  background: linear-gradient(135deg, #996e00, #f5b400) !important;
  color: #000000 !important;
}

/* ==========================================================================
   5. ARTICLE SECTION (.artikel-glow-sb88)
   ========================================================================== */
.artikel-glow-sb88 {
  background: linear-gradient(160deg, #131722 0%, #0d1017 50%, #11141e 100%) !important;
  border: 2px solid var(--dm-border-gold) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), inset 0 0 30px rgba(245, 180, 0, 0.05) !important;
  color: #cbd5e1 !important;
}

.artikel-glow-sb88 h1, .artikel-glow-sb88 h2, .artikel-glow-sb88 h3 {
  color: var(--dm-gold-main) !important;
  text-shadow: 0 0 14px var(--dm-gold-glow) !important;
}

.artikel-glow-sb88 p, .artikel-glow-sb88 li {
  color: #cbd5e1 !important;
}

.artikel-highlight, .artikel-glow-sb88 blockquote {
  background: rgba(245, 180, 0, 0.07) !important;
  border-left: 4px solid var(--dm-gold-accent) !important;
  color: #e2e8f0 !important;
}

/* ==========================================================================
   6. FAQ ACCORDION & REVIEWS
   ========================================================================== */
.sb88-rainbow-item, .faq-item, .accordion-item {
  background: #141824 !important;
  border: 1px solid var(--dm-border-gold) !important;
  border-radius: 12px;
}

.sb88-rainbow-item:hover, .faq-item:hover {
  border-color: var(--dm-gold-main) !important;
  box-shadow: 0 4px 20px rgba(245, 180, 0, 0.2) !important;
}

.sb88-rainbow-item button, .faq-header-btn {
  background: transparent !important;
  color: #ffffff !important;
}

.sb88-rainbow-answer, .faq-answer {
  background: transparent !important;
  color: #cbd5e1 !important;
}

.review-summary-box, .review-card-item, .reviews-container {
  background: #141824 !important;
  border: 1px solid var(--dm-border-gold) !important;
  border-radius: 14px;
}

.review-card-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--dm-border-gold) !important;
}

.review-card-item:hover {
  border-color: var(--dm-gold-main) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   7. MODALS, POPUPS & BOTTOM NAV
   ========================================================================== */
.modal-content, .modal-dialog, .pd-lightbox-content {
  background: #121622 !important;
  border: 1.5px solid var(--dm-border-gold) !important;
  box-shadow: 0 15px 55px rgba(0, 0, 0, 0.95) !important;
  color: #ffffff !important;
  border-radius: 18px;
}

.modal-header, .modal-body, .modal-footer {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

.bottom-nav, .mobile-bottom-bar {
  background: #0a0d14 !important;
  border-top: 1.5px solid var(--dm-border-gold) !important;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.8) !important;
}

.bottom-nav a, .mobile-bottom-bar a {
  color: var(--dm-text-muted) !important;
}

.bottom-nav a.active, .bottom-nav a:hover,
.mobile-bottom-bar a.active, .mobile-bottom-bar a:hover {
  color: var(--dm-gold-main) !important;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
footer, .footer, .footer-top, .footer-bottom, .site-footer {
  background: #06070a !important;
  border-top: 1.5px solid var(--dm-border-gold) !important;
  color: var(--dm-text-muted) !important;
}

.footer a, .footer-links a {
  color: var(--dm-text-muted) !important;
}

.footer a:hover, .footer-links a:hover {
  color: var(--dm-gold-main) !important;
}

.footer h4, .footer-heading {
  color: #ffffff !important;
}

.payment-methods-grid, .payments-list, .partner-badges {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px;
  padding: 12px;
}