/**
 * Verta Popup Styles - Modern Bottom Sheet Design
 * @version 1.0.0
 *
 */

/* ==========================================
   Base Popup Styles
   ========================================== */

.verta-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.verta-popup.verta-popup-active {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================
   Overlay / Backdrop
   ========================================== */

.verta-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.verta-popup.verta-popup-active .verta-popup-overlay {
    opacity: 1;
}

/* ==========================================
   Desktop: Centered Modal
   ========================================== */

.verta-popup-container {
    position: relative;
    background: var(--verta-bg);
    border-radius: 16px;
    padding: 32px;
    max-width: 90%;
    width: 480px;
    max-height: 85vh;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 1000000;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.verta-popup.verta-popup-active .verta-popup-container {
    transform: scale(1);
    opacity: 1;
}

/* ==========================================
   Close Button
   ========================================== */

.verta-popup-close {
    position: absolute !important;
    top: 16px !important;
    left: 16px  !important;
    background: rgba(0,0,0,.05)  !important;
    border: none  !important;
    border-radius: 50%  !important;
    width: 36px  !important;
    height: 36px  !important;
    display: flex  !important;
    align-items: center  !important;
    justify-content: center  !important;
    cursor: pointer  !important;
    color: #6b7280  !important;
    transition: all 0.2s ease  !important;
    z-index: 10  !important;
    padding: 0 !important;
    opacity: 1 !important;
}

.verta-popup-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #111827;
    transform: rotate(90deg);
}

.verta-popup-close:active {
    transform: rotate(90deg) scale(0.95);
}

.verta-popup-close svg {
    width: 20px;
    height: 20px;
}

/* ==========================================
   Content Wrapper
   ========================================== */

.verta-popup-content {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: center;
}
.verta-popup-content .verta-form-container {
    width: 100% ;
}
/* تنظیم فاصله container فرم در پاپ آپ */
.verta-popup .verta-form-container {
    padding: 0;
    margin: 0;
}

/* ==========================================
   Scrollbar Styling
   ========================================== */

.verta-popup-container::-webkit-scrollbar {
    width: 6px;
}

.verta-popup-container::-webkit-scrollbar-track {
    background: transparent;
}

.verta-popup-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.verta-popup-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ==========================================
   Mobile: Bottom Sheet Design
   ========================================== */

@media (max-width: 768px) {
    .verta-popup {
        align-items: flex-end;
    }

    .verta-popup-container {
        max-width: 100%;
        width: 100%;
        max-height: 90vh;
        border-radius: 24px 24px 0 0; /* گوشه‌های بالا خمیده */
        padding: 24px 20px 32px;
        margin: 0;
        transform: translateY(100%); /* شروع از پایین صفحه */
        opacity: 1;
        box-shadow: 
            0 -10px 25px -5px rgba(0, 0, 0, 0.1),
            0 -4px 10px -2px rgba(0, 0, 0, 0.05);
    }

    .verta-popup.verta-popup-active .verta-popup-container {
        transform: translateY(0); /* کشیدن به بالا */
        opacity: 1;
    }

    /* دسته کشیدن (Handle) در بالای Bottom Sheet */
    .verta-popup-container::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }

    /* تنظیم دکمه بستن در موبایل */
    .verta-popup-close {
        top: 24px;
        left: 16px;
        background: rgba(0, 0, 0, 0.06);
    }

    /* فاصله بیشتر برای محتوا */
    .verta-popup-content {
        margin-top: 12px;
    }
}

/* ==========================================
   Dark Mode Support
   ========================================== */

@media (prefers-color-scheme: dark) {
    .verta-popup-container {
        background: #1f2937;
        box-shadow: 
            0 20px 25px -5px rgba(0, 0, 0, 0.3),
            0 10px 10px -5px rgba(0, 0, 0, 0.2);
    }

    .verta-popup-overlay {
        background: #000000;
    }

    .verta-popup-close {
        background: rgba(255, 255, 255, 0.1);
        color: #e5e7eb;
    }

    .verta-popup-close:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
    }

    @media (max-width: 768px) {
        .verta-popup-container::before {
            background: rgba(255, 255, 255, 0.3);
        }

        .verta-popup-close {
            background: rgba(255, 255, 255, 0.12);
        }
    }
}

/* ==========================================
   Prevent Body Scroll When Popup is Open
   ========================================== */

body.verta-popup-open {
    overflow: hidden;
    padding-right: var(--verta-scrollbar-width, 0);
}

/* ==========================================
   RTL Support
   ========================================== */

[dir="rtl"] .verta-popup-close {
    left: auto;
    right: 16px;
}

/* ==========================================
   Animation Performance
   ========================================== */

.verta-popup,
.verta-popup-overlay,
.verta-popup-container {
    will-change: transform, opacity;
}

/* بهبود عملکرد انیمیشن */
@media (prefers-reduced-motion: reduce) {
    .verta-popup,
    .verta-popup-overlay,
    .verta-popup-container,
    .verta-popup-close {
        transition: none;
    }
}

/* ==========================================
   Safe Area for Mobile Devices (iOS notch)
   ========================================== */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .verta-popup-container {
            padding-bottom: calc(32px + env(safe-area-inset-bottom));
        }
    }
}