/**
 * you.bid Modern Spinner System - CSS Styles
 * Version: 1.0.0
 * 
 * This file contains the modern spinner styles that replace UWAP's default ajax loader
 */

/* Full Screen Overlay without opacity */
.youbid-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* No background overlay */
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
}

.youbid-spinner-overlay.show {
    display: flex;
}

/* Modern Floating Feedback Card */
.youbid-floating-feedback {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    max-width: 400px;
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.youbid-spinner-overlay.show .youbid-floating-feedback {
    transform: scale(1);
    opacity: 1;
}

/* Spinner Content Container */
.youbid-spinner-content {
    text-align: center;
    width: 100%;
}

/* Animated Pulsing Dots - Enhanced specificity */
.youbid-spinner-overlay .youbid-floating-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    /* Debug border to ensure container is visible */
    /* border: 1px solid red; */
}

.youbid-spinner-overlay .youbid-floating-dots span {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #007cba !important; /* WordPress/YouBid blue */
    display: inline-block !important;
    animation: youbid-pulse 1.4s ease-in-out infinite both !important;
    transform-origin: center center !important;
}

.youbid-spinner-overlay .youbid-floating-dots span:nth-child(1) { 
    animation-delay: -0.32s !important; 
}
.youbid-spinner-overlay .youbid-floating-dots span:nth-child(2) { 
    animation-delay: -0.16s !important; 
}
.youbid-spinner-overlay .youbid-floating-dots span:nth-child(3) { 
    animation-delay: 0s !important; 
}

@keyframes youbid-pulse {
    0%, 80%, 100% {
        transform: scale(0.6) !important;
        opacity: 0.4 !important;
    }
    40% {
        transform: scale(1.2) !important;
        opacity: 1 !important;
    }
}

/* Alternative bounce animation as backup */
@keyframes youbid-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) !important;
    }
    40% {
        transform: translateY(-10px) !important;
    }
    60% {
        transform: translateY(-5px) !important;
    }
}

/* Fallback for browsers that don't support the main animation */
@supports not (animation: youbid-pulse 1.4s ease-in-out infinite both) {
    .youbid-spinner-overlay .youbid-floating-dots span {
        animation: youbid-bounce 1.2s ease-in-out infinite !important;
    }
}

/* Spinner Text */
.youbid-spinner-text {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    line-height: 1.4;
}

/* Alternative Spinner Styles */

/* Ring Spinner Alternative */
.youbid-ring-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007cba;
    border-radius: 50%;
    animation: youbid-spin 1s linear infinite;
    margin-bottom: 20px;
}

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

/* SVG Progress Ring Alternative */
.youbid-progress-ring {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.youbid-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.youbid-progress-ring .ring-bg {
    fill: none;
    stroke: #f3f3f3;
    stroke-width: 6;
}

.youbid-progress-ring .ring-progress {
    fill: none;
    stroke: #007cba;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 78;
    animation: youbid-progress 2s ease-in-out infinite;
}

@keyframes youbid-progress {
    0% { stroke-dashoffset: 314; }
    50% { stroke-dashoffset: 78; }
    100% { stroke-dashoffset: 314; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .youbid-floating-feedback {
        margin: 0 20px;
        padding: 25px 30px;
        min-width: 240px;
        max-width: calc(100vw - 40px);
    }
    
    .youbid-spinner-text {
        font-size: 15px;
    }
    
    .youbid-floating-dots span {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .youbid-floating-feedback {
        margin: 0 15px;
        padding: 20px 25px;
        min-width: 200px;
    }
    
    .youbid-spinner-text {
        font-size: 14px;
    }
}

/* Hide Original UWAP Ajax Loaders */
.ajax-loader-placebid,
.ajax-loader-placebid_direct,
.ajax-loader-auction_placebid,
.loaderimg,
.loaderimg_direct,
.loaderimg_auctionlist,
.uwa_private_msg_ajax_loader {
    display: none !important;
    visibility: hidden !important;
}

/* Success State Styles */
.youbid-floating-feedback.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.youbid-floating-feedback.success .youbid-floating-dots span {
    background: white;
}

.youbid-floating-feedback.success .youbid-spinner-text {
    color: white;
}

/* Error State Styles */
.youbid-floating-feedback.error {
    background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
    color: white;
}

.youbid-floating-feedback.error .youbid-floating-dots span {
    background: white;
}

.youbid-floating-feedback.error .youbid-spinner-text {
    color: white;
}

/* Custom Animation Classes */
.youbid-spinner-overlay.fade-in {
    animation: youbid-overlay-fade-in 0.3s ease-out;
}

.youbid-spinner-overlay.fade-out {
    animation: youbid-overlay-fade-out 0.3s ease-out;
}

@keyframes youbid-overlay-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes youbid-overlay-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Accessibility */
.youbid-spinner-overlay[aria-hidden="false"] {
    display: flex;
}

.youbid-spinner-overlay[aria-hidden="true"] {
    display: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .youbid-floating-feedback {
        border: 2px solid #000;
    }
    
    .youbid-floating-dots span {
        background: #000;
    }
    
    .youbid-spinner-text {
        color: #000;
        font-weight: 600;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .youbid-floating-dots span,
    .youbid-ring-spinner,
    .youbid-progress-ring .ring-progress {
        animation-duration: 3s;
    }
    
    .youbid-floating-feedback {
        transition-duration: 0.1s;
    }
}