/* Unique Wrapper to avoid conflict with .modal */
#CP-Modal-Wrapper {
    display: none; /* Controlled by JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    /* Higher than your sidebar (20000) and existing modals (11000) */
    z-index: 99999 !important; 
    align-items: center;
    justify-content: center;
}

#CP-Modal-Content {
    background: #1a1a1a;
    width: 90%;
    max-width: 380px;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #333;
    position: relative;
    color: white;
    
    /* Popup Animation */
    transform: scale(0.5);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animation Trigger */
#CP-Modal-Wrapper.active #CP-Modal-Content {
    transform: scale(1);
    opacity: 1;
}

#CP-Close-Btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: #888;
}

#CP-Modal-Content input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    background: #252525;
    border: 1px solid #444;
    border-radius: 8px;
    color: white;
    box-sizing: border-box;
}

#CP-Submit-Btn {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background: #3498db;
    border: none;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
}

#loginModal, #registerModal {
    z-index: 99999 !important; 
}

.modal-backdrop {
    z-index: 99998 !important;
    background-color: #000 !important;
}

.modal-backdrop.show {
    opacity: 0.85 !important;
}

/* Remove Bootstrap slide animation for the 'Pop' effect */
#loginModal.fade .modal-dialog,
#registerModal.fade .modal-dialog {
    transform: none !important; 
}

/* Apply Dark Style & Popup Animation to Bootstrap Modals */
#loginModal .modal-content, 
#registerModal .modal-content {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 15px !important;
    color: white !important;
    transform: scale(0.5) !important;
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Trigger Pop when Bootstrap adds .show */
#loginModal.show .modal-content, 
#registerModal.show .modal-content {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* Header & Title Styling */
#loginModal .modal-header, #registerModal .modal-header { border-bottom: 1px solid #333; }
#loginModal .modal-title, #registerModal .modal-title { color: #3498db; font-weight: bold; }

/* Input & Form Styling */
#loginModal .form-label, #registerModal .form-label { color: #bbb; }
#loginModal .form-control, #registerModal .form-control {
    background: #252525 !important;
    border: 1px solid #444 !important;
    color: white !important;
    border-radius: 8px;
}

#loginModal .btn-close, #registerModal .btn-close {
    filter: invert(1); /* White X button */
}

#loginBtn, #registerBtn {
    background-color: #3498db !important;
    border: none !important;
    font-weight: bold;
    padding: 12px;
}
/* Fix for the backdrop to match your CP modal style */
.modal-backdrop.show {
    opacity: 0.85 !important;
    background-color: #000 !important;
}

/* 1. Remove Bootstrap's default slide animation */
#loginModal.fade .modal-dialog,
#registerModal.fade .modal-dialog {
    transform: none !important; /* Disable Bootstrap's slide-down */
}

/* 2. Style the Content for the 'Pop' effect */
#loginModal .modal-content, 
#registerModal .modal-content {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 15px !important;
    color: white !important;
    
    /* INITIAL STATE: Small and Invisible */
    transform: scale(0.5) !important;
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 3. ACTIVE STATE: Pop to full size when modal opens */
#loginModal.show .modal-content, 
#registerModal.show .modal-content {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* 4. Fix Backdrop (Darker like your CP modal) */
.modal-backdrop.show {
    opacity: 0.85 !important;
    background-color: #000 !important;
}

/* 5. Dark Theme Internal Fixes */
#loginModal .form-control, #registerModal .form-control {
    background: #252525 !important;
    border: 1px solid #444 !important;
    color: white !important;
}

#loginModal .btn-close, #registerModal .btn-close {
    filter: invert(1); /* Makes 'X' white */
}

#loginBtn, #registerBtn {
    background-color: #3498db !important;
    border: none !important;
}
#loginModal
{
  z-index: 999999;
}