/* Page: Damaged Eyes (ترمیم رنگ چشم‌های آسیب‌دیده) - scoped styles */
.page-damaged-wrapper {
    font-family: "Vazirmatn", sans-serif !important;
    background-color: #111621 !important;
    color: #cbd5e1;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
}

:root {
    --primary-color: #1754cf;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #111621;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

.bg-grid-pattern {
    background-image: linear-gradient(to right, #1e293b 1px, transparent 1px),
                      linear-gradient(to bottom, #1e293b 1px, transparent 1px);
    background-size: 40px 40px;
}

.farsi-num {
    font-feature-settings: "ss01";
}

.aperture-icon {
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}

details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

.page-damaged-wrapper .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Before/after case pairs — نتایج زیباجویان */
.page-damaged-wrapper .damaged-ba-case {
    transition: border-color 0.25s ease;
}

@media (hover: hover) {
    .page-damaged-wrapper .damaged-ba-case:hover {
        border-color: rgba(23, 84, 207, 0.45);
    }
}

.page-damaged-wrapper .damaged-ba-pair__divider {
    min-width: 1.75rem;
}

.page-damaged-wrapper .damaged-ba-pair__divider::before,
.page-damaged-wrapper .damaged-ba-pair__divider::after {
    content: "";
    display: block;
    width: 1px;
    flex: 1;
    min-height: 0.75rem;
    background: linear-gradient(to bottom, transparent, rgba(23, 84, 207, 0.45), transparent);
}

.page-damaged-wrapper .damaged-ba-pair__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.page-damaged-wrapper .damaged-hero-media img {
    transition: transform 0.6s ease;
}

@media (hover: hover) {
    .page-damaged-wrapper .damaged-hero-media:hover img {
        transform: scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-damaged-wrapper .damaged-hero-media img {
        transition: none;
    }
}

.page-damaged-wrapper .damaged-cornea-morph {
    isolation: isolate;
}

.page-damaged-wrapper .damaged-cornea-morph__before {
    opacity: 1;
    animation: damaged-cornea-fade-out 5s ease-in-out infinite;
}

.page-damaged-wrapper .damaged-cornea-morph__after {
    opacity: 0;
    animation: damaged-cornea-fade-in 5s ease-in-out infinite;
}

.page-damaged-wrapper .damaged-cornea-morph__label--damaged {
    animation: damaged-cornea-label-damaged 5s ease-in-out infinite;
}

.page-damaged-wrapper .damaged-cornea-morph__label--healthy {
    animation: damaged-cornea-label-healthy 5s ease-in-out infinite;
}

@keyframes damaged-cornea-fade-out {
    0%, 42% { opacity: 1; transform: scale(1); }
    50%, 92% { opacity: 0; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes damaged-cornea-fade-in {
    0%, 42% { opacity: 0; transform: scale(0.98); }
    50%, 92% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.98); }
}

@keyframes damaged-cornea-label-damaged {
    0%, 42% { opacity: 1; }
    50%, 92% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes damaged-cornea-label-healthy {
    0%, 42% { opacity: 0; }
    50%, 92% { opacity: 1; }
    100% { opacity: 0; }
}

@media (hover: hover) {
    .page-damaged-wrapper .damaged-cornea-morph:hover .damaged-cornea-morph__before,
    .page-damaged-wrapper .damaged-cornea-morph:hover .damaged-cornea-morph__after,
    .page-damaged-wrapper .damaged-cornea-morph:hover .damaged-cornea-morph__label--damaged,
    .page-damaged-wrapper .damaged-cornea-morph:hover .damaged-cornea-morph__label--healthy {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-damaged-wrapper .damaged-cornea-morph__before,
    .page-damaged-wrapper .damaged-cornea-morph__after,
    .page-damaged-wrapper .damaged-cornea-morph__label--damaged,
    .page-damaged-wrapper .damaged-cornea-morph__label--healthy {
        animation: none !important;
    }

    .page-damaged-wrapper .damaged-cornea-morph__before {
        opacity: 0 !important;
    }

    .page-damaged-wrapper .damaged-cornea-morph__after {
        opacity: 1 !important;
    }

    .page-damaged-wrapper .damaged-cornea-morph__label--damaged {
        opacity: 0 !important;
    }

    .page-damaged-wrapper .damaged-cornea-morph__label--healthy {
        opacity: 1 !important;
    }
}