/*  assets/styles/modal.css  */

@import url('global.css'); 

/* تنظیم پس‌زمینه تیره و بلور پشت مودال */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px); /* اضافه شدن افکت مدرن شیشه‌ای */
    display: flex;
    align-items: center;      /* وسط‌چین عمودی */
    justify-content: center;  /* وسط‌چین افقی */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    padding: 20px;            /* فاصله ایمن از لبه‌ها */
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* باکس محتوای فرم در مرکز */
.modal-content {
    background: var(--bg-cream);
    width: 100%;
    max-width: 450px;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    
    /* افکت پاپ‌آپ و زوم نرم (Elastic Zoom) */
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    
    max-height: 85vh;         /* جلوگیری از تمام‌صفحه شدن در ارتفاع کم */
    overflow-y: auto;         /* اسکرول داخلی */
}

/* انیمیشن زوم در زمان فعال شدن */
.modal-overlay.active .modal-content {
    transform: scale(1);
    opacity: 1;
}

/* دکمه بستن (ضربدر) */
.close-btn {
    background: none;
    border: none;
    font-size: 25px;
    color: var(--primary-color);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
    font-family: 'Samim', sans-serif;
}

.close-btn:hover {
    color: var(--secondary-color);;
}

/* ==========================================================================
   استایل اختصاصی دکمه‌های داخل مودال (بدون تداخل با صفحه اصلی)
   ========================================================================== */

/* باکس نگهدارنده دکمه‌ها */
.modal-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 24px !important;
    width: 100% !important;
}

/* بازنویسی و یکسان‌سازی کامل هر دو دکمه (خنثی کردن تأثیر استایل‌های دکمه خانه) */
.modal-actions .btn {
    flex: 1 !important;
    width: 100% !important;
    max-width: 150px !important;      /* عرض دقیقاً یکسان ۱۵۰ پیکسل برای هر دو دکمه */
    height: 46px !important;          /* ارتفاع دقیقاً یکسان برای هر دو دکمه */
    padding: 0 !important;            /* حذف پدینگ‌های پیش‌فرض دکمه‌های خانه */
    margin: 0 !important;             /* حذف مارجین‌های ناخواسته */
    border-radius: 10px !important;   /* لبه‌های گرد مدرن مخصوص مودال */
    font-size: 0.95rem !important;
    font-weight: bold !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: none !important;      /* حذف سایه پیش‌فرض دکمه‌های هوم */
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

/* دکمه ثبت سفارش */
.modal-actions .btn-submit {
    background-color: #4a3728 !important; /* رنگ قهوه‌ای برند شما */
    color: var(--primary-color) !important;
}

.modal-actions .btn-submit:hover {
    background-color: #3d2d21 !important;
    transform: translateY(-2px) !important;
}

/* دکمه انصراف */
.modal-actions .btn-cancel {
    background-color: #e53e3e !important; /* قرمز ملایم */
    color: var(--primary-color) !important;
}

.modal-actions .btn-cancel:hover {
    background-color: #c53030 !important;
    transform: translateY(-2px) !important;
}

/* واکنش‌گرایی در موبایل‌های خیلی کوچک (زیر ۴۰۰ پیکسل) */
@media (max-width: 400px) {
    .modal-actions {
        flex-direction: column-reverse !important; /* دکمه انصراف زیر دکمه ثبت قرار گیرد */
        gap: 8px !important;
    }
    .modal-actions .btn {
        max-width: 100% !important;
        width: 100% !important;
    }
}