/* YR TRUST EXPORTS — Enterprise Palette: White + Navy Blue + Gold */
:root {
  --color-dark-bg: #0b0e14;
  --color-dark-card: #121722;
  --color-dark-border: #1e2638;
  
  --color-navy-dark: #0a192f;
  --color-navy-text: #0f172a;
  --color-navy-muted: #1e293b;

  --color-gold-main: #d4af37;
  --color-gold-hover: #f59e0b;
  --color-gold-gradient: linear-gradient(135deg, #f59e0b 0%, #d4af37 50%, #b8860b 100%);
  --color-red-gradient: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}

/* Base Body (Dark Mode Default) */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-dark-bg);
  color: #ffffff;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

/* Dark Mode Navy Container Overrides */
.bg-\[\#0b0e14\],
.bg-\[\#121722\],
.bg-\[\#0d111a\],
.bg-\[\#161d2b\],
.bg-slate-900,
.bg-slate-950,
.card-dark,
.section-hero-top,
.section-1-wrapper,
.sticky-nav {
  color: #ffffff;
}

/* ==========================================
   BUTTONS & ACCENTS (Theme-Independent)
   ========================================== */
.btn-gold {
  background: var(--color-gold-gradient) !important;
  color: #0a192f !important;
  font-weight: 800;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35);
  border: none !important;
  cursor: pointer;
  text-decoration: none;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
  color: #000000 !important;
}

.btn-outline-gold {
  border: 2px solid var(--color-gold-main) !important;
  color: var(--color-gold-main) !important;
  font-weight: 800;
  padding: 0.7rem 1.6rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  background: transparent !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.btn-outline-gold:hover {
  background: var(--color-gold-main) !important;
  color: #0a192f !important;
}

.btn-red {
  background: var(--color-red-gradient) !important;
  color: #ffffff !important;
  font-weight: 800;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 18px rgba(185, 28, 28, 0.4);
  border: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.btn-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6);
  color: #ffffff !important;
}

.text-gradient-gold {
  background: var(--color-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tag-badge {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: 0.375rem;
  background: rgba(212, 175, 55, 0.2);
  color: var(--color-gold-main) !important;
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: inline-block;
  text-transform: uppercase;
}

.theme-toggle-btn {
  background: #121722;
  border: 1.5px solid var(--color-gold-main);
  color: var(--color-gold-main);
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}
.theme-toggle-btn:hover {
  background: var(--color-gold-main);
  color: #0a192f !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

/* Header Banner Strip */
.header-banner-strip {
  background: #0a192f !important;
  border-bottom: 2px solid var(--color-gold-main);
  color: #ffffff !important;
  width: 100% !important;
}

/* Sticky Navbar */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: rgba(11, 14, 20, 0.96);
  border-bottom: 1px solid var(--color-dark-border);
  transition: all 0.3s ease;
}

.nav-link {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  transition: color 0.25s ease;
  padding: 0.5rem 0;
}
.nav-link:hover, .nav-link.active {
  color: var(--color-gold-main) !important;
}

/* Section Hero Top */
.section-hero-top {
  background: linear-gradient(135deg, #0b0e14 0%, #121722 50%, #0a192f 100%);
  position: relative;
  border-bottom: 3px solid var(--color-gold-main);
  overflow: hidden;
}

.section-2-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  border-radius: 9999px;
  background: rgba(18, 23, 34, 0.95);
  border: 1.5px solid var(--color-gold-main);
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.enquiry-bar-box {
  background: #121722;
  border: 2.5px solid var(--color-gold-main);
  border-radius: 0.75rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.25);
  padding: 0.4rem;
}

/* Product Cards Grid */
.card-dark {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 0.85rem;
  transition: all 0.3s ease;
}
.card-dark:hover {
  border-color: var(--color-gold-main);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.card-product-grid {
  background: #121722;
  border: 1.5px solid #1e2638;
  border-radius: 0.85rem;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-product-grid:hover {
  transform: translateY(-5px);
  border-color: var(--color-gold-main);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
}

/* Filter Tabs */
.filter-tab {
  padding: 0.7rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: #121722;
  border: 1.5px solid #1e2638;
  cursor: pointer;
  transition: all 0.25s ease;
}
.filter-tab.active, .filter-tab:hover {
  background: var(--color-gold-gradient) !important;
  color: #0a192f !important;
  border-color: var(--color-gold-main) !important;
}


/* ==========================================
   PERFECT LIGHT MODE: WHITE + NAVY + GOLD
   (Complete contrast of dark mode)
   ========================================== */
html.light-mode body {
  background-color: #ffffff !important;
  color: var(--color-navy-text) !important;
}

/* Sticky Navigation in Light Mode */
html.light-mode .sticky-nav {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(10, 25, 47, 0.08);
}
html.light-mode .nav-link {
  color: var(--color-navy-dark) !important;
  font-weight: 800;
}
html.light-mode .nav-link:hover, 
html.light-mode .nav-link.active {
  color: var(--color-gold-main) !important;
}

html.light-mode #mobile-menu {
  background-color: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
}
html.light-mode #mobile-menu a {
  color: var(--color-navy-dark) !important;
}

/* Hero Section in Light Mode (Pure White & Light Slate backdrop with Deep Navy text) */
html.light-mode .section-hero-top {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
  border-bottom-color: var(--color-gold-main) !important;
}
html.light-mode .section-hero-top h1,
html.light-mode .section-hero-top p,
html.light-mode .section-hero-top span:not(.text-gradient-gold) {
  color: var(--color-navy-dark) !important;
}

/* Badge Pills in Light Mode */
html.light-mode .section-2-badge-pill {
  background: #ffffff !important;
  border-color: var(--color-gold-main) !important;
  color: var(--color-navy-dark) !important;
  box-shadow: 0 4px 15px rgba(10, 25, 47, 0.08) !important;
}
html.light-mode .section-2-badge-pill span {
  color: var(--color-navy-dark) !important;
}

/* Quick Enquiry Search Box in Light Mode */
html.light-mode .enquiry-bar-box {
  background: #ffffff !important;
  border-color: var(--color-gold-main) !important;
  box-shadow: 0 8px 25px rgba(10, 25, 47, 0.12) !important;
}
html.light-mode .enquiry-bar-box input {
  color: var(--color-navy-dark) !important;
}
html.light-mode .enquiry-bar-box input::placeholder {
  color: #64748b !important;
}

/* General Sections & Backgrounds in Light Mode */
html.light-mode section {
  background-color: #ffffff !important;
}
html.light-mode .bg-\[\#0d111a\],
html.light-mode .bg-\[\#121722\],
html.light-mode .bg-slate-900 {
  background-color: #f8fafc !important;
}
/* Keep dark hero banners dark with white text */
html.light-mode section.bg-slate-950 {
  background-color: #020617 !important;
}

/* Cards in Light Mode */
html.light-mode .card-dark,
html.light-mode .card-product-grid {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 25px rgba(10, 25, 47, 0.08) !important;
  color: var(--color-navy-dark) !important;
}
html.light-mode .card-dark h3,
html.light-mode .card-dark h4,
html.light-mode .card-dark p,
html.light-mode .card-dark span:not(.spec-key):not(.spec-val):not(.spec-summary),
html.light-mode .card-product-grid h3,
html.light-mode .card-product-grid p,
html.light-mode .card-product-grid span:not(.tag-badge):not(.bg-amber-500):not(.badge-spec):not(.badge-navy-status):not(.spec-key):not(.spec-val):not(.spec-summary) {
  color: var(--color-navy-dark) !important;
}

/* Badge Text Contrast Rules: Black Text in Yellow BG, White Text in Navy BG */
.badge-spec,
span.badge-spec,
.bg-amber-500,
span.bg-amber-500,
html.light-mode .bg-amber-500,
html.light-mode span.bg-amber-500,
html.light-mode .badge-spec,
html.light-mode span.badge-spec,
html.light-mode .card-product-grid span.badge-spec {
  background-color: #f59e0b !important;
  color: #000000 !important;
  font-weight: 900 !important;
}

.badge-navy-status,
span.badge-navy-status,
.bg-slate-950\/90,
.bg-slate-950\/85,
span.bg-slate-950\/90,
span.bg-slate-950\/85,
html.light-mode .bg-slate-950\/90,
html.light-mode span.bg-slate-950\/90,
html.light-mode .badge-navy-status,
html.light-mode span.badge-navy-status,
html.light-mode .card-product-grid span.badge-navy-status {
  background-color: #0a192f !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
}

/* Typography in Light Mode: All Text is Navy Blue */
html.light-mode h1:not(.text-gradient-gold),
html.light-mode h2:not(.text-gradient-gold),
html.light-mode h3:not(.text-gradient-gold),
html.light-mode h4:not(.text-gradient-gold),
html.light-mode h5:not(.text-gradient-gold),
html.light-mode h6:not(.text-gradient-gold) {
  color: var(--color-navy-dark) !important;
}

html.light-mode p,
html.light-mode span:not(.text-gradient-gold):not(.tag-badge):not(.text-amber-400):not(.top-strip-text):not(.badge-navy-status):not(.badge-spec):not(.spec-key):not(.spec-val):not(.spec-summary),
html.light-mode li,
html.light-mode label {
  color: var(--color-navy-muted) !important;
}

/* HIGH-SPECIFICITY OVERRIDES FOR LIGHT MODE TOP BANNER & DARK HERO BANNERS */
/* Top Header Announcement Strip (Always pure white text on navy blue background) */
.header-banner-strip,
.header-banner-strip *,
.header-banner-strip span,
.header-banner-strip a,
.top-strip-text,
span.top-strip-text,
html.light-mode .header-banner-strip,
html.light-mode .header-banner-strip *,
html.light-mode .header-banner-strip span,
html.light-mode .header-banner-strip span.top-strip-text,
html.light-mode .header-banner-strip a,
html.light-mode span.top-strip-text {
  color: #ffffff !important;
}
.header-banner-strip i,
html.light-mode .header-banner-strip i {
  color: #fbbf24 !important;
}
.header-banner-strip a:hover,
html.light-mode .header-banner-strip a:hover {
  color: #fbbf24 !important;
}

/* Dark Hero Banner Text in Light Mode (Product Page, About Page, Contact Page) */
html.light-mode .dark-banner-text,
html.light-mode .dark-banner-text h1,
html.light-mode .dark-banner-text p,
html.light-mode .dark-banner-text span:not(.text-gradient-gold),
html.light-mode .keep-white,
html.light-mode section.bg-slate-950 h1,
html.light-mode section.bg-slate-950 p {
  color: #ffffff !important;
}

/* Phone & Email Links in Light Mode (Black text by default, Yellow/Gold on hover) */
html.light-mode a[href^="tel:"],
html.light-mode a[href^="mailto:"] {
  color: #000000 !important;
  font-weight: 400 !important;
  transition: color 0.25s ease;
}
html.light-mode a[href^="tel:"]:hover,
html.light-mode a[href^="mailto:"]:hover {
  color: #f59e0b !important;
}

/* Header Banner Strip Phone & Email Links (Keep white in top bar) */
html.light-mode .header-banner-strip a[href^="tel:"],
html.light-mode .header-banner-strip a[href^="mailto:"] {
  color: #ffffff !important;
}
html.light-mode .header-banner-strip a[href^="tel:"]:hover,
html.light-mode .header-banner-strip a[href^="mailto:"]:hover {
  color: #fbbf24 !important;
}

/* Buttons in Light Mode */
html.light-mode .theme-toggle-btn {
  background-color: #ffffff !important;
  color: var(--color-navy-dark) !important;
  border-color: #cbd5e1 !important;
}
html.light-mode .theme-toggle-btn:hover {
  background-color: var(--color-gold-main) !important;
  color: #0a192f !important;
}

html.light-mode .btn-outline-gold {
  color: var(--color-navy-dark) !important;
  border-color: var(--color-gold-main) !important;
  background: #ffffff !important;
}
html.light-mode .btn-outline-gold:hover {
  background: var(--color-gold-main) !important;
  color: #0a192f !important;
}

/* Filter Tabs in Light Mode */
html.light-mode .filter-tab:not(.active) {
  background: #ffffff !important;
  color: var(--color-navy-dark) !important;
  border-color: #cbd5e1 !important;
}

/* Footer & Footer Links Styling (Dark Mode & Light Mode) */
footer a {
  color: #cbd5e1 !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.25s ease;
}
footer a:hover {
  color: #f59e0b !important; /* Yellow/Gold on Hover */
  text-decoration: none !important;
}

html.light-mode footer {
  background-color: #f8fafc !important;
  color: var(--color-navy-dark) !important;
  border-top: 2px solid var(--color-gold-main) !important;
}
html.light-mode footer h4 {
  color: var(--color-navy-dark) !important;
  font-weight: 800;
}
html.light-mode footer p,
html.light-mode footer span,
html.light-mode footer li {
  color: var(--color-navy-muted) !important;
}
html.light-mode footer a {
  color: #0a192f !important; /* Navy Blue Theme Color */
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.25s ease;
}
html.light-mode footer a:hover {
  color: #f59e0b !important; /* Yellow / Gold on Hover */
  text-decoration: none !important;
}

/* Modal Popup in Light Mode */
html.light-mode #enquiry-modal .modal-content {
  background-color: #ffffff !important;
  border-color: var(--color-gold-main) !important;
  color: var(--color-navy-dark) !important;
}
html.light-mode #enquiry-modal h3,
html.light-mode #enquiry-modal label {
  color: var(--color-navy-dark) !important;
}
html.light-mode #enquiry-modal input,
html.light-mode #enquiry-modal textarea {
  background-color: #f8fafc !important;
  color: var(--color-navy-dark) !important;
  border-color: #cbd5e1 !important;
}

/* Animations & Scrollbar */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-dark-bg);
}
::-webkit-scrollbar-thumb {
  background: #1e2638;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-main);
}

/* ==========================================
   PRODUCT SPECIFICATIONS BUTTON & POPUP MODAL
   ========================================== */

/* Specification Trigger Button (Dark Mode Default) */
.spec-btn-trigger {
  background-color: rgba(18, 23, 34, 0.9) !important;
  border: 1px solid #1e2638 !important;
  transition: all 0.25s ease !important;
}

.spec-btn-trigger .spec-title,
.spec-btn-trigger .spec-title span {
  color: #ffffff !important;
  font-weight: 700 !important;
  transition: color 0.25s ease !important;
}

.spec-btn-trigger:hover {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border-color: #f59e0b !important;
}

.spec-btn-trigger:hover,
.spec-btn-trigger:hover * {
  color: #f59e0b !important;
}

/* Specification Trigger Button in Light Mode */
html.light-mode .spec-btn-trigger {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

html.light-mode .spec-btn-trigger .spec-title,
html.light-mode .spec-btn-trigger .spec-title span {
  color: #000000 !important; /* Visible Solid Black */
  font-weight: 800 !important;
}

html.light-mode .spec-btn-trigger:hover {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border-color: #f59e0b !important;
}

html.light-mode .spec-btn-trigger:hover,
html.light-mode .spec-btn-trigger:hover * {
  color: #f59e0b !important; /* Yellow on Hover */
}

/* Specification Popup Modal Styling (Dark Mode Default) */
#spec-modal .spec-popup-key {
  color: #fbbf24 !important; /* Gold label in dark mode */
}
#spec-modal .spec-popup-val {
  color: #e2e8f0 !important;
}

#spec-modal .spec-popup-row:hover {
  background-color: rgba(245, 158, 11, 0.12) !important;
}
#spec-modal .spec-popup-row:hover .spec-popup-key,
#spec-modal .spec-popup-row:hover .spec-popup-val {
  color: #f59e0b !important;
}

