/**
 * Deposit Popup Fix
 * Fixes close button and scrolling issues
 */

/* Ensure modal is properly positioned */
#depositPopup.modal {
    z-index: 1050 !important;
}

#depositPopup .modal-dialog {
    z-index: 1051 !important;
    margin: 1.75rem auto;
}

/* Fix close button to always be clickable */
#depositPopup .btn-close {
    position: relative !important;
    z-index: 9999 !important;
    padding: 0.5rem !important;
    margin: -0.5rem -0.5rem -0.5rem auto !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    display: block !important;
}

#depositPopup .btn-close:hover {
    opacity: 0.8 !important;
    transform: scale(1.1) !important;
}

/* Fix header to ensure close button is accessible */
#depositPopup .deposit-header {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.5rem !important;
}

/* Fix body scrolling */
#depositPopup .deposit-body {
    max-height: calc(100vh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2rem !important;
}

/* Mobile-specific fixes */
@media (max-width: 576px) {
    #depositPopup .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    #depositPopup .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #depositPopup .deposit-header {
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    }
    
    #depositPopup .deposit-body {
        flex: 1 1 auto !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 1.25rem !important;
        padding-bottom: 100px !important; /* Extra space at bottom */
    }
    
    /* Ensure close button is always visible and clickable on mobile */
    #depositPopup .btn-close {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        position: relative !important;
        z-index: 999999 !important;
    }
    
    /* Add touch target size */
    #depositPopup .btn-close::before {
        content: '×' !important;
        font-size: 28px !important;
        color: white !important;
        line-height: 1 !important;
    }
}

/* Ensure modal backdrop doesn't interfere */
.modal-backdrop {
    z-index: 1040 !important;
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    #depositPopup .deposit-body {
        -webkit-overflow-scrolling: touch !important;
    }
    
    #depositPopup .modal-content {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Ensure buttons and forms are accessible */
#depositPopup button,
#depositPopup input,
#depositPopup .payment-method-card {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix payment method cards to be clickable */
#depositPopup .payment-method-card {
    position: relative !important;
    z-index: 5 !important;
    cursor: pointer !important;
}

/* Ensure summary section is visible */
#depositPopup .deposit-summary {
    position: relative !important;
    z-index: 5 !important;
}

/* Fix proceed button */
#depositPopup #proceedPayment {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Scrollbar styling for better UX */
#depositPopup .deposit-body::-webkit-scrollbar {
    width: 8px;
}

#depositPopup .deposit-body::-webkit-scrollbar-track {
    background: #1a1a2e;
}

#depositPopup .deposit-body::-webkit-scrollbar-thumb {
    background: #3a3a4e;
    border-radius: 4px;
}

#depositPopup .deposit-body::-webkit-scrollbar-thumb:hover {
    background: #4a4a5e;
}

/* Ensure visibility */
#depositPopup.show {
    display: block !important;
}

#depositPopup.show .modal-dialog {
    transform: none !important;
}