/**
 * ==============================================
 * DARK MODE - Centralized Theme Styles
 * ==============================================
 * 
 * All dark mode overrides in one place for:
 * - Global theme variables
 * - Component-specific dark mode
 * - Calendar dark mode
 * - Property cards dark mode
 * - Form inputs
 * - Navigation
 * - And more...
 * 
 * This file is loaded globally in header.php
 */

/* ==============================================
   DARK MODE THEME VARIABLES
   ============================================== */

[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0f172a;           /* Slate 900 - Main background */
    --bg-secondary: #1e293b;         /* Slate 800 - Sections */
    --bg-tertiary: #334155;          /* Slate 700 - Hover states */
    --bg-elevated: #1e293b;          /* Cards, modals - slightly elevated */
    --bg-light: #334155;             /* Lighter background elements */
    
    /* Text Colors */
    --text-primary: #f1f5f9;         /* Slate 100 - Main text */
    --text-secondary: #cbd5e1;       /* Slate 300 - Secondary text */
    --text-light: #94a3b8;           /* Slate 400 - Muted text */
    --text-dark: #f1f5f9;            /* Primary text (same as text-primary) */
    
    /* Border Colors */
    --border-color: #475569;         /* Slate 600 - Borders */
    --border-light: #64748b;         /* Slate 500 - Lighter borders */
    
    /* Primary Color (remains the same in dark mode) */
    --primary-color: #dd7447;        /* Brand orange */
}

/* ==============================================
   THEME TOGGLE BUTTON
   ============================================== */

[data-theme="dark"] .theme-toggle .moon-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}

[data-theme="dark"] .theme-toggle .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ==============================================
   IMAGES - DARK MODE INTEGRATION
   ============================================== */

[data-theme="dark"] {
    /* Slight opacity reduction for better dark mode integration */
    img:not(.nav-logo svg):not(.hero-img) {
        opacity: 0.9;
    }
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* ==============================================
   CARDS
   ============================================== */

[data-theme="dark"] .feature-card,
[data-theme="dark"] .booking-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
}

/* ==============================================
   HERO SECTION
   ============================================== */

[data-theme="dark"] .hero::before {
    background: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .hero,
[data-theme="dark"] .hero-content,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-subtitle {
    color: #ffffff !important;
}

[data-theme="dark"] .hero-title {
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.8),
        0 4px 16px rgba(0, 0, 0, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .hero-subtitle {
    text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.7),
        0 4px 12px rgba(0, 0, 0, 0.5);
    opacity: 0.95;
}

/* ==============================================
   SEARCH BOX
   ============================================== */

[data-theme="dark"] .search-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .search-box input,
[data-theme="dark"] .search-box select {
    background: transparent;
    color: var(--text-primary);
    border: none;
}

[data-theme="dark"] .search-box select {
    background-image: none;
}

[data-theme="dark"] .search-box input::placeholder {
    color: var(--text-tertiary);
}

[data-theme="dark"] .hero-date-box {
    background: var(--bg-secondary);
}

[data-theme="dark"] .hero-date-box:hover {
    background: rgba(44, 62, 80, 0.9);
}

[data-theme="dark"] .hero-date-box.active {
    background: rgba(74, 144, 226, 0.15);
    border-color: rgba(74, 144, 226, 0.3);
}

[data-theme="dark"] .hero-date-display {
    color: #ecf0f1;
}

[data-theme="dark"] .hero-date-display .placeholder {
    color: #9ca3af;
}

[data-theme="dark"] .hero-date-box i {
    color: #ffca28;
}

[data-theme="dark"] .calendar-instructions {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(148, 163, 184, 0.25);
}

[data-theme="dark"] .calendar-instructions-title {
    color: var(--text-primary);
}

[data-theme="dark"] .calendar-instructions-list li {
    color: var(--text-secondary);
}

[data-theme="dark"] .calendar-instructions-list i {
    color: #f59e0b;
}

[data-theme="dark"] .calendar-date-box {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.25);
}

[data-theme="dark"] .calendar-date-box:hover,
[data-theme="dark"] .calendar-date-box:focus-visible {
    border-color: #dd7447;
    box-shadow: 0 10px 25px rgba(221, 116, 71, 0.2);
}

[data-theme="dark"] .calendar-date-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .calendar-date-value {
    color: var(--text-primary);
}

[data-theme="dark"] .calendar-date-value .placeholder {
    color: rgba(148, 163, 184, 0.6);
}

[data-theme="dark"] .calendar-date-help {
    color: var(--text-secondary);
}

