/* Custom-UI compatibility only. The approved checkout layout and visual
   system remain in payment.html's original stylesheet. */
.payment-form {
    min-width: 0;
}

.method-btn.unavailable {
    cursor: not-allowed;
    opacity: 0.46;
    filter: saturate(0.45);
}

.method-btn.unavailable:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.03);
}

.payment-field-error {
    margin: 0.35rem 0 0;
    color: #ff8e91;
    font-size: 0.74rem;
    line-height: 1.4;
}

.payment-field-error:empty {
    display: none;
}

.modern-input[aria-invalid="true"] {
    border-color: #ff7379;
    box-shadow: 0 0 0 3px rgba(255, 115, 121, 0.12);
}

.payment-inline-error {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.35rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 115, 121, 0.25);
    border-radius: 12px;
    color: #ffd7d9;
    background: rgba(255, 115, 121, 0.07);
    font-size: 0.8rem;
    line-height: 1.55;
}

.payment-inline-error[hidden] {
    display: none;
}

.payment-inline-error i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: #ff8e91;
}

.pulse-pay-btn:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    transform: none;
}

.pulse-pay-btn[aria-busy="true"] {
    cursor: wait;
}

.pulse-pay-btn .fa-spinner {
    animation: payment-button-spin 0.8s linear infinite;
}

@keyframes payment-button-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .payment-form,
    .modern-form-row,
    .modern-input {
        min-width: 0;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pulse-pay-btn .fa-spinner {
        animation-duration: 1.5s;
    }
}