/* WP Travel Engine Checkout Button Spinner Styles */

/* Main spinner for WP Travel Engine */
.wte-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-radius: 50%;
    animation: wte-spin 1s linear infinite;
    vertical-align: middle;
    opacity: 1;
}

/* Loading state for WP Travel Engine buttons */
.wte-process-btn.wte-loading,
.wte-booking-btn.wte-loading,
.wte-checkout-btn.wte-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
    transition: all 0.3s ease;
}

/* Ensure spinner is visible in loading state */
.wte-process-btn.wte-loading .wte-spinner,
.wte-booking-btn.wte-loading .wte-spinner,
.wte-checkout-btn.wte-loading .wte-spinner {
    opacity: 1;
    display: inline-block;
}

/* Primary spinner animation */
@keyframes wte-spin {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

/* Alternative pulse animation for fallback */
@keyframes wte-pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.6; 
        transform: scale(0.95);
    }
}

/* Specific styling for WP Travel Engine process buttons */
#wteProcessNext.wte-loading {
    background: linear-gradient(45deg, #11315f, #1a4d8f);
    border-color: #11315f;
}

/* Ensure proper spacing and alignment */
.wte-process-btn,
.wte-booking-btn,
.wte-checkout-btn {
    position: relative;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wte-spinner {
        width: 16px;
        height: 16px;
        margin-left: 6px;
        border-width: 1.5px;
    }
    
    .wte-process-btn,
    .wte-booking-btn,
    .wte-checkout-btn {
        min-height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .wte-spinner {
        width: 14px;
        height: 14px;
        margin-left: 4px;
    }
    
    .wte-process-btn,
    .wte-booking-btn,
    .wte-checkout-btn {
        min-height: 36px;
        font-size: 13px;
        gap: 6px;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .wte-spinner {
        border-top-color: #ffffff;
        border-right-color: #ffffff;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wte-spinner {
        border-width: 3px;
        border-top-color: #000000;
        border-right-color: #000000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wte-spinner {
        animation: wte-pulse 1.5s ease-in-out infinite;
        border: none;
        background: radial-gradient(circle, #ffffff 30%, transparent 30%);
        background-size: 8px 8px;
        background-position: center;
    }
}

/* Focus states for accessibility */
.wte-process-btn:focus,
.wte-booking-btn:focus,
.wte-checkout-btn:focus {
    outline: 2px solid #11315f;
    outline-offset: 2px;
}

.wte-process-btn.wte-loading:focus,
.wte-booking-btn.wte-loading:focus,
.wte-checkout-btn.wte-loading:focus {
    outline-color: #1a4d8f;
}