[data-theme="dark"] .calendar-date-highlight {
    border-color: rgba(221, 116, 71, 0.75) !important;
    box-shadow: 0 18px 36px rgba(221, 116, 71, 0.4);
    background: rgba(221, 116, 71, 0.08);
}

[data-theme="dark"] .calendar-date-confirmed::after {
    background: #22c55e;
    color: #0f172a;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.45);
}

[data-theme="dark"] .transition-check {
    background: #34d399;
    color: #0f172a;
    box-shadow: 0 20px 48px rgba(52, 211, 153, 0.5);
}

[data-theme="dark"] .calendar-transition-message {
    background: rgba(221, 116, 71, 0.92);
    color: #0f172a;
}

/* ==============================================
   BUTTONS
   ============================================== */

[data-theme="dark"] .btn-primary {
    background: var(--primary-color);
    color: white;
}

/* ==============================================
   FOOTER
   ============================================== */

[data-theme="dark"] .footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    color: #ecf0f1;
}

[data-theme="dark"] .footer-content,
[data-theme="dark"] .footer-section,
[data-theme="dark"] .footer-section p,
[data-theme="dark"] .footer-section ul li,
[data-theme="dark"] .footer-section ul li a,
[data-theme="dark"] .footer-logo,
[data-theme="dark"] .footer-bottom {
    color: #ecf0f1;
}

[data-theme="dark"] .nav-logo .logo-accent,
[data-theme="dark"] .footer-logo .logo-accent {
    color: #dd7447;
}

[data-theme="dark"] .footer-section h3 {
    color: #f3c237;
}

[data-theme="dark"] .social-links a {
    color: #f3c237;
}

[data-theme="dark"] .footer-section ul li a:hover {
    color: #ffd54f;
}

/* ==============================================
   MODALS
   ============================================== */

[data-theme="dark"] .modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
}

/* ==============================================
   BREADCRUMBS
   ============================================== */

[data-theme="dark"] .breadcrumb {
    background: var(--bg-secondary);
}

/* ==============================================
   TABLES
   ============================================== */

[data-theme="dark"] table {
    background: var(--bg-elevated);
}

[data-theme="dark"] th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] td {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] tr:hover {
    background: var(--bg-tertiary);
}

/* ==============================================
   SCROLLBAR
   ============================================== */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* ==============================================
   LOADING STATES
   ============================================== */

[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%
    );
}

/* ==============================================
   FORM INPUTS
   ============================================== */

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="tel"]:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--primary-color);
    background: var(--bg-secondary);
}

/* ==============================================
   CALENDAR COMPONENT - DARK MODE
   ============================================== */

[data-theme="dark"] .calendar-day.today {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .calendar-day.booked {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .calendar-day.available {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .calendar-day.available:hover {
    background: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.4);
}

/* Selected dates - lighter in dark mode for better visibility */
[data-theme="dark"] .calendar-day.selected-checkin,
[data-theme="dark"] .calendar-day.selected-checkout {
    background: #f97316;
    color: white;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
}

[data-theme="dark"] .calendar-day.in-range {
    background: rgba(249, 115, 22, 0.5);
    color: var(--text-primary);
    border: 1px solid rgba(249, 115, 22, 0.3);
}

/* Hover preview range - darker text for readability in dark mode */
[data-theme="dark"] .calendar-day.preview-range {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(249, 115, 22, 0.25);
}

[data-theme="dark"] .calendar-day.preview-checkout {
    background: rgba(251, 146, 60, 0.6) !important;
    color: white !important;
}

/* Past dates - muted and no hover effect in dark mode */
[data-theme="dark"] .calendar-day.past {
    background: rgba(100, 116, 139, 0.15);
    color: rgba(148, 163, 184, 0.5);
    cursor: not-allowed;
}

[data-theme="dark"] .calendar-day.past:hover {
    background: rgba(100, 116, 139, 0.15) !important;
    color: rgba(148, 163, 184, 0.5) !important;
    transform: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] #load-more-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] #load-more-btn:hover {
    background: rgba(221, 116, 71, 0.15);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] #load-more-btn.loading {
    background: rgba(51, 65, 85, 0.6);
    color: var(--text-secondary);
}

[data-theme="dark"] .share-trigger-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .share-trigger-btn i {
    color: #f9a26a;
}

[data-theme="dark"] .share-trigger-btn:hover {
    background: rgba(51, 65, 85, 0.95);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.35);
}

