/* CRYSTALDRIVE — shared dark mode
   Applied only when the root <html> element has .dark-mode.
   Homepage-specific rules are scoped to .cd-home-page so other pages
   and their component styles are not unintentionally redesigned. */

html.dark-mode {
    color-scheme: dark;
    background: #111820;
    color: #edf3f8;
}

html.dark-mode body {
    background-color: #111820;
    color: #edf3f8;
}

/* Shared site chrome */
html.dark-mode .cd-site-header,
html.dark-mode .cd-site-footer {
    background-color: #071a2b !important;
    color: #f5f8fb !important;
}

html.dark-mode .cd-site-header a,
html.dark-mode .cd-site-footer a {
    color: #edf3f8;
}

/* Homepage palette */
html.dark-mode .cd-home-page {
    --cd-primary: #7eb5e3;
    --cd-secondary: #c4dff4;
    --cd-black: #edf3f8;
    --cd-white: #17232f;
    --cd-muted: #bdc9d5;
    --cd-border: #344656;
    color: #edf3f8;
    background: #111820;
}

html.dark-mode .cd-home,
html.dark-mode .cd-home-page main {
    background: #111820;
    color: #edf3f8;
}

html.dark-mode .cd-home-page .cd-section,
html.dark-mode .cd-home-page .cd-about,
html.dark-mode .cd-home-page .cd-process {
    background-color: #111820;
    color: #edf3f8;
}

html.dark-mode .cd-home-page .cd-services,
html.dark-mode .cd-home-page .cd-testimonials,
html.dark-mode .cd-home-page .cd-tint-finder,
html.dark-mode .cd-home-page .cd-transformation {
    background-color: #17232f !important;
    color: #edf3f8;
}

html.dark-mode .cd-home-page .cd-solutions {
    background-color: #1a2a38 !important;
    color: #edf3f8;
}

/* Text hierarchy */
html.dark-mode .cd-home-page h1,
html.dark-mode .cd-home-page h2,
html.dark-mode .cd-home-page h3,
html.dark-mode .cd-home-page h4,
html.dark-mode .cd-home-page .cd-section-heading h2,
html.dark-mode .cd-home-page .cd-about-content h2,
html.dark-mode .cd-home-page .cd-solutions-content h2 {
    color: #f5f8fb;
}

html.dark-mode .cd-home-page p,
html.dark-mode .cd-home-page .cd-about-content p,
html.dark-mode .cd-home-page .cd-section-heading p,
html.dark-mode .cd-home-page .cd-solutions-content p,
html.dark-mode .cd-home-page .cd-process-step p,
html.dark-mode .cd-home-page .cd-review-card > p {
    color: #bdc9d5;
}

html.dark-mode .cd-home-page .cd-eyebrow,
html.dark-mode .cd-home-page .cd-tint-eyebrow,
html.dark-mode .cd-home-page .cd-home-highlight {
    color: #9bcaf0;
}

html.dark-mode .cd-home-page h1 span,
html.dark-mode .cd-home-page h2 span {
    color: #9bcaf0;
}

html.dark-mode .cd-home-page .cd-text-link,
html.dark-mode .cd-home-page .cd-card-link {
    color: #a9d5f7;
}

/* Cards, panels and controls */
html.dark-mode .cd-home-page .cd-service-card,
html.dark-mode .cd-home-page .cd-review-card,
html.dark-mode .cd-home-page .cd-tint-preview,
html.dark-mode .cd-home-page .cd-tint-options,
html.dark-mode .cd-home-page .cd-tint-recommendation,
html.dark-mode .cd-home-page .cd-process-step,
html.dark-mode .cd-home-page .cd-transformation-card,
html.dark-mode .cd-home-page .cd-showcase-content,
html.dark-mode .cd-home-page .cd-showcase-panel {
    background-color: #202e3b;
    color: #edf3f8;
    border-color: #3a4b5b;
}

html.dark-mode .cd-home-page .cd-service-body,
html.dark-mode .cd-home-page .cd-tint-shade,
html.dark-mode .cd-home-page .cd-tint-benefits,
html.dark-mode .cd-home-page .cd-review-person {
    color: #edf3f8;
    border-color: #3a4b5b;
}

html.dark-mode .cd-home-page .cd-service-body h3,
html.dark-mode .cd-home-page .cd-review-person strong,
html.dark-mode .cd-home-page .cd-tint-shade-copy strong,
html.dark-mode .cd-home-page .cd-tint-options h3,
html.dark-mode .cd-home-page .cd-tint-benefits h4,
html.dark-mode .cd-home-page .cd-process-step h3 {
    color: #f5f8fb;
}

html.dark-mode .cd-home-page .cd-service-body p,
html.dark-mode .cd-home-page .cd-tint-shade-copy small,
html.dark-mode .cd-home-page .cd-tint-option-description,
html.dark-mode .cd-home-page .cd-review-person span,
html.dark-mode .cd-home-page .cd-process-step p {
    color: #bdc9d5;
}

html.dark-mode .cd-home-page .cd-tint-shade {
    background: #202e3b;
}

html.dark-mode .cd-home-page .cd-tint-shade.active,
html.dark-mode .cd-home-page .cd-tint-shade[aria-pressed="true"] {
    background: #263f53;
    border-color: #83bce8;
}

html.dark-mode .cd-home-page .cd-tint-custom-check {
    border-color: #71869a;
}

html.dark-mode .cd-home-page .cd-check-list li {
    color: #d6e1ea;
}

html.dark-mode .cd-home-page .cd-image-caption {
    color: #f5f8fb;
    background: #202e3b;
}

html.dark-mode .cd-home-page .cd-image-caption span,
html.dark-mode .cd-home-page .cd-image-caption strong {
    color: #edf3f8;
}

/* Keep the two intentionally dark blue sections visually rich */
html.dark-mode .cd-home-page .cd-why,
html.dark-mode .cd-home-page .cd-final-cta {
    background-color: #071f35 !important;
    color: #f5f8fb;
}

html.dark-mode .cd-home-page .cd-why h2,
html.dark-mode .cd-home-page .cd-why h3,
html.dark-mode .cd-home-page .cd-final-cta h2 {
    color: #f5f8fb;
}

html.dark-mode .cd-home-page .cd-why p,
html.dark-mode .cd-home-page .cd-final-cta p,
html.dark-mode .cd-home-page .cd-benefit-card p {
    color: #d0dfeb;
}

html.dark-mode .cd-home-page .cd-benefit-card {
    background: rgba(255,255,255,.055);
    border-color: rgba(196,223,244,.24);
}

/* Hero text remains readable over the background video */
html.dark-mode .cd-home-page .cd-video-hero {
    background-color: #07111c;
}

html.dark-mode .cd-home-page .cd-video-hero h1,
html.dark-mode .cd-home-page .cd-video-hero p {
    color: #ffffff;
}

html.dark-mode .cd-home-page .cd-video-hero h1 span {
    color: #c4dff4;
}

/* Forms and general legacy page elements used across the site */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    color: #edf3f8;
    background-color: #17232f;
    border-color: #46596b;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #9cabb9;
}

html.dark-mode .cd-philosophy,
html.dark-mode .cd-visit-process,
html.dark-mode .cd-about-banner {
    background-color: #071a2b !important;
    color: #f5f8fb !important;
}
/* darkmode.css */

/* Html element-la 'dark-mode' class iruntha intha styles work aagum */
html.dark-mode {
    background-color: #111111;
    color: #FFFFFF;
}

html.dark-mode body {
    background-color: #111111;
    color: #D6E5F2;
}

/* Backgrounds & Cards in Dark Mode */
html.dark-mode .cd-site-header,
html.dark-mode .cd-site-footer,
html.dark-mode .cd-philosophy,
html.dark-mode .cd-visit-process,
html.dark-mode .cd-about-banner {
    background-color: #001830 !important;
    color: #FFFFFF !important;
}

html.dark-mode h1, 
html.dark-mode h3, 
html.dark-mode h4 {
    color: #FFFFFF !important;
}

html.dark-mode p {
    color: #D6E5F2 !important;
}

/* Add other component overrides as needed for your pages */
/* Ensure dark mode styles ONLY apply when html has 'dark-mode' class */

html.dark-mode {
    background-color: #111111;
    color: #FFFFFF;
}

html.dark-mode body {
    background-color: #111111;
    color: #D6E5F2;
}

