/**
 * Cardstream Payment Gateway Styles
 */

/* Payment method logo styling */
.woocommerce-checkout .payment_methods .payment_method_cardstream_hosted_payment img,
.woocommerce-account .payment_methods .payment_method_cardstream_hosted_payment img {
    max-height: 50px;
    height: auto;
    vertical-align: middle;
    margin-left: 10px;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Admin payment settings logo preview */
.woocommerce_page_wc-settings .payment_logo img {
    max-height: 40px;
    height: auto;
    vertical-align: middle;
    margin-left: 10px;
    border: 1px solid #ddd;
    padding: 5px;
    background: #f9f9f9;
    border-radius: 3px;
}

/* Ensure logo doesn't break layout on mobile */
@media (max-width: 768px) {
    .woocommerce-checkout .payment_methods .payment_method_cardstream_hosted_payment img,
    .woocommerce-account .payment_methods .payment_method_cardstream_hosted_payment img {
        max-height: 32px;
        margin-left: 5px;
    }
}

/* Logo container alignment */
.payment_method_cardstream_hosted_payment label {
    align-items: center;
}

.payment_method_cardstream_hosted_payment label img {
    flex-shrink: 0;
}

/* Payment description styling */
.cardstream-hosted-description-container,
.cardstream-hosted-payment-description {
    clear: both;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    padding: 10px 0 !important;
}

.cardstream-payment-description {
    color: #666;
    font-size: 0.9em;
    line-height: 1.6;
}

.cardstream-payment-description p {
    margin: 0 0 10px 0;
}

.cardstream-payment-description p:last-child {
    margin-bottom: 0;
}

/* =============================================
   Classic Checkout - Instant Payment Method Switch
   ============================================= */

/* Hide Place Order button instantly when Apple Pay is selected */
body.cardstream-applepay-selected #place_order {
    display: none !important;
}

/* Show Apple Pay button instantly when selected */
body.cardstream-applepay-selected #cardstream-apple-pay-checkout-btn {
    display: block !important;
}

/* Hide Place Order button instantly when Google Pay is selected */
body.cardstream-googlepay-selected #place_order {
    display: none !important;
}

/* Show Google Pay button instantly when selected */
body.cardstream-googlepay-selected #cardstream-google-pay-checkout-btn {
    display: block !important;
}

/* =============================================
   Apple Pay Button Styles
   ============================================= */

/* Apple Pay button element - Shadow DOM accepts these properties */
apple-pay-button,
apple-pay-button.cardstream-apple-pay-button {
    --apple-pay-button-width: 240px;
    --apple-pay-button-height: 40px;
    --apple-pay-button-border-radius: 4px;
    --apple-pay-button-padding: 0;
    --apple-pay-button-box-sizing: border-box;
    width: 240px !important;
    height: 40px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Apple Pay button container */
.cardstream-apple-pay-btn-container,
#cardstream-apple-pay-cart-btn,
#cardstream-apple-pay-cart-block-btn,
#cardstream-apple-pay-checkout-btn {
    text-align: center;
    width: 100%;
}

/* Block checkout - right aligned */
#cardstream-apple-pay-place-order-area,
#cardstream-apple-pay-block-content-main {
    text-align: right;
    width: 100%;
}

#cardstream-apple-pay-place-order-area apple-pay-button,
#cardstream-apple-pay-place-order-area apple-pay-button.cardstream-apple-pay-button,
#cardstream-apple-pay-block-content-main apple-pay-button,
#cardstream-apple-pay-block-content-main apple-pay-button.cardstream-apple-pay-button {
    margin: 0 0 0 auto !important;
}

/* Product page - left aligned */
#cardstream-apple-pay-product-btn {
    text-align: left;
    width: 100%;
}

#cardstream-apple-pay-product-btn apple-pay-button,
#cardstream-apple-pay-product-btn apple-pay-button.cardstream-apple-pay-button {
    margin: 0 !important;
}

/* =============================================
   Google Pay Button Styles
   ============================================= */

/* Google Pay button container */
.cardstream-google-pay-btn-container,
#cardstream-google-pay-cart-btn,
#cardstream-google-pay-cart-block-btn,
#cardstream-google-pay-checkout-btn {
    text-align: center;
    width: 100%;
}

/* Block checkout - right aligned */
#cardstream-google-pay-place-order-area,
#cardstream-google-pay-block-content-main {
    text-align: right;
    width: 100%;
}

#cardstream-google-pay-place-order-area .cardstream-google-pay-button,
#cardstream-google-pay-place-order-area .gpay-button,
#cardstream-google-pay-block-content-main .cardstream-google-pay-button,
#cardstream-google-pay-block-content-main .gpay-button {
    margin: 0 0 0 auto !important;
}

/* Product page - left aligned */
#cardstream-google-pay-product-btn {
    text-align: left;
    width: 100%;
}

#cardstream-google-pay-product-btn .cardstream-google-pay-button,
#cardstream-google-pay-product-btn .gpay-button {
    margin: 0 !important;
}

/* Google Pay button element (created by Google Pay API) */
.gpay-button,
.gpay-card-info-container,
.cardstream-google-pay-button,
#cardstream-google-pay-cart-btn button,
#cardstream-google-pay-cart-block-btn button,
#cardstream-google-pay-product-btn button,
#cardstream-google-pay-checkout-btn button {
    width: 240px !important;
    height: 40px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Mobile responsive - slightly smaller buttons on mobile */
@media (max-width: 480px) {
    apple-pay-button,
    apple-pay-button.cardstream-apple-pay-button {
        --apple-pay-button-width: 200px;
        --apple-pay-button-height: 36px;
        width: 200px !important;
        height: 36px !important;
    }

    .gpay-button,
    .gpay-card-info-container,
    .cardstream-google-pay-button,
    #cardstream-google-pay-cart-btn button,
    #cardstream-google-pay-cart-block-btn button,
    #cardstream-google-pay-product-btn button,
    #cardstream-google-pay-checkout-btn button {
        width: 200px !important;
        height: 36px !important;
    }
}