/**
 * Express Checkout - Apple Pay & Google Pay Only
 * Updated button styling with proper SVG logos
 *
 * @package Jestart_Sidecart_Pro
 */

/* Express Checkout Container */
.jscp-express-buttons {
    display: flex !important;
    gap: 10px !important;
}

/* Base Express Button Styling */
.jscp-express-btn {
    flex: 1 !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.jscp-express-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* SVG Logo Styling */
.jscp-express-btn svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 140px !important;
    max-height: 48px !important;
    display: block !important;
}

/* Apple Pay Button */
.jscp-express-btn.jscp-apple-pay {
    background: transparent !important;
}

.jscp-express-btn.jscp-apple-pay svg {
    fill: none !important;
    stroke: none !important;
}

.jscp-express-btn.jscp-apple-pay:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Google Pay Button */
.jscp-express-btn.jscp-google-pay {
    background: transparent !important;
}

.jscp-express-btn.jscp-google-pay svg {
    fill: none !important;
    stroke: none !important;
}

.jscp-express-btn.jscp-google-pay:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Hide deprecated payment options */
.jscp-express-btn.jscp-shop-pay,
.jscp-express-btn.jscp-paypal {
    display: none !important;
}

/* Mobile Responsive */
@media screen and (max-width: 480px) {
    .jscp-express-buttons {
        flex-wrap: wrap !important;
    }

    .jscp-express-btn {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: 140px !important;
    }
}