/* Yellathayum strictly html.dark-mode-ku ulla mattum podu */
html.dark-mode .cd-site-header,
html.dark-mode .cd-site-footer,
html.dark-mode .cd-philosophy,
html.dark-mode .cd-visit-process,
html.dark-mode .cd-about-banner {
    background-color: #001830 !important;
    color: #FFFFFF !important;
}

html.dark-mode h1, 
html.dark-mode h3, 
html.dark-mode h4 {
    color: #FFFFFF !important;
}

html.dark-mode p {
    color: #D6E5F2 !important;
}



/* =========================================================
   CRYSTALDRIVE HOME 2 — COMPLETE DARK MODE + TEXT CONTRAST
   Toggle class expected on <html>: html.dark-mode
========================================================= */

html.dark-mode {
    color-scheme: dark;
    background: #111820 !important;
    color: #edf3f8;
}

html.dark-mode body {
    background: #111820 !important;
    color: #edf3f8 !important;
}

/* Header, dropdown and footer */
html.dark-mode .cd-site-header,
html.dark-mode .cd-site-footer {
    background: #071a2b !important;
    color: #f5f8fb !important;
    border-color: #344656 !important;
}
html.dark-mode .cd-site-header a,
html.dark-mode .cd-site-header button,
html.dark-mode .cd-site-footer a,
html.dark-mode .cd-site-footer p,
html.dark-mode .cd-site-footer h3,
html.dark-mode .cd-brand-text strong,
html.dark-mode .cd-brand-text small {
    color: #edf3f8 !important;
}
html.dark-mode .cd-home-dropdown-menu {
    background: #172635 !important;
    border-color: #3a4b5b !important;
}
html.dark-mode .cd-home-dropdown-menu a:hover,
html.dark-mode .cd-home-dropdown-menu a.active {
    background: #263f53 !important;
    color: #ffffff !important;
}

/* All Home 2 section canvases */
html.dark-mode .cd-home-two,
html.dark-mode .cd-home-two .cd2-section,
html.dark-mode .cd-home-two .cd2-technology,
html.dark-mode .cd-home-two .cd2-craftsmanship,
html.dark-mode .cd-home-two .cd2-shades,
html.dark-mode .cd-home-two .cd2-film-quality,
html.dark-mode .cd-home-two .cd2-glass-guide,
html.dark-mode .cd-home-two .cd2-workshop {
    background-color: #111820 !important;
    color: #edf3f8 !important;
}

/* Main headings and body copy: override hard-coded light-theme colors */
html.dark-mode .cd-home-two h1,
html.dark-mode .cd-home-two h2,
html.dark-mode .cd-home-two h3,
html.dark-mode .cd-home-two h4,
html.dark-mode .cd-home-two h5,
html.dark-mode .cd-home-two strong,
html.dark-mode .cd-home-two .cd2-section-heading,
html.dark-mode .cd-home-two .cd2-tech-content h3,
html.dark-mode .cd-home-two .cd2-craft-text h4,
html.dark-mode .cd-home-two .cd2-shades-heading h3,
html.dark-mode .cd-home-two .cd2-quality-copy h3,
html.dark-mode .cd-home-two .cd2-glass-guide-heading h3,
html.dark-mode .cd-home-two .cd2-workshop-heading h3 {
    color: #f5f8fb !important;
}
html.dark-mode .cd-home-two p,
html.dark-mode .cd-home-two li,
html.dark-mode .cd-home-two small,
html.dark-mode .cd-home-two .cd2-tech-content > p,
html.dark-mode .cd-home-two .cd2-tech-item p,
html.dark-mode .cd-home-two .cd2-section-heading p,
html.dark-mode .cd-home-two .cd2-craft-text p,
html.dark-mode .cd-home-two .cd2-shades-heading > p,
html.dark-mode .cd-home-two .cd2-shades-intro > p,
html.dark-mode .cd-home-two .cd2-quality-copy > p,
html.dark-mode .cd-home-two .cd2-quality-feature-content p,
html.dark-mode .cd-home-two .cd2-glass-guide-heading > p,
html.dark-mode .cd-home-two .cd2-glass-card-body > p,
html.dark-mode .cd-home-two .cd2-glass-card-body li,
html.dark-mode .cd-home-two .cd2-glass-safety p,
html.dark-mode .cd-home-two .cd2-workshop-heading > p {
    color: #c5d1dc !important;
}

/* Accent labels and links */
html.dark-mode .cd-home-two .cd2-eyebrow,
html.dark-mode .cd-home-two .cd2-blue-eyebrow,
html.dark-mode .cd-home-two .cd2-quality-eyebrow,
html.dark-mode .cd-home-two .cd2-glass-card-title,
html.dark-mode .cd-home-two .cd2-text-link,
html.dark-mode .cd-home-two .cd2-quality-link,
html.dark-mode .cd-home-two .cd2-glass-link {
    color: #9bcaf0 !important;
}
html.dark-mode .cd-home-two a:not(.cd2-btn) {
    text-decoration-color: #9bcaf0;
}

