/* ====================================================================
   TOURAK DIGITAL — UNIFIED DESIGN SYSTEM (Claude Design 2026-05)
   Loaded globally via includes/header.php for ALL pages.
   Forces consistency on legacy services/*.php that have white-on-white bugs.
   ==================================================================== */

:root {
    --tk-primary: #6366f1;
    --tk-secondary: #8b5cf6;
    --tk-accent: #ec4899;
    --tk-accent-2: #f59e0b;
    --tk-success: #10b981;
    --tk-text: #1a1a2e;
    --tk-text-muted: #4a4a5a;
    --tk-text-light: #6b7280;
    --tk-bg-card: #ffffff;
    --tk-bg-soft: #f8f9fc;
    --tk-bg-section: #ffffff;
    --tk-bg-section-alt: #f8f9fc;
    --tk-border: rgba(99,102,241,0.12);
    --tk-shadow: 0 10px 30px rgba(99,102,241,0.08);
    --tk-radius: 16px;
    --tk-ease: cubic-bezier(.4,0,.2,1);
}

/* === FORCE READABLE TEXT IN LIGHT THEME === */
[data-theme="light"] body { color: var(--tk-text) !important; background: var(--tk-bg-soft) !important; }
[data-theme="light"] .section,
[data-theme="light"] section { color: var(--tk-text); background: var(--tk-bg-section); }
[data-theme="light"] .section-alt { background: var(--tk-bg-section-alt) !important; }
[data-theme="light"] .section h1,
[data-theme="light"] .section h2,
[data-theme="light"] .section h3,
[data-theme="light"] .section h4,
[data-theme="light"] section h2,
[data-theme="light"] section h3,
[data-theme="light"] section h4 { color: var(--tk-text) !important; }
[data-theme="light"] .section p,
[data-theme="light"] section p { color: var(--tk-text-muted) !important; }
[data-theme="light"] .section li,
[data-theme="light"] section li { color: var(--tk-text-muted) !important; }

/* FIX: white text rgba(255,255,255,...) on light theme - force dark */
[data-theme="light"] *[style*="color: rgba(255, 255, 255"],
[data-theme="light"] *[style*="color:rgba(255,255,255"],
[data-theme="light"] *[style*="color: white"],
[data-theme="light"] *[style*="color:white"],
[data-theme="light"] *[style*="color: #fff"],
[data-theme="light"] *[style*="color:#fff"] { color: var(--tk-text) !important; }

/* === PRICING CARDS — UNIFIED === */
[data-theme="light"] .pricing-card,
[data-theme="light"] .price-card {
    background: var(--tk-bg-card) !important;
    color: var(--tk-text) !important;
    border: 1px solid var(--tk-border) !important;
    box-shadow: var(--tk-shadow) !important;
    border-radius: var(--tk-radius) !important;
    padding: 32px 28px;
    transition: transform .35s var(--tk-ease), box-shadow .35s var(--tk-ease);
}
[data-theme="light"] .pricing-card:hover,
[data-theme="light"] .price-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(99,102,241,0.18) !important; }
[data-theme="light"] .pricing-card h3,
[data-theme="light"] .pricing-card h4,
[data-theme="light"] .price-card h3 { color: var(--tk-text) !important; margin: 0 0 12px; font-weight: 700; }
[data-theme="light"] .pricing-card .price,
[data-theme="light"] .pricing-card .price-amount,
[data-theme="light"] .price-card .price {
    font-size: 2.4rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--tk-primary), var(--tk-accent)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin: 14px 0 18px !important;
}
[data-theme="light"] .pricing-card ul,
[data-theme="light"] .price-card ul { list-style: none !important; padding: 0 !important; margin: 24px 0 !important; }
[data-theme="light"] .pricing-card li,
[data-theme="light"] .price-card li { color: var(--tk-text-muted) !important; padding: 8px 0 8px 28px !important; position: relative; border-bottom: 1px solid rgba(99,102,241,0.06); }
[data-theme="light"] .pricing-card li::before,
[data-theme="light"] .price-card li::before { content: '✓' !important; color: var(--tk-success); position: absolute; left: 0; top: 8px; font-weight: 700; }

