/* ===================================
   DARK MODE - Patricia Gámez Style
   Black backgrounds + White text + Gold accents
   Matching original Web Peluqueria Patricia Gamez
   =================================== */

/* === GLOBAL DARK BACKGROUNDS === */

body {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

/* All sections - black or charcoal */
section,
.section {
  background-color: var(--color-black) !important;
}

.section-gray {
  background-color: var(--color-charcoal) !important;
}

.section-light {
  background-color: var(--color-charcoal-light) !important;
}

/* === CARDS - Dark with white text === */
.card,
.service-card,
.review-card,
.stat-card,
.contact-info-card,
.value-card,
div[class*="card"],
.timeline-content {
  background-color: var(--color-charcoal-light) !important;
  background: var(--color-charcoal-light) !important;
  color: var(--color-white) !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
}

/* === TYPOGRAPHY - White text por defecto === */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-white) !important;
}

p, 
span:not(.whatsapp-float):not(.social-link):not(.btn):not([class*="btn"]), 
li,
td,
th,
label {
  color: var(--color-gray-light) !important;
}

.lead,
.big {
  color: var(--color-gray-light) !important;
}

/* === LINKS - Gold === */
a {
  color: var(--color-primary-gold) !important;
}

a:hover {
  color: var(--color-gold-light) !important;
}

/* === FORMS - Dark inputs === */
input,
textarea,
select {
  background-color: var(--color-charcoal-light) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-gray-dark) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-gray) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary-gold) !important;
}

/* === BUTTONS - TEXTO NEGRO en botones dorados para contraste === */
.btn-primary,
.btn[class*="primary"],
.btn-nav-cta,
button[class*="gold"],
a[class*="btn-primary"] {
  background: var(--gradient-gold) !important;
  color: var(--color-black) !important;
  border: none !important;
}

.btn-primary:hover,
.btn-nav-cta:hover {
  color: var(--color-black) !important;
}

/* Icons inside gold buttons - BLACK for contrast */
.btn-primary i,
.btn[class*="primary"] i,
a[class*="btn-primary"] i {
  color: var(--color-black) !important;
}

.btn-secondary,
.btn[class*="secondary"] {
  background-color: transparent !important;
  color: var(--color-primary-gold) !important;
  border: 2px solid var(--color-primary-gold) !important;
}

.btn-light {
  background-color: var(--color-charcoal-light) !important;
  color: var(--color-white) !important;
  border-color: var(--color-gray) !important;
}

/* === WHATSAPP FLOAT - Green (NOT gold) === */
.whatsapp-float {
  background-color: #25D366 !important;
  color: white !important;
}

.whatsapp-float:hover {
  background-color: #128C7E !important;
}

/* === SOCIAL LINKS - Keep original colors === */
.social-link {
  background: rgba(212, 175, 55, 0.1) !important;
  color: var(--color-primary-gold) !important;
  border-color: var(--color-primary-gold) !important;
}

.social-link:hover {
  background: var(--color-primary-gold) !important;
  color: var(--color-black) !important;
}

/* === PREMIUM BRANDS CAROUSEL - Black bg + Gold text === */
.premium-brands,
.brands-carousel,
.brand-item {
  background-color: var(--color-black) !important;
  color: var(--color-primary-gold) !important;
}

/* === TABLES === */
table {
  background-color: var(--color-charcoal-light) !important;
  color: var(--color-white) !important;
}

thead {
  background-color: var(--color-charcoal) !important;
}

/* === FOOTER - Gray text, gold links === */
footer,
#footer {
  background-color: var(--color-charcoal) !important;
}

#footer h4,
.footer-column h4 {
  color: var(--color-primary-gold) !important;
}

#footer p,
.footer-column p,
.footer-copy {
  color: var(--color-gray-light) !important;
}

#footer a,
.footer-column a,
.footer-links a {
  color: var(--color-primary-gold) !important;
}

#footer a:hover,
.footer-column a:hover {
  color: var(--color-gold-light) !important;
}

/* === HEADER === */
header,
#header {
  background-color: var(--color-charcoal) !important;
}

/* === PREVENT WHITE BACKGROUNDS === */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:white"],
[style*="background: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:white"],
[style*="background-color: white"] {
  background-color: var(--color-charcoal) !important;
  background: var(--color-charcoal) !important;
}

/* === STATS/NUMBERS - Keep gold === */
.stat-number,
.stat-card h3,
.gold-text,
.accent-text {
  color: var(--color-primary-gold) !important;
}

/* Stat card descriptions - WHITE for readability */
.stat-card p,
.stat-card small,
.stat-description {
  color: var(--color-white) !important;
  opacity: 0.9;
}

/* Service card notes and warnings - GOLD to stand out */
.service-note,
.service-warning,
small,
.text-muted,
em {
  color: var(--color-primary-gold) !important;
  background: none !important;
  font-style: italic;
}

/* Ensure gold text is SOLID color, no gradients */
.gold-text {
  color: var(--color-primary-gold) !important;
  background: none !important;
}

/* Service card descriptions - LIGHTER gray */
.service-card p,
.service-description {
  color: var(--color-off-white) !important;
}

/* === TIMELINE === */
.timeline-dot {
  background: var(--gradient-gold) !important;
  border-color: var(--color-primary-gold) !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar-track {
  background: var(--color-charcoal) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary-gold) !important;
}