/* ==========================================================================
   چرخِ انتخاب تاریخ شمسی — کامپوننت مشترک
   --------------------------------------------------------------------------
   تا پیش از این، هر صفحه‌ای که تاریخ می‌گرفت سه <select> ساده داشت و فقط
   صفحه‌ی داروها چرخِ واقعی داشت. نتیجه‌اش این بود که کاربر در ثبت‌نام،
   افزودن عضو، بارگذاری مدرک و پروفایل با چهار تجربه‌ی متفاوت روبه‌رو
   می‌شد. این فایل همان چرخ را به یک کامپوننت قابل استفاده تبدیل می‌کند.

   ترتیب ستون‌ها عمداً از چپ به راست «سال · ماه · روز» است (خواسته‌ی صریح
   کاربر)، در حالی که خودِ صفحه راست‌به‌چپ می‌ماند — با direction: ltr
   روی همین بلوک.

   اندازه: هم‌تراز با چرخِ صفحه‌ی داروها (--dw-item-h: 2.75rem و پنجره‌ی
   ۵ ردیفه). نسخه‌ی قبلی ۲.۲۵rem بود و کاربر درست گفت که کوچک شده.

   نرمی اسکرول: scroll-behavior: smooth عمداً روی خودِ چرخ ست نمی‌شود.
   وقتی روی یک کانتینرِ scroll-snap بنشیند، انیمیشنِ مرورگر با
   momentum لمسی می‌جنگد و حرکت تکه‌تکه می‌شود. حرکتِ نرم فقط جایی
   لازم است که ما خودمان scrollTo می‌زنیم و همان‌جا behavior را صریح
   می‌دهیم.

   رنگ‌ها همگی از توکن‌های design-system می‌آیند، پس لایت و دارک بدون
   هیچ کلاس اضافه‌ای درست‌اند.
   ========================================================================== */

.dw {
    direction: ltr;                 /* سال · ماه · روز از چپ به راست */
    display: grid;
    grid-template-columns: 1.1fr 1.35fr 1fr;
    gap: 0.375rem;
    position: relative;
    padding: 0.375rem;
    border-radius: var(--r-card, 1.5rem);
    background: var(--panel-2);
    border: 1px solid var(--border);
    overflow: hidden;
}

.dw__column { position: relative; min-width: 0; }

.dw__label {
    direction: rtl;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--muted);
    padding: 0.375rem 0 0.3125rem;
    letter-spacing: 0.01em;
}

/* ارتفاع = ۵ آیتم؛ آیتم وسط همان انتخاب‌شده است */
.dw__wheel {
    --dw-item-h: 2.75rem;
    height: calc(var(--dw-item-h) * 5);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;   /* momentum روی iOS */
    outline: none;
    /* عمق کم برای حسِ استوانه‌ای */
    perspective: 640px;
    transform-style: preserve-3d;
    will-change: scroll-position;
}
.dw__wheel::-webkit-scrollbar { display: none; }

.dw__wheel:focus-visible {
    box-shadow: inset 0 0 0 2px var(--blue);
    border-radius: var(--r-control, 1rem);
}

/* فضای خالی بالا و پایین تا آیتم اول و آخر هم بتوانند وسط بنشینند */
.dw__spacer { height: calc(var(--dw-item-h) * 2); }

/* ماهِ بیرون از بازه‌ی مجاز — هیچ فضایی نمی‌گیرد تا محاسبه‌ی
   «ایندکس ↔ scrollTop» در date-wheel.js درست بماند. */
.dw__option[hidden] { display: none !important; }

.dw__option {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--dw-item-h);
    scroll-snap-align: center;
    scroll-snap-stop: normal;       /* اجازه‌ی عبور روان از چند ردیف */
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--muted);
    opacity: 0.35;
    transform: scale(0.8) rotateX(38deg);
    transition: opacity 200ms cubic-bezier(.22,.61,.36,1),
                transform 200ms cubic-bezier(.22,.61,.36,1),
                color 200ms ease;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    backface-visibility: hidden;
}

/* هرچه از مرکز دورتر، کم‌رنگ‌تر و خوابیده‌تر — حسِ چرخ */
.dw__option[data-distance="2"] { opacity: 0.5;  transform: scale(0.86) rotateX(24deg); }
.dw__option[data-distance="1"] { opacity: 0.75; transform: scale(0.93) rotateX(12deg); }
.dw__option[data-distance="0"] {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
    color: var(--text);
    font-weight: 800;
    font-size: 1.0625rem;
}

