/* =========================================================
   REQUEST FORM DARK MODE
   File: static/css/dark-mode/request-form-dark.css
   ========================================================= */


/* ------------------------------
   Page
------------------------------ */

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

[data-theme="dark"] .top-banner {
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    filter: saturate(0.98) contrast(1.02);
}


/* ------------------------------
   Error
------------------------------ */

[data-theme="dark"] .error-card {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(248, 113, 113, 0.28);
    color: #fecaca;
}


/* ------------------------------
   Service selection cards
------------------------------ */

[data-theme="dark"] .service-box {
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--accent-rgb), 0.20) 0%,
            rgba(var(--accent-rgb), 0.11) 24%,
            transparent 62%
        ),
        linear-gradient(145deg, rgba(17, 24, 39, 0.88) 0%, rgba(15, 23, 42, 0.76) 58%, rgba(2, 6, 23, 0.82) 100%);
    border-color: rgba(var(--accent-rgb), 0.30);
    box-shadow:
        0 26px 66px rgba(0, 0, 0, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

[data-theme="dark"] .service-box:hover {
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--accent-rgb), 0.28) 0%,
            rgba(var(--accent-rgb), 0.16) 28%,
            transparent 68%
        ),
        linear-gradient(145deg, rgba(23, 32, 51, 0.90) 0%, rgba(17, 24, 39, 0.80) 58%, rgba(2, 6, 23, 0.86) 100%);
    border-color: rgba(var(--accent-rgb), 0.52);
    box-shadow:
        0 34px 82px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(var(--accent-rgb), 0.10);
}

[data-theme="dark"] .service-box::before {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.32);
    color: var(--accent);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .service-box:hover::before {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

[data-theme="dark"] .service-box::after {
    color: rgba(255, 255, 255, 0.055);
}

[data-theme="dark"] .service-icon {
    background: rgba(var(--accent-rgb), 0.13);
    border-color: rgba(var(--accent-rgb), 0.32);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

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

[data-theme="dark"] .service-box:hover .service-icon {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 20px 42px rgba(var(--accent-rgb), 0.24);
}

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

[data-theme="dark"] .service-box h3 {
    color: #f8fafc;
}

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


/* ------------------------------
   Form shell
------------------------------ */

[data-theme="dark"] .form-shell {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--form-accent-rgb), 0.16) 0%,
            rgba(var(--form-accent-rgb), 0.09) 22%,
            transparent 48%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--form-accent-rgb), 0.18) 0%,
            rgba(var(--form-accent-rgb), 0.10) 26%,
            transparent 56%
        ),
        linear-gradient(145deg, rgba(17, 24, 39, 0.88) 0%, rgba(15, 23, 42, 0.78) 58%, rgba(2, 6, 23, 0.84) 100%);
    border-color: rgba(var(--form-accent-rgb), 0.30);
    box-shadow:
        0 30px 86px rgba(0, 0, 0, 0.38),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
}

[data-theme="dark"] .form-head {
    border-bottom-color: rgba(var(--form-accent-rgb), 0.25);
}

[data-theme="dark"] .form-badge {
    background: rgba(var(--form-accent-rgb), 0.14);
    color: #dbeafe;
    border-color: rgba(var(--form-accent-rgb), 0.34);
}

[data-theme="dark"] .form-head h1,
[data-theme="dark"] .form-section h2 {
    color: #f8fafc;
}

[data-theme="dark"] .form-head p {
    color: #cbd5e1;
}

[data-theme="dark"] .back-button {
    background: rgba(var(--form-accent-rgb), 0.13);
    color: #dbeafe;
    border-color: rgba(var(--form-accent-rgb), 0.34);
}

[data-theme="dark"] .back-button:hover {
    background: rgb(var(--form-accent-rgb));
    color: #ffffff;
    border-color: rgb(var(--form-accent-rgb));
}


/* ------------------------------
   Progress
------------------------------ */

[data-theme="dark"] .progress-card {
    background: rgba(17, 24, 39, 0.66);
    border-color: rgba(var(--form-accent-rgb), 0.28);
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

[data-theme="dark"] .progress-top span {
    color: #cbd5e1;
}

[data-theme="dark"] .progress-top strong {
    color: #dbeafe;
}

[data-theme="dark"] .progress-track {
    background: rgba(var(--form-accent-rgb), 0.16);
    border-color: rgba(var(--form-accent-rgb), 0.24);
}


/* ------------------------------
   Form fields
------------------------------ */

[data-theme="dark"] .form-group label {
    color: #cbd5e1;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: rgba(2, 6, 23, 0.68);
    border-color: rgba(255, 255, 255, 0.10);
    color: #f8fafc;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #94a3b8;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: rgba(2, 6, 23, 0.88);
    border-color: rgba(var(--form-accent-rgb), 0.58);
    box-shadow: 0 0 0 4px rgba(var(--form-accent-rgb), 0.16);
}

[data-theme="dark"] select {
    background-image:
        linear-gradient(45deg, transparent 50%, #cbd5e1 50%),
        linear-gradient(135deg, #cbd5e1 50%, transparent 50%);
}


/* ------------------------------
   Custom select
------------------------------ */

[data-theme="dark"] .custom-select-trigger {
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--form-accent-rgb), 0.10),
            transparent 55%
        ),
        rgba(2, 6, 23, 0.70);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e2e8f0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .custom-select-trigger:hover,
[data-theme="dark"] .custom-select.is-open .custom-select-trigger,
[data-theme="dark"] .custom-select.has-value .custom-select-trigger {
    border-color: rgba(var(--form-accent-rgb), 0.42);
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(var(--form-accent-rgb), 0.15),
            transparent 58%
        ),
        rgba(2, 6, 23, 0.86);
}

