/* Payment Page Specific Styles */
/* Collect.js iframe styles - adapted to match original payment page design */

.collect-js-field {
    height: calc(2.25rem + 2px);
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #000;
    border-radius: 0;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out;
    position: relative;
    overflow: hidden;
    max-height: calc(2.25rem + 2px);
}

.collect-js-field iframe {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.collect-js-field:focus,
.collect-js-field:focus-within {
    border-color: var(--kk-brand-red);
    box-shadow: none;
    outline: none;
}

.collect-js-field.is-invalid {
    border-color: #dc3545;
}

.collect-js-field.is-valid {
    border-color: #28a745;
}

.collect-js-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Ensure TEST MODE alert matches the old design */
.payment-page .alert-warning {
    border-radius: 0;
    border-left: 5px solid #ffc107;
}