* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: IRANSansFa;
}

/* استایل‌های مدال - بدون تغییر */
.modal2 {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.p_modal {
    display: flex !important;
    white-space: pre-line !important;
}

.bg_secondary_mpdal {
    background-color: #6c757d !important;
}

.dark .bg_secondary_mpdal {
    background-color: #25324f !important;
}

.bg_body_modal {
    background-color: #ddd;
}

.dark .bg_body_modal {
    background-color: #191919 !important;
}

/* انیمیشن‌های جدید فقط برای چرخش */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.modal2.show {
    display: block;
    animation: fadeIn 0.3s ease forwards;
}

/* حذف انیمیشن از بک‌گراند */
.modal2.hide {
    animation: none;
}

@keyframes modalFlipIn {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(-90deg) translateX(100px);
    }

    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0) translateX(0);
    }
}

@keyframes modalFlipOut {
    from {
        opacity: 1;
        transform: perspective(1000px) rotateY(0) translateX(0);
    }

    to {
        opacity: 0;
        transform: perspective(1000px) rotateY(90deg) translateX(-100px);
    }
}

.modal2-dialog {
    background: white;
    margin: 10% auto;
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

    .modal2-dialog.show {
        animation: modalFlipIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .modal2-dialog.hide {
        animation: modalFlipOut 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

/* بقیه استایل‌های شما بدون تغییر */
.modal2-body {
    padding: 40px 30px;
    text-align: center;
    background-color: white;
    color: #252525;
    height: 250px !important;
}

.modal2-icon i.fas {
    font-size: 80px !important;
}

.dark .modal2-body {
    padding: 40px 30px;
    text-align: center;
    background-color: #25324f;
    color: #2ecc71 !important;
    height: 200px;
}

.modal2-icon {
    font-size: 80px !important;
    margin-bottom: 0px;
}

    .modal2-icon .success {
        color: #2ecc71 !important;
    }

    .modal2-icon .warning {
        color: #f39c12 !important;
    }

    .modal2-icon .error {
        color: #e74c3c !important;
    }

    .modal2-icon .info {
        color: #3498db !important;
    }

.modal2-footer {
    padding: 15px 10px;
}

    .modal2-footer .btn {
        padding: 10px 10px;
        font-size: 16px;
        min-width: 120px;
    }

/* ریسپانسیو */
@media (max-width: 768px) {
    .modal2-dialog {
        margin: 5% auto;
        width: 95%;
    }

    @keyframes modalFlipIn {
        from {
            opacity: 0;
            transform: perspective(800px) rotateY(-60deg) translateX(50px);
        }

        to {
            opacity: 1;
            transform: perspective(800px) rotateY(0) translateX(0);
        }
    }

    @keyframes modalFlipOut {
        from {
            opacity: 1;
            transform: perspective(800px) rotateY(0) translateX(0);
        }

        to {
            opacity: 0;
            transform: perspective(800px) rotateY(60deg) translateX(-50px);
        }
    }

    .buttons {
        grid-template-columns: 1fr;
    }

    .modal2-footer {
        flex-direction: column;
    }

        .modal2-footer .btn {
            width: 100%;
        }
}

@media (max-width: 480px) {
    .container {
        padding: 20px;
    }

    h1 {
        font-size: 2rem;
    }

    .btn {
        padding: 15px 20px;
        font-size: 16px;
    }
}