@media (max-width: 1100px) {

    .payment-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .payment-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .admin-payments-header h1 {
        font-size: 22px;
    }

    .payment-summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .payment-filter-form {
        grid-template-columns: 1fr;
    }

    .payment-filter-form button,
    .payment-reset-btn {
        width: 100%;
    }

}


@media (max-width: 380px) {

    .admin-payments-header h1 {
        font-size: 19px;
    }

    .payment-summary-card h2 {
        font-size: 18px;
    }

}


@media (max-width: 700px) {

    .payment-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .payment-page-numbers {
        order: 1;
    }

    .payment-page-nav {
        width: 100%;
    }

}