/* Cards, selector panels, feature rows, notices */
html.dark-mode .cd-home-two .cd2-craft-card,
html.dark-mode .cd-home-two .cd2-craft-text,
html.dark-mode .cd-home-two .cd2-shades-selector,
html.dark-mode .cd-home-two .cd2-quality-feature,
html.dark-mode .cd-home-two .cd2-glass-card,
html.dark-mode .cd-home-two .cd2-glass-card-body,
html.dark-mode .cd-home-two .cd2-glass-safety,
html.dark-mode .cd-home-two .cd2-shade-option,
html.dark-mode .cd-home-two .cd2-tech-item,
html.dark-mode .cd-home-two .cd2-quality-footnote {
    background-color: #1b2936 !important;
    color: #edf3f8 !important;
    border-color: #3b4d5e !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
html.dark-mode .cd-home-two .cd2-shade-option:hover,
html.dark-mode .cd-home-two .cd2-shade-option.is-selected,
html.dark-mode .cd-home-two .cd2-shade-option[aria-pressed="true"] {
    background-color: #263f53 !important;
    border-color: #83bce8 !important;
}
html.dark-mode .cd-home-two .cd2-shade-option-text strong {
    color: #f5f8fb !important;
}
html.dark-mode .cd-home-two .cd2-shade-option-text small,
html.dark-mode .cd-home-two .cd2-shades-note,
html.dark-mode .cd-home-two .cd2-quality-footnote {
    color: #c5d1dc !important;
}
html.dark-mode .cd-home-two .cd2-tech-number,
html.dark-mode .cd-home-two .cd2-quality-number,
html.dark-mode .cd-home-two .cd2-glass-card-icon,
html.dark-mode .cd-home-two .cd2-quality-icon {
    color: #a9d5f7 !important;
    border-color: #49677f !important;
}

/* Buttons retain readable contrast */
html.dark-mode .cd-home-two .cd2-btn-primary {
    background: #8fc5ef !important;
    border-color: #8fc5ef !important;
    color: #071a2b !important;
}
html.dark-mode .cd-home-two .cd2-btn-outline {
    color: #edf3f8 !important;
    border-color: #9bcaf0 !important;
    background: rgba(7,26,43,.35) !important;
}
html.dark-mode .cd-home-two .cd2-btn-primary:hover {
    background: #c4e3fb !important;
    color: #071a2b !important;
}

/* Keep photographic captions readable */
html.dark-mode .cd-home-two .cd2-image-label,
html.dark-mode .cd-home-two .cd2-shades-image-caption,
html.dark-mode .cd-home-two .cd2-quality-image > span,
html.dark-mode .cd-home-two .cd2-gallery figcaption {
    color: #ffffff !important;
    background-color: rgba(4, 16, 28, .82) !important;
}
html.dark-mode .cd-home-two .cd2-image-label span,
html.dark-mode .cd-home-two .cd2-gallery figcaption strong,
html.dark-mode .cd-home-two .cd2-gallery figcaption span {
    color: #ffffff !important;
}

/* Hero is image-backed: preserve white text and add contrast overlay */
html.dark-mode .cd-home-two .cd2-hero {
    background-color: #071a2b !important;
}
html.dark-mode .cd-home-two .cd2-hero-overlay {
    background: linear-gradient(90deg, rgba(2,12,22,.88), rgba(2,12,22,.48)) !important;
}
html.dark-mode .cd-home-two .cd2-hero-content h1,
html.dark-mode .cd-home-two .cd2-hero-content p,
html.dark-mode .cd-home-two .cd2-hero-content .cd2-eyebrow {
    color: #ffffff !important;
}

/* Prevent invisible text due to inherited transitions or theme-specific rules */
html.dark-mode .cd-home-two .cd2-glass-tag,
html.dark-mode .cd-home-two .cd2-craft-index {
    color: #ffffff !important;
}
html.dark-mode .cd-home-two .cd2-glass-card-body ul {
    color: #c5d1dc !important;
}
html.dark-mode .cd-home-two .cd2-glass-card-body li i {
    color: #9bcaf0 !important;
}

/* =========================================
   CRYSTALDRIVE ABOUT PAGE — DARK MODE FIX
   Add at the bottom of darkmode.css
========================================= */

html.dark-mode .cd-philosophy,
html.dark-mode .stats-section,
html.dark-mode .cd-vm-section,
html.dark-mode .recent-work-section,
html.dark-mode .quality-section {
    background-color: #101820 !important;
    color: #F5F7FA !important;
}

/* Main section headings */
html.dark-mode .cd-philosophy h2,
html.dark-mode .cd-vm-heading h2,
html.dark-mode .cd-details-intro h3,
html.dark-mode .recent-work-section h2,
html.dark-mode .quality-header h2 {
    color: #FFFFFF !important;
}

/* Paragraphs and supporting text */
html.dark-mode .cd-philosophy p,
html.dark-mode .cd-vm-heading p,
html.dark-mode .cd-vm-details p,
html.dark-mode .recent-work-section p,
html.dark-mode .quality-section p,
html.dark-mode .cd-details-point p {
    color: #D0D9E2 !important;
    opacity: 1 !important;
}

/* Philosophy labels and feature titles */
html.dark-mode .cd-philosophy-label,
html.dark-mode .cd-philosophy-item h3,
html.dark-mode .cd-details-point h4,
html.dark-mode .cd-vm-details h4 {
    color: #F5F7FA !important;
}

html.dark-mode .cd-philosophy-number,
html.dark-mode .cd-vm-detail-label,
html.dark-mode .cd-vm-eyebrow,
html.dark-mode .cd-details-index {
    color: #9CC9F0 !important;
}

/* Vision and Mission cards */
html.dark-mode .cd-vm-card {
    background-color: #17232E !important;
    border-color: #334656 !important;
}

html.dark-mode .cd-vm-details {
    background-color: #17232E !important;
    color: #F5F7FA !important;
}

html.dark-mode .cd-vm-highlight {
    background-color: #20384C !important;
    color: #D6E5F2 !important;
}

/* Statistics section */
html.dark-mode .stats-section .stat-item h3,
html.dark-mode .stats-section .counter {
    color: #FFFFFF !important;
}

html.dark-mode .stats-section .stat-item p {
    color: #D0D9E2 !important;
}

/* Recent work project cards */
html.dark-mode .project-card {
    background-color: #17232E !important;
    border: 1px solid #334656 !important;
}

html.dark-mode .project-card .card-content h4 {
    color: #FFFFFF !important;
}

html.dark-mode .project-card .card-content p {
    color: #D0D9E2 !important;
}

html.dark-mode .date-badge {
    background-color: #00284D !important;
    color: #FFFFFF !important;
}

/* Quality feature cards */
html.dark-mode .quality-card {
    background-color: #17232E !important;
    border: 1px solid #334656 !important;
    color: #F5F7FA !important;
}

html.dark-mode .quality-card h4 {
    color: #FFFFFF !important;
}

html.dark-mode .quality-card p {
    color: #D0D9E2 !important;
}

html.dark-mode .quality-card .icon-box {
    background-color: #20384C !important;
    color: #D6E5F2 !important;
}

/* Details content */
html.dark-mode .cd-details-content {
    background-color: #101820 !important;
    color: #F5F7FA !important;
}

html.dark-mode .cd-details-intro h3,
html.dark-mode .cd-details-point h4 {
    color: #FFFFFF !important;
}

html.dark-mode .cd-details-point p {
    color: #D0D9E2 !important;
}

/* Text links */
html.dark-mode .cd-philosophy-link,
html.dark-mode .cd-details-content a {
    color: #9CC9F0 !important;
}

html.dark-mode .cd-philosophy-link:hover,
html.dark-mode .cd-details-content a:hover {
    color: #FFFFFF !important;
}

/* Hover card image overlay: preserve contrast */
html.dark-mode .cd-hover-overlay {
    color: #FFFFFF !important;
}

html.dark-mode .cd-hover-overlay h3,
html.dark-mode .cd-hover-overlay p,
html.dark-mode .cd-hover-overlay span,
html.dark-mode .cd-hover-overlay a {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Header and footer text */
html.dark-mode .cd-site-header,
html.dark-mode .cd-site-footer {
    background-color: #0B1219 !important;
    color: #F5F7FA !important;
}

html.dark-mode .cd-site-header a,
html.dark-mode .cd-site-header nav button,
html.dark-mode .cd-site-footer h3,
html.dark-mode .cd-site-footer p,
html.dark-mode .cd-site-footer a {
    color: #E5EDF5;
}

html.dark-mode .cd-site-footer a:hover {
    color: #9CC9F0 !important;
}

/* Keep text readable on mobile and prevent faded content */
html.dark-mode .cd-philosophy *,
html.dark-mode .cd-vm-section *,
html.dark-mode .recent-work-section *,
html.dark-mode .quality-section *,
html.dark-mode .cd-details-content * {
    text-shadow: none;
}

html.dark-mode .cd-philosophy p,
html.dark-mode .cd-vm-details p,
html.dark-mode .project-card p,
html.dark-mode .quality-card p,
html.dark-mode .cd-details-point p {
    line-height: 1.75;
    overflow-wrap: break-word;
}
/* =========================================
   CRYSTALDRIVE SERVICE PAGE — DARK MODE FIX
   Append this code at the bottom of darkmode.css
========================================= */

/* Main service section backgrounds */
html.dark-mode .ws-service-page,
html.dark-mode .cd-services,
html.dark-mode .cd-care-premium,
html.dark-mode .cd-beyond-tint,
html.dark-mode .cd-film-guide,
html.dark-mode .cd-tint-care {
    background-color: #101820 !important;
    color: #F5F7FA !important;
}

/* Section headings */
html.dark-mode .cd-section-heading h2,
html.dark-mode .cd-section-heading h2 span,
html.dark-mode .cd-film-heading h2,
html.dark-mode .cd-care-intro h2,
html.dark-mode .cd-care-premium-intro h2,
html.dark-mode .cd-care-premium-intro h2 span,
html.dark-mode .cd-beyond-content h2,
html.dark-mode .cd-beyond-content h2 span {
    color: #FFFFFF !important;
}

/* Eyebrows, labels and small headings */
html.dark-mode .cd-eyebrow,
html.dark-mode .cd-care-premium-label,
html.dark-mode .cd-beyond-label,
html.dark-mode .cd-film-label,
html.dark-mode .cd-care-label,
html.dark-mode .cd-film-category,
html.dark-mode .cd-service-number,
html.dark-mode .cd-film-index,
html.dark-mode .cd-care-step-top span,
html.dark-mode .cd-beyond-benefit > span {
    color: #9CC9F0 !important;
}

/* Service cards */
html.dark-mode .cd-service-card {
    background-color: #17232E !important;
    border: 1px solid #334656 !important;
    color: #F5F7FA !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important;
}

html.dark-mode .cd-service-body {
    background-color: #17232E !important;
    color: #F5F7FA !important;
}

html.dark-mode .cd-service-body h3 {
    color: #FFFFFF !important;
}

html.dark-mode .cd-service-body p {
    color: #D0D9E2 !important;
    opacity: 1 !important;
}

html.dark-mode .cd-service-icon {
    background-color: #20384C !important;
    color: #B9DDFB !important;
}

html.dark-mode .cd-card-link {
    color: #9CC9F0 !important;
}

html.dark-mode .cd-card-link:hover {
    color: #FFFFFF !important;
}

/* Premium tint aftercare section */
html.dark-mode .cd-care-premium-intro p,
html.dark-mode .cd-care-premium-item-content p,
html.dark-mode .cd-care-premium-note span {
    color: #D0D9E2 !important;
    opacity: 1 !important;
}

html.dark-mode .cd-care-premium-item {
    background-color: #17232E !important;
    border-color: #334656 !important;
    color: #F5F7FA !important;
}

html.dark-mode .cd-care-premium-item h3 {
    color: #FFFFFF !important;
}

html.dark-mode .cd-care-premium-item > i {
    color: #9CC9F0 !important;
}

html.dark-mode .cd-care-premium-number {
    color: #9CC9F0 !important;
}

html.dark-mode .cd-care-premium-note {
    background-color: #20384C !important;
    border-color: #36556E !important;
    color: #E5EDF5 !important;
}

html.dark-mode .cd-care-premium-note i {
    color: #9CC9F0 !important;
}

html.dark-mode .cd-care-premium-link {
    color: #9CC9F0 !important;
}

/* More than just tinted glass */
html.dark-mode .cd-beyond-content,
html.dark-mode .cd-beyond-intro,
html.dark-mode .cd-beyond-benefit h3,
html.dark-mode .cd-beyond-benefit p {
    color: #D0D9E2 !important;
}

html.dark-mode .cd-beyond-benefit h3 {
    color: #FFFFFF !important;
}

html.dark-mode .cd-beyond-benefit > span {
    border-color: #334656 !important;
}

html.dark-mode .cd-beyond-link {
    color: #9CC9F0 !important;
}

html.dark-mode .cd-beyond-image-caption {
    color: #FFFFFF !important;
}

/* Window film guide rows */
html.dark-mode .cd-film-row {
    background-color: #17232E !important;
    border-color: #334656 !important;
    color: #F5F7FA !important;
}

html.dark-mode .cd-film-description h3 {
    color: #FFFFFF !important;
}

html.dark-mode .cd-film-description p {
    color: #D0D9E2 !important;
    opacity: 1 !important;
}

html.dark-mode .cd-film-note {
    background-color: #20384C !important;
    color: #B9DDFB !important;
    border-color: #36556E !important;
}

html.dark-mode .cd-film-mark {
    color: #9CC9F0 !important;
}

/* Tint care guide cards */
html.dark-mode .cd-care-intro,
html.dark-mode .cd-care-guide {
    color: #F5F7FA !important;
}

html.dark-mode .cd-care-step {
    background-color: #17232E !important;
    border: 1px solid #334656 !important;
    color: #F5F7FA !important;
}

html.dark-mode .cd-care-step h3 {
    color: #FFFFFF !important;
}

html.dark-mode .cd-care-step p {
    color: #D0D9E2 !important;
    opacity: 1 !important;
}

html.dark-mode .cd-care-step-top i {
    color: #9CC9F0 !important;
}

html.dark-mode .cd-care-tag {
    color: #B9DDFB !important;
    background-color: #20384C !important;
    border-color: #36556E !important;
}

/* Common paragraph readability */
html.dark-mode .cd-services p,
html.dark-mode .cd-care-premium p,
html.dark-mode .cd-beyond-tint p,
html.dark-mode .cd-film-guide p,
html.dark-mode .cd-tint-care p {
    line-height: 1.75;
    opacity: 1 !important;
    overflow-wrap: break-word;
}

/* Keep buttons and links readable */
html.dark-mode .ws-btn-primary {
    color: #FFFFFF !important;
}

html.dark-mode .cd-services a:focus-visible,
html.dark-mode .cd-care-premium a:focus-visible,
html.dark-mode .cd-beyond-tint a:focus-visible,
html.dark-mode .cd-film-guide a:focus-visible,
html.dark-mode .cd-tint-care a:focus-visible {
    outline: 2px solid #9CC9F0 !important;
    outline-offset: 4px;
}

/* Header and footer */
html.dark-mode .cd-site-header,
html.dark-mode .cd-site-footer {
    background-color: #0B1219 !important;
    color: #F5F7FA !important;
}

html.dark-mode .cd-site-header a,
html.dark-mode .cd-site-header nav button,
html.dark-mode .cd-site-footer h3,
html.dark-mode .cd-site-footer p,
html.dark-mode .cd-site-footer a {
    color: #E5EDF5;
}

html.dark-mode .cd-site-footer a:hover {
    color: #9CC9F0 !important;
}

/* Remove faded text and unwanted text shadows */
html.dark-mode .cd-services *,
html.dark-mode .cd-care-premium *,
html.dark-mode .cd-beyond-tint *,
html.dark-mode .cd-film-guide *,
html.dark-mode .cd-tint-care * {
    text-shadow: none;
}

html.dark-mode .cd-service-body p,
html.dark-mode .cd-care-premium-item p,
html.dark-mode .cd-beyond-benefit p,
html.dark-mode .cd-film-description p,
html.dark-mode .cd-care-step p {
    color: #D0D9E2 !important;
    opacity: 1 !important;
}
/* =========================================================
   CRYSTALDRIVE — PRICING PAGE DARK MODE FIXES
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Main Section Backgrounds & General Text */
html.dark-mode .wa-pricing-section,
html.dark-mode .wa-comparison-section,
html.dark-mode .wa-bundle-section,
html.dark-mode .tint-package-section,
html.dark-mode .glass-pricing-section,
html.dark-mode .vehicle-guide-section {
    background-color: #101820 !important;
    color: #edf3f8 !important;
}

/* Headings Visibility & Contrast */
html.dark-mode .wa-section-heading h2,
html.dark-mode .wa-bundle-intro h2,
html.dark-mode .tp-heading h2,
html.dark-mode .gp-heading h2,
html.dark-mode .vg-heading-row h2,
html.dark-mode .wa-card-top h3,
html.dark-mode .tp-intro h3,
html.dark-mode .tp-option h3,
html.dark-mode .gp-side h3,
html.dark-mode .gp-service-info h3,
html.dark-mode .vg-vehicle h3,
html.dark-mode .wa-bundle-card h3 {
    color: #f5f8fb !important;
}

/* Paragraphs & Subtext Contrast */
html.dark-mode .wa-section-heading p,
html.dark-mode .wa-pricing-hero .wa-hero-content p,
html.dark-mode .wa-card-top p,
html.dark-mode .wa-pricing-note,
html.dark-mode .wa-table-note,
html.dark-mode .wa-bundle-intro p,
html.dark-mode .wa-bundle-card > p,
html.dark-mode .tp-heading > p,
html.dark-mode .tp-intro > p,
html.dark-mode .tp-option > p,
html.dark-mode .gp-heading > p,
html.dark-mode .gp-side > p,
html.dark-mode .gp-service-info p,
html.dark-mode .vg-heading-row > p,
html.dark-mode .vg-vehicle p,
html.dark-mode .vg-details,
html.dark-mode .vg-bottom p {
    color: #c5d1dc !important;
}

/* Labels, Eyebrows & Accents */
html.dark-mode .wa-section-label,
html.dark-mode .tp-eyebrow,
html.dark-mode .gp-eyebrow,
html.dark-mode .vg-eyebrow,
html.dark-mode .tp-text-link,
html.dark-mode .vg-quote-link,
html.dark-mode .wa-bundle-link {
    color: #9bcaf0 !important;
}

/* Pricing Cards & Containers */
html.dark-mode .wa-price-card,
html.dark-mode .tp-option,
html.dark-mode .wa-bundle-card,
html.dark-mode .vg-table-wrap,
html.dark-mode .vg-row {
    background-color: #17232e !important;
    border-color: #334656 !important;
    color: #edf3f8 !important;
}

html.dark-mode .wa-price-card:hover,
html.dark-mode .tp-option:hover,
html.dark-mode .wa-bundle-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
}

/* Featured / Highlighted Cards */
html.dark-mode .wa-featured-card,
html.dark-mode .wa-bundle-featured,
html.dark-mode .tp-featured {
    background-color: #1c2e3d !important;
    border-color: #6398c3 !important;
}

html.dark-mode .wa-popular-tag,
html.dark-mode .wa-savings-badge {
    background-color: #274863 !important;
    color: #ffffff !important;
}

/* Price Boxes & Numbers */
html.dark-mode .wa-price {
    background-color: #203140 !important;
}

html.dark-mode .wa-price strong,
html.dark-mode .wa-bundle-price strong,
html.dark-mode .gp-service-price strong {
    color: #f5f8fb !important;
}

html.dark-mode .wa-price span,
html.dark-mode .wa-price small,
html.dark-mode .wa-bundle-price del,
html.dark-mode .wa-bundle-price > span,
html.dark-mode .gp-service-price span {
    color: #b0c1d1 !important;
}

/* Lists inside Cards */
html.dark-mode .wa-mini-features li,
html.dark-mode .tp-option li,
html.dark-mode .wa-bundle-card li {
    color: #d0d9e2 !important;
    border-color: #2b3d4f !important;
}

html.dark-mode .tp-option li::before {
    color: #9bcaf0 !important;
}

/* Feature Comparison Table Fixes */
html.dark-mode .wa-comparison-section .wa-table-wrapper {
    background-color: #17232e !important;
    border-color: #334656 !important;
}

html.dark-mode .wa-comparison-table {
    background-color: #17232e !important;
}

html.dark-mode .wa-comparison-table th,
html.dark-mode .wa-comparison-table td {
    border-color: #2e4152 !important;
    color: #d0d9e2 !important;
}

html.dark-mode .wa-comparison-table thead th,
html.dark-mode .wa-comparison-table tbody th {
    background-color: #121d27 !important;
    color: #f5f8fb !important;
}

html.dark-mode .wa-comparison-table thead h4,
html.dark-mode .wa-comparison-table thead strong {
    color: #f5f8fb !important;
}

html.dark-mode .wa-comparison-table thead p,
html.dark-mode .wa-comparison-table thead small {
    color: #a0b2c3 !important;
}

html.dark-mode .wa-comparison-section .wa-ceramic-column {
    background-color: #1c3042 !important;
}

/* Glass Repair Section Side Card & Service Rows */
html.dark-mode .gp-side {
    background-color: #0d1e2d !important;
    border: 1px solid #2a3e51 !important;
}

html.dark-mode .gp-service-list,
html.dark-mode .gp-service {
    border-color: #2a3e51 !important;
}

html.dark-mode .gp-disclaimer {
    background-color: #1c2f40 !important;
    border-left-color: #6398c3 !important;
}

html.dark-mode .gp-disclaimer p {
    color: #c5d1dc !important;
}

/* Vehicle Guide Table & Bottom Callout */
html.dark-mode .vg-table-head {
    background-color: #0b1520 !important;
    color: #f5f8fb !important;
}

html.dark-mode .vg-row:hover,
html.dark-mode .vg-row-highlight {
    background-color: #1f3040 !important;
}

html.dark-mode .vg-bottom {
    background-color: #1a2a38 !important;
}

html.dark-mode .vg-bottom strong {
    color: #f5f8fb !important;
}

html.dark-mode .vg-bottom p {
    color: #c5d1dc !important;
}

/* Buttons in Dark Mode */
html.dark-mode .wa-card-btn,
html.dark-mode .tp-button,
html.dark-mode .gp-main-button,
html.dark-mode .vg-cta {
    background-color: #9bcaf0 !important;
    border-color: #9bcaf0 !important;
    color: #071a2b !important;
}

html.dark-mode .wa-card-btn:hover,
html.dark-mode .tp-button:hover,
html.dark-mode .gp-main-button:hover,
html.dark-mode .vg-cta:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #071a2b !important;
}
/* =========================================================
   CRYSTALDRIVE — CONTACT PAGE DARK MODE FIXES
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Main Contact Sections Background & Text */
html.dark-mode .cd-contact-page,
html.dark-mode .cd-contact-main,
html.dark-mode .cd-why-contact,
html.dark-mode .cd-visit-process,
html.dark-mode .cd-contact-faq {
    background-color: #101820 !important;
    color: #edf3f8 !important;
}

