/* ================================
   DARK MODE STYLES
   ================================ */

/* Dark Theme Variables */
[data-theme="dark"] {
    --light-bg: #121212;
    --white: #1E1E1E;
    --dark: #E0E0E0;
    --gray: #A0A0A0;
    --light-gray: #333333;
    --shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    --primary-blue: #02AEEC;
    --secondary-blue: #33BFFF;
    --accent-orange: #FF8A80;
}

/* Global Dark Mode Adjustments */
[data-theme="dark"] body {
    background-color: var(--light-bg);
    color: var(--dark);
}

[data-theme="dark"] .glass-card {
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .header {
    background: rgba(18, 18, 18, 0.95);
    border-bottom: 1px solid #333;
}

/* Typography */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: #ffffff !important;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span {
    color: #b0b0b0 !important;
}

/* Links */
[data-theme="dark"] a {
    color: #b0b0b0 !important;
    transition: color 0.3s ease;
}

[data-theme="dark"] a:hover {
    color: var(--primary-blue) !important;
}

/* WhatsApp Widget - Preserve original styles */
[data-theme="dark"] #whatsappWidget {
    filter: none !important;
}

[data-theme="dark"] .whatsapp-button {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
}

[data-theme="dark"] .whatsapp-button i {
    color: white !important;
}

[data-theme="dark"] .whatsapp-chat-box {
    background: white !important;
}

[data-theme="dark"] .whatsapp-chat-header {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
}

[data-theme="dark"] .whatsapp-chat-header h4,
[data-theme="dark"] .whatsapp-status {
    color: white !important;
}

[data-theme="dark"] .whatsapp-chat-body {
    background: #E5DDD5 !important;
}

[data-theme="dark"] .whatsapp-message.received p {
    background: white !important;
    color: #333 !important;
}

[data-theme="dark"] .whatsapp-time {
    color: #667781 !important;
}

[data-theme="dark"] .whatsapp-quick-replies button {
    background: white !important;
    border-color: #25D366 !important;
    color: #25D366 !important;
}

[data-theme="dark"] .whatsapp-quick-replies button:hover {
    background: #25D366 !important;
    color: white !important;
}

[data-theme="dark"] .whatsapp-chat-footer {
    background: #f0f0f0 !important;
}

[data-theme="dark"] .whatsapp-chat-footer input {
    background: white !important;
    border-color: #ddd !important;
    color: #333 !important;
}

[data-theme="dark"] .whatsapp-chat-footer input::placeholder {
    color: #999 !important;
}

[data-theme="dark"] .whatsapp-send-btn {
    background: #25D366 !important;
    color: white !important;
}

[data-theme="dark"] .whatsapp-close {
    color: white !important;
}

/* Footer */
[data-theme="dark"] .footer {
    background: #050505 !important;
    background-image: none !important;
    border-top: 1px solid #333;
    color: #e0e0e0;
}

[data-theme="dark"] .footer h3,
[data-theme="dark"] .footer h4 {
    color: #ffffff !important;
    border-bottom-color: var(--primary-blue);
}

[data-theme="dark"] .customer-panel-link {
    color: #ffffff !important;
}

[data-theme="dark"] .footer .social-links a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: 1px solid #333;
}

/* Instagram Link */
[data-theme="dark"] .instagram-link a {
    color: #E0E0E0 !important;
}

[data-theme="dark"] .instagram-link a:hover {
    color: #E1306C !important;
}

[data-theme="dark"] .instagram-link i {
    color: #E1306C;
}

/* Forms */
[data-theme="dark"] .step-circle {
    background: var(--white);
    border-color: var(--light-gray);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background-color: #2C2C2C;
    border-color: #444;
    color: var(--dark);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--primary-blue);
    background-color: #333;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-blue);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.1) rotate(15deg);
}

[data-theme="dark"] .theme-toggle-btn {
    background: #FFC107;
    color: #333;
}

/* About & Service Pages */
[data-theme="dark"] .content-section,
[data-theme="dark"] .about-content {
    background: transparent;
    color: var(--dark);
}

