/**
 * Haru Dynamic Pricing Frontend Styles
 */

/* Loading indicator styles */
.haru-price-loading {
    position: relative;
}

.haru-price-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.haru-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: haru-spin 1s linear infinite;
}

.haru-loading-text {
    font-style: italic;
    opacity: 0.8;
}

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

/* Price container improvements */
.price {
    transition: opacity 0.2s ease-in-out, visibility 0.1s ease-in-out;
}

.price.haru-price-loading {
    opacity: 0.7;
}

/* WooCommerce specific styles */
.woocommerce-Price-amount.haru-price-loading {
    opacity: 0.7;
}

/* Variation price styles to prevent flash */
.woocommerce-variation-price {
    transition: opacity 0.2s ease-in-out, visibility 0.1s ease-in-out;
}

.woocommerce-variation-price.haru-price-loading {
    opacity: 0.7;
}

/* Smooth price transition */
.price, .woocommerce-Price-amount, .woocommerce-variation-price {
    min-height: 1.2em; /* Prevent layout shift during loading */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .haru-price-loader {
        font-size: 12px;
    }
    
    .haru-spinner {
        width: 14px;
        height: 14px;
    }
}

/* Alternative spinner styles for better visibility */
.haru-spinner-dots {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
}

.haru-spinner-dots div {
    position: absolute;
    top: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0073aa;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.haru-spinner-dots div:nth-child(1) {
    left: 2px;
    animation: haru-dots1 0.6s infinite;
}

.haru-spinner-dots div:nth-child(2) {
    left: 2px;
    animation: haru-dots2 0.6s infinite;
}

.haru-spinner-dots div:nth-child(3) {
    left: 8px;
    animation: haru-dots2 0.6s infinite;
}

.haru-spinner-dots div:nth-child(4) {
    left: 14px;
    animation: haru-dots3 0.6s infinite;
}

@keyframes haru-dots1 {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes haru-dots3 {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}

@keyframes haru-dots2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(6px, 0); }
}

/* Pulse effect for price updates */
.haru-price-updated {
    animation: haru-price-pulse 0.3s ease-in-out;
}

@keyframes haru-price-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}