/* Page: مراقبت قبل بعد v1 - scoped styles (aligned with laser/kerato) */
.page-care-before-after-v1-wrapper {
    font-family: "Vazirmatn", sans-serif !important;
    background-color: #111621 !important;
    color: #cbd5e1;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
}
.page-care-before-after-v1-wrapper #care-hero .care-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .page-care-before-after-v1-wrapper #care-hero .care-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4rem;
    }
}

:root {
    --primary-color: #1754cf;
}
.page-care-before-after-v1-wrapper ::-webkit-scrollbar {
    width: 8px;
}
.page-care-before-after-v1-wrapper ::-webkit-scrollbar-track {
    background: #111621;
}
.page-care-before-after-v1-wrapper ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
.page-care-before-after-v1-wrapper ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}
.page-care-before-after-v1-wrapper .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;
}

/* Anchor offset so sticky TOC does not cover section titles */
body.page-care-before-after-v1 .page-care-before-after-v1-wrapper section[id],
body.page-care-before-after-v1 .page-care-before-after-v1-wrapper #symptoms {
    scroll-margin-top: 7rem;
}
@media (max-width: 768px) {
    /* موبایل: هدر ثابت تم ~90px + فهرست شناور — فاصله بیشتر برای پرش anchor */
    body.page-care-before-after-v1 .page-care-before-after-v1-wrapper section[id],
    body.page-care-before-after-v1 .page-care-before-after-v1-wrapper #symptoms {
        scroll-margin-top: 11rem;
    }
}
@media (min-width: 769px) {
    body.page-care-before-after-v1 .page-care-before-after-v1-wrapper section[id],
    body.page-care-before-after-v1 .page-care-before-after-v1-wrapper #symptoms {
        scroll-margin-top: 8.5rem;
    }
}

body.page-care-before-after-v1 {
    scroll-behavior: smooth;
}

/* TOC: active link (synced while scrolling) */
.page-care-before-after-v1-wrapper .care-toc-link.is-active {
    border-color: rgba(59, 130, 246, 0.55) !important;
    background: linear-gradient(135deg, rgba(23, 84, 207, 0.28), rgba(23, 84, 207, 0.12)) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(23, 84, 207, 0.35), 0 8px 28px rgba(23, 84, 207, 0.22);
}
.page-care-before-after-v1-wrapper .care-toc-link.is-active .care-toc-num {
    background: #1754cf !important;
    color: #fff !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 0 0 16px rgba(23, 84, 207, 0.45);
}

/* Mobile: subtle fade at horizontal scroll edges */
@media (max-width: 767px) {
    .page-care-before-after-v1-wrapper .care-page-toc-scroll {
        position: relative;
        mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    }
}

.page-care-before-after-v1-wrapper .care-toc-track {
    -webkit-overflow-scrolling: touch;
}
.page-care-before-after-v1-wrapper .care-toc-track::-webkit-scrollbar {
    height: 5px;
}
.page-care-before-after-v1-wrapper .care-toc-track::-webkit-scrollbar-thumb {
    background: rgba(23, 84, 207, 0.45);
    border-radius: 999px;
}
.page-care-before-after-v1-wrapper .care-toc-track::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 999px;
}

/*
 * هدر تم در موبایل (max-width: 768px) position:fixed و body padding-top: 90px است (style.css).
 * فهرست sticky/fixed باید top را زیر هدر بگیرد، وگرنه زیر نوار سایت می‌رود (z-index هدر 1000).
 */
@media (min-width: 769px) {
    body.admin-bar .page-care-before-after-v1-wrapper .care-page-toc:not(.care-page-toc--floating) {
        top: 32px;
    }
}
@media (max-width: 768px) {
    /* کمی زیر هدر اصلی تم (z-index: 1000) */
    .page-care-before-after-v1-wrapper .care-page-toc {
        z-index: 998 !important;
    }
    .page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--dock:not(.care-page-toc--floating) {
        top: 90px !important;
    }
    /* شناور: چسبیده‌تر به پایین هدر (بدون فاصله اضافه) */
    .page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating {
        top: 90px !important;
    }
    /* نوار ادمین وردپرس + هدر تم (تقریبی) */
    body.admin-bar .page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--dock:not(.care-page-toc--floating) {
        top: calc(90px + var(--wp-admin--admin-bar--height, 46px)) !important;
    }
    body.admin-bar .page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating {
        top: calc(90px + var(--wp-admin--admin-bar--height, 46px)) !important;
    }
}

/* Placeholder reserves space when TOC becomes fixed */
.page-care-before-after-v1-wrapper .care-toc-placeholder {
    width: 100%;
    height: 0;
    transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Floating dock: بعد از کلیک یا اسکرول — شناور روی محتوا (مقدار top در موبایل/دسکتاپ جداست) */
.page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 1.25rem) !important;
    max-width: 80rem !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    /* زیر هدر سایت (1000) ولی بالای محتوای صفحه */
    z-index: 999 !important;
    transition: none !important;
}
/* دسکتاپ/تبلت: فاصله کم از بالا وقتی شناور است */
@media (min-width: 769px) {
    .page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating {
        top: 0.35rem !important;
    }
}
.page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating .care-toc-glow {
    opacity: 0;
}
.page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating .care-toc-heading {
    display: none !important;
}
.page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating .care-toc-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating .care-toc-card {
    border-radius: 1.25rem !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
    padding: 0.5rem 0.65rem !important;
    box-shadow:
        0 0 0 1px rgba(23, 84, 207, 0.22),
        0 4px 6px -1px rgba(0, 0, 0, 0.35),
        0 28px 56px -12px rgba(0, 0, 0, 0.65),
        0 0 48px -10px rgba(23, 84, 207, 0.28) !important;
    backdrop-filter: blur(20px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
    animation: careTocFloatIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating .care-page-toc-scroll {
    margin-bottom: 0 !important;
}
.page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating .care-toc-link {
    min-height: 38px !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    padding-left: 0.65rem !important;
    padding-right: 0.75rem !important;
}
.page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating .care-toc-num {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 10px !important;
}
.page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating.care-page-toc--pulse .care-toc-card {
    animation: careTocDockPulse 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes careTocFloatIn {
    from {
        opacity: 0.88;
        transform: translateY(-12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes careTocDockPulse {
    0% {
        box-shadow:
            0 0 0 1px rgba(23, 84, 207, 0.22),
            0 28px 56px -12px rgba(0, 0, 0, 0.65),
            0 0 48px -10px rgba(23, 84, 207, 0.28);
    }
    40% {
        box-shadow:
            0 0 0 2px rgba(59, 130, 246, 0.45),
            0 32px 64px -8px rgba(0, 0, 0, 0.55),
            0 0 56px -6px rgba(23, 84, 207, 0.55);
    }
    100% {
        box-shadow:
            0 0 0 1px rgba(23, 84, 207, 0.22),
            0 28px 56px -12px rgba(0, 0, 0, 0.65),
            0 0 48px -10px rgba(23, 84, 207, 0.28);
    }
}

/* دسکتاپ: فقط نوار ادمین وردپرس (بدون هدر 90px موبایل) */
@media (min-width: 769px) {
    body.admin-bar .page-care-before-after-v1-wrapper .care-page-toc.care-page-toc--floating {
        top: calc(var(--wp-admin--admin-bar--height, 32px) + 0.25rem) !important;
    }
}