/* Payment Link Modal Responsive Styles */

.payment-link-modal .modal-dialog {
    max-width: 700px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .payment-link-modal .row {
        flex-direction: column;
    }

    .payment-link-modal .col-md-6 {
        margin-bottom: 2rem;
    }

    .payment-link-modal .col-md-6:last-child {
        margin-bottom: 0;
    }

    .payment-link-modal .input-group {
        flex-wrap: nowrap;
    }

    .payment-link-modal .btn {
        min-height: 44px;
        font-size: 14px;
        white-space: nowrap;
    }

    .payment-link-modal .btn-outline-secondary {
        padding: 0.5rem 0.75rem;
    }

    #qr-code-canvas {
        max-width: 180px !important;
        max-height: 180px !important;
    }

    .payment-link-modal .form-control {
        font-size: 14px;
        padding: 0.5rem;
    }

    .payment-link-modal .card {
        font-size: 12px;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .payment-link-modal .modal-dialog {
        max-width: 95vw;
        margin: 0.5rem;
    }

    .payment-link-modal .modal-content {
        border-radius: 0.25rem;
    }

    #qr-code-canvas {
        max-width: 150px !important;
        max-height: 150px !important;
    }

    .payment-link-modal .btn {
        font-size: 12px;
        padding: 0.4rem 0.6rem;
    }
}