/**
 * Midwest Armor Payments - Checkout Styles
 * @version 1.2.65
 */

/* Fade-in animation to prevent flash on WooCommerce AJAX refresh */
@keyframes mwa-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Express Checkout Wrapper - appears before payment methods */
.mwa-express-checkout-wrapper {
    margin-bottom: 20px;
    animation: mwa-fade-in 0.3s ease-out;
}

/* Express Checkout Section */
.mwa-express-checkout {
    margin-bottom: 15px;
}

/* Inline layout - Apple Pay and Google Pay side by side */
.mwa-express-checkout.mwa-express-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mwa-express-checkout.mwa-express-inline .mwa-express-button {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .mwa-express-checkout.mwa-express-inline {
        grid-template-columns: 1fr;
    }
}

/* Express buttons at top of checkout - no container, full width */
.mwa-express-checkout-top {
    margin-bottom: 25px;
    animation: mwa-fade-in 0.3s ease-out;
}

.mwa-express-checkout-top .mwa-express-checkout {
    margin-bottom: 10px;
}

.mwa-express-checkout-top .mwa-express-divider span {
    background: #fff;
}

/* Payment Form Container - fade in to prevent flash */
.mwa-payments-form {
    padding: 10px 0;
    animation: mwa-fade-in 0.3s ease-out;
}

/* Hide iframe containers until loaded */
.mwa-input-wrapper:empty {
    min-height: 44px;
    background: #f5f5f5;
    border-radius: 4px;
}

/* When iframe is present, show smoothly */
.mwa-input-wrapper iframe {
    animation: mwa-fade-in 0.2s ease-out;
}

.mwa-express-button {
    min-height: 48px;
    margin-bottom: 10px;
}

.mwa-express-button:last-child {
    margin-bottom: 0;
}

#mwa-apple-pay-checkout iframe,
#mwa-google-pay-checkout iframe {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 4px;
}

/* Express Divider */
.mwa-express-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.mwa-express-divider:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #e0e0e0;
}

.mwa-express-divider span {
    background: #fff;
    padding: 0 15px;
    position: relative;
    color: #757575;
    font-size: 13px;
    text-transform: lowercase;
}

/* Divider inside top express section has gray background */
.mwa-express-checkout-top .mwa-express-divider span {
    background: #f8f9fa;
}

/* Top express buttons - same height for both */
#mwa-apple-pay-top,
#mwa-google-pay-top {
    min-height: 48px;
    height: 48px;
}

#mwa-apple-pay-top iframe,
#mwa-google-pay-top iframe {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 4px;
}

/* Google Pay button container fix */
#mwa-google-pay-top .gpay-card-info-container,
#mwa-google-pay-sidecart .gpay-card-info-container {
    height: 48px !important;
    min-height: 48px !important;
}

/* Card Fields */
.mwa-card-fields {
    margin-top: 0;
}

.mwa-field {
    margin-bottom: 15px;
}

.mwa-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 14px;
}

.mwa-field label .required {
    color: #dc3545;
}

.mwa-input-wrapper {
    position: relative;
}

.mwa-input-wrapper iframe {
    width: 100% !important;
}

.mwa-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 480px) {
    .mwa-field-row {
        grid-template-columns: 1fr;
    }
}

/* Error Container */
.mwa-payment-errors {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px 15px;
    border-radius: 4px;
    margin-top: 15px;
    font-size: 13px;
}

/* Loading State */
.mwa-payments-form.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Card Type Icons */
.mwa-card-icons {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.mwa-card-icons img {
    height: 24px;
    width: auto;
}

/* Express Cart Styles */
.mwa-express-cart {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

#mwa-apple-pay-cart,
#mwa-google-pay-cart {
    min-height: 48px;
    margin-bottom: 10px;
}

#mwa-apple-pay-cart:last-child,
#mwa-google-pay-cart:last-child {
    margin-bottom: 0;
}

/* Hide Place Order button when Apple Pay or Google Pay is selected */
body.mwa-wallet-payment-selected #place_order,
body.mwa-wallet-payment-selected .wfacp-order-place-btn-wrap,
body.mwa-wallet-payment-selected #fkwcs-stripe-pay-now,
body.mwa-wallet-payment-selected .woocommerce-checkout-payment .place-order #place_order {
    display: none !important;
}

/* Apple Pay Gateway Wrapper */
.mwa-apple-pay-gateway-wrapper,
.mwa-google-pay-gateway-wrapper {
    padding: 15px 0;
}

.mwa-apple-pay-button-container,
.mwa-google-pay-button-container {
    min-height: 48px;
}

.mwa-apple-pay-button-container apple-pay-button {
    display: block;
}

/* Cart page Express Checkout button */
#mwa-apple-pay-cart {
    min-height: 48px;
}

#mwa-apple-pay-cart apple-pay-button {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 48px;
}

/* Loading state for wallet buttons */
.mwa-apple-pay-button-container.mwa-loading,
.mwa-google-pay-button-container.mwa-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Payment Gateway Icons - Apple Pay & Google Pay marks */
.payment_method_mwa_apple_pay .mwa-apple-pay-mark,
.payment_method_mwa_google_pay .mwa-google-pay-mark {
    height: 24px;
    width: auto;
    vertical-align: middle;
    margin-left: 4px;
}

/* Apple Pay mark is a badge, needs slightly different sizing */
.payment_method_mwa_apple_pay .mwa-apple-pay-mark {
    height: 28px;
}

/* Sidecart Express Buttons */
.mwa-express-sidecart {
    padding: 12px 16px;
    margin-bottom: 10px;
}

.mwa-express-sidecart #mwa-apple-pay-sidecart,
.mwa-express-sidecart #mwa-google-pay-sidecart {
    min-height: 44px;
}

.mwa-express-sidecart apple-pay-button {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 44px;
}

/* Ensure apple-pay-button renders in FunnelKit cart */
#fkcart-modal .mwa-express-sidecart apple-pay-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
 * Standard WooCommerce Payment Box Visibility
 * ============================================
 * 
 * These styles help with initial load on standard WooCommerce checkout.
 * WooCommerce uses JavaScript to toggle payment boxes, so we just help
 * with the initial state before JS runs.
 * 
 * FunnelKit (.wfacp_checkout) and CheckoutWC (.cfw-checkout) are excluded.
 */

/* On standard WC checkout, hide Apple Pay box initially if Credit Card is checked */
/* This prevents both boxes showing on initial load before WC's JS runs */
body.woocommerce-checkout:not(.wfacp_checkout):not(.cfw-checkout) .wc_payment_method.payment_method_mwa_payments input:checked ~ .wc_payment_method .payment_box.payment_method_mwa_apple_pay,
body.woocommerce-checkout:not(.wfacp_checkout):not(.cfw-checkout) #payment_method_mwa_payments:checked ~ * .payment_box.payment_method_mwa_apple_pay {
    /* Intentionally empty - WooCommerce JS handles visibility */
}

/* ============================================
 * Apple Pay Button Rendering
 * ============================================
 * The apple-pay-button is a native custom HTML element that renders
 * on Safari/WebKit browsers with Apple Pay support.
 * 
 * IMPORTANT: Do NOT add -webkit-appearance or other styling that
 * might interfere with the native button rendering.
 */

/* Fallback for when apple-pay-button doesn't render - hide empty container */
#mwa-apple-pay-cart:empty,
#mwa-apple-pay-top:empty {
    display: none !important;
}