/* Verification Modals Styling (Common for Trustman and Membership) */
/* Fix z-index layering so modal and backdrop display ON TOP of the sticky header */
header {
    z-index: 1020 !important;
}
.modal {
    z-index: 100050 !important;
}
.modal-backdrop {
    z-index: 100040 !important;
}

.shadow-premium { 
    box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important; 
}

.modal-rounded {
    border-radius: 20px !important;
}

.bg-danger-light { 
    background-color: rgba(214, 40, 40, 0.1); 
}

.modal-logo-sm {
    width: 35px; 
    height: 35px; 
    object-fit: contain; 
}

.modal-header img {
    filter: brightness(0) invert(1);
}

.modal-body-visible {
    overflow: visible !important;
}

.modal-avatar-lg {
    width: 140px; 
    height: 140px; 
    object-fit: cover;
}

.modal-status-check {
    width: 35px; 
    height: 35px; 
    border: 3px solid #fff;
}

.modal-name-title {
    letter-spacing: -0.5px;
}

.modal-id-badge {
    font-size: 0.85rem;
}

.modal-details-label { 
    font-size: 0.65rem; 
    letter-spacing: 0.5px; 
    margin-bottom: 2px !important; 
    text-transform: uppercase;
    font-weight: bold;
    color: #6c757d;
}

.modal-address-text {
    line-height: 1.3;
}

/* Ensure modal content is visible and layout is robust */
#trustModal .modal-body, 
#trustModal .row, 
#trustModal .col-md-7,
#memberModal .modal-body, 
#memberModal .row, 
#memberModal .col-md-7 { 
    overflow: visible !important; 
    max-height: none !important; 
}

/* Responsive adjustments for verification modals */
@media (max-width: 768px) {
    /* Reset Centering to make the modal scroll naturally when height exceeds viewport */
    #trustModal .modal-dialog-centered,
    #memberModal .modal-dialog-centered {
        display: block !important;
        min-height: auto !important;
        margin: 80px auto 1rem auto !important; /* Clear the sticky header on mobile */
    }

    #trustModal .modal-dialog,
    #memberModal .modal-dialog {
        max-width: 95% !important;
        margin: 80px auto 1rem auto !important; /* Clear the sticky header on mobile */
    }

    #trustModal .modal-content,
    #memberModal .modal-content {
        border-radius: 16px !important;
    }

    #trustModal .modal-header,
    #memberModal .modal-header { 
        padding: 1.25rem 1rem !important; 
    }
    
    #trustModal .modal-title,
    #memberModal .modal-title { 
        font-size: 1.1rem; 
    }
    
    #trustModal .col-md-5,
    #memberModal .col-md-5 { 
        border-bottom: 1px solid #dee2e6; 
        border-right: none !important; 
        padding: 1.5rem 1rem !important; 
    }
    
    #trustModal .col-md-7,
    #memberModal .col-md-7 { 
        padding: 1.25rem !important; 
    }
    
    #trustModal .row.g-0,
    #memberModal .row.g-0 { 
        display: block !important; 
    }

    /* Make Avatar more compact on mobile to save valuable screen estate */
    #trustModal .modal-avatar-lg,
    #memberModal .modal-avatar-lg {
        width: 110px !important;
        height: 110px !important;
    }

    #trustModal .modal-status-check,
    #memberModal .modal-status-check {
        width: 30px !important;
        height: 30px !important;
    }

    /* Tighten vertical details layout on mobile */
    #trustModal .modal-name-title,
    #memberModal .modal-name-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    #trustModal .modal-id-badge,
    #memberModal .modal-id-badge {
        margin-bottom: 0.75rem !important;
    }
}

/* Extra support for extremely small screens (height or width) */
@media (max-height: 650px) and (max-width: 768px) {
    #trustModal .modal-dialog,
    #memberModal .modal-dialog {
        margin: 0.25rem auto !important;
    }

    #trustModal .col-md-5,
    #memberModal .col-md-5 {
        padding: 1rem 1rem !important;
    }
}