/* === Mobile fixes (loaded after style.css and phony-pay-ui.css) === */

/* === Login/Register modal mobile fix === */
@media (max-width: 720px) {
    .modal {
        padding: 0 !important;
        align-items: flex-start !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0 !important;
        padding: 24px 18px 40px !important;
        margin: 0 !important;
        box-shadow: none !important;
        animation: none !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .modal-content > h2:first-of-type {
        margin-top: 28px !important;
        font-size: 1.5rem !important;
    }
    .modal-close {
        top: 12px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 5;
    }
    .modal-content input,
    .modal-content .form-control {
        font-size: 16px !important; /* prevents iOS zoom on focus */
        padding: 14px 16px !important;
    }
    .modal-content .btn,
    .modal-content button {
        font-size: 16px !important;
        padding: 14px 18px !important;
        min-height: 50px;
    }
    .modal-content form {
        margin-top: 1rem !important;
    }
}
@media (max-width: 720px) {
    /* Lock body scroll while modal is open */
    body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* === Phony Pay invoice — mobile === */
@media (max-width: 720px) {
    .ph-pay-invoice {
        padding: 14px !important;
        gap: 14px !important;
    }
    .ph-pay-invoice-header {
        flex-direction: column;
        gap: 8px;
        align-items: stretch !important;
    }
    .ph-pay-status {
        text-align: center;
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    .ph-pay-countdown {
        text-align: center;
        font-size: 20px !important;
    }
    .ph-pay-coin-banner {
        padding: 12px !important;
        gap: 10px !important;
    }
    .ph-pay-chip-img-wrap.big {
        width: 44px !important;
        height: 44px !important;
    }
    .ph-pay-coin-banner-name { font-size: 14px !important; }
    .ph-pay-qr-wrap { padding: 0; }
    .ph-pay-qr { padding: 10px !important; border-radius: 12px !important; }
    .ph-pay-qr img { width: 220px !important; height: 220px !important; }
    .ph-pay-amount-display { padding: 4px 0; }
    .ph-pay-crypto { font-size: 28px !important; }
    .ph-pay-crypto span { font-size: 18px !important; }
    .ph-pay-network { font-size: 11px !important; }
    
    /* Detail rows — stack label, value, copy nicely */
    .ph-pay-detail-row {
        grid-template-columns: 1fr auto !important;
        gap: 6px 10px !important;
        padding: 10px 12px !important;
    }
    .ph-pay-detail-label {
        grid-column: 1 / -1 !important;
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--text-muted) !important;
        margin-bottom: -2px;
    }
    .ph-pay-detail-val {
        grid-column: 1 !important;
        font-size: 12px !important;
        word-break: break-all;
        line-height: 1.35;
    }
    .ph-pay-detail-row .ph-pay-copy {
        grid-column: 2 !important;
        align-self: start;
        margin-top: 14px;
    }
    
    .ph-pay-info-grid {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    .ph-pay-info-grid > div {
        flex-wrap: wrap;
        gap: 4px 10px !important;
    }
    .ph-pay-warning {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    .ph-pay-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .ph-pay-actions .btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
        min-height: 48px;
    }
    
    /* Topup form on mobile */
    .ph-pay-form { gap: 16px !important; }
    .ph-pay-amount-row { padding: 4px 14px !important; }
    .ph-pay-amount-row input { font-size: 24px !important; padding: 12px 0 !important; }
    .ph-pay-cur { font-size: 24px !important; }
    .ph-pay-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .ph-pay-chip {
        padding: 12px 6px !important;
    }
    .ph-pay-chip-img-wrap {
        width: 32px !important;
        height: 32px !important;
    }
    .ph-pay-chip-label { font-size: 13px !important; }
    .ph-pay-chip-net { font-size: 9.5px !important; }
}

@media (max-width: 380px) {
    .ph-pay-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ph-pay-qr img { width: 200px !important; height: 200px !important; }
    .ph-pay-crypto { font-size: 24px !important; }
}