/**
 * Apple Pay Button Styles
 * Complete styling for Apple Pay buttons following Apple's guidelines
 */

/* Base Apple Pay Button Styles */
.apple-pay-button {
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    box-sizing: border-box;
    min-width: 140px;
    min-height: 30px;
    border-radius: 5px;
    outline: none;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

/* Apple Pay Button Types */
.apple-pay-button-black {
    -apple-pay-button-style: black;
    -apple-pay-button-type: plain;
}

.apple-pay-button-white {
    -apple-pay-button-style: white;
    -apple-pay-button-type: plain;
}

.apple-pay-button-white-outline {
    -apple-pay-button-style: white-outline;
    -apple-pay-button-type: plain;
}

/* Button Type Variants */
.apple-pay-button-buy {
    -apple-pay-button-type: buy;
}

.apple-pay-button-checkout {
    -apple-pay-button-type: check-out;
}

.apple-pay-button-donate {
    -apple-pay-button-type: donate;
}

.apple-pay-button-plain {
    -apple-pay-button-type: plain;
}

/* Fallback Styles for Non-Safari Browsers */
@supports not (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        background: #000000;
        color: #ffffff;
        border-radius: 4px;
        border: none;
        padding: 0 16px;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 17px;
        font-weight: 300;
        letter-spacing: -0.022em;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        vertical-align: baseline;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .apple-pay-button:before {
        content: '';
        display: inline-block;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M27.1 34.8c1.9-2.4 3.2-5.7 2.8-9.1-2.7.1-6 1.8-7.9 4.1-1.7 2-3.2 5.2-2.8 8.2 3 .2 6.1-1.5 7.9-3.2zm2.8 4.5c-4.4-.3-8.1 2.5-10.2 2.5s-5.3-2.4-8.8-2.3c-4.5.1-8.7 2.6-11 6.6-4.7 8.2-.9 20.4 3.4 27.1 2.1 3.3 4.6 7 7.9 6.9 3.2-.1 4.4-2.1 8.3-2.1s4.9 2.1 8.3 2c3.4-.1 5.6-3.4 7.7-6.7 2.4-3.8 3.4-7.5 3.4-7.7-.1 0-6.6-2.5-6.7-10-.1-6.3 5.2-9.3 5.4-9.5-2.9-4.3-7.5-4.8-9.1-4.9'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 20px;
        height: 20px;
        margin-right: 8px;
        flex-shrink: 0;
    }
    
    .apple-pay-button:after {
        content: 'Pay';
        flex-shrink: 0;
    }
    
    /* Button type content variants for fallback */
    .apple-pay-button-buy:after {
        content: 'Buy with Apple Pay';
    }
    
    .apple-pay-button-checkout:after {
        content: 'Check out with Apple Pay';
    }
    
    .apple-pay-button-donate:after {
        content: 'Donate with Apple Pay';
    }
    
    .apple-pay-button-plain:after {
        content: 'Apple Pay';
    }
    
    /* White button style for fallback */
    .apple-pay-button-white {
        background: #ffffff;
        color: #000000;
        border: 1px solid #d1d1d6;
    }
    
    .apple-pay-button-white:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M27.1 34.8c1.9-2.4 3.2-5.7 2.8-9.1-2.7.1-6 1.8-7.9 4.1-1.7 2-3.2 5.2-2.8 8.2 3 .2 6.1-1.5 7.9-3.2zm2.8 4.5c-4.4-.3-8.1 2.5-10.2 2.5s-5.3-2.4-8.8-2.3c-4.5.1-8.7 2.6-11 6.6-4.7 8.2-.9 20.4 3.4 27.1 2.1 3.3 4.6 7 7.9 6.9 3.2-.1 4.4-2.1 8.3-2.1s4.9 2.1 8.3 2c3.4-.1 5.6-3.4 7.7-6.7 2.4-3.8 3.4-7.5 3.4-7.7-.1 0-6.6-2.5-6.7-10-.1-6.3 5.2-9.3 5.4-9.5-2.9-4.3-7.5-4.8-9.1-4.9'/%3E%3C/svg%3E");
    }
    
    /* White outline button style for fallback */
    .apple-pay-button-white-outline {
        background: transparent;
        color: #000000;
        border: 2px solid #000000;
    }
    
    .apple-pay-button-white-outline:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M27.1 34.8c1.9-2.4 3.2-5.7 2.8-9.1-2.7.1-6 1.8-7.9 4.1-1.7 2-3.2 5.2-2.8 8.2 3 .2 6.1-1.5 7.9-3.2zm2.8 4.5c-4.4-.3-8.1 2.5-10.2 2.5s-5.3-2.4-8.8-2.3c-4.5.1-8.7 2.6-11 6.6-4.7 8.2-.9 20.4 3.4 27.1 2.1 3.3 4.6 7 7.9 6.9 3.2-.1 4.4-2.1 8.3-2.1s4.9 2.1 8.3 2c3.4-.1 5.6-3.4 7.7-6.7 2.4-3.8 3.4-7.5 3.4-7.7-.1 0-6.6-2.5-6.7-10-.1-6.3 5.2-9.3 5.4-9.5-2.9-4.3-7.5-4.8-9.1-4.9'/%3E%3C/svg%3E");
    }
}