/* Headings Visibility */
html.dark-mode .cd-contact-section-heading h2,
html.dark-mode .cd-contact-form-heading h2,
html.dark-mode .cd-why-contact-content h3,
html.dark-mode .cd-visit-heading h3,
html.dark-mode .cd-contact-faq-header h3,
html.dark-mode .cd-contact-info-card h3,
html.dark-mode .cd-contact-map-details h3,
html.dark-mode .cd-why-contact-item h4,
html.dark-mode .cd-visit-card h4,
html.dark-mode .cd-contact-faq-question span {
    color: #f5f8fb !important;
}

/* Paragraphs & Subtexts */
html.dark-mode .cd-contact-section-heading p,
html.dark-mode .cd-contact-form-heading p,
html.dark-mode .cd-why-contact-description,
html.dark-mode .cd-why-contact-item p,
html.dark-mode .cd-visit-heading p,
html.dark-mode .cd-visit-card p,
html.dark-mode .cd-contact-faq-header p,
html.dark-mode .cd-contact-faq-answer p,
html.dark-mode .cd-contact-info-card p,
html.dark-mode .cd-contact-info-card small,
html.dark-mode .cd-contact-map-details p {
    color: #c5d1dc !important;
}

/* Eyebrows & Accents */
html.dark-mode .cd-contact-eyebrow,
html.dark-mode .cd-why-contact-eyebrow,
html.dark-mode .cd-visit-eyebrow,
html.dark-mode .cd-contact-faq-eyebrow,
html.dark-mode .cd-contact-map-label {
    color: #9bcaf0 !important;
}