[data-theme="dark"] .value-card {
    background: var(--white) !important;
    border-color: var(--light-gray);
}

[data-theme="dark"] .value-icon {
    background: #2C2C2C;
    color: var(--primary-blue);
}

[data-theme="dark"] .process-step {
    background: rgba(30, 30, 30, 0.5);
    border-color: #333;
}

[data-theme="dark"] .process-steps {
    background: transparent;
}

/* Technology Section */
[data-theme="dark"] .tech-slider {
    background: transparent;
}

[data-theme="dark"] .tech-item {
    background: rgba(30, 30, 30, 0.8);
    border-color: #333;
}

/* CTA Section */
[data-theme="dark"] .cta-section {
    background: linear-gradient(135deg, rgba(3, 153, 222, 0.1), rgba(2, 174, 236, 0.1));
    border-color: #333;
}

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

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

/* FAQ Accordion */
[data-theme="dark"] .faq-container {
    background: transparent;
}

[data-theme="dark"] .faq-item {
    background: rgba(30, 30, 30, 0.6);
    border-color: #333;
}

[data-theme="dark"] .faq-question {
    color: #ffffff !important;
    background: rgba(40, 40, 40, 0.8);
}

[data-theme="dark"] .faq-question:hover {
    background: rgba(50, 50, 50, 0.8);
}

[data-theme="dark"] .faq-answer {
    color: #b0b0b0 !important;
    background: rgba(20, 20, 20, 0.5);
}

[data-theme="dark"] .faq-icon {
    color: var(--primary-blue);
}

/* Hero Images */
[data-theme="dark"] .hero-image-container img {
    border-color: #333;
    opacity: 0.9;
}

/* Page Header */
[data-theme="dark"] .page-header {
    background: rgba(30, 30, 30, 0.8);
    border-bottom: 1px solid #333;
    color: #ffffff;
}

[data-theme="dark"] .page-header h1,
[data-theme="dark"] .page-header h2 {
    color: #ffffff !important;
}

/* Buttons */
[data-theme="dark"] .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #444;
    color: #E0E0E0 !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--primary-blue);
    color: #ffffff !important;
}

/* Headers */
[data-theme="dark"] .project-header {
    background: rgba(18, 18, 18, 0.95);
    border-bottom: 1px solid #333;
}

/* Primary Button Fix for Dark Mode */
[data-theme="dark"] .btn-primary {
    color: #ffffff !important;
    background-color: #F76C5E;
    border: none;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #e65a4d;
    box-shadow: 0 0 15px rgba(247, 108, 94, 0.4);
}

