/* Authorize.Net Payment Fields for WooCommerce Blocks Checkout */

/* Hide the step numbers from WooCommerce Blocks checkout */
.wc-block-checkout__payment-method::before,
.wc-block-components-checkout-step::before,
.wc-block-components-checkout-step__heading::before,
.wc-block-checkout-step::before,
ol.wc-block-components-checkout-step-list > li::before {
    content: none !important;
    display: none !important;
}

.wc-block-checkout__payment-method,
.wc-block-components-checkout-step,
.wc-block-checkout-step,
ol.wc-block-components-checkout-step-list,
ol.wc-block-components-checkout-step-list > li {
    list-style: none !important;
    list-style-type: none !important;
}

/* Remove counter from ordered lists in checkout */
.wc-block-components-checkout-step-list {
    counter-reset: none !important;
}

.wc-block-components-checkout-step-list > li {
    counter-increment: none !important;
}

.authorize-net-payment-fields {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.authorize-net-payment-fields p {
    margin: 0 0 16px 0;
}

.authorize-net-payment-fields p:last-child {
    margin-bottom: 0;
}

.authorize-net-payment-fields label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: #2c3338;
}

.authorize-net-payment-fields input[type="text"],
.authorize-net-payment-fields input[type="tel"],
.authorize-net-payment-fields select {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    display: block !important;
    height: auto !important;
    min-height: 44px !important;
}

.authorize-net-payment-fields input:focus,
.authorize-net-payment-fields select:focus {
    outline: none !important;
    border-color: #007cba !important;
    box-shadow: 0 0 0 1px #007cba !important;
}

/* Card number field with icon */
.authorize-net-card-number-wrapper {
    position: relative;
}

.authorize-net-card-number-wrapper input {
    padding-right: 45px !important;
}

.authorize-net-card-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 16px;
    opacity: 0.6;
}

/* Expiry and CVC row */
.authorize-net-expiry-cvc-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.authorize-net-expiry-wrapper {
    flex: 2;
}

.authorize-net-cvc-wrapper {
    flex: 1;
}

.authorize-net-expiry-fields {
    display: flex;
    gap: 8px;
}

.authorize-net-expiry-fields > div {
    flex: 1;
}

/* CVC hint */
.authorize-net-cvc-hint {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    cursor: help;
    color: #666;
    font-size: 12px;
}

.authorize-net-cvc-hint::before {
    content: "?";
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border: 1px solid #999;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
}

.authorize-net-cvc-hint:hover::after {
    content: "3 or 4 digit security code on the back of your card";
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.authorize-net-cvc-hint:hover::before {
    border-color: #007cba;
    color: #007cba;
}

/* Error states */
.authorize-net-payment-fields input.error,
.authorize-net-payment-fields select.error {
    border-color: #cc1818 !important;
}

.authorize-net-error-message {
    color: #cc1818;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .authorize-net-expiry-cvc-row {
        flex-direction: column;
        gap: 0;
    }
    
    .authorize-net-expiry-wrapper,
    .authorize-net-cvc-wrapper {
        flex: 1;
        margin-bottom: 16px;
    }
    
    .authorize-net-payment-fields {
        padding: 16px;
    }
}

/* Loading state */
.authorize-net-payment-fields.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Card type icons */
.authorize-net-card-type-visa { color: #1434CB; }
.authorize-net-card-type-mastercard { color: #EB001B; }
.authorize-net-card-type-amex { color: #006FCF; }
.authorize-net-card-type-discover { color: #FF6000; }