/* === BUTTONS UNIFIED === */
[data-theme="light"] .btn,
[data-theme="light"] .cta-btn,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: transform .25s var(--tk-ease), box-shadow .25s var(--tk-ease) !important;
    background: linear-gradient(135deg, var(--tk-primary), var(--tk-accent)) !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(99,102,241,0.35) !important;
    border: 0 !important;
}
[data-theme="light"] .btn:hover,
[data-theme="light"] .cta-btn:hover,
[data-theme="light"] .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(236,72,153,0.4) !important; }
[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-secondary {
    background: transparent !important;
    color: var(--tk-text) !important;
    border: 1.5px solid var(--tk-border) !important;
    box-shadow: none !important;
}

/* === FAQ CARDS === */
[data-theme="light"] .faq-item,
[data-theme="light"] .accordion-item {
    background: var(--tk-bg-card) !important;
    border: 1px solid var(--tk-border) !important;
    border-radius: 14px !important;
    margin-bottom: 14px;
    overflow: hidden;
    color: var(--tk-text) !important;
}
[data-theme="light"] .faq-item h3,
[data-theme="light"] .faq-item h4,
[data-theme="light"] .faq-question { color: var(--tk-text) !important; padding: 20px 24px; cursor: pointer; font-weight: 600; }
[data-theme="light"] .faq-item p,
[data-theme="light"] .faq-answer { color: var(--tk-text-muted) !important; padding: 0 24px 22px; line-height: 1.8; }

/* === FEATURE CARDS / SERVICE CARDS === */
[data-theme="light"] .feature-card,
[data-theme="light"] .service-card,
[data-theme="light"] .feature-item {
    background: var(--tk-bg-card) !important;
    border: 1px solid var(--tk-border) !important;
    border-radius: var(--tk-radius) !important;
    padding: 32px 28px !important;
    box-shadow: var(--tk-shadow) !important;
    color: var(--tk-text) !important;
    transition: transform .35s var(--tk-ease), box-shadow .35s var(--tk-ease);
}
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .service-card:hover,
[data-theme="light"] .feature-item:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(99,102,241,0.15) !important; }
[data-theme="light"] .feature-card h3,
[data-theme="light"] .feature-card h4,
[data-theme="light"] .service-card h3,
[data-theme="light"] .service-card h4,
[data-theme="light"] .feature-item h3,
[data-theme="light"] .feature-item h4 { color: var(--tk-text) !important; font-weight: 700; margin: 12px 0 10px; }
[data-theme="light"] .feature-card p,
[data-theme="light"] .service-card p,
[data-theme="light"] .feature-item p { color: var(--tk-text-muted) !important; line-height: 1.7; }
[data-theme="light"] .feature-card .icon,
[data-theme="light"] .service-card .icon,
[data-theme="light"] .feature-item .icon { font-size: 2.2rem; color: var(--tk-primary); margin-bottom: 14px; }

/* === BREADCRUMB UNIFIED === */
[data-theme="light"] .breadcrumb { background: transparent !important; padding: 12px 0 !important; }
[data-theme="light"] .breadcrumb a,
[data-theme="light"] .tk-bc-item a { color: var(--tk-primary) !important; text-decoration: none; }
[data-theme="light"] .breadcrumb a:hover,
[data-theme="light"] .tk-bc-item a:hover { color: var(--tk-accent) !important; }
[data-theme="light"] .breadcrumb span,
[data-theme="light"] .tk-bc-item.active span { color: var(--tk-text-light) !important; }

/* === HERO UNIVERSAL FALLBACK === */
[data-theme="light"] .hero,
[data-theme="light"] [class*="hero-"] { background: linear-gradient(135deg, var(--tk-bg-soft) 0%, rgba(99,102,241,0.04) 100%) !important; padding: 80px 0 60px; }
[data-theme="light"] .hero h1,
[data-theme="light"] [class*="hero-"] h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; color: var(--tk-text) !important; line-height: 1.15; }
[data-theme="light"] .hero .subtitle,
[data-theme="light"] [class*="hero-"] .subtitle,
[data-theme="light"] .hero p,
[data-theme="light"] [class*="hero-"] p { color: var(--tk-text-muted) !important; font-size: 1.15rem; line-height: 1.75; }

