/* Shared MUSW modal design used by public and administration pages. */
.modal:not(.premium-image-modal) {
    --musw-modal-navy: #0b2a4a;
    --musw-modal-blue: #1769e0;
    --musw-modal-green: #07956d;
    --musw-modal-border: #dce6f0;
    --musw-modal-surface: #f5f8fc;
}

.modal:not(.premium-image-modal) .modal-dialog {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}

/* Member and registration detail previews need comfortable reading width. */
#previewModal .modal-dialog {
    width: min(720px, calc(100% - 24px)) !important;
    max-width: 720px !important;
    min-height: calc(100vh - 3.5rem);
    display: flex;
    align-items: center;
    margin: 1.75rem auto !important;
}

#previewModal .modal-content {
    max-height: calc(100vh - 3.5rem);
}

.modal:not(.premium-image-modal) .modal-content {
    overflow: hidden;
    border: 0 !important;
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 28px 80px rgba(6, 27, 52, .28) !important;
}

.modal:not(.premium-image-modal) .modal-header {
    min-height: 62px;
    padding: 14px 18px 14px 22px !important;
    border: 0 !important;
    background: linear-gradient(120deg, var(--musw-modal-navy), #0e4f91 58%, var(--musw-modal-green)) !important;
    color: #fff !important;
}

.modal:not(.premium-image-modal) .modal-title {
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.modal:not(.premium-image-modal) .modal-header .btn-close {
    width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    background-color: rgba(255,255,255,.16) !important;
    background-size: 12px;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 1;
    transition: background-color .18s ease, transform .18s ease;
}

.modal:not(.premium-image-modal) .modal-header .btn-close:hover {
    background-color: #ef3f50 !important;
    transform: rotate(90deg);
}

.modal:not(.premium-image-modal) .modal-body {
    max-height: min(68vh, 650px);
    overflow-y: auto;
    padding: 20px 22px !important;
    color: #243750;
    background: var(--musw-modal-surface);
    scrollbar-width: thin;
    scrollbar-color: #9eb2c8 transparent;
}

.modal:not(.premium-image-modal) .modal-body::-webkit-scrollbar { width: 7px; }
.modal:not(.premium-image-modal) .modal-body::-webkit-scrollbar-thumb { background: #9eb2c8; border-radius: 10px; }

.modal:not(.premium-image-modal) .modal-body .card,
.modal:not(.premium-image-modal) .modal-body .info-section,
.modal:not(.premium-image-modal) .modal-body fieldset {
    margin-bottom: 14px;
    border: 1px solid var(--musw-modal-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(11, 42, 74, .05) !important;
}

.modal:not(.premium-image-modal) .modal-body .card-header {
    padding: 11px 14px;
    border-bottom: 1px solid var(--musw-modal-border);
    border-radius: 12px 12px 0 0 !important;
    background: linear-gradient(90deg, #e7f5ef, #edf4ff) !important;
    color: #076b52 !important;
    font-weight: 800;
}

.modal:not(.premium-image-modal) .modal-footer {
    padding: 13px 18px !important;
    border-top: 1px solid var(--musw-modal-border) !important;
    background: #fff;
}

.modal:not(.premium-image-modal) .modal-footer .btn {
    min-width: 88px;
    border: 0;
    border-radius: 9px;
    padding: 8px 16px;
    font-weight: 700;
    box-shadow: 0 5px 14px rgba(11, 42, 74, .12);
}

.modal:not(.premium-image-modal) .modal-footer .btn-primary,
.modal:not(.premium-image-modal) .modal-footer .btn-success {
    background: linear-gradient(120deg, var(--musw-modal-green), var(--musw-modal-blue));
}

.modal-backdrop.show {
    opacity: .62 !important;
    background: #071b31;
    backdrop-filter: blur(2px);
}

@media (max-width: 575.98px) {
    .modal:not(.premium-image-modal) .modal-dialog { margin: .75rem; }
    .modal:not(.premium-image-modal) .modal-content { border-radius: 14px !important; }
    .modal:not(.premium-image-modal) .modal-header { min-height: 56px; padding: 11px 13px 11px 16px !important; }
    .modal:not(.premium-image-modal) .modal-body { max-height: 72vh; padding: 14px !important; }
    .modal:not(.premium-image-modal) .modal-footer { padding: 11px 14px !important; }
}