/* Cards & Information Backgrounds */
html.dark-mode .cd-contact-info-card,
html.dark-mode .cd-contact-location-card,
html.dark-mode .cd-contact-form-card,
html.dark-mode .cd-visit-card,
html.dark-mode .cd-contact-faq-item {
    background-color: #17232e !important;
    border-color: #334656 !important;
    color: #edf3f8 !important;
}

/* Form Inputs, Select & Textarea */
html.dark-mode .cd-contact-field label {
    color: #d0d9e2 !important;
}

html.dark-mode .cd-contact-input-wrap input,
html.dark-mode .cd-contact-input-wrap select,
html.dark-mode .cd-contact-textarea-wrap textarea {
    background-color: #101820 !important;
    border-color: #334656 !important;
    color: #ffffff !important;
}

html.dark-mode .cd-contact-input-wrap input::placeholder,
html.dark-mode .cd-contact-textarea-wrap textarea::placeholder {
    color: #7a92a8 !important;
}

html.dark-mode .cd-contact-input-wrap i,
html.dark-mode .cd-contact-textarea-wrap i,
html.dark-mode .cd-contact-select-arrow {
    color: #9bcaf0 !important;
}

/* Contact Form Consent Link Colors */
html.dark-mode .cd-contact-consent label {
    color: #c5d1dc !important;
}

html.dark-mode .cd-contact-policy-link {
    color: #9bcaf0 !important;
}

/* FAQ Accordion Item Hover & Borders */
html.dark-mode .cd-contact-faq-question {
    color: #f5f8fb !important;
}

html.dark-mode .cd-contact-faq-question i {
    color: #9bcaf0 !important;
}

html.dark-mode .cd-contact-faq-item {
    border-color: #2b3d4f !important;
}

/* Buttons in Dark Mode */
html.dark-mode .cd-contact-submit,
html.dark-mode .cd-why-contact-button,
html.dark-mode .cd-contact-map-button {
    background-color: #9bcaf0 !important;
    border-color: #9bcaf0 !important;
    color: #071a2b !important;
}

html.dark-mode .cd-contact-submit:hover,
html.dark-mode .cd-why-contact-button:hover,
html.dark-mode .cd-contact-map-button:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #071a2b !important;
}
/* =========================================================
   CRYSTALDRIVE — CONTACT PAGE TARGETED FIXES
   Applied strictly when <html> has .dark-mode
========================================================= */

/* 1. Map Details Box Fix */
html.dark-mode .cd-contact-map-details {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
}

html.dark-mode .cd-contact-map-details h3 {
    color: #f5f8fb !important;
}

html.dark-mode .cd-contact-map-details p {
    color: #c5d1dc !important;
}


