/*
   Safari Plug Safaris - Dark Mode Styles
   Comprehensive dark mode styling with improved contrast and visibility
*/

/* Theme transition - apply to html for smoother theme changes */
html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
    transition: all 0.3s ease-in-out !important; /* Use important to override specific transitions */
    transition-delay: 0ms !important;
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --primary: #f0810f;         /* Keep Safari Orange prominent */
    --primary-dark: #d26e06;
    --secondary: #3a9d5d;       /* Brighter Safari Green for contrast */
    --secondary-dark: #2e8b57;
    --dark: #e0e0e0;            /* Light Gray for primary text */
    --light: #1e1e1e;           /* Darker background element */
    --white: #121212;           /* Main background (almost black) */
    --black: #ffffff;           /* For elements that were black, now white */
    --accent: #e5bb62;          /* Keep Savanna Gold */

    --bg-primary: #121212;      /* Very dark gray, almost black */
    --bg-secondary: #1e1e1e;    /* Slightly lighter dark gray */
    --text-primary: #f5f5f5;    /* Off-white for text */
    --text-secondary: #b0b0b0;  /* Lighter gray for secondary text */
    --card-bg: #2a2a2a;         /* Dark gray for cards */
    --header-bg: #1a1a1a;       /* Darker header background */
    --header-text: #f5f5f5;
    --border-color: #383838;    /* Darker border color */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); /* Darker shadows */
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);

    /* Specific for contact info block */
    --contact-info-bg: #8a4200; /* Darker orange for this specific block in dark mode */
    --contact-info-text: #ffffff;
}

/* Base body adjustments for dark mode */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Header & Navigation */
[data-theme="dark"] header {
    background-color: var(--header-bg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Adjust shadow for dark bg */
}
[data-theme="dark"] header nav ul li a {
    color: var(--header-text);
}
[data-theme="dark"] header nav ul li a:hover,
[data-theme="dark"] header nav ul li a.active {
    color: var(--primary); /* Orange for active/hover */
}
[data-theme="dark"] .menu-toggle i {
    color: var(--header-text);
}
/* Logo text color in dark mode - handled by logo-fix.css and general text color */

/* Buttons */
[data-theme="dark"] .btn-primary {
    /* Already looks good with var(--primary) */
}
[data-theme="dark"] .btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff; /* Ensure text is white */
}
[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
}
[data-theme="dark"] .btn-outline {
    color: var(--primary);
    border-color: var(--primary);
}
[data-theme="dark"] .btn-outline:hover {
    background-color: var(--primary);
    color: var(--bg-primary); /* Dark text on orange bg */
}
[data-theme="dark"] .btn-light { /* This button is light on dark backgrounds */
    background-color: var(--text-primary); /* Light gray/off-white background */
    color: var(--bg-primary); /* Dark text */
    border-color: var(--text-primary);
}
[data-theme="dark"] .btn-light:hover {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--text-primary);
}


/* Sections and Cards */
[data-theme="dark"] .about-brief,
[data-theme="dark"] .testimonials,
[data-theme="dark"] .our-team,
[data-theme="dark"] .about-section,
[data-theme="dark"] .policy-section {
    background-color: var(--bg-primary); /* Match body background */
}

[data-theme="dark"] .featured-packages,
[data-theme="dark"] .destinations,
[data-theme="dark"] .faq-section,
[data-theme="dark"] .map-section,
[data-theme="dark"] .mission-vision,
[data-theme="dark"] .contact-section { /* contact-section has its own in-line style for bg */
    background-color: var(--bg-secondary);
}


[data-theme="dark"] .package-card,
[data-theme="dark"] .destination-card,
[data-theme="dark"] .testimonial,
[data-theme="dark"] .mission-card, /* from about-brief */
[data-theme="dark"] .vision-card, /* from about page */
[data-theme="dark"] .team-member,
[data-theme="dark"] .value-card, /* if used */
[data-theme="dark"] .contact-form-container {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

/* Text and Headings */
[data-theme="dark"] .section-heading h2,
[data-theme="dark"] .about-text-container h2,
[data-theme="dark"] .mission-card h3,
[data-theme="dark"] .vision-card h2,
[data-theme="dark"] .member-info h3,
[data-theme="dark"] .package-content h3,
[data-theme="dark"] .card-content h3 {
    color: var(--text-primary); /* Main text color */
}
[data-theme="dark"] .section-heading p,
[data-theme="dark"] .about-text p,
[data-theme="dark"] .mission-card p,
[data-theme="dark"] .testimonial-content p,
[data-theme="dark"] .member-info p {
    color: var(--text-secondary);
}
[data-theme="dark"] .separator {
    background-color: var(--primary); /* Keep separator orange */
}

/* Hero & CTA overlays */
[data-theme="dark"] .hero::before { /* Original template has inline style, this makes it darker */
    background-color: rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .cta { /* Override primary color overlay from style.css */
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('/static/images/cta-bg.jpg');
}
[data-theme="dark"] .page-banner::before {
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for page banners */
}
[data-theme="dark"] .hero h1, [data-theme="dark"] .cta h2, [data-theme="dark"] .page-banner h1,
[data-theme="dark"] .hero p, [data-theme="dark"] .cta p, [data-theme="dark"] .breadcrumb {
    color: #ffffff; /* Ensure pure white for max contrast on dark overlays */
}


/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-secondary); /* Slightly lighter than card-bg for input fields */
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(240, 129, 15, 0.25); /* Adjusted for dark theme */
    background-color: var(--card-bg); /* Darken on focus */
}
[data-theme="dark"] .form-group label {
    color: var(--text-primary);
}


