@import url('light-mode.css');

/* Site-wide color theme. Loaded after each page stylesheet so it can safely
   adapt shared and page-specific components without changing their layout. */

html[data-theme="dark"] {
    color-scheme: dark;
    --white: #161b22;
    --bg-light: #0d1117;
    --off-white: #0d1117;
    --surface: #161b22;
    --text-dark: #f0f6fc;
    --text-light: #8b949e;
    --text-lighter: #6e7681;
    --text-main: #f0f6fc;
    --text-muted: #8b949e;
    --border: #30363d;
    --navy: #0d1117;
    --navy-mid: #161b22;
    --secondary-color: #0d1117;
    --secondary-dark: #161b22;
    --shsm: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shmd: 0 8px 30px rgba(0, 0, 0, 0.6);
    --shlg: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* Remove text shadows from featured project cards in dark mode */
html[data-theme="dark"] .featured-project-card h3,
html[data-theme="dark"] .featured-project-content h3,
html[data-theme="dark"] .featured-project-card p,
html[data-theme="dark"] .featured-project-content p {
    text-shadow: none !important;
}

html[data-theme="dark"] body {
    background: #0d1117;
    color: #f0f6fc;
}

/* Keep the dark-mode change local to the Why Choose Us panel. */
html[data-theme="dark"] .why-choose-services {
    background: linear-gradient(rgba(13, 17, 23, .92), rgba(13, 17, 23, .96)),
                url('../Projects ongoing and complete/projects 2.jpeg') !important;
}

/* Match the Our Process panel to the surrounding dark page canvas. */
html[data-theme="dark"] .process-section {
    background: #0d1117 !important;
}

/* Use the homepage footer colour everywhere in dark mode. */
html[data-theme="dark"] .footer {
    background: #0e1623 !important;
}

/* About hero uses standard padding like other pages */

/* Keep the About stats strip visually continuous with the page canvas. */
html[data-theme="dark"] .stats-section {
    background: #0d1117 !important;
}

html[data-theme="dark"] .stats-section .stat-item {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 15px;
    padding: 28px 18px;
}

/* Footer rating form */
.rate-us-trigger {
    margin-top: 16px;
    padding: 8px 13px;
    border: 1px solid rgba(243, 156, 18, .65);
    border-radius: 999px;
    background: transparent;
    color: #f39c12;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.rate-us-trigger:hover { background: #f39c12; color: #111; }
.rating-modal { display: none; position: fixed; inset: 0; z-index: 2000; }
.rating-modal.is-open { display: grid; place-items: center; padding: 20px; }
.rating-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.rating-modal__dialog {
    position: relative;
    width: min(100%, 430px);
    padding: 30px;
    border: 1px solid #30363d;
    border-radius: 16px;
    background: #161b22;
    color: #f0f6fc;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.rating-modal__dialog::before { content: ''; display: block; width: 42px; height: 4px; margin-bottom: 16px; border-radius: 99px; background: #f39c12; }
.rating-modal__dialog h2 { margin: 0 0 7px; font-size: 22px; line-height: 1.2; color: #f0f6fc; }
.rating-modal__dialog > p { margin: 0 0 18px; color: #8b949e; }
.rating-modal__close { position: absolute; top: 10px; right: 14px; border: 0; background: none; color: #8b949e; font-size: 28px; cursor: pointer; }
.rating-stars { display: flex; gap: 9px; margin-bottom: 20px; }
.rating-star { width: 42px; height: 42px; border: 1px solid #30363d; border-radius: 10px; padding: 0; background: transparent; color: #8b949e; font-size: 21px; cursor: pointer; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.rating-star:hover, .rating-star:focus-visible { border-color: #f39c12; color: #f39c12; transform: translateY(-2px); outline: none; }
.rating-star.is-selected { border-color: #f39c12; background: #f39c12; color: #fff; }
.rating-form label { display: block; margin-bottom: 8px; color: #f0f6fc; font-size: 13px; font-weight: 700; }
.rating-form label span { color: #8b949e; font-weight: 400; }
.rating-form textarea,
.rating-form .rating-input { width: 100%; margin-bottom: 14px; padding: 11px 12px; border: 1px solid #30363d; border-radius: 10px; background: #0d1117; color: #f0f6fc; font: inherit; line-height: 1.5; }
.rating-form textarea { height: 95px; resize: vertical; margin-bottom: 18px; }
.rating-form .rating-input:focus,
.rating-form textarea:focus { border-color: #f39c12; outline: 2px solid rgba(243, 156, 18, .20); }
.rating-submit { width: 100%; border: 0; border-radius: 10px; padding: 13px; background: #f39c12; color: #111; font: inherit; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.rating-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(243, 156, 18, .28); }
.rating-thanks { color: #f39c12 !important; font-weight: 700; }

html[data-theme="light"] .rate-us-trigger {
    border-color: #f39c12;
    color: #f39c12;
}
html[data-theme="light"] .rate-us-trigger:hover { background: #f39c12; color: #fff; }
html[data-theme="light"] .rating-modal__dialog {
    background: #fff;
    border-color: #dbe3ee;
    color: #172033;
}
html[data-theme="light"] .rating-modal__dialog h2,
html[data-theme="light"] .rating-form label { color: #172033; }
html[data-theme="light"] .rating-modal__dialog > p,
html[data-theme="light"] .rating-modal__close,
html[data-theme="light"] .rating-form label span { color: #526174; }
html[data-theme="light"] .rating-form textarea,
html[data-theme="light"] .rating-form .rating-input {
    background: #f8fafc;
    border: 1px solid #cbd5e1 !important;
    color: #172033;
    box-shadow: none !important;
}
html[data-theme="light"] .rating-star { border-color: #cbd5e1; color: #64748b; }
html[data-theme="light"] .rating-star.is-selected { border-color: #f39c12; background: #f39c12; color: #fff; }
html[data-theme="light"] .rating-form textarea:focus,
html[data-theme="light"] .rating-form .rating-input:focus {
    border-color: #f39c12 !important;
    outline: 2px solid rgba(243, 156, 18, .20);
    outline-offset: 1px;
    box-shadow: none !important;
}

/* Keep the shared desktop header identical across all page stylesheets. */
@media (min-width: 769px) {
    .main-nav,
    .main-nav.scrolled {
        height: 66px;
        min-height: 66px;
        padding: 0 !important;
    }

    .main-nav .container {
        height: 66px;
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr) auto;
        align-items: center;
        gap: 20px;
    }

    .logo { width: 260px; }
    .logo img { width: auto; height: 32px; }
    .logo-text { font-size: 15px; }
    .logo-text span { font-size: 9px; }

    .nav-links {
        min-width: 0;
        justify-content: center;
        gap: 2px;
    }

    .nav-links > li > a {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 13px;
    }

    .nav-actions { gap: 4px; }
    .search-icon,
    .cart-icon,
    .consultation-icon,
    .theme-toggle { 
        width: 36px; 
        height: 36px; 
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cta-button { white-space: nowrap; }
}

/* Dark mode Hero & Page Header Overrides - Smooth fade strictly at bottom border edge */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .services-hero,
html[data-theme="dark"] .contact-hero,
html[data-theme="dark"] .projects-header,
html[data-theme="dark"] .categories-header,
html[data-theme="dark"] .designs-header {
    background-color: #0d1117 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative !important;
    padding-top: 130px !important;
    padding-bottom: 120px !important;
}

html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .services-hero::before,
html[data-theme="dark"] .contact-hero::before,
html[data-theme="dark"] .projects-header::before,
html[data-theme="dark"] .categories-header::before,
html[data-theme="dark"] .designs-header::before {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center !important;
    border: none !important;
    outline: none !important;
    bottom: -10px !important;
}

/* Specific background images for each page in dark mode */
html[data-theme="dark"] .hero::before {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.94) 0%, rgba(13, 17, 23, 0.85) 85%, #0d1117 100%), 
                url('../Homepage%20Image/homepage.jpg') !important;
}

html[data-theme="dark"] .about-hero::before {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.94) 0%, rgba(13, 17, 23, 0.85) 85%, #0d1117 100%), 
                url('../Designs/2. Commercial Design/Office buildings/Office.jpg') !important;
}

html[data-theme="dark"] .services-hero::before {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.94) 0%, rgba(13, 17, 23, 0.85) 85%, #0d1117 100%), 
                url('../Designs/3. Institutional Design/Universities/University.jpg') !important;
}

html[data-theme="dark"] .contact-hero::before {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.94) 0%, rgba(13, 17, 23, 0.85) 85%, #0d1117 100%), 
                url('../Designs/5. Interior Design/Office interiors/Office interiors.jpg') !important;
}

/* Projects page uses .projects-header class */
html[data-theme="dark"] .projects-header::before {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.94) 0%, rgba(13, 17, 23, 0.85) 85%, #0d1117 100%), 
                url('../Designs/4. Industrial Design/Factories/Factoriesl architecture design.jpg') !important;
}

/* Categories page uses .categories-header class */
html[data-theme="dark"] .categories-header::before {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.94) 0%, rgba(13, 17, 23, 0.85) 85%, #0d1117 100%), 
                url('../Designs/1. Residential Design/Maisonettes/WhatsApp Image 2026-07-19 at 08.33.36.jpeg') !important;
}

/* Designs page uses .designs-header class */
html[data-theme="dark"] .designs-header::before {
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.94) 0%, rgba(13, 17, 23, 0.85) 85%, #0d1117 100%), 
                url('../Designs/1. Residential Design/Villas/villas.jpg') !important;
}

/* Wiremesh grid should be visible in both themes */
html[data-theme="dark"] .hero::after,
html[data-theme="dark"] .services-hero::after,
html[data-theme="dark"] .about-hero::after,
html[data-theme="dark"] .contact-hero::after,
html[data-theme="dark"] .projects-header::after,
html[data-theme="dark"] .categories-header::after,
html[data-theme="dark"] .designs-header::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
    background-size: 60px 60px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
}

/* Wiremesh grid for LIGHT MODE on all hero sections */
html[data-theme="light"] .hero::after,
html[data-theme="light"] .services-hero::after,
html[data-theme="light"] .about-hero::after,
html[data-theme="light"] .contact-hero::after,
html[data-theme="light"] .page-header::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
    background-size: 60px 60px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
}

html[data-theme="dark"] .hero-overlay,
html[data-theme="dark"] .page-header-overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(13, 17, 23, 0.5) 60%, #0d1117 100%) !important;
    border: none !important;
    outline: none !important;
    bottom: -10px !important;
}

/* Overlap following content section by 3px to physically seal subpixel layout gaps */
html[data-theme="dark"] .designs-section,
html[data-theme="dark"] .services-section,
html[data-theme="dark"] .categories-section,
html[data-theme="dark"] .projects-section,
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .services-preview,
html[data-theme="dark"] .cart-page-section {
    margin-top: -4px !important;
    position: relative !important;
    z-index: 2 !important;
    border-top: none !important;
    outline: none !important;
}

html[data-theme="dark"] .hero-stat {
    background: rgba(22, 27, 34, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

/* Navigation and controls */
html[data-theme="dark"] .main-nav {
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .main-nav.scrolled {
    background: rgba(13, 17, 23, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6) !important;
    border-radius: 16px !important;
}

/* Dark mode text should always be visible */
html[data-theme="dark"] .logo,
html[data-theme="dark"] .logo-text,
html[data-theme="dark"] .nav-links > li > a,
html[data-theme="dark"] .search-icon,
html[data-theme="dark"] .cart-icon,
html[data-theme="dark"] .consultation-icon,
html[data-theme="dark"] .mobile-toggle,
html[data-theme="dark"] .theme-toggle {
    color: #ffffff !important;
}

html[data-theme="dark"] .logo-text span {
    color: #f39c12 !important;
}
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .logo,
html[data-theme="dark"] .logo-text,
html[data-theme="dark"] .nav-links > li > a,
html[data-theme="dark"] .search-icon,
html[data-theme="dark"] .cart-icon,
html[data-theme="dark"] .consultation-icon,
html[data-theme="dark"] .mobile-toggle {
    color: #f0f6fc;
}

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .cart-dropdown,
html[data-theme="dark"] .search-results,
html[data-theme="dark"] .notification {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .search-bar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #0d1117 !important;
    border-color: #30363d !important;
    color: #f0f6fc !important;
}

html[data-theme="dark"] .search-bar input {
    background: #0d1117 !important;
    border: 1.5px solid #f39c12 !important;
    color: #f0f6fc !important;
    border-radius: 25px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .search-bar input::placeholder {
    color: #8b949e !important;
}

html[data-theme="dark"] .search-bar input:focus {
    border-color: #f39c12 !important;
    box-shadow: 0 10px 28px rgba(243, 156, 18, 0.35) !important;
}

/* Dark mode search results */
html[data-theme="dark"] .search-results {
    background: #161b22 !important;
    border-color: rgba(243, 156, 18, 0.25) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .search-result-item {
    border-bottom-color: #21262d !important;
}

html[data-theme="dark"] .search-result-item:hover {
    background: linear-gradient(to right, rgba(243, 156, 18, 0.1), rgba(22, 27, 34, 0.95)) !important;
}

html[data-theme="dark"] .search-result-title {
    color: #f0f6fc !important;
}

html[data-theme="dark"] .search-result-path {
    color: #8b949e !important;
}

html[data-theme="dark"] .search-result-arrow {
    color: #6e7681 !important;
}

html[data-theme="dark"] .search-result-item:hover .search-result-arrow {
    color: #f39c12 !important;
}

html[data-theme="dark"] .search-no-results {
    color: #8b949e !important;
}

html[data-theme="dark"] .search-no-results i {
    color: #30363d !important;
}

html[data-theme="dark"] .search-no-results p {
    color: #f0f6fc !important;
}

html[data-theme="dark"] .search-no-results small {
    color: #6e7681 !important;
}

html[data-theme="dark"] .search-results-list::-webkit-scrollbar-track {
    background: #0d1117 !important;
}

html[data-theme="dark"] .search-results-list::-webkit-scrollbar-thumb {
    background: #f39c12 !important;
}

html[data-theme="dark"] select option {
    background: #0d1117;
    color: #f0f6fc;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #8b949e; }

/* Reusable light content surfaces */
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .projects-section,
html[data-theme="dark"] .categories-section,
html[data-theme="dark"] .designs-section,
html[data-theme="dark"] .cart-page,
html[data-theme="dark"] .services-section,
html[data-theme="dark"] .contact-form-container,
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .why-choose-card,
html[data-theme="dark"] .cart-content,
html[data-theme="dark"] .cart-summary,
html[data-theme="dark"] .cart-items-container,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .service-preview-card,
html[data-theme="dark"] .featured-project-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .proj-card,
html[data-theme="dark"] .featured-project-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .design-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .service-main-card,
html[data-theme="dark"] .gallery-item {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #f0f6fc !important;
}

html[data-theme="dark"] .proj-card__body,
html[data-theme="dark"] .featured-project-content {
    background-color: #161b22 !important;
}

html[data-theme="dark"] .proj-card__name,
html[data-theme="dark"] .featured-project-content h3 {
    color: #f0f6fc !important;
}

html[data-theme="dark"] .proj-card__desc,
html[data-theme="dark"] .featured-project-content p {
    color: #8b949e !important;
}

html[data-theme="dark"] .proj-card__meta {
    color: #f39c12 !important;
}

.design-content,
.category-content,
.design-info,
.category-info {
    background: transparent !important;
}

html[data-theme="dark"] .contact-info-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .about-section,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .projects-section,
html[data-theme="dark"] .categories-section,
html[data-theme="dark"] .designs-section,
html[data-theme="dark"] .cart-page,
html[data-theme="dark"] .services-section,
html[data-theme="dark"] .testimonials-home,
html[data-theme="dark"] .featured-projects-home,
html[data-theme="dark"] .services-preview {
    background: #0d1117 !important;
}

html[data-theme="dark"] .services-preview {
    border-radius: 40px 40px 0 0 !important;
    margin-top: -60px !important;
    z-index: 10 !important;
    position: relative !important;
}

html[data-theme="dark"] .company-overview,
html[data-theme="dark"] .services-main-section,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .categories-section,
html[data-theme="dark"] .designs-section,
html[data-theme="dark"] .projects-section {
    border-radius: 40px 40px 0 0 !important;
    margin-top: -60px !important;
    z-index: 10 !important;
    position: relative !important;
    padding-top: 120px !important;
}

html[data-theme="dark"] h1:not(.hero h1),
html[data-theme="dark"] h2:not(.hero h2),
html[data-theme="dark"] h3:not(.hero h3),
html[data-theme="dark"] h4,
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .contact-form h2,
html[data-theme="dark"] .contact-form-container h2,
html[data-theme="dark"] .contact-info-card h3,
html[data-theme="dark"] .why-choose-card h3,
html[data-theme="dark"] .method-content h4,
html[data-theme="dark"] .cart-items-header h2,
html[data-theme="dark"] .summary-header h2,
html[data-theme="dark"] .testimonial-author h4 {
    color: #f0f6fc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .card-description,
html[data-theme="dark"] .contact-info p,
html[data-theme="dark"] .form-description,
html[data-theme="dark"] .contact-info-card p,
html[data-theme="dark"] .method-content p,
html[data-theme="dark"] .checkbox-label,
html[data-theme="dark"] .checkbox-label span,
html[data-theme="dark"] .cart-item-details,
html[data-theme="dark"] .search-result-item,
html[data-theme="dark"] .form-group label {
    color: #8b949e !important;
}

html[data-theme="dark"] .benefits-list li {
    color: #8b949e !important;
    border-bottom-color: #21262d !important;
}

html[data-theme="dark"] .benefits-list li i {
    color: #f39c12 !important;
}

html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .category-filter-btn,
html[data-theme="dark"] .quantity-btn,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .add-to-cart-btn,
html[data-theme="dark"] .category-btn,
html[data-theme="dark"] .cart-empty,
html[data-theme="dark"] .empty-cart,
html[data-theme="dark"] .whatsapp-body,
html[data-theme="dark"] .whatsapp-message {
    background: #1c2128 !important;
    border-color: #30363d !important;
    color: #f0f6fc !important;
}

html[data-theme="dark"] .category-btn i {
    color: #f0f6fc !important;
}

/* Fine-grained component fixes for the page stylesheets' hard-coded light colors. */
html[data-theme="dark"] .about-intro,
html[data-theme="dark"] .company-overview,
html[data-theme="dark"] .mission-vision,
html[data-theme="dark"] .values-section,
html[data-theme="dark"] .why-choose-about,
html[data-theme="dark"] .team-section,
html[data-theme="dark"] .testimonials-section,
html[data-theme="dark"] .contact-content,
html[data-theme="dark"] .cart-container-page,
html[data-theme="dark"] .cart-page-section,
html[data-theme="dark"] .cart-items,
html[data-theme="dark"] .order-summary,
html[data-theme="dark"] .designs-content,
html[data-theme="dark"] .categories-content { background: #0d1117 !important; }

html[data-theme="dark"] .about-content,
html[data-theme="dark"] .mvv-card,
html[data-theme="dark"] .mission-card,
html[data-theme="dark"] .vision-card,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .why-choose-card,
html[data-theme="dark"] .team-member,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .contact-form-container,
html[data-theme="dark"] .contact-details,
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .cart-item,
html[data-theme="dark"] .cart-items-column,
html[data-theme="dark"] .cart-summary-card,
html[data-theme="dark"] .summary-card { background: #161b22 !important; }

html[data-theme="dark"] .about-content *,
html[data-theme="dark"] .mvv-card *,
html[data-theme="dark"] .mission-card *,
html[data-theme="dark"] .vision-card *,
html[data-theme="dark"] .value-card *,
html[data-theme="dark"] .why-card *,
html[data-theme="dark"] .why-choose-card *,
html[data-theme="dark"] .team-member *,
html[data-theme="dark"] .team-card *,
html[data-theme="dark"] .testimonial-card *,
html[data-theme="dark"] .contact-form *,
html[data-theme="dark"] .contact-form-container *,
html[data-theme="dark"] .contact-details *,
html[data-theme="dark"] .contact-info-card *,
html[data-theme="dark"] .cart-item *,
html[data-theme="dark"] .summary-card *,
html[data-theme="dark"] .design-info *,
html[data-theme="dark"] .category-info * { border-color: #30363d !important; }

html[data-theme="dark"] .why-card:hover,
html[data-theme="dark"] .testimonial-card:hover { background: #21262d !important; }

html[data-theme="dark"] .img-floating { border-color: #161b22 !important; }

html[data-theme="dark"] .cart-page-title,
html[data-theme="dark"] .cart-items-header,
html[data-theme="dark"] .cart-list-item,
html[data-theme="dark"] .cart-summary-card h3,
html[data-theme="dark"] .summary-divider { border-color: #30363d !important; }

html[data-theme="dark"] .empty-cart-icon { color: #6e7681 !important; }

html[data-theme="dark"] .cart-items-header span,
html[data-theme="dark"] .summary-row,
html[data-theme="dark"] .summary-row strong { color: #8b949e !important; }

html[data-theme="dark"] .summary-total-row,
html[data-theme="dark"] .summary-total-row span { color: #f0f6fc !important; }

html[data-theme="dark"] .btn-checkout-secondary,
html[data-theme="dark"] .summary-note {
    background: #0d1117 !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}

html[data-theme="dark"] .btn-checkout-secondary:hover {
    background: #21262d !important;
    color: #f0f6fc !important;
    border-color: #484f58 !important;
}

html[data-theme="dark"] .summary-note i { color: #eef3fb; }

/* Keep intentionally dark image/brand panels bright and readable. */
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .about-hero h1,
html[data-theme="dark"] .about-hero p,
html[data-theme="dark"] .services-hero h1,
html[data-theme="dark"] .services-hero p,
html[data-theme="dark"] .contact-hero h1,
html[data-theme="dark"] .contact-hero p,
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .about-cta h2,
html[data-theme="dark"] .about-cta p,
html[data-theme="dark"] .cta-home h2,
html[data-theme="dark"] .cta-home p,
html[data-theme="dark"] .why-choose-home h2,
html[data-theme="dark"] .why-choose-home h3,
html[data-theme="dark"] .why-choose-home p,
html[data-theme="dark"] .why-choose-services h2,
html[data-theme="dark"] .why-choose-services h3,
html[data-theme="dark"] .why-choose-services p,
html[data-theme="dark"] .footer h3 { color: #fff; }

html[data-theme="dark"] .about-hero p,
html[data-theme="dark"] .services-hero p,
html[data-theme="dark"] .contact-hero p,
html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .about-cta p,
html[data-theme="dark"] .cta-home p { color: rgba(255, 255, 255, .88); }

/* The theme button is added by script.js to every shared header. */
.theme-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary-color);
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background-color .2s ease, color .2s ease;
    flex-shrink: 0 !important;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}
.theme-toggle:hover { background: rgba(243, 156, 18, .12); color: var(--primary-color); }
.theme-toggle:focus-visible { outline: 3px solid rgba(243, 156, 18, .45); outline-offset: 2px; }
html[data-theme="dark"] .theme-toggle { color: #e9f0fb; }

@media (max-width: 768px) {
    html[data-theme="dark"] .nav-links { background: #161b22 !important; }
    html[data-theme="dark"] .dropdown-menu { background: #0d1117 !important; }
    
    /* Dark mode mobile search bar */
    html[data-theme="dark"] body .main-nav .search-container .search-bar input,
    html[data-theme="dark"] body .main-nav #searchBar input,
    html[data-theme="dark"] .main-nav .container .search-container .search-bar input,
    html[data-theme="dark"] html body div#searchBar input[type="text"] {
        background: #0d1117 !important;
        border: 1.5px solid #f39c12 !important;
        color: #f0f6fc !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    }

    html[data-theme="dark"] body .main-nav .search-container .search-bar input::placeholder,
    html[data-theme="dark"] body .main-nav #searchBar input::placeholder,
    html[data-theme="dark"] html body div#searchBar input[type="text"]::placeholder {
        color: #8b949e !important;
    }

    html[data-theme="dark"] body .main-nav .search-container .search-bar input:focus,
    html[data-theme="dark"] body .main-nav #searchBar input:focus,
    html[data-theme="dark"] html body div#searchBar input[type="text"]:focus {
        border-color: #f39c12 !important;
        box-shadow: 0 10px 28px rgba(243, 156, 18, 0.35) !important;
        background: #0d1117 !important;
    }
    
    /* Dark mode search results on mobile */
    html[data-theme="dark"] body .search-results,
    html[data-theme="dark"] html body div.search-results {
        background: #161b22 !important;
        border-color: rgba(243, 156, 18, 0.25) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
    }
    
    html[data-theme="dark"] .search-results-list {
        background: #161b22 !important;
    }
    
    html[data-theme="dark"] .search-result-item {
        background: #0d1117 !important;
        border-color: #30363d !important;
        color: #f0f6fc !important;
    }
    
    html[data-theme="dark"] .search-result-item:hover {
        background: linear-gradient(to right, rgba(243, 156, 18, 0.1), rgba(22, 27, 34, 0.95)) !important;
        border-color: rgba(243, 156, 18, 0.3) !important;
    }
}

/* Keep desktop dropdowns attached to their trigger and readable in dark mode. */
@media (min-width: 769px) {
    .dropdown-menu { margin-top: 0 !important; }
    .dropdown:hover > .dropdown-menu,
    .dropdown:focus-within > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

html[data-theme="dark"] .dropdown-menu li a { color: #e9f0fb; }
html[data-theme="dark"] .dropdown-menu li a:hover,
html[data-theme="dark"] .dropdown-menu li a:focus-visible {
    color: #ffc45c;
    background: rgba(243, 156, 18, .14);
}

/* Dark mode cart notification */
html[data-theme="dark"] .cart-notification {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .cart-notification.success {
    border-left-color: #27ae60 !important;
}

html[data-theme="dark"] .cart-notification.error {
    border-left-color: #e74c3c !important;
}

html[data-theme="dark"] .cart-notification.info {
    border-left-color: #3498db !important;
}

html[data-theme="dark"] .cart-notification span {
    color: #f0f6fc !important;
}

html[data-theme="dark"] .cart-notification i {
    color: inherit !important;
}

html[data-theme="dark"] .notification-link {
    color: #f39c12 !important;
    border-color: #f39c12 !important;
    background: transparent !important;
}

html[data-theme="dark"] .notification-link:hover {
    background: #f39c12 !important;
    color: #0d1117 !important;
}

/* Text on interactive cards must remain clear in both theme variants. */
html[data-theme="dark"] .service-preview-card:hover h3,
html[data-theme="dark"] .service-preview-card:hover p {
    color: #fff;
}

html[data-theme="dark"] .service-preview-card:hover p { color: #d8e3f2; }
html[data-theme="dark"] .service-preview-card:hover { border-color: #31445f; }

/* Footer social links appear on pages that do not load home.css. */
.footer .social-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer .social-icons a {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.footer .social-icons a:hover {
    padding-left: 0;
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Prevent page-load entrance effects when navigating between pages. */
[data-aos],
[data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Keep page navigation and initial rendering completely static. */
html { scroll-behavior: auto; }

/* Define hero fade animation */
@keyframes heroFadeIn {
    0% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}

/* Apply fade animation to ALL hero sections in both themes */
.hero,
.about-hero,
.services-hero,
.contact-hero,
.page-header,
html[data-theme="light"] .hero,
html[data-theme="light"] .about-hero,
html[data-theme="light"] .services-hero,
html[data-theme="light"] .contact-hero,
html[data-theme="light"] .page-header,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .services-hero,
html[data-theme="dark"] .contact-hero,
html[data-theme="dark"] .page-header {
    animation: heroFadeIn 0.9s ease-out forwards !important;
}

/* Use the same locally available interface font from first paint onward. */
body,
button,
input,
textarea,
select {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}