/* 2. Contact Form Input Wrappers Fix */
html.dark-mode .cd-contact-input-wrap,
html.dark-mode .cd-contact-textarea-wrap {
    background-color: #101820 !important;
    border: 1px solid #334656 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

html.dark-mode .cd-contact-input-wrap input,
html.dark-mode .cd-contact-input-wrap select,
html.dark-mode .cd-contact-textarea-wrap textarea {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

/* Form Icons & Placeholders */
html.dark-mode .cd-contact-input-wrap i,
html.dark-mode .cd-contact-textarea-wrap i,
html.dark-mode .cd-contact-select-arrow {
    color: #9bcaf0 !important;
}

html.dark-mode .cd-contact-input-wrap input::placeholder,
html.dark-mode .cd-contact-textarea-wrap textarea::placeholder {
    color: #8fa3b8 !important;
}


/* 3. FAQ Accordion Text & Contrast Fix */
html.dark-mode .cd-contact-faq-item {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
}

html.dark-mode .cd-contact-faq-question {
    background-color: transparent !important;
    color: #f5f8fb !important;
}

html.dark-mode .cd-contact-faq-question span {
    color: #f5f8fb !important;
}

html.dark-mode .cd-contact-faq-question i {
    color: #9bcaf0 !important;
}

html.dark-mode .cd-contact-faq-answer p {
    color: #c5d1dc !important;
}
/* =========================================================
   CRYSTALDRIVE — LOGIN PAGE DARK MODE FIXES
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Login Body & Page Background */
html.dark-mode .cd-login-body,
html.dark-mode .cd-login-page {
    background-color: #0b1218 !important;
    color: #edf3f8 !important;
}

/* Main Login Card Container */
html.dark-mode .cd-login-card {
    background-color: #121d27 !important;
    border: 1px solid #283848 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

/* Left Intro Side Text & Visuals */
html.dark-mode .cd-login-intro {
    background-color: #17232e !important;
    border-right: 1px solid #283848 !important;
}

html.dark-mode .cd-intro-copy h1,
html.dark-mode .cd-form-heading h2 {
    color: #f5f8fb !important;
}

html.dark-mode .cd-intro-copy p,
html.dark-mode .cd-form-heading p,
html.dark-mode .cd-login-security {
    color: #c5d1dc !important;
}

html.dark-mode .cd-eyebrow,
html.dark-mode .cd-visual-label {
    color: #9bcaf0 !important;
}

html.dark-mode .cd-trust-note {
    color: #d0d9e2 !important;
}

html.dark-mode .cd-trust-note i {
    color: #9bcaf0 !important;
}

/* Form Input Wrappers & Fields */
html.dark-mode .cd-form-field label {
    color: #d0d9e2 !important;
}

html.dark-mode .cd-input-wrap {
    background-color: #0b1218 !important;
    border: 1px solid #2e4152 !important;
    border-radius: 6px !important;
}

html.dark-mode .cd-input-wrap input {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

html.dark-mode .cd-input-wrap input::placeholder {
    color: #7a92a8 !important;
}

html.dark-mode .cd-input-wrap i,
html.dark-mode .cd-password-toggle {
    color: #9bcaf0 !important;
}

/* Login Options (Remember Me & Forgot Password) */
html.dark-mode .cd-remember span {
    color: #c5d1dc !important;
}

html.dark-mode .cd-login-options a {
    color: #9bcaf0 !important;
}

/* Sign In & Social Buttons */
html.dark-mode .cd-signin-button {
    background-color: #9bcaf0 !important;
    border-color: #9bcaf0 !important;
    color: #071a2b !important;
}

html.dark-mode .cd-signin-button:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #071a2b !important;
}

html.dark-mode .cd-social-divider span,
html.dark-mode .cd-login-divider span {
    background-color: #121d27 !important;
    color: #8fa3b8 !important;
}

html.dark-mode .cd-social-divider,
html.dark-mode .cd-login-divider {
    border-color: #283848 !important;
}

html.dark-mode .cd-social-link {
    background-color: #17232e !important;
    border: 1px solid #2e4152 !important;
    color: #f5f8fb !important;
}

html.dark-mode .cd-social-link:hover {
    background-color: #1f3040 !important;
    border-color: #9bcaf0 !important;
}

/* Create Account Link & Bottom Footer Text */
html.dark-mode .cd-create-account {
    background-color: #17232e !important;
    border: 1px solid #2e4152 !important;
    color: #f5f8fb !important;
}

html.dark-mode .cd-create-account:hover {
    border-color: #9bcaf0 !important;
    color: #9bcaf0 !important;
}

html.dark-mode .cd-login-bottom {
    color: #8fa3b8 !important;
}
/* =========================================================
   CRYSTALDRIVE — LOGIN FORM PANEL COMPLETE DARK FIX
========================================================= */

/* 1. Entire Form Panel Background & Text */
html.dark-mode .cd-login-form-panel {
    background-color: #121d27 !important;
    color: #edf3f8 !important;
}

/* Headings & Texts Visibility */
html.dark-mode .cd-form-heading h2 {
    color: #ffffff !important;
}

html.dark-mode .cd-form-heading p,
html.dark-mode .cd-form-field label,
html.dark-mode .cd-remember span {
    color: #c5d1dc !important;
}

/* Brand logo text inside form panel */
html.dark-mode .cd-form-heading .cd-brand-text strong {
    color: #ffffff !important;
}

html.dark-mode .cd-form-heading .cd-brand-text small {
    color: #9bcaf0 !important;
}

/* 2. Dividers Fix (Remove black inline stripes) */
html.dark-mode .cd-social-divider,
html.dark-mode .cd-login-divider {
    border-color: #283848 !important;
    background: transparent !important;
}

html.dark-mode .cd-social-divider span,
html.dark-mode .cd-login-divider span {
    background-color: #121d27 !important;
    color: #8fa3b8 !important;
    padding: 0 12px !important;
}

/* 3. Input Wrappers Alignment & Contrast */
html.dark-mode .cd-input-wrap {
    background-color: #0b1218 !important;
    border: 1px solid #2e4152 !important;
}

html.dark-mode .cd-input-wrap input {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* 4. Social Links & Create Account Buttons */
html.dark-mode .cd-social-link,
html.dark-mode .cd-create-account {
    background-color: #17232e !important;
    border: 1px solid #2e4152 !important;
    color: #ffffff !important;
}

html.dark-mode .cd-social-link:hover,
html.dark-mode .cd-create-account:hover {
    border-color: #9bcaf0 !important;
    color: #9bcaf0 !important;
}
/* =========================================================
   CRYSTALDRIVE — REGISTER PAGE DARK MODE FIXES
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Register Body & Main Page Background */
html.dark-mode .cd-register-body,
html.dark-mode .cd-register-page {
    background-color: #0b1218 !important;
    color: #edf3f8 !important;
}

/* Register Layout & Panels */
html.dark-mode .cd-register-layout {
    background-color: #121d27 !important;
    border: 1px solid #283848 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .cd-register-left {
    background-color: #17232e !important;
    border-right: 1px solid #283848 !important;
}

html.dark-mode .cd-register-right {
    background-color: #121d27 !important;
}

/* Left Side Copy & Text Elements */
html.dark-mode .cd-register-left-copy h2 {
    color: #f5f8fb !important;
}

html.dark-mode .cd-register-left-copy p,
html.dark-mode .cd-register-form-heading p,
html.dark-mode .cd-register-benefit small {
    color: #c5d1dc !important;
}

html.dark-mode .cd-register-eyebrow,
html.dark-mode .cd-register-welcome {
    color: #9bcaf0 !important;
}

html.dark-mode .cd-register-benefit strong {
    color: #f5f8fb !important;
}

html.dark-mode .cd-register-benefit span {
    color: #9bcaf0 !important;
}

/* Form Headings & Labels */
html.dark-mode .cd-register-form-heading h1 {
    color: #ffffff !important;
}

html.dark-mode .cd-register-field label,
html.dark-mode .cd-register-terms label {
    color: #d0d9e2 !important;
}

html.dark-mode .cd-register-brand-text strong,
html.dark-mode .cd-register-form-brand-text strong {
    color: #ffffff !important;
}

html.dark-mode .cd-register-brand-text small,
html.dark-mode .cd-register-form-brand-text small {
    color: #9bcaf0 !important;
}

/* Form Input Wrappers & Fields */
html.dark-mode .cd-register-input-wrap {
    background-color: #0b1218 !important;
    border: 1px solid #2e4152 !important;
    border-radius: 6px !important;
}

html.dark-mode .cd-register-input-wrap input {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

html.dark-mode .cd-register-input-wrap input::placeholder {
    color: #7a92a8 !important;
}

html.dark-mode .cd-register-input-wrap i,
html.dark-mode .cd-register-password-toggle {
    color: #9bcaf0 !important;
}

/* Terms Link & Sign In Link */
html.dark-mode .cd-register-terms-link,
html.dark-mode .cd-register-signin a {
    color: #9bcaf0 !important;
}

html.dark-mode .cd-register-signin {
    color: #c5d1dc !important;
}

/* Submit Button */
html.dark-mode .cd-register-submit {
    background-color: #9bcaf0 !important;
    border-color: #9bcaf0 !important;
    color: #071a2b !important;
}

html.dark-mode .cd-register-submit:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #071a2b !important;
}

/* Dividers ("OR SIGN UP WITH" & "ALREADY A MEMBER?") */
html.dark-mode .cd-register-divider span,
html.dark-mode .cd-register-signin-divider span {
    border-color: #283848 !important;
}

html.dark-mode .cd-register-divider small,
html.dark-mode .cd-register-signin-divider small {
    color: #8fa3b8 !important;
    background-color: #121d27 !important;
    padding: 0 10px !important;
}

/* Social Signup Links */
html.dark-mode .cd-register-social-link {
    background-color: #17232e !important;
    border: 1px solid #2e4152 !important;
    color: #ffffff !important;
}

html.dark-mode .cd-register-social-link:hover {
    border-color: #9bcaf0 !important;
    color: #9bcaf0 !important;
}

/* Footer Copyright Text */
html.dark-mode .cd-register-footer {
    color: #8fa3b8 !important;
}
/* =========================================================
   CRYSTALDRIVE — REGISTER LEFT BENEFITS ICON FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

html.dark-mode .cd-register-benefit span {
    background-color: #1a2c3d !important;
    border: 1px solid #334a61 !important;
    color: #9bcaf0 !important;
}
/* =========================================================
   CRYSTALDRIVE — SERVICE DETAILS PAGE DARK MODE FIXES
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Main Section Backgrounds & General Text */
html.dark-mode .cd-detail-services,
html.dark-mode .cd-finish-section {
    background-color: #101820 !important;
    color: #edf3f8 !important;
}

/* Headings Visibility */
html.dark-mode .cd-detail-heading h2,
html.dark-mode .cd-detail-card h3,
html.dark-mode .cd-finish-heading h2 {
    color: #f5f8fb !important;
}

/* Paragraphs & Subtexts */
html.dark-mode .cd-detail-heading p,
html.dark-mode .cd-detail-card p,
html.dark-mode .cd-finish-heading p {
    color: #c5d1dc !important;
}

/* Eyebrows & Accents */
html.dark-mode .cd-detail-eyebrow,
html.dark-mode .cd-detail-banner-eyebrow,
html.dark-mode .cd-finish-heading span {
    color: #9bcaf0 !important;
}

/* Service Cards */
html.dark-mode .cd-detail-card {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
    color: #edf3f8 !important;
}

/* Service Card List Items */
html.dark-mode .cd-detail-card ul li {
    color: #d0d9e2 !important;
    border-color: #2b3d4f !important;
}

/* Breadcrumbs */
html.dark-mode .cd-detail-breadcrumb a,
html.dark-mode .cd-detail-breadcrumb span {
    color: #c5d1dc !important;
}

html.dark-mode .cd-detail-breadcrumb i {
    color: #9bcaf0 !important;
}

/* Before / After Comparison Slider Container */
html.dark-mode .cd-finish-comparison {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
}

html.dark-mode .cd-finish-divider {
    background-color: #9bcaf0 !important;
    color: #071a2b !important;
}

html.dark-mode .cd-finish-label {
    background-color: rgba(16, 24, 32, 0.85) !important;
    color: #f5f8fb !important;
    border: 1px solid #334656 !important;
}

/* Banner Button */
html.dark-mode .cd-detail-banner-btn {
    background-color: #9bcaf0 !important;
    border-color: #9bcaf0 !important;
    color: #071a2b !important;
}

html.dark-mode .cd-detail-banner-btn:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #071a2b !important;
}
/* =========================================================
   CRYSTALDRIVE — HEADER BUTTONS DARK MODE FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Header Theme & Direction Toggle Buttons */
html.dark-mode .cd-header-icon,
html.dark-mode #themeToggle,
html.dark-mode #directionToggle {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
    color: #9bcaf0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

html.dark-mode .cd-header-icon i,
html.dark-mode #themeToggle i,
html.dark-mode #directionToggle i {
    color: #9bcaf0 !important;
}

/* Hover effect for Toggle Icons */
html.dark-mode .cd-header-icon:hover,
html.dark-mode #themeToggle:hover,
html.dark-mode #directionToggle:hover {
    background-color: #203140 !important;
    border-color: #9bcaf0 !important;
    color: #ffffff !important;
}

html.dark-mode .cd-header-icon:hover i,
html.dark-mode #themeToggle:hover i,
html.dark-mode #directionToggle:hover i {
    color: #ffffff !important;
}