/* Modal Styles for Dark Mode */
[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .modal-close {
    background: #2C2C2C;
    color: #E0E0E0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .modal-close:hover {
    background: #f56565;
    color: #fff;
}

[data-theme="dark"] .modal-container::-webkit-scrollbar-track {
    background: #2C2C2C;
}

[data-theme="dark"] .modal-container::-webkit-scrollbar-thumb {
    background: #667eea;
}

[data-theme="dark"] .modal-container::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

/* Track Result Card */
[data-theme="dark"] .track-result-card {
    background: rgba(30, 30, 30, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
}

/* Status Header */
[data-theme="dark"] .status-header {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid #444;
}

[data-theme="dark"] .status-title {
    color: #ffffff !important;
}

[data-theme="dark"] .status-description {
    color: #b0b0b0 !important;
}

/* Timeline */
[data-theme="dark"] .timeline-step:not(:last-child)::before {
    background: #444;
}

[data-theme="dark"] .timeline-step.active:not(:last-child)::before {
    background: #667eea;
}

[data-theme="dark"] .timeline-icon {
    background: #2C2C2C;
    color: #666;
    border: 1px solid #444;
}

[data-theme="dark"] .timeline-step.active .timeline-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
}

[data-theme="dark"] .timeline-title {
    color: #E0E0E0 !important;
}

[data-theme="dark"] .timeline-date {
    color: #888 !important;
}

/* Detail Grid */
[data-theme="dark"] .detail-grid {
    background: rgba(40, 40, 40, 0.6);
    border: 1px solid #333;
}

[data-theme="dark"] .detail-label {
    color: #888 !important;
}

[data-theme="dark"] .detail-value {
    color: #E0E0E0 !important;
}

/* Repair Form Section in Modal */
[data-theme="dark"] .repair-form-section {
    color: #E0E0E0;
}

[data-theme="dark"] .repair-form-section h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .repair-form-section p {
    color: #b0b0b0 !important;
}

/* Form Labels */
[data-theme="dark"] .form-group label {
    color: #E0E0E0 !important;
}

[data-theme="dark"] .required {
    color: #f56565 !important;
}

/* ==================== REPAIR FORM DARK MODE ==================== */

/* Repair Form Section Background */
[data-theme="dark"] .repair-form-section {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
}

/* Repair Form Card */
[data-theme="dark"] .repair-form {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid #333;
}

/* Form Alert */
[data-theme="dark"] .form-alert {
    background: linear-gradient(135deg, rgba(255, 216, 155, 0.15) 0%, rgba(25, 84, 123, 0.25) 100%);
    color: #E0E0E0 !important;
    border: 1px solid #444;
}

[data-theme="dark"] .form-alert strong {
    color: #ffffff !important;
}

/* Form Section */
[data-theme="dark"] .form-section {
    background: rgba(40, 40, 40, 0.6) !important;
    border-left-color: #667eea;
}

/* Form Section Title */
[data-theme="dark"] .form-section-title {
    color: #ffffff !important;
    border-bottom-color: #444;
}

[data-theme="dark"] .form-section-title i {
    color: #667eea;
}

/* Form Inputs */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background-color: #2C2C2C !important;
    border-color: #444 !important;
    color: #E0E0E0 !important;
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
    color: #888 !important;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: #667eea !important;
    background-color: #333 !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

/* Checkbox Labels */
[data-theme="dark"] .checkbox-label {
    background: rgba(40, 40, 40, 0.8) !important;
    border-color: #444 !important;
    color: #E0E0E0 !important;
}

[data-theme="dark"] .checkbox-label:hover {
    border-color: #667eea !important;
    background: rgba(50, 50, 50, 0.8) !important;
}

[data-theme="dark"] .checkbox-label i {
    color: #667eea;
}

/* Terms Box */
[data-theme="dark"] .terms-box {
    background: rgba(40, 40, 40, 0.6) !important;
    border-color: #444 !important;
}

[data-theme="dark"] .terms-list li {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .terms-list li:before {
    color: #48bb78;
}

/* Checkbox Agreement */
[data-theme="dark"] .checkbox-agreement .checkbox-label {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

/* Form Note */
[data-theme="dark"] .form-note {
    color: #888 !important;
}

[data-theme="dark"] .form-note i {
    color: #667eea;
}

/* Success Message */
[data-theme="dark"] .success-message {
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.9) 0%, rgba(56, 161, 105, 0.9) 100%);
    border: 1px solid rgba(72, 187, 120, 0.3);
}

[data-theme="dark"] .success-message h3,
[data-theme="dark"] .success-message p,
[data-theme="dark"] .success-message strong {
    color: #ffffff !important;
}

/* Track Form in Modal */
[data-theme="dark"] #trackForm.glass-card {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid #444;
}

[data-theme="dark"] #trackRequestId,
[data-theme="dark"] #trackPhone {
    background-color: #2C2C2C !important;
    border-color: #444 !important;
    color: #E0E0E0 !important;
}

[data-theme="dark"] #trackRequestId::placeholder,
[data-theme="dark"] #trackPhone::placeholder {
    color: #888 !important;
}

[data-theme="dark"] #trackRequestId:focus,
[data-theme="dark"] #trackPhone:focus {
    border-color: #667eea !important;
    background-color: #333 !important;
}

/* Select Options Dark Mode */
[data-theme="dark"] .form-group select option {
    background-color: #2C2C2C;
    color: #E0E0E0;
}

/* Additional Overrides for Inline Styles */
[data-theme="dark"] .repair-form-section h2,
[data-theme="dark"] .repair-form-section>p {
    color: #ffffff !important;
}