/* Gradient text utility (force visible) */
[data-theme="light"] .gradient-text,
[data-theme="light"] .text-gradient {
    background: linear-gradient(135deg, var(--tk-primary), var(--tk-accent), var(--tk-accent-2)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* === SECTIONS PADDING UNIFIED === */
section, .section { padding: 70px 0; }
section h2, .section h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; margin: 0 0 18px; letter-spacing: -0.01em; }
section h3, .section h3 { font-size: 1.3rem; font-weight: 700; margin: 32px 0 12px; }

/* === BACKGROUND GRADIENT HEADINGS — fix dark backgrounds on light theme === */
[data-theme="light"] section[style*="background: #1a1a2e"],
[data-theme="light"] section[style*="background:#1a1a2e"],
[data-theme="light"] section[style*="background-color: #1a1a2e"] { color: #fff !important; }
[data-theme="light"] section[style*="background: #1a1a2e"] h2,
[data-theme="light"] section[style*="background: #1a1a2e"] h3,
[data-theme="light"] section[style*="background: #1a1a2e"] p { color: #fff !important; }

/* === STATS / NUMBERS === */
[data-theme="light"] .stat,
[data-theme="light"] .stat-box,
[data-theme="light"] [class*="stat-"] { color: var(--tk-text); }
[data-theme="light"] .stat-number,
[data-theme="light"] .stat .number,
[data-theme="light"] .stat-box .number {
    font-size: 2.5rem; font-weight: 900;
    background: linear-gradient(135deg, var(--tk-primary), var(--tk-accent)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* === FOOTER LINKS color === */
[data-theme="light"] footer a { color: var(--tk-primary); }
[data-theme="light"] footer a:hover { color: var(--tk-accent); }

/* === ULTRA-AGGRESSIVE OVERRIDE FOR LEGACY DARK-DESIGNED CARDS === */
html[data-theme="light"] body .type-card,
html[data-theme="light"] body .advantage-card,
html[data-theme="light"] body .related-service-card,
html[data-theme="light"] body .faq-item {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(99,102,241,0.15) !important;
    box-shadow: 0 10px 30px rgba(99,102,241,0.08) !important;
    color: #1a1a2e !important;
}
html[data-theme="light"] body .type-card *:not(i):not(.type-price):not(.badge):not(.card-badge):not(.btn):not(.btn *),
html[data-theme="light"] body .advantage-card *:not(i):not(.btn):not(.btn *),
html[data-theme="light"] body .related-service-card *:not(i):not(.btn):not(.btn *) {
    color: #4a4a5a !important;
}
html[data-theme="light"] body .type-card h3,
html[data-theme="light"] body .type-card h4,
html[data-theme="light"] body .advantage-card h3,
html[data-theme="light"] body .advantage-card h4,
html[data-theme="light"] body .related-service-card h3,
html[data-theme="light"] body .related-service-card h4 { color: #1a1a2e !important; font-weight: 700 !important; }
html[data-theme="light"] body .type-card .type-price,
html[data-theme="light"] body .type-card span.type-price {
    color: transparent !important;
    background: linear-gradient(135deg, #6366f1, #ec4899) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
}
html[data-theme="light"] body .type-card.featured {
    border: 2px solid #6366f1 !important;
    background: linear-gradient(180deg, #ffffff 0%, rgba(99,102,241,0.04) 100%) !important;
}
html[data-theme="light"] body .type-features li,
html[data-theme="light"] body .type-card ul li {
    color: #4a4a5a !important;
    padding: 8px 0 8px 26px !important;
    position: relative;
    border-bottom: 1px solid rgba(99,102,241,0.08);
}
html[data-theme="light"] body .type-features li i.fa-check,
html[data-theme="light"] body .type-card li i.fa-check { color: #10b981 !important; position: absolute; left: 4px; top: 12px; }

/* CTA section legacy */
html[data-theme="light"] body .cta-section,
html[data-theme="light"] body .cta-contact {
    background: linear-gradient(135deg, #f8f9fc 0%, rgba(99,102,241,0.06) 100%) !important;
}
html[data-theme="light"] body .cta-section *,
html[data-theme="light"] body .cta-contact *:not(.btn):not(.btn *) { color: #1a1a2e !important; }
html[data-theme="light"] body .cta-section p { color: #4a4a5a !important; }

/* FAQ legacy */
html[data-theme="light"] body .faq-question { color: #1a1a2e !important; }
html[data-theme="light"] body .faq-answer,
html[data-theme="light"] body .faq-answer * { color: #4a4a5a !important; }

/* Service intro/hero in light */
html[data-theme="light"] body .service-hero,
html[data-theme="light"] body .service-intro { color: #1a1a2e !important; }
html[data-theme="light"] body .service-hero p,
html[data-theme="light"] body .service-intro p { color: #4a4a5a !important; }

/* === LEGACY SERVICES PAGES SPECIFIC CLASSES === */
[data-theme="light"] .type-card,
[data-theme="light"] .advantage-card,
[data-theme="light"] .related-service-card,
[data-theme="light"] .card,
[data-theme="light"] .service-card {
    background: #ffffff !important;
    color: var(--tk-text) !important;
    border: 1px solid var(--tk-border) !important;
    border-radius: var(--tk-radius) !important;
    box-shadow: var(--tk-shadow) !important;
    padding: 32px 28px !important;
    transition: transform .35s var(--tk-ease), box-shadow .35s var(--tk-ease) !important;
}
[data-theme="light"] .type-card:hover,
[data-theme="light"] .advantage-card:hover,
[data-theme="light"] .related-service-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 25px 50px rgba(99,102,241,0.18) !important;
}
[data-theme="light"] .type-card.featured {
    border: 2px solid var(--tk-primary) !important;
    background: linear-gradient(135deg, #fff 0%, rgba(99,102,241,0.04) 100%) !important;
    transform: scale(1.03);
}
[data-theme="light"] .type-card h3,
[data-theme="light"] .type-card h4,
[data-theme="light"] .advantage-card h3,
[data-theme="light"] .advantage-card h4,
[data-theme="light"] .related-service-card h3,
[data-theme="light"] .related-service-card h4 { color: var(--tk-text) !important; font-weight: 700 !important; margin: 14px 0 12px !important; }
[data-theme="light"] .type-card p,
[data-theme="light"] .type-card span:not(.type-price):not(.badge),
[data-theme="light"] .advantage-card p,
[data-theme="light"] .related-service-card p { color: var(--tk-text-muted) !important; line-height: 1.7 !important; }
[data-theme="light"] .type-price {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--tk-primary), var(--tk-accent)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
    margin: 14px 0 !important;
}
[data-theme="light"] .type-features,
[data-theme="light"] .type-card ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    text-align: left !important;
}
[data-theme="light"] .type-features li,
[data-theme="light"] .type-card li {
    color: var(--tk-text-muted) !important;
    padding: 8px 0 8px 28px !important;
    position: relative;
    border-bottom: 1px solid rgba(99,102,241,0.06);
    font-size: .95rem;
}
[data-theme="light"] .type-features li::before,
[data-theme="light"] .type-card li::before {
    content: '✓' !important;
    color: var(--tk-success) !important;
    position: absolute;
    left: 0;
    top: 8px;
    font-weight: 700 !important;
}
[data-theme="light"] .type-features li i,
[data-theme="light"] .type-card li i { color: var(--tk-success) !important; }
[data-theme="light"] .type-icon,
[data-theme="light"] .advantage-icon { font-size: 2.5rem !important; color: var(--tk-primary) !important; margin-bottom: 18px !important; display: inline-block; }

[data-theme="light"] .badge,
[data-theme="light"] .service-badge,
[data-theme="light"] .card-badge {
    background: linear-gradient(135deg, var(--tk-primary), var(--tk-accent)) !important;
    color: #fff !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase;
    display: inline-block;
}

/* CTA section */
[data-theme="light"] .cta-section,
[data-theme="light"] .cta-contact {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.04)) !important;
    color: var(--tk-text) !important;
}
[data-theme="light"] .cta-section h2,
[data-theme="light"] .cta-section h3,
[data-theme="light"] .cta-content h2,
[data-theme="light"] .cta-content h3 { color: var(--tk-text) !important; }
[data-theme="light"] .cta-section p,
[data-theme="light"] .cta-content p { color: var(--tk-text-muted) !important; }

/* FAQ items legacy */
[data-theme="light"] .faq-list .faq-item,
[data-theme="light"] .faq-section .faq-item {
    background: #ffffff !important;
    border: 1px solid var(--tk-border) !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    overflow: hidden;
    color: var(--tk-text) !important;
}
[data-theme="light"] .faq-question { color: var(--tk-text) !important; padding: 20px 24px !important; font-weight: 600 !important; cursor: pointer; }
[data-theme="light"] .faq-answer,
[data-theme="light"] .faq-answer p { color: var(--tk-text-muted) !important; padding: 0 24px 22px !important; line-height: 1.8 !important; }

/* Service intro / sections */
[data-theme="light"] .service-intro,
[data-theme="light"] .service-hero,
[data-theme="light"] .service-hero-content {
    color: var(--tk-text) !important;
}
[data-theme="light"] .service-title,
[data-theme="light"] .service-hero h1 { color: var(--tk-text) !important; }
[data-theme="light"] .service-intro p,
[data-theme="light"] .service-hero p { color: var(--tk-text-muted) !important; }

/* GLOBAL SAFETY NET — kill rgba(255,255,255,...) text on light theme */
[data-theme="light"] *:not(.btn):not(.btn-primary):not(.cta-btn):not(.badge):not(.service-badge):not(.card-badge):not(footer *):not(.tk-bc-item *):not(.tk-btn):not(.tk-btn *):not(header *):not(.gradient-text):not(.text-gradient) {
    color: inherit;
}
[data-theme="light"] .types-grid,
[data-theme="light"] .advantages-grid,
[data-theme="light"] .related-services-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    section, .section { padding: 50px 0; }
    [data-theme="light"] .pricing-card,
    [data-theme="light"] .feature-card { padding: 24px 20px; }
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}