/* Get Started Header Button */
html.dark-mode .cd-register-link {
    background-color: #9bcaf0 !important;
    border: 1px solid #9bcaf0 !important;
    color: #071a2b !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

html.dark-mode .cd-register-link:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #071a2b !important;
}
/* =========================================================
   CRYSTALDRIVE — HEADER 'GET STARTED' BUTTON RESTORE NORMAL
   Applied strictly when <html> has .dark-mode
========================================================= */

html.dark-mode .cd-register-link {
    background-color: transparent !important;
    border: 1px solid #334656 !important;
    color: #edf3f8 !important;
}

html.dark-mode .cd-register-link:hover {
    background-color: #9bcaf0 !important;
    border-color: #9bcaf0 !important;
    color: #071a2b !important;
}
/* =========================================================
   CRYSTALDRIVE — HOME PAGE TINT FINDER RIGHT SIDE FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Remove solid background from right side container */
html.dark-mode .cd-tint-options {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Headings & Text Contrast Fix */
html.dark-mode .cd-tint-options h3,
html.dark-mode .cd-tint-benefits h4,
html.dark-mode .cd-tint-shade-copy strong {
    color: #f5f8fb !important;
}

html.dark-mode .cd-tint-options p,
html.dark-mode .cd-tint-option-description,
html.dark-mode .cd-tint-preference span {
    color: #c5d1dc !important;
}

/* Eyebrows & Steps */
html.dark-mode .cd-tint-eyebrow,
html.dark-mode .cd-tint-step {
    color: #9bcaf0 !important;
}

/* Tint Shade Selection Buttons */
html.dark-mode .cd-tint-shade {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
    color: #edf3f8 !important;
}

html.dark-mode .cd-tint-shade.active {
    background-color: #1c2e3d !important;
    border-color: #6398c3 !important;
}

html.dark-mode .cd-tint-shade:hover {
    border-color: #9bcaf0 !important;
}

/* Recommendation Box */
html.dark-mode .cd-tint-recommendation {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
    color: #edf3f8 !important;
}

html.dark-mode .cd-tint-recommendation strong {
    color: #f5f8fb !important;
}

html.dark-mode .cd-tint-recommendation p {
    color: #c5d1dc !important;
}
/* =========================================================
   CRYSTALDRIVE — TINT FINDER OPTIONS BG & CHECKBOX FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Tint Shade Buttons Background & Border Fix */
html.dark-mode .cd-tint-shades .cd-tint-shade {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
    color: #edf3f8 !important;
}

html.dark-mode .cd-tint-shades .cd-tint-shade.active {
    background-color: #1c2e3d !important;
    border-color: #6398c3 !important;
}

/* Checkboxes / Swatch / Check Mark background inside options */
html.dark-mode .cd-tint-preference {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    color: #edf3f8 !important;
}

html.dark-mode .cd-tint-custom-check {
    background-color: #101820 !important;
    border: 1px solid #334656 !important;
    color: #9bcaf0 !important;
}
/* =========================================================
   CRYSTALDRIVE — HOME 'WHY CHOOSE US' ICONS DARK MODE FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

html.dark-mode .cd-benefit-card .cd-benefit-icon {
    background-color: #1a2c3d !important;
    border: 1px solid #334a61 !important;
    border-radius: 8px !important;
}

html.dark-mode .cd-benefit-card .cd-benefit-icon i {
    color: #9bcaf0 !important;
}
/* =========================================================
   CRYSTALDRIVE — 'THE CRYSTALDRIVE DIFFERENCE' HEADINGS FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

html.dark-mode .cd-why-heading h2,
html.dark-mode .cd-transformation-heading h2 {
    color: #f5f8fb !important;
}

html.dark-mode .cd-why-heading p,
html.dark-mode .cd-transformation-heading p {
    color: #c5d1dc !important;
}

html.dark-mode .cd-transformation-label {
    color: #9bcaf0 !important;
}
/* =========================================================
   CRYSTALDRIVE — TRANSFORMATION SHOWCASE DARK FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Main Showcase Card Background */
html.dark-mode .cd-showcase-content {
    background-color: #121d27 !important;
    border: 1px solid #283848 !important;
}

/* 1. Remove background from Right Side Content Info Box */
html.dark-mode .cd-showcase-info {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Headings & Text Visibility Fix */
html.dark-mode .cd-showcase-info h3 {
    color: #f5f8fb !important;
}

html.dark-mode .cd-showcase-info p {
    color: #c5d1dc !important;
}

html.dark-mode .cd-showcase-number {
    color: #9bcaf0 !important;
}

/* 2. Top Showcase Tabs Styling Fix */
html.dark-mode .cd-showcase-tab {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
    color: #c5d1dc !important;
}

html.dark-mode .cd-showcase-tab.active {
    background-color: #9bcaf0 !important;
    border-color: #9bcaf0 !important;
    color: #071a2b !important;
    font-weight: 600 !important;
}

html.dark-mode .cd-showcase-tab:hover:not(.active) {
    border-color: #9bcaf0 !important;
    color: #ffffff !important;
}

/* Bottom CTA Link Fix */
html.dark-mode .cd-showcase-link {
    background-color: #17232e !important;
    border: 1px solid #334656 !important;
    color: #9bcaf0 !important;
}

html.dark-mode .cd-showcase-link:hover {
    background-color: #9bcaf0 !important;
    border-color: #9bcaf0 !important;
    color: #071a2b !important;
}
/* =========================================================
   CRYSTALDRIVE — TRANSFORMATION SHOWCASE RIGHT PADDING FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

html.dark-mode .cd-showcase-info {
    padding: 30px !important;
}
/* =========================================================
   CRYSTALDRIVE — HOME 2 TINT TECH LIST FULL OVERRIDE
   Applied strictly when <html> has .dark-mode
========================================================= */

/* OPTION A: Background-ஐ முற்றிலும் அகற்றி Clean Layout + Padding கொடுப்பதற்கு */
html.dark-mode .cd2-tech-content .cd2-tech-list,
html.dark-mode .cd2-tech-content .cd2-tech-item,
html.dark-mode div.cd2-tech-item,
html.dark-mode .cd2-tech-list * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


html.dark-mode .cd2-tech-item {
    border: none !important;
    border-bottom: 1px solid #283848 !important;
    padding: 16px 8px !important;
    margin-bottom: 12px !important;
}

/* Headings & Text Clarity */
html.dark-mode .cd2-tech-item h4 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

html.dark-mode .cd2-tech-item p {
    color: #c5d1dc !important;
}

html.dark-mode .cd2-tech-number {
    color: #9bcaf0 !important;
    font-weight: 700 !important;
}
/* =========================================================
   CRYSTALDRIVE — HOME 2 BOTH SECTIONS BACKGROUND REMOVAL (ULTRA FIX)
   Applied strictly when <html> has .dark-mode
========================================================= */

/* 1. Technology Section (Section 01) Background Removal */
html.dark-mode .cd2-technology .cd2-tech-content .cd2-tech-list,
html.dark-mode .cd2-technology .cd2-tech-list,
html.dark-mode .cd2-technology .cd2-tech-item,
html.dark-mode .cd2-tech-item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 2. Film Technology Section (Section 02) Background Removal */
html.dark-mode .cd2-film-quality .cd2-quality-features,
html.dark-mode .cd2-film-quality .cd2-quality-feature,
html.dark-mode .cd2-quality-features,
html.dark-mode .cd2-quality-feature {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 3. Clean Borders & Spacing for both lists */
html.dark-mode .cd2-tech-item,
html.dark-mode .cd2-quality-feature {
    border: none !important;
    border-bottom: 1px solid #283848 !important;
    padding: 18px 8px !important;
    margin-bottom: 8px !important;
}

/* 4. Icon Circle styling fix for Film Technology */
html.dark-mode .cd2-quality-icon {
    background-color: #1a2c3d !important;
    border: 1px solid #334a61 !important;
}

html.dark-mode .cd2-quality-icon i {
    color: #9bcaf0 !important;
}

/* 5. Text contrast & colors */
html.dark-mode .cd2-tech-item h4,
html.dark-mode .cd2-quality-feature-content h4 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

html.dark-mode .cd2-tech-item p,
html.dark-mode .cd2-quality-feature-content p,
html.dark-mode .cd2-quality-footnote {
    color: #c5d1dc !important;
}

html.dark-mode .cd2-tech-number,
html.dark-mode .cd2-quality-number,
html.dark-mode .cd2-quality-arrow {
    color: #9bcaf0 !important;
}
/* =========================================================
   CRYSTALDRIVE — FOOTNOTE PADDING & SPACING FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

html.dark-mode .cd2-quality-footnote {
    margin-top: 24px !important;
    padding: 12px 16px !important;
    background-color: #17232e !important;
    border: 1px solid #283848 !important;
    border-radius: 6px !important;
    color: #c5d1dc !important;
}
/* =========================================================
   CRYSTALDRIVE — WORKSHOP GALLERY CAPTION PADDING FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Gallery Overlay Caption Box Padding & Backdrop */
html.dark-mode .cd2-gallery figcaption {
    padding: 16px 20px !important;
    background-color: rgba(16, 24, 32, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Caption Numbers / Eyebrow */
html.dark-mode .cd2-gallery figcaption span {
    color: #9bcaf0 !important;
    display: block !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.5px !important;
}

/* Caption Headings */
html.dark-mode .cd2-gallery figcaption strong {
    color: #ffffff !important;
    font-size: 1.05rem !important;
}
/* =========================================================
   CRYSTALDRIVE — ABOUT PAGE HIGHLIGHT BOXES PADDING FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

html.dark-mode .cd-vm-highlight {
    padding: 12px 18px !important;
    margin-top: 16px !important;
    background-color: #17232e !important;
    border: 1px solid #283848 !important;
    border-radius: 6px !important;
    color: #9bcaf0 !important;
    font-weight: 600 !important;
    display: inline-block !important;
}
/* =========================================================
   CRYSTALDRIVE — SERVICES HERO BUTTON DARK MODE FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

html.dark-mode .ws-hero-content .ws-btn-primary,
html.dark-mode .ws-btn.ws-btn-primary {
    background-color: #9bcaf0 !important;
    color: #071a2b !important;
    border: 1px solid #9bcaf0 !important;
    font-weight: 600 !important;
}

html.dark-mode .ws-hero-content .ws-btn-primary:hover,
html.dark-mode .ws-btn.ws-btn-primary:hover {
    background-color: #7ab3e3 !important;
    border-color: #7ab3e3 !important;
    color: #071a2b !important;
}
/* =========================================================
   CRYSTALDRIVE — SERVICES CARING FOR TINT BG REMOVAL
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Force remove background from right side container and items */
html.dark-mode .cd-care-premium-list,
html.dark-mode .cd-care-premium-item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Add clean bottom border for each step item */
html.dark-mode .cd-care-premium-item {
    border-bottom: 1px solid #283848 !important;
    padding: 20px 8px !important;
    margin-bottom: 10px !important;
}

/* Text and Icon styling for clarity */
html.dark-mode .cd-care-premium-item h3 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

html.dark-mode .cd-care-premium-item p {
    color: #c5d1dc !important;
}

html.dark-mode .cd-care-premium-number,
html.dark-mode .cd-care-premium-item i {
    color: #9bcaf0 !important;
}
/* =========================================================
   CRYSTALDRIVE — SERVICE DETAILS PAGE TEXT & TICKS FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

/* 1. Fix Heading: "Every Service, Carefully Explained" */
html.dark-mode .cd-detail-heading h2,
html.dark-mode .cd-detail-heading h2 span {
    color: #f5f8fb !important;
}

/* 2. Fix Description Text under heading */
html.dark-mode .cd-detail-heading p {
    color: #c5d1dc !important;
}

/* 3. Fix List Ticks (::before) inside service cards */
html.dark-mode .cd-detail-card ul li::before {
    color: #9bcaf0 !important;
}
/* =========================================================
   CRYSTALDRIVE — SERVICE DETAILS CARD NUMBER FIX
   Applied strictly when <html> has .dark-mode
========================================================= */

/* Fix Card Number and Category Color */
html.dark-mode .cd-detail-card .cd-detail-number {
    color: #9bcaf0 !important;
}