@font-face {
    font-family: "Vazirmatn";
    src: url("/assets/fonts/vazirmatn/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("/assets/fonts/vazirmatn/Vazirmatn-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --medical-blue: #2256CF;
    --medical-turquoise: #0D9488;
    --medical-green: #3CD070;
    --medical-orange: #EC4E00;
    --medical-orange-dark: #C63F00;
    --medical-bg: #F5F5F5;
    --medical-navy: #1E293B;
    --medical-accent: #FFF4E6;
    --medical-border: #E2E8F0;
    --medical-muted: #64748B;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--medical-bg);
}

.shadow-soft {
    box-shadow: 0 14px 40px rgba(30, 41, 59, 0.08);
}

.bg-medical-hero {
    background:
        linear-gradient(135deg, rgba(34, 86, 207, 0.10), rgba(13, 148, 136, 0.10)),
        #ffffff;
}

.hero-clinic-gradient {
    background:
        linear-gradient(90deg, rgba(30, 41, 59, 0.88), rgba(30, 41, 59, 0.66), rgba(34, 86, 207, 0.40)),
        radial-gradient(circle at 72% 18%, rgba(60, 208, 112, 0.22), transparent 28%),
        linear-gradient(135deg, #1E293B, #2256CF);
}

.cta-orange {
    background: var(--medical-orange);
    color: #fff;
    transition: all 0.3s ease;
}

.cta-orange:hover {
    background: var(--medical-orange-dark);
    transform: translateY(-1px);
}

.prose-medical p {
    margin-bottom: 1rem;
    color: #475569;
    line-height: 1.8;
}

.prose-medical h2,
.prose-medical h3 {
    color: var(--medical-navy);
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.admin-table th {
    white-space: nowrap;
}

.before-after-slider {
    --position: 50%;
}

.before-after-slider .after-layer {
    clip-path: inset(0 0 0 var(--position));
}

.skeleton-card {
    background: linear-gradient(90deg, #eef2f7, #f8fafc, #eef2f7);
    background-size: 200% 100%;
    animation: skeleton-loading 1.4s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[data-quote-step] {
    display: none;
}

[data-quote-step].is-active {
    display: block;
}

.comparison-modal.is-open {
    display: flex;
}

@media (prefers-color-scheme: dark) {
    :root {
        --medical-bg: #0F172A;
        --medical-navy: #E2E8F0;
        --medical-border: #263244;
    }

    body {
        color: #E2E8F0;
        background: var(--medical-bg);
    }
}