/**
 * Universal Click Loader - Styles
 *
 * Consistent loading spinner for navigation links and buttons.
 * Matches LatePoint spinner style for visual consistency.
 *
 * @package eRide
 * @version 2.0.0
 * @since 2024-12-20
 *
 * Targets:
 * - My Account navigation tabs
 * - Menu links (with page navigation)
 * - Pagination links
 * - Submit buttons
 * - Add to Cart buttons
 * - Form action buttons
 */

/* ============================================
   Spinner Animation (matches LatePoint)
   ============================================ */

@keyframes ucl-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============================================
   Base Loading State
   ============================================ */

.ucl-loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none;
    cursor: wait;
    transition: all 0.15s ease;
}

/* Hide text content while loading */
.ucl-loading > * {
    opacity: 0;
}

/* The spinner pseudo-element */
.ucl-loading::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(100, 197, 178, 0.3);
    border-top-color: var(--latepoint-brand-primary, #64c5b2);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ucl-spin 0.7s linear infinite;
    z-index: 10;
}

/* ============================================
   Navigation Links (My Account, Menus)
   ============================================ */

/* WooCommerce My Account navigation */
.woocommerce-MyAccount-navigation a.ucl-loading {
    min-height: 20px;
}

.woocommerce-MyAccount-navigation a.ucl-loading::after {
    border-color: rgba(100, 197, 178, 0.3);
    border-top-color: var(--latepoint-brand-primary, #64c5b2);
}

/* Active nav item - white spinner */
.woocommerce-MyAccount-navigation li.is-active a.ucl-loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* Pagination links */
.woocommerce-pagination a.ucl-loading,
.pagination a.ucl-loading,
.nav-links a.ucl-loading {
    min-width: 30px;
    min-height: 30px;
}

/* Menu links */
.menu-item a.ucl-loading,
.wp-block-navigation-item a.ucl-loading {
    min-height: 20px;
}

/* ============================================
   Buttons & Forms
   ============================================ */

/* Generic buttons */
button.ucl-loading,
.button.ucl-loading,
.wp-block-button__link.ucl-loading,
input[type="submit"].ucl-loading {
    min-height: 40px;
}

/* Buttons with dark/colored backgrounds - white spinner */
button.ucl-loading::after,
.button.ucl-loading::after,
.wp-block-button__link.ucl-loading::after,
input[type="submit"].ucl-loading::after,
.woocommerce-button.ucl-loading::after,
.single_add_to_cart_button.ucl-loading::after,
.checkout-button.ucl-loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* WooCommerce Add to Cart */
.single_add_to_cart_button.ucl-loading,
.add_to_cart_button.ucl-loading {
    min-height: 44px;
}

/* Checkout button */
.checkout-button.ucl-loading,
.wc-proceed-to-checkout .ucl-loading {
    min-height: 50px;
}

/* Form submit buttons */
form button[type="submit"].ucl-loading,
form input[type="submit"].ucl-loading {
    min-height: 38px;
}

/* ============================================
   Outline/Ghost Buttons (brand color spinner)
   ============================================ */

.button--outline.ucl-loading::after,
.wp-block-button.is-style-outline .ucl-loading::after,
.woocommerce-button--outline.ucl-loading::after {
    border-color: rgba(100, 197, 178, 0.3);
    border-top-color: var(--latepoint-brand-primary, #64c5b2);
}

/* ============================================
   Link Buttons (minimal style)
   ============================================ */

a.ucl-loading:not(.button):not(.wp-block-button__link) {
    display: inline-block;
    min-width: 20px;
    min-height: 18px;
}

/* Smaller spinner for inline links */
a.ucl-loading:not(.button):not(.wp-block-button__link)::after {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

/* ============================================
   LatePoint Book Button Integration
   ============================================ */

/* Ensure LatePoint buttons work with our system too */
.latepoint-book-button.ucl-loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* ============================================
   Accessibility
   ============================================ */

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ucl-loading::after {
        animation-duration: 1.4s;
    }
}

/* Screen reader announcement */
.ucl-loading::before {
    content: "Loading...";
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================
   Mobile Optimizations
   ============================================ */

@media (max-width: 767px) {
    /* Slightly smaller spinner on mobile */
    .ucl-loading::after {
        width: 12px;
        height: 12px;
    }

    /* Ensure touch targets remain accessible */
    button.ucl-loading,
    .button.ucl-loading,
    a.ucl-loading {
        min-height: 44px;
    }
}

/* ============================================
   Prevent Flash of Content
   ============================================ */

/* Smooth transition when adding loading state */
.woocommerce-MyAccount-navigation a,
.menu-item a,
button,
.button,
input[type="submit"] {
    transition: color 0.1s ease, opacity 0.1s ease;
}