/**
 * confirm-dialog.css
 * کامپوننت سراسری تاییدیه‌ی عملیات حساس/برگشت‌ناپذیر (جایگزین confirm()
 * پیش‌فرض مرورگر). برای عملیات برگشت‌ناپذیر (severity=danger) دو مرحله‌ای
 * است: مرحله‌ی اول توضیح پیامد را نشان می‌دهد، مرحله‌ی دوم دکمه‌ی قرمزِ
 * نهایی را با یک تاخیر کوتاه (guard) فعال می‌کند تا از لمس/کلیک تصادفی
 * پشت‌سرهم جلوگیری شود. برای عملیات نیمه‌حساس و قابل‌بازگشت (warning/info)
 * تک‌مرحله‌ای است ولی همچنان ظاهر یکدست و حرفه‌ای دارد.
 * از متغیرهای رنگی style.css استفاده می‌کند تا با هویت بصری سایت هماهنگ باشد.
 */

body.xco-confirm-lock-scroll {
    overflow: hidden;
}

.xco-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 16, 33, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

.xco-confirm-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s linear 0s;
}

.xco-confirm-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--xco-radius-lg, 1.25rem);
    box-shadow: var(--xco-shadow-lg, 0 1.5rem 3rem rgba(0, 24, 68, .18));
    padding: 1.6rem 1.5rem 1.4rem;
    text-align: center;
    transform: translateY(18px) scale(.94);
    opacity: 0;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
    font-family: var(--xco-font);
}

.xco-confirm-backdrop.is-open .xco-confirm-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.xco-confirm-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    animation: xcoConfirmIconPop .35s cubic-bezier(.22, 1, .36, 1) .05s both;
}

@keyframes xcoConfirmIconPop {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.xco-confirm-modal[data-severity="danger"] .xco-confirm-icon {
    background: #fdecea;
    color: #dc3545;
}

.xco-confirm-modal[data-severity="warning"] .xco-confirm-icon {
    background: var(--xco-secondary-soft, #fff1e6);
    color: var(--xco-secondary, #ff6200);
}

.xco-confirm-modal[data-severity="info"] .xco-confirm-icon {
    background: var(--xco-primary-soft, #eaf0fb);
    color: var(--xco-primary, #003087);
}

.xco-confirm-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--xco-ink, #0f172a);
    margin-bottom: .5rem;
}

.xco-confirm-message {
    font-size: .88rem;
    color: #5b6478;
    line-height: 1.9;
    margin-bottom: 0;
}

.xco-confirm-consequence {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    text-align: right;
    background: #fdecea;
    color: #b02a37;
    border: 1px solid #f6c6cb;
    border-radius: var(--xco-radius-sm, .6rem);
    padding: .6rem .75rem;
    font-size: .8rem;
    line-height: 1.8;
    margin: .9rem 0 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin-top: 0;
    transition: max-height .3s ease, opacity .25s ease, padding .3s ease, margin .3s ease, border-width .3s ease;
}

.xco-confirm-consequence i {
    font-size: 1rem;
    margin-top: .1rem;
    flex-shrink: 0;
}

.xco-confirm-modal.xco-step-2 .xco-confirm-consequence {
    max-height: 120px;
    opacity: 1;
    padding: .6rem .75rem;
    margin: .9rem 0 0;
    border-width: 1px;
}

.xco-confirm-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.3rem;
}

.xco-confirm-actions .btn {
    flex: 1;
    border-radius: var(--xco-radius-sm, .6rem);
    font-weight: 700;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

/* دو مرحله: پیش‌فرض مرحله‌ی اول نمایش داده می‌شود؛ با افزودن کلاس
   xco-step-2 به مودال، مرحله‌ی اول با انیمیشن محو و مرحله‌ی دوم (دکمه‌ی
   نهایی خطرناک) با انیمیشن ظاهر می‌شود. */
.xco-confirm-step-1 {
    display: flex;
    transition: opacity .18s ease, transform .18s ease;
}

.xco-confirm-step-2 {
    display: none;
    opacity: 0;
    transform: translateY(-4px);
}

.xco-confirm-modal.xco-step-2 .xco-confirm-step-1 {
    display: none;
}

.xco-confirm-modal.xco-step-2 .xco-confirm-step-2 {
    display: flex;
    animation: xcoConfirmStepIn .3s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes xcoConfirmStepIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.xco-confirm-final {
    position: relative;
    overflow: hidden;
}

.xco-confirm-final.xco-guard-active {
    animation: xcoConfirmGuardPulse 1.1s ease-in-out infinite;
    cursor: progress;
}

@keyframes xcoConfirmGuardPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .35); }
    50%      { box-shadow: 0 0 0 7px rgba(220, 53, 69, 0); }
}

.xco-confirm-final:disabled {
    opacity: .75;
}

/* دکمه‌ی «انصراف» همیشه در سمت راست‌تر (اول DOM، در RTL سمت راست) قرار
   می‌گیرد تا محل آن با دکمه‌ی تاییدِ خطرناک عوض نشود و از کلیک اشتباهی
   به‌خاطر جابه‌جایی موقعیت جلوگیری شود. */
.xco-confirm-cancel,
.xco-confirm-cancel-2 {
    order: 2;
}

.xco-confirm-primary-action {
    order: 1;
}

@media (max-width: 380px) {
    .xco-confirm-modal {
        padding: 1.3rem 1.1rem 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xco-confirm-backdrop,
    .xco-confirm-modal,
    .xco-confirm-icon,
    .xco-confirm-final,
    .xco-confirm-consequence,
    .xco-confirm-step-2 {
        animation: none !important;
        transition: none !important;
    }
}