/* File: styles/modal-mobile-fix.css */
/* CSS bổ sung để sửa lỗi modal trên mobile */
/* Phiên bản 2: Sử dụng menu trượt ngang */

/* Đảm bảo modal luôn hiển thị đúng */
#memberCenterModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 60 !important;
}

/* Cải thiện header modal trên mobile */
#memberCenterModal .flex.justify-between.items-center {
    position: relative;
    padding-right: 60px; /* Dành chỗ cho nút X */
}

/* Nút X mobile với vị trí cố định */
#closeMemberCenterMobile {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 70 !important;
    background: rgba(31, 41, 55, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Đảm bảo icon luôn hiển thị */
#closeMemberCenterMobile i {
    width: 24px !important;
    height: 24px !important;
    color: #e5e7eb !important;
}

/* Hover effect cho nút X */
#closeMemberCenterMobile:hover {
    background: rgba(239, 68, 68, 0.8) !important;
    transform: scale(1.05) !important;
}

/* ================================================= */
/* === GIẢI PHÁP MỚI: MENU TRƯỢT NGANG CHO MOBILE === */
/* ================================================= */
@media (max-width: 768px) {
    /* Container chứa menu */
    #memberCenterModal .w-full.md\\:w-1\\/4 {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* Cho phép thanh cuộn bên trong hoạt động */
        border-bottom: 1px solid #374151;
        padding-bottom: 0 !important;
    }
    
    /* CSS cho thanh menu trượt ngang */
    #member-menu {
        display: flex !important;
        flex-wrap: nowrap !important; /* Bắt buộc các mục nằm trên một hàng */
        overflow-x: auto !important; /* Kích hoạt thanh cuộn ngang */
        overflow-y: hidden !important; /* Tắt cuộn dọc */
        -webkit-overflow-scrolling: touch; /* Cuộn mượt trên iOS */
        padding: 12px 16px !important; /* Thêm padding cho đẹp */
        margin-top: 4px !important;
        gap: 24px !important; /* Khoảng cách giữa các icon menu */
    }

    /* Tùy chỉnh thanh cuộn cho đẹp hơn (tùy chọn) */
    #member-menu::-webkit-scrollbar {
        height: 4px;
        background-color: transparent;
    }
    #member-menu::-webkit-scrollbar-thumb {
        background-color: #4B5563;
        border-radius: 20px;
    }
    
    /* Đảm bảo vùng nội dung có đủ không gian */
    #member-content-area {
        padding-top: 16px !important;
        /* Tính toán lại chiều cao, trừ đi phần header và menu */
        height: calc(100vh - 140px) !important; 
        overflow-y: auto !important;
    }
}
/* ================================================= */
/* ============ KẾT THÚC PHẦN SỬA LỖI ============== */
/* ================================================= */


/* Cải thiện z-index cho tất cả modal */
.modal-backdropp {
    z-index: 60 !important;
}

/* Đảm bảo backdrop blur hoạt động */
.backdrop-filter {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Cải thiện nút rút tiền */
.btn-secondary {
    background: rgba(75, 85, 99, 0.8) !important;
    border: 1px solid rgba(156, 163, 175, 0.3) !important;
    color: #e5e7eb !important;
    transition: all 0.2s ease !important;
}

.btn-secondary:hover {
    background: rgba(107, 114, 128, 0.9) !important;
    border-color: rgba(156, 163, 175, 0.5) !important;
    color: #ffffff !important;
}

/* Cải thiện form styling */
.custom-input[type="number"] {
    -moz-appearance: textfield !important;
}

.custom-input[type="number"]::-webkit-outer-spin-button,
.custom-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Styling cho nút "Tất cả" */
.btn-secondary.px-3 {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    min-width: 60px !important;
}

/* Cải thiện responsive cho form */
@media (max-width: 640px) {
    .form-card {
        padding: 16px !important;
        margin: 0 8px !important;
    }
    
    .custom-input {
        font-size: 16px !important; /* Tránh zoom trên iOS */
    }
    
    .flex.gap-2 {
        /*flex-direction: column !important;*/
        gap: 8px !important;
    }
    
    .flex.gap-2 .custom-input {
        flex: none !important;
    }
    
    .flex.gap-2 .btn-secondary {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (min-width: 640px) {
    .flex.gap-2 {
        flex-direction: row !important;
    }
}

/* Đảm bảo loading spinner hiển thị đúng */
.loading-spinner {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top: 2px solid #ffffff !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cải thiện thông báo lỗi trên mobile */
@media (max-width: 768px) {
    #toastContainer {
        top: 80px !important;
        left: 16px !important;
        right: 16px !important;
        z-index: 80 !important;
    }
}

/* Cải thiện bank card display */
.bank-card-display {
    min-height: auto !important;
}

@media (max-width: 1024px) {
    .grid.grid-cols-1.lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .bank-card-display {
        order: -1 !important; /* Hiển thị thẻ ngân hàng trước trên mobile */
    }
}

/* Safe area cho các thiết bị có notch */
@supports (padding: max(0px)) {
    #memberCenterModal {
        padding-top: max(env(safe-area-inset-top), 0px) !important;
        padding-bottom: max(env(safe-area-inset-bottom), 0px) !important;
        padding-left: max(env(safe-area-inset-left), 0px) !important;
        padding-right: max(env(safe-area-inset-right), 0px) !important;
    }
    
    #closeMemberCenterMobile {
        top: max(env(safe-area-inset-top), 0px) !important;
        right: max(env(safe-area-inset-right), 0px) !important;
    }
}