/* =========================================================
   DARK SERVICES PAGE
   File: static/css/dark-mode/services-dark.css
   ========================================================= */

/* =========================================================
   PAGE
   بک‌گراند اصلی از dark-base.css و body می‌آید
   اینجا نباید دوباره بک‌گراند جدا تعریف شود
   ========================================================= */

[data-theme="dark"] .services-page {
    background: transparent;
    color: var(--dark-text);
}

[data-theme="dark"] .services-page section {
    background: transparent;
}

[data-theme="dark"] .services-hero {
    background: transparent;
}

[data-theme="dark"] .services-hero-banner {
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.34),
        0 12px 32px rgba(86, 182, 198, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    filter: saturate(0.98) contrast(1.02);
}

[data-theme="dark"] .section-title h2 {
    color: var(--dark-text);
}

[data-theme="dark"] .section-title p {
    color: var(--dark-muted);
}

/* =========================================================
   SERVICE CARDS
   ========================================================= */

[data-theme="dark"] .service-card {
    color: var(--dark-text);
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--service-rgb), 0.22) 0%,
            rgba(var(--service-rgb), 0.13) 26%,
            rgba(var(--service-rgb), 0.055) 52%,
            transparent 74%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.030)
        );
    border-color: rgba(var(--service-rgb), 0.30);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.28),
        0 12px 34px rgba(var(--service-rgb), 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
}

[data-theme="dark"] .service-card::before {
    background: rgba(var(--service-rgb), 0.12);
}

[data-theme="dark"] .service-card::after {
    background: rgba(var(--service-rgb), 0.12);
}

[data-theme="dark"] .service-card:hover {
    border-color: rgba(var(--service-rgb), 0.52);
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--service-rgb), 0.28) 0%,
            rgba(var(--service-rgb), 0.16) 28%,
            rgba(var(--service-rgb), 0.075) 56%,
            transparent 76%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.095),
            rgba(255, 255, 255, 0.040)
        );
    box-shadow:
        0 32px 82px rgba(0, 0, 0, 0.36),
        0 18px 48px rgba(var(--service-rgb), 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* =========================================================
   CARD ICON
   ========================================================= */

[data-theme="dark"] .service-card-icon {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.030)
        );
    border-color: rgba(var(--service-rgb), 0.34);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.24),
        inset 0 0 0 8px rgba(var(--service-rgb), 0.075);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

[data-theme="dark"] .service-card-icon svg {
    stroke: var(--service-color);
}

[data-theme="dark"] .service-card:hover .service-card-icon {
    background: var(--service-color);
    border-color: var(--service-color);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.30),
        0 12px 34px rgba(var(--service-rgb), 0.18);
}

[data-theme="dark"] .service-card:hover .service-card-icon svg {
    stroke: #ffffff;
}

/* =========================================================
   CARD TEXT
   ========================================================= */

[data-theme="dark"] .service-number {
    color: rgba(var(--service-rgb), 0.22);
}

[data-theme="dark"] .service-card h3 {
    color: var(--dark-text);
}

[data-theme="dark"] .service-card p {
    color: var(--dark-muted);
}

[data-theme="dark"] .service-fit {
    background:
        linear-gradient(
            135deg,
            rgba(var(--service-rgb), 0.13),
            rgba(255, 255, 255, 0.035)
        );
    border-color: rgba(var(--service-rgb), 0.28);
    color: #dbeafe;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 12px 28px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .service-card li {
    color: #cbd5e1;
}

[data-theme="dark"] .service-card li::before {
    background: var(--service-color);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(var(--service-rgb), 0.18);
}

/* =========================================================
   ACTION BUTTON
   ========================================================= */

[data-theme="dark"] .card-action {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.080),
            rgba(255, 255, 255, 0.035)
        );
    border-color: rgba(var(--service-rgb), 0.34);
    color: #f8fafc;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.22),
        0 8px 24px rgba(var(--service-rgb), 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

[data-theme="dark"] .service-card:hover .card-action {
    background: var(--service-color);
    color: #ffffff;
    border-color: var(--service-color);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        0 12px 30px rgba(var(--service-rgb), 0.18);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
    [data-theme="dark"] .services-page {
        background: transparent;
    }

    [data-theme="dark"] .services-hero-banner {
        box-shadow:
            0 20px 48px rgba(0, 0, 0, 0.28),
            0 10px 24px rgba(86, 182, 198, 0.07),
            0 0 0 1px rgba(255, 255, 255, 0.055);
    }

    [data-theme="dark"] .service-card {
        box-shadow:
            0 20px 52px rgba(0, 0, 0, 0.24),
            0 10px 28px rgba(var(--service-rgb), 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
}