/**
 * MONEI Product Express Checkout Styles
 * Version 6.8 - Minimalist Loading Overlay
 */

/* Wrapper */
.monei-pec-wrapper {
    margin-top: 15px;
    width: 100%;
    max-width: 400px;
}

/* Separator */
.monei-pec-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 15px 0;
    color: #666;
    font-size: 13px;
}

.monei-pec-separator::before,
.monei-pec-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.monei-pec-separator span {
    padding: 0 10px;
    white-space: nowrap;
}

/* Container */
#monei-pec-container {
    width: 100%;
}

/* Apple Pay Button - Official Style */
.monei-apple-pay-button {
    -webkit-appearance: -apple-pay-button !important;
    -apple-pay-button-type: buy !important;
    -apple-pay-button-style: black !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
    font-size: inherit !important;
    background: transparent !important;
    outline: none !important;
}

/* Force visibility in themes like Flatsome */
#monei-pec-container .monei-apple-pay-button,
.monei-pec-container .monei-apple-pay-button,
button.monei-apple-pay-button {
    -webkit-appearance: -apple-pay-button !important;
    -apple-pay-button-type: buy !important;
    -apple-pay-button-style: black !important;
    height: 48px !important;
    min-height: 48px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.monei-apple-pay-button:hover {
    opacity: 0.9;
}

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

.monei-apple-pay-button.loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: wait;
}

/* Fallback for browsers that don't support -apple-pay-button */
@supports not (-webkit-appearance: -apple-pay-button) {
    .monei-apple-pay-button {
        background-color: #000;
        color: #fff;
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 14px;
        font-weight: 500;
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .monei-apple-pay-button::before {
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
    }
    
    .monei-apple-pay-button::after {
        content: 'Pay';
    }
}

/* Google Pay Button */
#monei-google-pay-btn-container {
    width: 100%;
    min-height: 48px;
}

#monei-google-pay-btn-container.disabled {
    opacity: 0.5;
    pointer-events: none;
}

#monei-google-pay-btn-container button {
    width: 100% !important;
    min-height: 48px !important;
}

.monei-google-pay-button {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-top: 10px;
}

.monei-google-pay-button:hover {
    opacity: 0.9;
}

.monei-google-pay-button.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.monei-google-pay-button.loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: wait;
}

.gpay-button-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gpay-logo {
    display: inline-block;
    width: 40px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 17'%3E%3Cg fill='none'%3E%3Cpath fill='%235F6368' d='M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.749z'/%3E%3Cpath fill='%234285F4' d='M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944'/%3E%3Cpath fill='%2334A853' d='M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703'/%3E%3Cpath fill='%23FBBC04' d='M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z'/%3E%3Cpath fill='%23EA4335' d='M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Responsive */
@media (max-width: 768px) {
    .monei-pec-wrapper {
        max-width: 100%;
    }
}

/* Hide temp container */
#monei-pec-temp-container {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Error messages */
.monei-pec-error {
    color: #e2401c;
    font-size: 13px;
    margin-top: 10px;
}

/* Hide when not needed */
.monei-pec-wrapper.hidden {
    display: none !important;
}

/* ========================================
   Loading Overlay - Minimalist Design
   Matches hypedfootwear.com style
   ======================================== */

.monei-pec-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.monei-pec-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Minimalist spinner - black ring */
.monei-pec-loading-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid #f0f0f0;
    border-top: 2px solid #000000;
    border-radius: 50%;
    animation: monei-spin 0.8s linear infinite;
}

@keyframes monei-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}