/* Button Sizes */
.apple-pay-button-small {
    min-height: 32px;
    font-size: 15px;
}

.apple-pay-button-regular {
    min-height: 44px;
    font-size: 17px;
}

.apple-pay-button-large {
    min-height: 56px;
    font-size: 19px;
}

/* Button States */
.apple-pay-button:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

.apple-pay-button:active {
    transform: scale(0.98);
    opacity: 0.6;
}

.apple-pay-button:focus {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

.apple-pay-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading State */
.apple-pay-button.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.apple-pay-button.loading:after {
    content: 'Processing...';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    color: inherit;
    border-radius: inherit;
}

/* Express Checkout Container */
#applepay-express-checkout {
    text-align: center;
    position: relative;
}

#applepay-express-checkout .apple-pay-button {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

/* Checkout Page Integration */
#applepay-container {
    margin: 16px 0;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #e1e8ed;
}

#applepay-container .apple-pay-button {
    width: 100%;
    min-height: 48px;
}

/* Payment Method Selection */
.wc_payment_method.payment_method_applepay_authnet {
    margin: 0;
}

.wc_payment_method.payment_method_applepay_authnet label {
    display: none;
}

.wc_payment_method.payment_method_applepay_authnet .payment_box {
    padding: 16px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-top: 8px;
}

/* Error and Success Messages */
.apple-pay-error {
    color: #dc3545;
    font-size: 14px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    display: block;
}

.apple-pay-success {
    color: #155724;
    font-size: 14px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    display: block;
}

/* Cart Page Integration */
.woocommerce-cart #applepay-express-checkout {
    margin: 32px 0;
}

.woocommerce-cart .apple-pay-button {
    min-height: 52px;
    font-size: 18px;
}

/* Product Page Integration */
.single-product #applepay-express-checkout {
    margin: 24px 0;
}

.single-product .apple-pay-button {
    min-height: 48px;
    font-size: 17px;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .apple-pay-button {
        width: 100%;
        min-height: 48px;
        font-size: 17px;
        margin: 8px 0;
    }
    
    .apple-pay-button-small {
        min-height: 40px;
        font-size: 16px;
    }
    
    .apple-pay-button-regular {
        min-height: 48px;
        font-size: 17px;
    }
    
    .apple-pay-button-large {
        min-height: 56px;
        font-size: 18px;
    }
    
    #applepay-express-checkout {
        margin: 20px 0;
        padding: 20px 16px;
    }
    
    #applepay-container {
        margin: 12px 0;
        padding: 12px;
    }
}

@media screen and (max-width: 480px) {
    .apple-pay-button {
        min-height: 52px;
        font-size: 18px;
    }
    
    #applepay-express-checkout {
        margin: 16px 0;
        padding: 16px 12px;
    }
    
    #applepay-express-checkout:before {
        font-size: 15px;
        margin-bottom: 12px;
    }
}

/* Hide Apple Pay elements when not supported */
.no-applepay #applepay-container,
.no-applepay #applepay-express-checkout,
.no-applepay .apple-pay-button {
    display: none !important;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    
    #applepay-container {
        background: #1a1a1a;
        border-color: #2d2d2d;
    }
    
    .wc_payment_method.payment_method_applepay_authnet .payment_box {
        background: #2d2d2d;
        border-color: #404040;
        color: #ffffff;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .apple-pay-button {
        border: 2px solid currentColor;
    }
    
    #applepay-express-checkout,
    #applepay-container {
        border-width: 2px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .apple-pay-button {
        transition: none;
    }
    
    .apple-pay-button:hover {
        transform: none;
    }
    
    .apple-pay-button:active {
        transform: none;
    }
}

/* Print Styles */
@media print {
    .apple-pay-button,
    #applepay-express-checkout,
    #applepay-container {
        display: none !important;
    }
}

/* RTL Support */
[dir="rtl"] .apple-pay-button:before {
    margin-right: 0;
    margin-left: 8px;
}

/* Custom Properties for Easy Theming */
:root {
    --apple-pay-border-radius: 4px;
    --apple-pay-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --apple-pay-transition: all 0.15s ease-in-out;
    --apple-pay-focus-color: #007AFF;
}

.apple-pay-button {
    border-radius: var(--apple-pay-border-radius);
    font-family: var(--apple-pay-font-family);
    transition: var(--apple-pay-transition);
}

.apple-pay-button:focus {
    outline-color: var(--apple-pay-focus-color);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_applepay_authnet {
    display: none;
}