/* Specification Popup Modal in Light Mode */
html.light-mode #spec-modal .spec-modal-box {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
  box-shadow: 0 20px 40px rgba(10, 25, 47, 0.2) !important;
}

html.light-mode #spec-modal .spec-modal-title {
  color: #0a192f !important;
}

html.light-mode #spec-modal .spec-popup-section-title {
  color: #d97706 !important;
}

html.light-mode #spec-modal .spec-popup-list {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

html.light-mode #spec-modal .spec-popup-row {
  border-bottom-color: #e2e8f0 !important;
}

html.light-mode #spec-modal .spec-popup-key {
  color: #000000 !important; /* Solid Black keys in Light Mode */
  font-weight: 800 !important;
}

html.light-mode #spec-modal .spec-popup-val {
  color: #1e293b !important; /* Navy slate values */
  font-weight: 600 !important;
}

html.light-mode #spec-modal .spec-popup-row:hover {
  background-color: rgba(245, 158, 11, 0.12) !important;
}

html.light-mode #spec-modal .spec-popup-row:hover .spec-popup-key,
html.light-mode #spec-modal .spec-popup-row:hover .spec-popup-val {
  color: #f59e0b !important;
}

html.light-mode #spec-modal .spec-modal-close {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
}
html.light-mode #spec-modal .spec-modal-close:hover {
  background-color: #f59e0b !important;
  color: #000000 !important;
}

