.acsp-direct-payment {
    max-width: 520px;
}

.acsp-direct-payment-form {
    display: grid;
    gap: 16px;
}

.acsp-direct-payment-form label {
    display: grid;
    gap: 6px;
    font-weight: 600;
}

.acsp-direct-payment-form label[hidden] {
    display: none !important;
}

.acsp-direct-payment-form input,
.acsp-direct-payment-card {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
}

.acsp-direct-payment-discount-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.acsp-direct-payment-discount-row input {
    min-width: 0;
}

.acsp-direct-payment-form button {
    min-height: 44px;
    cursor: pointer;
}

.acsp-direct-payment-apply-code {
    padding-right: 18px;
    padding-left: 18px;
    border: 1px solid #0b2545;
    border-radius: 4px;
    background: #0b2545;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.acsp-direct-payment-apply-code:hover,
.acsp-direct-payment-apply-code:focus {
    border-color: #ffb703;
    background: #ffb703;
    color: #0b2545;
}

.acsp-direct-payment-form button.is-loading {
    opacity: 0.72;
    cursor: wait;
}

.acsp-direct-payment-message {
    min-height: 22px;
}

.acsp-direct-payment-message.is-error {
    color: #b91c1c;
}

.acsp-direct-payment-message.is-success {
    color: #047857;
}

@media (max-width: 520px) {
    .acsp-direct-payment-discount-row {
        grid-template-columns: 1fr;
    }
}