/* Footer */
[data-theme="dark"] footer {
    background-color: #0c0c0c; /* Even darker footer */
    border-top: 1px solid var(--border-color);
}
[data-theme="dark"] .footer-about h3,
[data-theme="dark"] .footer-links h3,
[data-theme="dark"] .footer-contact h3,
[data-theme="dark"] .footer-newsletter h3 {
    color: #e0e0e0; /* Slightly brighter for footer headings */
}
[data-theme="dark"] .footer-about p,
[data-theme="dark"] .footer-links ul li a,
[data-theme="dark"] .footer-contact ul li,
[data-theme="dark"] .footer-contact ul li a,
[data-theme="dark"] .footer-newsletter p,
[data-theme="dark"] .footer-bottom p {
    color: var(--text-secondary); /* Consistent secondary text color */
    opacity: 0.85;
}
[data-theme="dark"] .footer-links ul li a:hover,
[data-theme="dark"] .footer-contact ul li a:hover {
    color: var(--primary);
    opacity: 1;
}
[data-theme="dark"] .social-links a {
    background-color: rgba(255, 255, 255, 0.08); /* More subtle background */
    color: var(--text-secondary);
}
[data-theme="dark"] .social-links a:hover {
    background-color: var(--primary);
    color: var(--bg-primary); /* Dark icon on orange hover */
}
[data-theme="dark"] .footer-newsletter input[type="email"] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    /* border-right: none; /* From newsletter.css */
}
[data-theme="dark"] .footer-newsletter .newsletter-form-container { /* Ensure border for the container */
    border: 1px solid var(--border-color);
}
[data-theme="dark"] .footer-newsletter input[type="email"] {
    border: none; /* Remove individual border if container has one */
}


[data-theme="dark"] .footer-newsletter button {
    background-color: var(--primary);
    border-color: var(--primary); /* Should be none if container has border */
    border: none;
    color: var(--white); /* Ensure text is white */
}
[data-theme="dark"] .footer-newsletter button:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}


/* Contact Info Block Specific Styles */
[data-theme="dark"] .contact-info {
    background-color: var(--contact-info-bg); /* Specific dark orange */
}
[data-theme="dark"] .contact-info h3,
[data-theme="dark"] .contact-info p,
[data-theme="dark"] .contact-info a {
    color: var(--contact-info-text) !important; /* Force white text for this block */
}
[data-theme="dark"] .contact-info i { /* Icons in the contact info block */
    color: var(--contact-info-text);
    opacity: 0.8;
}
[data-theme="dark"] .info-item i { /* Specifically target icons within .info-item if they have their own bg */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background for icon circle */
    color: var(--contact-info-text);
}


/* Theme Toggle Switch */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px; /* Increased gap */
}

.theme-toggle i {
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

/* Light mode sun icon */
.theme-toggle .fa-sun {
    color: #f39c12; /* Sunny yellow */
}
/* Dark mode moon icon */
.theme-toggle .fa-moon {
    color: #bdc3c7; /* Silvery moon */
}

[data-theme="dark"] .theme-toggle .fa-sun {
    color: #f1c40f; /* Brighter sun for dark mode icon itself */
}
[data-theme="dark"] .theme-toggle .fa-moon {
    color: #AAB8C2; /* Slightly different moon color */
}


/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;  /* Slightly wider */
    height: 24px; /* Standard height */
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Default light mode track */
    transition: background-color 0.3s ease;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px; /* Smaller than track height */
    width: 18px;
    left: 3px;   /* Padding from left */
    bottom: 3px; /* Padding from bottom */
    background-color: white;
    transition: transform 0.3s ease;
}

input:checked + .slider { /* Dark mode active OR light mode if toggle is for dark */
    background-color: var(--primary); /* Use primary color for active track */
}
[data-theme="light"] input:checked + .slider {
     background-color: #34495e; /* Dark blue/grey for "dark mode selected" track in light theme */
}
[data-theme="dark"] input:not(:checked) + .slider { /* Light mode selected track in dark theme */
    background-color: #555;
}


input:focus + .slider {
    box-shadow: 0 0 1px var(--primary);
}

input:checked + .slider:before {
    transform: translateX(22px); /* Moves slider knob to the right */
}

/* Rounded sliders */
.slider.round {
    border-radius: 24px; /* Fully rounded track */
}

.slider.round:before {
    border-radius: 50%; /* Circular knob */
}

/* FAQ specific dark mode adjustments (if faq.css doesn't cover it well) */
[data-theme="dark"] .faq-item {
    background-color: var(--card-bg); /* Uses card-bg */
    border-color: var(--border-color);
}
[data-theme="dark"] .faq-question {
    color: var(--text-primary);
}
[data-theme="dark"] .faq-question.active {
    background-color: rgba(240, 129, 15, 0.1); /* Subtle primary highlight */
}
[data-theme="dark"] .faq-answer {
    background-color: var(--bg-secondary); /* Slightly different bg for answer */
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}
[data-theme="dark"] .faq-toggle {
    color: var(--primary);
}

/* Modal in Dark Mode */
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    box-shadow: 0 5px 25px rgba(0,0,0,0.7); /* Stronger shadow for modal */
}
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .modal-header h2 {
    color: var(--text-primary);
}
[data-theme="dark"] .close-modal {
    color: var(--text-secondary);
}
[data-theme="dark"] .close-modal:hover {
    color: var(--primary);
}
[data-theme="dark"] .destination-modal-content h3 {
    color: var(--secondary); /* Green for subheadings in modal */
}
[data-theme="dark"] .destination-modal-content p,
[data-theme="dark"] .destination-modal-content li {
    color: var(--text-secondary);
}
[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .policy-section h3 {
    color: var(--secondary);
}
[data-theme="dark"] .policy-section h4 {
    color: var(--text-primary);
}
[data-theme="dark"] .policy-section p, [data-theme="dark"] .policy-section li {
    color: var(--text-secondary);
}