/* Excavator & Engineering Preferred Category Box (ALWAYS NAVY BLUE BACKGROUND) */
.excavator-brand-box,
.eng-subcategory-box,
html.light-mode .excavator-brand-box,
html.light-mode .eng-subcategory-box {
  background-color: #0a192f !important; /* Always Navy Blue */
  border: 2px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
}

.excavator-brand-box h2,
.excavator-brand-box .brand-heading-text,
.eng-subcategory-box h2,
.eng-subcategory-box .brand-heading-text,
html.light-mode .excavator-brand-box h2,
html.light-mode .excavator-brand-box .brand-heading-text,
html.light-mode .eng-subcategory-box h2,
html.light-mode .eng-subcategory-box .brand-heading-text {
  color: #ffffff !important; /* Pure White Title */
}

/* Titles inside Navy Blue Card Boxes (ALWAYS PURE WHITE) */
.brand-card h3,
.brand-card h3 *,
.brand-card div h3,
html.light-mode .brand-card h3,
html.light-mode .brand-card h3 * {
  color: #ffffff !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Product Sections Below (WHITE in Light Mode, NAVY BLUE in Dark Mode) */
html.light-mode .brand-section {
  background-color: #ffffff !important; /* White Background in Light Mode */
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 8px 30px rgba(10, 25, 47, 0.08) !important;
  color: var(--color-navy-dark) !important;
}

html.light-mode .brand-section .brand-section-title {
  color: #0a192f !important; /* Deep Navy Blue Title */
  font-weight: 900 !important;
}

html.light-mode .brand-section p {
  color: #d97706 !important; /* Amber Subtitle */
  font-weight: 700 !important;
}

/* Dark Mode Brand Sections */
.brand-section {
  background-color: #0a192f !important; /* Rich Navy Blue in Dark Mode */
  border: 2px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
  color: #ffffff !important;
}

.brand-section .brand-section-title {
  color: #ffffff !important;
}

.brand-section p {
  color: #fbbf24 !important;
}