/* پنجره‌ی مرکزی: نشان می‌دهد کدام ردیف انتخاب است */
.dw__window {
    position: absolute;
    left: 0.375rem;
    right: 0.375rem;
    /* بالای ستون‌ها: padding کانتینر + ارتفاع برچسب + دو ردیف spacer */
    top: calc(0.375rem + 1.5rem + var(--dw-item-h, 2.75rem) * 2);
    height: var(--dw-item-h, 2.75rem);
    border-top: 1.5px solid var(--blue);
    border-bottom: 1.5px solid var(--blue);
    background: color-mix(in srgb, var(--blue) 9%, transparent);
    border-radius: 0.625rem;
    pointer-events: none;
    z-index: 2;
}

/* محو شدن لبه‌ها */
.dw__fade {
    position: absolute;
    left: 0; right: 0;
    height: calc(var(--dw-item-h, 2.75rem) * 1.8);
    pointer-events: none;
    z-index: 1;
}
.dw__fade--top {
    top: 1.5rem;
    background: linear-gradient(to bottom,
        var(--panel-2) 12%,
        color-mix(in srgb, var(--panel-2) 55%, transparent) 55%,
        transparent);
}
.dw__fade--bottom {
    bottom: 0;
    background: linear-gradient(to top,
        var(--panel-2) 12%,
        color-mix(in srgb, var(--panel-2) 55%, transparent) 55%,
        transparent);
}

/* خلاصه‌ی تاریخِ انتخاب‌شده، زیر چرخ */
.dw__preview {
    direction: rtl;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
    padding-top: 0.5rem;
}

/* راهنمای «هنوز انتخاب نشده» — کم‌رنگ‌تر از تاریخِ واقعی، تا کاربر
   فرقشان را بفهمد. */
.dw__preview[data-dw-placeholder] {
    color: var(--muted);
    font-weight: 600;
}

.dw__error { direction: rtl; text-align: center; font-size: 0.6875rem; color: var(--red); }

/* حالت فشرده — جایی که فضا کم است (مثلاً داخل مودال) */
.dw--compact .dw__wheel { --dw-item-h: 2.25rem; }
.dw--compact .dw__option { font-size: 0.8125rem; }
.dw--compact .dw__option[data-distance="0"] { font-size: 0.9375rem; }

@media (prefers-reduced-motion: reduce) {
    .dw__wheel { scroll-behavior: auto; }
    .dw__option { transition: none; transform: none; }
    .dw__option[data-distance="0"] { transform: none; }
}

/* ==========================================================================
   حالت بسته / باز
   --------------------------------------------------------------------------
   چرخ پیش‌فرض بسته است. غیر از کوتاه‌تر شدنِ فرم، یک مشکل واقعی را هم
   حل می‌کند: روی موبایل اسکرولِ صفحه وقتی از روی یک چرخِ باز رد می‌شد
   مقدارش را عوض می‌کرد و کاربر متوجه نمی‌شد.
   ========================================================================== */

.dw-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8125rem 1rem;
    border-radius: var(--r-control, 1rem);
    background: var(--panel-2);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    text-align: right;
    transition: border-color .2s ease, background .2s ease;
}

.dw-toggle:hover { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.dw-toggle:focus-visible {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent);
}

.dw-toggle__icon { font-size: 1.125rem; color: var(--blue); flex: 0 0 auto; }

.dw-toggle__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* تا وقتی کاربر تاریخی انتخاب نکرده، متن راهنماست نه یک مقدار */
.dw-toggle__value[data-dw-empty] {
    color: var(--muted);
    font-weight: 600;
}

.dw-toggle__chevron {
    font-size: 1.25rem;
    color: var(--muted);
    flex: 0 0 auto;
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
}

.dw-toggle[aria-expanded="true"] { border-color: var(--blue); }
.dw-toggle[aria-expanded="true"] .dw-toggle__chevron { transform: rotate(180deg); }

/* [hidden] در بعضی ریست‌ها با display:flex بازنویسی می‌شود؛ صریح می‌گوییم */
.dw-collapse[hidden] { display: none !important; }

.dw-collapse {
    padding-top: 0.5rem;
    animation: dwExpand .22s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes dwExpand {
    from { opacity: 0; transform: translateY(-0.375rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .dw-collapse { animation: none; }
    .dw-toggle__chevron { transition: none; }
}