/*
  Petza homepage dark-mode consistency layer.
  Keep this stylesheet LAST in the homepage CSS list.
*/

.dark-mode {
    background: #020617 !important;
    color: #f8fafc !important;
}

.dark-mode .header {
    background: #0b1220 !important;
    border-bottom-color: #1e293b !important;
    color: #f8fafc !important;
}

.dark-mode .logo-full,
.dark-mode .logo-full span,
.dark-mode .logo h2,
.dark-mode .nav-links a,
.dark-mode .nav-dropdown-toggle {
    color: #f8fafc !important;
}

.dark-mode .logo-full span:first-child {
    color: #f59e0b !important;
}

.dark-mode .nav-links a:hover,
.dark-mode .nav-dropdown-toggle:hover {
    color: #fbbf24 !important;
}

.dark-mode .nav-dropdown-menu {
    background: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 25px 60px rgba(0,0,0,.45) !important;
}

.dark-mode .nav-dropdown-group {
    border-color: #334155 !important;
}

.dark-mode .dropdown-heading {
    color: #fbbf24 !important;
}

.dark-mode .nav-dropdown-menu a {
    color: #f8fafc !important;
}

.dark-mode .nav-dropdown-menu a small {
    color: #94a3b8 !important;
}

.dark-mode .nav-dropdown-menu a:hover {
    background: #1e293b !important;
}

.dark-mode .hero {
    background: #020617 !important;
}

.dark-mode .hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(2, 6, 23, .97) 0%,
            rgba(2, 6, 23, .82) 55%,
            rgba(2, 6, 23, .60) 100%
        ) !important;
}

.dark-mode .hero-content h1,
.dark-mode .hero-content p,
.dark-mode .hero-assurance li {
    color: #f8fafc !important;
}

.dark-mode .hero-content p {
    color: #cbd5e1 !important;
}

.dark-mode .hero-tag {
    color: #fbbf24 !important;
    background: rgba(245, 158, 11, .12) !important;
    border-color: rgba(245, 158, 11, .25) !important;
}

.dark-mode .secondary-btn {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

.dark-mode .secondary-btn:hover {
    background: #1e293b !important;
}

.dark-mode .search-section,
.dark-mode .stats-section,
.dark-mode .gallery-section,
.dark-mode .newsletter-section,
.dark-mode .premium-browse-section,
.dark-mode .testimonials {
    background: #020617 !important;
}

.dark-mode .search-card,
.dark-mode .category-card,
.dark-mode .pet-card,
.dark-mode .testimonial-card,
.dark-mode .premium-category-card,
.dark-mode .premium-featured-card,
.dark-mode .contact-form-container,
.dark-mode .stat-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.30) !important;
}

.dark-mode .search-card-heading span,
.dark-mode .stat-card h3 {
    color: #fbbf24 !important;
}

.dark-mode .search-card-heading h2,
.dark-mode .search-card-heading p,
.dark-mode .field label,
.dark-mode .section-title h2,
.dark-mode .category-card h3,
.dark-mode .pet-card h3,
.dark-mode .about-content h3,
.dark-mode .contact-info h3,
.dark-mode .testimonial-card h4 {
    color: #f8fafc !important;
}

.dark-mode .search-card-heading p,
.dark-mode .section-title p,
.dark-mode .category-card p,
.dark-mode .pet-card p,
.dark-mode .about-content p,
.dark-mode .contact-info p,
.dark-mode .testimonial-card p,
.dark-mode .testimonial-top span,
.dark-mode .stat-card p {
    color: #cbd5e1 !important;
}

.dark-mode .field select,
.dark-mode .field input,
.dark-mode .newsletter-section input {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

.dark-mode .field select option {
    background: #111827;
    color: #f8fafc;
}

.dark-mode .footer {
    background: #01040a !important;
    color: #f8fafc !important;
}

.dark-mode .footer a,
.dark-mode .footer p {
    color: #cbd5e1 !important;
}

.dark-mode .footer a:hover {
    color: #fbbf24 !important;
}

.dark-mode .wishlist-btn,
.dark-mode .cart-btn,
.dark-mode .dark-mode-btn,
.dark-mode .menu-btn {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

.dark-mode .wishlist-btn:hover,
.dark-mode .cart-btn:hover,
.dark-mode .dark-mode-btn:hover,
.dark-mode .menu-btn:hover {
    background: #334155 !important;
    color: #fbbf24 !important;
}

.dark-mode .cart-sidebar,
.dark-mode .cart-header,
.dark-mode .cart-items,
.dark-mode .cart-footer {
    background: #0f172a !important;
    color: #f8fafc !important;
}

.dark-mode .cart-header,
.dark-mode .cart-footer {
    border-color: #334155 !important;
}

@media (max-width: 1250px) {
    .dark-mode .mobile-menu {
        background: #0b1220 !important;
        color: #f8fafc !important;
    }

    .dark-mode .mobile-menu a {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }

    .dark-mode .mobile-menu a:hover {
        background: #1e293b !important;
        color: #fbbf24 !important;
    }
}