/**
 * 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;
    -apple-pay-button-type: buy;
    -apple-pay-button-style: black;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block;
}

.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';
    }
}

/* 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); }
}