/* ==========================================================================
   ردیف اعضای خانواده — فقط دایره
   --------------------------------------------------------------------------
   خواسته‌ی کاربر: «کادر مستطیل دور اعضای خانواده رو بردار، دقیقاً فقط
   دایره باشه.»

   کارت‌های قبلی پس‌زمینه، کادر، سایه، گرادیانِ بالا و چند نشانِ کوچک
   داشتند. با پنج کارت کنار هم، صفحه بیشتر شبیه یک جدول بود تا یک ردیفِ
   آدم. حالا فقط تصویرِ دایره‌ای می‌ماند و نام زیرش.

   رنگِ نسبت روی خودِ حلقه‌ی دور دایره باقی مانده — بدون آن، همسر و پدر
   و فرزند از هم قابل تشخیص نبودند و این تنها چیزی بود که کارت‌ها واقعاً
   به آن اضافه می‌کردند.
   ========================================================================== */

.member-dot,
.member-dot__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    text-decoration: none;
    scroll-snap-align: start;
}

.member-dot { width: 5rem; }

/* «خودم» و «عضو جدید» خودشان <a class="member-dot"> هستند و لایه‌ی
   داخلی ندارند؛ اعضای خانواده یک <div> بیرونی دارند تا دکمه‌ی حذف
   جایی برای نشستن داشته باشد. هر دو حالت باید یک شکل دربیایند. */
.member-dot__link { width: 100%; }

@media (min-width: 640px) {
    .member-dot { width: 5.75rem; }
}

/* ---------- حلقه‌ی دور تصویر ---------- */

.member-dot__ring {
    /* دو سرِ گرادیانت. هر نسبت فقط همین دو متغیر را عوض می‌کند. */
    --ring: var(--border);
    --ring-2: var(--border);

    position: relative;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    /* ⚠️ حلقه با padding + دو لایه background ساخته می‌شود، نه با border.
       border فقط رنگِ یکنواخت می‌گیرد و گرادیانت روی آن ممکن نیست.
       لایه‌ی اول (content-box) پس‌زمینه‌ی داخل است، لایه‌ی دوم
       (border-box) خودِ حلقه — و padding فاصله‌ی بینشان را می‌سازد. */
    padding: 2.5px;
    background:
        linear-gradient(var(--panel), var(--panel)) content-box,
        linear-gradient(140deg, var(--ring), var(--ring-2)) border-box;
    border: 0;

    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .45);
    transition: transform .22s cubic-bezier(.22,.61,.36,1),
                box-shadow .22s ease;
}

@media (min-width: 640px) {
    .member-dot__ring { width: 4.75rem; height: 4.75rem; }
}

.member-dot__ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 999px;
}

@media (hover: hover) {
    .member-dot:hover .member-dot__ring {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .5);
    }
}

.member-dot:active .member-dot__ring { transform: scale(.96); }

/* ---------- رنگِ حلقه بر اساس نسبت ---------- */

.member-dot__ring--self {
    --ring: #2557C7; --ring-2: #6366F1;
}
.member-dot__ring[data-rel="wife"],
.member-dot__ring[data-rel="husband"] {
    --ring: #EC4899; --ring-2: #F43F5E;
}

/* فرزند: کهربایی–نارنجی.
   ⚠️ قبلاً سبزِ نعنایی بود، ولی «کودک من» در امکانات کهربایی است.
   یک بچه نباید در دو صفحه دو رنگ داشته باشد — خواسته‌ی صریح کاربر:
   «کودک زرد نارنجی شود، با کودک من یکی شود». */
.member-dot__ring[data-rel="son"],
.member-dot__ring[data-rel="daughter"] {
    --ring: #F59E0B; --ring-2: #F97316;
}

.member-dot__ring[data-rel="father"] {
    --ring: #1D4ED8; --ring-2: #0EA5E9;
}
.member-dot__ring[data-rel="mother"] {
    --ring: #A855F7; --ring-2: #D946EF;
}
.member-dot__ring[data-rel="brother"],
.member-dot__ring[data-rel="sister"] {
    --ring: #14B8A6; --ring-2: #10B981;
}
.member-dot__ring[data-rel="other"] {
    --ring: #64748B; --ring-2: #94A3B8;
}

/* ---------- افزودن عضو ---------- */

.member-dot__ring--add {
    /* اینجا گرادیانت نمی‌خواهیم؛ کادرِ نقطه‌چین یعنی «هنوز کسی نیست». */
    padding: 0;
    background: var(--panel-2);
    border: 2.5px dashed color-mix(in srgb, var(--blue) 45%, transparent);
    color: var(--blue);
}
.member-dot__ring--add .material-icons { font-size: 1.5rem; }

@media (hover: hover) {
    .member-dot--add:hover .member-dot__ring--add {
        background: color-mix(in srgb, var(--blue) 10%, var(--panel-2));
        border-style: solid;
    }
}

/* ---------- نام ---------- */