[data-theme="dark"] .share-menu-popover {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(71, 85, 105, 0.6);
    box-shadow: 0 24px 50px rgba(2, 6, 23, 0.45);
}

[data-theme="dark"] .share-option {
    color: #e2e8f0;
}

[data-theme="dark"] .share-option i {
    color: #f9a26a;
}

[data-theme="dark"] .share-option:hover {
    background: rgba(221, 116, 71, 0.15);
    color: #f9a26a;
}

[data-theme="dark"] .share-feedback {
    color: #4ade80;
}

[data-theme="dark"] .property-location-marker-label {
    background: #f3a261;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.85);
}

/* ==============================================
   PROPERTY MANAGEMENT PAGE
   ============================================== */

[data-theme="dark"] .pm-hero {
    background: linear-gradient(135deg, rgba(2, 6, 23, 0.9), rgba(30, 41, 59, 0.7)), url('https://images.unsplash.com/photo-1512914890250-353c97c9e87b?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
}

[data-theme="dark"] .pm-hero-card {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(148, 163, 184, 0.35);
}

[data-theme="dark"] .pm-secondary-btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .pm-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .pm-stats {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

[data-theme="dark"] .pm-stat-card {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(71, 85, 105, 0.6);
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.4);
}

[data-theme="dark"] .pm-stat-value,
[data-theme="dark"] .pm-stat-label {
    color: #f8fafc;
}

[data-theme="dark"] .pm-stat-caption {
    color: rgba(226, 232, 240, 0.75);
}

[data-theme="dark"] .pm-section-header p {
    color: rgba(226, 232, 240, 0.75);
}

[data-theme="dark"] .pm-services {
    background: #0f172a;
}

[data-theme="dark"] .pm-service-card {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .pm-service-card p {
    color: rgba(226, 232, 240, 0.75);
}

[data-theme="dark"] .pm-process {
    background: linear-gradient(180deg, #020617 0%, #111827 100%);
}

[data-theme="dark"] .pm-timeline-step {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .pm-testimonial {
    background: #0f172a;
}

[data-theme="dark"] .pm-testimonial-content p,
[data-theme="dark"] .pm-testimonial-card li {
    color: rgba(226, 232, 240, 0.75);
}

[data-theme="dark"] .pm-testimonial-card {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .pm-faq {
    background: #020617;
}

[data-theme="dark"] .pm-faq-item {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(71, 85, 105, 0.4);
}

[data-theme="dark"] .pm-faq-item p {
    color: rgba(226, 232, 240, 0.75);
}

[data-theme="dark"] .pm-cta {
    background: linear-gradient(135deg, #f3a261, #dd7447);
}

[data-theme="dark"] .pm-cta-btn {
    background: #0f172a;
    color: #f8fafc;
}

[data-theme="dark"] .pm-cta-btn:hover {
    background: rgba(15, 23, 42, 0.85);
}

/* Utility Notice */
[data-theme="dark"] .utility-notice {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.15) 0%, rgba(180, 83, 9, 0.2) 100%);
    border-left-color: #f59e0b;
}

[data-theme="dark"] .utility-notice-icon {
    color: #fbbf24;
}

[data-theme="dark"] .utility-notice-title {
    color: #fcd34d;
}

[data-theme="dark"] .utility-notice-text {
    color: #fde68a;
}

/* ==============================================
   PROPERTY CARDS - DARK MODE
   ============================================== */

[data-theme="dark"] .property-card,
[data-theme="dark"] .similar-card-inner {
    background: var(--bg-elevated);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .property-card:hover,
[data-theme="dark"] .similar-card:hover .similar-card-inner {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .property-card.highlighted {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(221, 116, 71, 0.3);
}

[data-theme="dark"] .property-card.highlighted:hover {
    box-shadow: 0 12px 28px rgba(221, 116, 71, 0.4);
}

[data-theme="dark"] .property-title,
[data-theme="dark"] .similar-title,
[data-theme="dark"] .compact-title {
    color: var(--text-primary);
}

[data-theme="dark"] .property-location,
[data-theme="dark"] .property-features,
[data-theme="dark"] .similar-location,
[data-theme="dark"] .similar-features,
[data-theme="dark"] .compact-location {
    color: var(--text-secondary);
}

[data-theme="dark"] .property-price .price,
[data-theme="dark"] .similar-price-amount,
[data-theme="dark"] .compact-price .price {
    color: var(--text-primary);
}

[data-theme="dark"] .property-price .period,
[data-theme="dark"] .similar-price-period,
[data-theme="dark"] .compact-price .period {
    color: var(--text-secondary);
}

[data-theme="dark"] .property-image,
[data-theme="dark"] .similar-image,
[data-theme="dark"] .compact-image {
    background: rgba(100, 116, 139, 0.2);
}

[data-theme="dark"] .carousel-nav {
    background: rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .carousel-nav:hover {
    background: rgba(30, 41, 59, 1);
}

[data-theme="dark"] .carousel-nav i {
    color: #e2e8f0;
}

[data-theme="dark"] .favorite-btn {
    background: rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .favorite-btn:hover {
    background: rgba(30, 41, 59, 1);
}

/* ==============================================
   SIMILAR PROPERTIES SECTION
   ============================================== */

[data-theme="dark"] .similar-properties {
    background: var(--bg-secondary);
}

[data-theme="dark"] .similar-properties-heading {
    color: var(--text-primary);
}

/* ==============================================
   MAP STYLES (LEAFLET)
   ============================================== */

[data-theme="dark"] #map {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Leaflet controls in dark mode */
[data-theme="dark"] .leaflet-control-zoom a,
[data-theme="dark"] .leaflet-bar a {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .leaflet-control-zoom a:hover,
[data-theme="dark"] .leaflet-bar a:hover {
    background: var(--bg-hover) !important;
}

[data-theme="dark"] .leaflet-control-attribution {
    background: rgba(30, 41, 59, 0.9) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .leaflet-control-attribution a {
    color: var(--accent-primary) !important;
}

/* Price markers in dark mode */
[data-theme="dark"] .price-marker {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .price-marker:hover,
[data-theme="dark"] .price-marker.highlighted {
    background: #dd7447 !important; /* Solid orange, no transparency */
    color: white !important;
    border: 2px solid white !important;
    box-shadow: 0 4px 16px rgba(221, 116, 71, 0.8) !important;
    z-index: 1000 !important; /* Ensure it's on top of other markers */
    transform: scale(1.1); /* Slightly larger to stand out */
}

/* Leaflet popups in dark mode */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .leaflet-popup-close-button {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .leaflet-popup-close-button:hover {
    color: var(--accent-primary) !important;
}

/* Dark tiles filter for Leaflet */
[data-theme="dark"] .leaflet-tile-container img {
    filter: brightness(0.7) invert(1) contrast(1.2) hue-rotate(180deg) saturate(0.8) brightness(0.9);
}

/* Property location marker in dark mode */
[data-theme="dark"] .property-location-marker div {
    background: var(--accent-primary) !important;
    box-shadow: 0 4px 12px rgba(221, 116, 71, 0.5) !important;
}

/* Directions button in dark mode */
[data-theme="dark"] .directions-btn {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .directions-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(221, 116, 71, 0.5);
}

/* ==============================================
   ABOUT SECTION DARK MODE
   ============================================== */

[data-theme="dark"] .about-stats {
    background: var(--bg-secondary);
}

[data-theme="dark"] .about-stat-card {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .about-stat-card h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .about-stat-card p {
    color: var(--text-secondary);
}

[data-theme="dark"] .about-cta-section {
    background: linear-gradient(135deg, rgba(221, 116, 71, 0.15), rgba(196, 97, 60, 0.08));
    border-color: var(--border-color);
}

[data-theme="dark"] .about-cta-text h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .about-cta-text p {
    color: var(--text-secondary);
}

[data-theme="dark"] .about-primary-btn,
[data-theme="dark"] .about-secondary-btn,
[data-theme="dark"] .about-cta-btn {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .about-primary-btn:hover,
[data-theme="dark"] .about-cta-btn:hover {
    background: var(--primary-dark);
}

[data-theme="dark"] .about-secondary-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .about-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ==============================================
   CONTACT FORM DARK MODE
   ============================================== */

[data-theme="dark"] .contact {
    background: var(--bg-secondary);
}

[data-theme="dark"] .contact-form-wrapper {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .contact-form textarea {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form select:focus,
[data-theme="dark"] .contact-form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(221, 116, 71, 0.2);
}

[data-theme="dark"] .contact-submit-btn {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .contact-submit-btn:hover:not(:disabled) {
    background: var(--primary-dark);
}

[data-theme="dark"] .form-message.success {
    background: #1e3a2e;
    color: #6ee7b7;
    border-color: #065f46;
}

[data-theme="dark"] .form-message.error {
    background: #3a1e1e;
    color: #fca5a5;
    border-color: #991b1b;
}

/* ==============================================
   END OF DARK MODE STYLES
   ============================================== */