:root {
    --admin-modal-header-bg: var(--primary-color, #0a68ac);
    --admin-modal-footer-bg: #f6f8fa;
    --admin-modal-border: #dfe6ec;
}

/*
 * Shared modal chrome for Bootstrap and the custom modal shells used by the
 * admin modules. Keep module-specific widths and body layouts untouched.
 */
.modal-content,
:is(
    .product-modal,
    .news-modal,
    .page-modal,
    .customer-modal,
    .testimonial-modal,
    .settings-modal,
    .admin-menu-modal,
    .contact-modal,
    .media-modal,
    .media-preview-modal,
    .template-modal,
    .nf-upload
) {
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 55px rgba(10, 35, 54, .24) !important;
}

.modal-content > .modal-header,
:is(
    .product-modal,
    .news-modal,
    .page-modal,
    .customer-modal,
    .testimonial-modal,
    .settings-modal,
    .admin-menu-modal,
    .contact-modal,
    .media-modal,
    .media-preview-modal,
    .template-modal,
    .nf-upload
) > header {
    align-items: center !important;
    background: var(--admin-modal-header-bg) !important;
    border: 0 !important;
    color: #fff !important;
    display: flex !important;
    justify-content: space-between !important;
    min-height: 46px !important;
    padding: 7px 14px !important;
    position: sticky !important;
    top: 0;
    z-index: 20 !important;
}

:is(
    .product-modal,
    .news-modal,
    .page-modal,
    .customer-modal,
    .testimonial-modal,
    .settings-modal,
    .admin-menu-modal,
    .contact-modal,
    .media-modal,
    .media-preview-modal,
    .template-modal,
    .nf-upload
) > header > div > span {
    display: none !important;
}

.modal-content > .modal-header :is(.modal-title, h1, h2, h3, h4, h5, h6),
:is(
    .product-modal,
    .news-modal,
    .page-modal,
    .customer-modal,
    .testimonial-modal,
    .settings-modal,
    .admin-menu-modal,
    .contact-modal,
    .media-modal,
    .media-preview-modal,
    .template-modal,
    .nf-upload
) > header :is(h1, h2, h3, h4, h5, h6) {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

.modal-content > .modal-header .btn-close,
:is(
    .product-modal,
    .news-modal,
    .page-modal,
    .customer-modal,
    .testimonial-modal,
    .settings-modal,
    .admin-menu-modal,
    .contact-modal,
    .media-modal,
    .media-preview-modal,
    .template-modal,
    .nf-upload
) > header .btn-close {
    filter: brightness(0) invert(1);
    margin: 0 !important;
    opacity: .88;
    padding: 8px !important;
}

:is(
    .product-modal,
    .news-modal,
    .page-modal,
    .customer-modal,
    .testimonial-modal,
    .settings-modal,
    .admin-menu-modal,
    .contact-modal,
    .media-modal,
    .media-preview-modal,
    .template-modal,
    .nf-upload
) > header > button:not(.btn-close) {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff !important;
    display: inline-flex !important;
    font-size: 22px !important;
    height: 30px !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 30px !important;
}

.modal-content > .modal-footer,
:is(
    .product-modal,
    .news-modal,
    .page-modal,
    .customer-modal,
    .testimonial-modal,
    .settings-modal,
    .admin-menu-modal,
    .contact-modal,
    .media-modal,
    .template-modal,
    .nf-upload
) > footer,
:is(
    .product-modal,
    .customer-modal,
    .testimonial-modal,
    .settings-modal,
    .admin-menu-modal,
    .media-modal,
    .template-modal
) > form > footer {
    align-items: center !important;
    background: var(--admin-modal-footer-bg) !important;
    border: 0 !important;
    border-top: 1px solid var(--admin-modal-border) !important;
    bottom: 0;
    display: flex !important;
    gap: 7px !important;
    justify-content: flex-end !important;
    min-height: 46px !important;
    padding: 7px 14px !important;
    position: sticky !important;
    z-index: 20 !important;
}

.modal-content > .modal-footer > :is(button, a),
:is(
    .product-modal,
    .news-modal,
    .page-modal,
    .customer-modal,
    .testimonial-modal,
    .settings-modal,
    .admin-menu-modal,
    .contact-modal,
    .media-modal,
    .template-modal,
    .nf-upload
) footer > :is(button, a) {
    border-radius: 4px !important;
    font-size: 13px !important;
    min-height: 32px !important;
    padding: 5px 12px !important;
}

@media (max-width: 575.98px) {
    .modal-content > .modal-header,
    :is(
        .product-modal,
        .news-modal,
        .page-modal,
        .customer-modal,
        .testimonial-modal,
        .settings-modal,
        .admin-menu-modal,
        .contact-modal,
        .media-modal,
        .media-preview-modal,
        .template-modal,
        .nf-upload
    ) > header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}