/* ===============================
   THEME ADDON (NO DESIGN CHANGE)
   Works only with body.dark-theme
================================= */

/* ===== TOKENS ===== */
body.light-theme {
    --bg: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --card: #ffffff;
    --card-2: #f9fafb;
    --border: #e5e7eb;
    --shadow: 0 16px 40px rgba(0, 0, 0, .06);
    --overlay: rgba(0, 0, 0, .55);
    --focus: 0 0 0 4px rgba(23, 37, 84, .12);
}

body.dark-theme {
    --bg: #0b1220;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --card: #0f172a;
    --card-2: #111827;
    --border: #243042;
    --shadow: 0 16px 40px rgba(0, 0, 0, .35);
    --overlay: rgba(0, 0, 0, .65);
    --focus: 0 0 0 4px rgba(147, 197, 253, .18);
}

/* ===== GLOBAL BASE (only when dark) ===== */
body.dark-theme {
    background: var(--bg) !important;
    color: var(--text) !important;
}

body.dark-theme p,
body.dark-theme span,
body.dark-theme li {
    color: var(--muted) !important;
}

/* headings visible */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
body.dark-theme .section-title,
body.dark-theme .card-title,
body.dark-theme .hero-title,
body.dark-theme .hero-heading,
body.dark-theme .page-title {
    color: var(--text) !important;
}

/* ===== DO NOT CHANGE NAVBAR ===== */
body.dark-theme .navbar {
    background-color: var(--accent-color) !important;
}

body.dark-theme .navbar-nav .nav-item .nav-link {
    color: var(--bg-color) !important;
}

/* ===== BANNER TEXT MUST NOT CHANGE (HOME HERO IMAGE) ===== */
body.dark-theme .hero-image-section .hero-content,
body.dark-theme .hero-image-section .hero-content * {
    color: #ffffff !important;
}

/* ===== BANNER TEXT MUST NOT CHANGE (HOME V2 VIDEO HERO) ===== */
body.dark-theme .hero-video-content,
body.dark-theme .hero-video-content * {
    color: #ffffff !important;
}

/* ===== SECTIONS BACKGROUND ===== */
body.dark-theme .contact-section,
body.dark-theme .why-section,
body.dark-theme .home-team,
body.dark-theme .home-faq,
body.dark-theme .services-section,
body.dark-theme .business-section,
body.dark-theme .testimonial-section {
    background: var(--bg) !important;
}

body.dark-theme .about-section,
body.dark-theme .home-about,
body.dark-theme .home-packages,
body.dark-theme .quality-section,
body.dark-theme .team-section,
body.dark-theme .pricing-section,
body.dark-theme .counter-section,
body.dark-theme .how-it-works,
body.dark-theme .why-choose-us {
    background: var(--card-2) !important;
}

/* ===== CARDS / BOXES (no layout change, only color) ===== */
body.dark-theme .contact-info-card,
body.dark-theme .contact-form-card,
body.dark-theme .map-card,
body.dark-theme .why-card,
body.dark-theme .team-card,
body.dark-theme .pricing-card,
body.dark-theme .service-card,
body.dark-theme .counter-card,
body.dark-theme .business-card,
body.dark-theme .testimonial-card,
body.dark-theme .package-card,
body.dark-theme .about-box,
body.dark-theme .faq-item,
body.dark-theme .step-card,
body.dark-theme .quality-list li {
    background: var(--card) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}

/* ===== CONTACT: info-item + info-note (your issue) ===== */
body.dark-theme .info-item {
    background: var(--card) !important;
    border-color: var(--border) !important;
}

body.dark-theme .info-text h6 {
    color: var(--text) !important;
}

body.dark-theme .info-text p {
    color: var(--muted) !important;
}

body.dark-theme .info-note {
    background: rgba(147, 197, 253, .12) !important;
    color: var(--text) !important;
}

/* ===== ABOUT FEATURED/HIGHLIGHT (your issue) ===== */
body.dark-theme .about-feature,
body.dark-theme .highlight {
    background: var(--card) !important;
    border-color: var(--border) !important;
}

body.dark-theme .about-feature h6,
body.dark-theme .highlight h6 {
    color: var(--text) !important;
}

body.dark-theme .about-feature p,
body.dark-theme .highlight p {
    color: var(--muted) !important;
}

/* ===== FORMS ===== */
body.dark-theme .form-label {
    color: #ffffff !important;
}

body.dark-theme .custom-input,
body.dark-theme .custom-textarea {
    background: var(--card-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark-theme .custom-input:focus,
body.dark-theme .custom-textarea:focus {
    box-shadow: var(--focus) !important;
}

/* ===== MAP TITLE/SUBTITLE dark mode visible ===== */
body.dark-theme .map-header {
    background: var(--card) !important;
    border-bottom: 1px solid var(--border) !important;
}

body.dark-theme .map-title {
    color: var(--text) !important;
}

body.dark-theme .map-subtitle {
    color: var(--muted) !important;
}

/* ===== FAQ text visible ===== */
body.dark-theme .faq-item summary {
    color: var(--text) !important;
}

body.dark-theme .faq-item p {
    color: var(--muted) !important;
}

/* ===== READ MORE BUTTON (dark mode) ===== */
body.dark-theme .read-more-btn {
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

body.dark-theme .read-more-btn:hover {
    background: #ffffff !important;
    color: #0b1220 !important;
    /* dark bg ku visible */
}

/* ===== ABOUT HERO TEXT LOCK (same as light mode) ===== */
body.dark-theme .about-hero,
body.dark-theme .about-hero * {
    color: #111827 !important;
    /* light mode text color */
}

/* span accent if used */
body.dark-theme .about-hero .page-title span {
    color: var(--accent-color) !important;
}

/* ===== PRICING BUTTON WHITE (dark mode) ===== */
body.dark-theme .pricing-btn {
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

body.dark-theme .pricing-btn:hover {
    background: #ffffff !important;
    color: #0b1220 !important;
}