.member-dot__title {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-dot__sub {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* خالی هم که باشد جای خودش را نگه می‌دارد تا نام‌ها هم‌تراز بمانند */
    min-height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .member-dot__ring { transition: none; }
    .member-dot:hover .member-dot__ring { transform: none; }
}


/* ==========================================================================
   حذف عضو خانواده
   --------------------------------------------------------------------------
   خواسته‌ی کاربر (نسخه‌ی دوم، بعد از دیدن نتیجه):
       «بالای این سطل آشغال رو حذف کن، قرمز کوچولو پایین چپ دکمه بذار،
        اونم موس روش رفت نشون بده.»
       «کنار این دوتا تو سافاری زده بیرون، افتضاحه.»

   چه چیزی خراب بود؟
       دکمه بالای دایره و بیرونش می‌نشست (top منفی). در ردیفی که
       overflow-x: auto دارد، هر چیزی که از بالا بزند بیرون یا بریده
       می‌شود یا نوار اسکرول می‌سازد — و سافاری سخت‌گیرتر است.

       حالا کاملاً داخلِ قابِ دایره است: پایین-چپ، روی خودِ حلقه.
       هیچ‌چیز از مرزِ .member-dot بیرون نمی‌زند.

   و لمسِ طولانی برداشته شد: کاربر «موس روش رفت» خواست. روی گوشی
   دکمه با یک لمس روی خودِ دایره نمایان می‌شود (کلاسِ is-removable که
   جاوااسکریپت می‌گذارد) — بدون نگه‌داشتنِ سه ثانیه‌ای که کسی حدس
   نمی‌زد.
   ========================================================================== */

.member-dot {
    /* دکمه‌ی حذف نسبت به همین قاب جای می‌گیرد */
    position: relative;
}

.member-dot__remove {
    position: absolute;

    /* پایین-چپ، روی خودِ دایره.
       ⚠️ عمداً مقدارِ مثبت: هر مقدارِ منفی یعنی بیرون‌زدن از قاب، و
       ردیفِ اعضا overflow-x دارد. */
    bottom: 2.25rem;
    inset-inline-start: 0.25rem;

    width: 1.375rem;
    height: 1.375rem;
    border-radius: 999px;
    border: 2px solid var(--panel);
    background: var(--red, #D6303C);
    color: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;

    /* پیش‌فرض: نه دیده می‌شود نه قابلِ زدن */
    opacity: 0;
    transform: scale(.5);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s cubic-bezier(.22,.61,.36,1);
}

.member-dot__remove .material-icons { font-size: .75rem; }

@media (min-width: 640px) {
    .member-dot__remove { bottom: 2.5rem; }
}

/* دسکتاپ: با هاور — همان چیزی که کاربر خواست */
@media (hover: hover) {
    .member-dot:hover .member-dot__remove,
    .member-dot:focus-within .member-dot__remove {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
}

/* موبایل: با یک لمس روی دایره. جاوااسکریپت این کلاس را می‌گذارد.
   ⚠️ بیرون از @media (hover: hover) است تا روی هر دستگاهی کار کند —
   دستگاه‌های لمسی‌ای که مرورگرشان hover را هم گزارش می‌کنند کم نیستند. */
.member-dot.is-removable .member-dot__remove {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.member-dot.is-removable .member-dot__ring {
    --ring: var(--red, #D6303C);
    --ring-2: #F87171;
}

@media (prefers-reduced-motion: reduce) {
    .member-dot__remove { transition: none; }
}


/* ==========================================================================
   پنجره‌ی تأیید حذف
   ========================================================================== */

.confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 22, .5);
    backdrop-filter: blur(2px);
    z-index: 70;
    opacity: 0;
    transition: opacity .2s ease;
}
.confirm-backdrop.is-open { opacity: 1; }
.confirm-backdrop[hidden] { display: none !important; }

.confirm-card {
    position: fixed;
    z-index: 71;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: 0 24px 60px -20px rgba(6, 12, 22, .5);

    /* موبایل: از پایین */
    inset-inline: 0;
    bottom: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0));
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
}
.confirm-card.is-open { transform: translateY(0); }
.confirm-card[hidden] { display: none !important; }

/* دسکتاپ: وسطِ صفحه */
@media (min-width: 640px) {
    .confirm-card {
        inset-inline: auto;
        inset-inline-start: 50%;
        top: 50%;
        bottom: auto;
        width: 22rem;
        border-radius: 1.5rem;
        transform: translate(50%, -50%) scale(.96);
        opacity: 0;
    }
    .confirm-card.is-open {
        transform: translate(50%, -50%) scale(1);
        opacity: 1;
    }
}

.confirm-card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--red) 12%, var(--panel));
    color: var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}

.confirm-card__title { font-size: .9375rem; font-weight: 800; }
.confirm-card__text {
    font-size: .75rem;
    color: var(--muted);
    line-height: 1.7;
    margin-top: .375rem;
}

.confirm-card__actions {
    display: flex;
    gap: .625rem;
    margin-top: 1.25rem;
}

.confirm-card__btn {
    flex: 1 1 0;
    min-height: 2.75rem;
    border-radius: 1rem;
    font-size: .8125rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
}
.confirm-card__btn--danger {
    background: var(--red, #D6303C);
    border-color: var(--red, #D6303C);
    color: #fff;
}