/* Painéis de pagamento da loja. Mantidos separados dos estilos da carteira. */
#pix-payment-modal,
#payment-method-modal {
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.universal-gift-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(4, 5, 8, .82);
}

.universal-gift-panel {
    width: min(100%, 520px);
    max-height: min(760px, calc(100dvh - 2rem));
    overflow-y: auto;
    padding: clamp(1.15rem, 4vw, 2rem);
    border: 1px solid #2b2d35;
    border-radius: 18px;
    background: #101115;
    color: #f7f7f8;
}

.universal-gift-panel h2 { margin: 0 0 .5rem; font-size: clamp(1.25rem, 5vw, 1.75rem); }
.universal-gift-panel > p { margin: 0 0 1.25rem; color: #a7a8b0; line-height: 1.5; }
.universal-gift-choice, .universal-gift-cancel, .universal-gift-results button {
    width: 100%; min-height: 46px; margin-top: .65rem; padding: .75rem 1rem;
    border: 1px solid #343640; border-radius: 11px; background: #191a20; color: #fff; font-weight: 700; cursor: pointer;
}
.universal-gift-choice.is-primary { background: #39d3a0; border-color: #39d3a0; color: #07130f; }
.universal-gift-choice:disabled { opacity: .45; cursor: not-allowed; }
.universal-gift-cancel { background: transparent; color: #a7a8b0; }
.universal-gift-form { margin-top: .75rem; }
.universal-gift-form input, .universal-gift-form textarea {
    box-sizing: border-box; width: 100%; margin-top: .65rem; padding: .8rem .9rem;
    border: 1px solid #343640; border-radius: 10px; background: #090a0d; color: #fff; font: inherit;
}
.universal-gift-form textarea { min-height: 92px; resize: vertical; }
.universal-gift-results { display: grid; gap: .35rem; max-height: 180px; overflow-y: auto; }
.universal-gift-results button { margin-top: .35rem; text-align: left; }
.universal-gift-status { min-height: 1.25rem; margin: .65rem 0 0; color: #a7a8b0; font-size: .85rem; }

@media (max-width: 480px) {
    .universal-gift-modal { align-items: end; padding: 0; }
    .universal-gift-panel { width: 100%; max-height: 88dvh; border-radius: 18px 18px 0 0; }
}

.pix-modal-content {
    box-sizing: border-box;
    width: min(100%, 480px);
    max-width: 480px;
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.pix-modal-content h2 {
    padding-inline: 2rem;
    font-size: clamp(1.25rem, 5vw, 1.8rem);
    line-height: 1.2;
}

.pix-modal-content > p {
    margin-bottom: clamp(0.8rem, 3vh, 1.5rem) !important;
}

.qr-code-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(180px, min(72vw, 38vh), 320px);
    aspect-ratio: 1;
    height: auto;
    margin: 0 auto clamp(0.8rem, 2.5vh, 1.5rem);
    padding: clamp(6px, 2vw, 10px);
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    background: #fff;
}

.qr-code-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-radius: inherit;
    background: rgba(18, 18, 20, 0.94);
    color: #fff;
}

.copy-paste-container {
    width: 100%;
    min-width: 0;
    margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
    text-align: left;
}

.copy-paste-container label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--cor-texto-secundario);
    font-size: 0.9rem;
    font-weight: 600;
}

.input-with-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.input-with-copy input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-background-alt);
    color: var(--cor-texto-principal);
    font-family: monospace;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
}

.copy-btn {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-surface-active);
    color: #fff;
    cursor: pointer;
}

.payment-timer {
    margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
    padding: clamp(0.65rem, 2vw, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.payment-timer p,
.payment-note {
    margin-bottom: 0.6rem !important;
    font-size: clamp(0.8rem, 3.2vw, 0.95rem) !important;
    line-height: 1.45 !important;
}

.timer-bar {
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

#pix-timer-progress {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #32bcad, var(--cor-primaria));
}

@media (max-width: 480px) {
    #pix-payment-modal,
    #payment-method-modal {
        padding: 8px;
    }

    .pix-modal-content,
    .payment-method-modal-content {
        width: 100% !important;
        max-width: none !important;
        border-radius: 16px !important;
        padding: 1rem !important;
    }

    .pix-modal-content .close-button {
        top: 8px !important;
        right: 8px !important;
    }
}

@media (max-height: 700px) {
    .pix-modal-content {
        padding-block: 1rem;
    }

    .pix-modal-content h2 {
        margin-bottom: 0.5rem;
    }

    .qr-code-container {
        width: clamp(160px, 32vh, 220px);
    }

    .payment-note {
        margin-bottom: 0 !important;
    }
}