[data-theme="dark"] .custom-select.is-open .custom-select-trigger {
    box-shadow: 0 0 0 4px rgba(var(--form-accent-rgb), 0.16);
}

[data-theme="dark"] .custom-select-arrow {
    background: rgba(var(--form-accent-rgb), 0.14);
    border-color: rgba(var(--form-accent-rgb), 0.34);
    color: #dbeafe;
}

[data-theme="dark"] .custom-select.is-open .custom-select-arrow {
    background: rgb(var(--form-accent-rgb));
    color: #ffffff;
    border-color: rgb(var(--form-accent-rgb));
}

[data-theme="dark"] .custom-select-menu {
    background: rgba(17, 24, 39, 0.96);
    border-color: rgba(var(--form-accent-rgb), 0.30);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.46),
        0 10px 28px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .custom-select-option {
    color: #cbd5e1;
}

[data-theme="dark"] .custom-select-option:hover {
    background: rgba(var(--form-accent-rgb), 0.13);
    color: #ffffff;
}

[data-theme="dark"] .custom-select-option.is-selected {
    background:
        linear-gradient(
            135deg,
            rgba(var(--form-accent-rgb), 0.22),
            rgba(var(--form-accent-rgb), 0.10)
        );
    color: #ffffff;
}


/* ------------------------------
   Checkbox
------------------------------ */

[data-theme="dark"] .checkbox-grid label {
    background: rgba(2, 6, 23, 0.56);
    border-color: rgba(255, 255, 255, 0.10);
    color: #cbd5e1;
}

[data-theme="dark"] .checkbox-grid label:hover {
    border-color: rgba(var(--form-accent-rgb), 0.38);
    background: rgba(var(--form-accent-rgb), 0.10);
}

[data-theme="dark"] .checkbox-grid label:has(input:checked) {
    border-color: rgba(var(--form-accent-rgb), 0.58);
    background: rgba(var(--form-accent-rgb), 0.15);
    color: #ffffff;
}


/* ------------------------------
   Submit
------------------------------ */

[data-theme="dark"] .submit-button {
    background:
        linear-gradient(
            135deg,
            rgb(var(--form-accent-rgb)),
            rgba(var(--form-accent-rgb), 0.72)
        );
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(var(--form-accent-rgb), 0.26);
}

[data-theme="dark"] .submit-button:hover {
    box-shadow: 0 24px 54px rgba(var(--form-accent-rgb), 0.34);
}


/* ------------------------------
   Success Modal
------------------------------ */

[data-theme="dark"] .success-modal-backdrop {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(125, 167, 140, 0.18),
            rgba(2, 6, 23, 0.76) 58%,
            rgba(2, 6, 23, 0.86)
        );
}

[data-theme="dark"] .success-modal-card {
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(125, 167, 140, 0.20) 0%,
            rgba(125, 167, 140, 0.10) 34%,
            transparent 68%
        ),
        linear-gradient(145deg, rgba(17, 24, 39, 0.90) 0%, rgba(15, 23, 42, 0.82) 58%, rgba(2, 6, 23, 0.88) 100%);
    border-color: rgba(125, 167, 140, 0.34);
    box-shadow:
        0 36px 92px rgba(0, 0, 0, 0.52),
        0 18px 45px rgba(125, 167, 140, 0.14);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
}

[data-theme="dark"] .success-modal-card::before,
[data-theme="dark"] .success-modal-card::after {
    background: rgba(125, 167, 140, 0.12);
}

[data-theme="dark"] .success-modal-close {
    background: rgba(125, 167, 140, 0.12);
    color: #b9d7c2;
    border-color: rgba(125, 167, 140, 0.34);
}

[data-theme="dark"] .success-modal-close:hover {
    background: #7DA78C;
    color: #ffffff;
    border-color: #7DA78C;
}

[data-theme="dark"] .success-modal-icon {
    background:
        linear-gradient(135deg, rgba(125, 167, 140, 0.18), rgba(255, 255, 255, 0.06));
    border-color: rgba(125, 167, 140, 0.34);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28),
        inset 0 0 0 8px rgba(125, 167, 140, 0.08);
}

[data-theme="dark"] .success-modal-icon svg {
    stroke: #b9d7c2;
}

[data-theme="dark"] .success-modal-badge {
    background: rgba(125, 167, 140, 0.14);
    border-color: rgba(125, 167, 140, 0.34);
    color: #b9d7c2;
}

[data-theme="dark"] .success-modal-card h2 {
    color: #f8fafc;
}

[data-theme="dark"] .success-modal-card p {
    color: #cbd5e1;
}

[data-theme="dark"] .success-modal-button {
    background: linear-gradient(135deg, #7DA78C, #9fc3aa);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(125, 167, 140, 0.22);
}