/**
 * VSLocks Micro-Interactions
 *
 * Hover effects, button animations, and product card interactions.
 * Extends WoodMart built-in hover effects rather than replacing them.
 */

/* ─── Product Cards ──────────────────────────────────────────────────────────── */

.products .product {
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.products .product:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(198, 40, 40, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Product image zoom on hover */
.products .product .product-element-top img,
.products .product .product-image-link img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.products .product:hover .product-element-top img,
.products .product:hover .product-image-link img {
    transform: scale(1.05);
}

/* Product title underline effect */
.products .product .woocommerce-loop-product__title {
    position: relative;
    display: inline;
    background-image: linear-gradient(var(--vs-red, #c62828), var(--vs-red, #c62828));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.4s ease;
}

.products .product:hover .woocommerce-loop-product__title {
    background-size: 100% 2px;
}

/* Add to cart button on product cards */
.products .product .add_to_cart_button,
.products .product .product-action-button a {
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
}

.products .product .add_to_cart_button:hover,
.products .product .product-action-button a:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(198, 40, 40, 0.3);
}

/* ─── CTA Buttons ────────────────────────────────────────────────────────────── */

/* Primary CTA pulse glow */
.single_add_to_cart_button,
#place_order,
.checkout-button {
    position: relative;
    overflow: hidden;
}

.single_add_to_cart_button::after,
#place_order::after,
.checkout-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.single_add_to_cart_button:hover::after,
#place_order:hover::after,
.checkout-button:hover::after {
    transform: translateX(100%);
}

/* ─── Navigation Links ───────────────────────────────────────────────────────── */

/* My Account sidebar active indicator */
.woocommerce-MyAccount-navigation li a {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.woocommerce-MyAccount-navigation li a:hover {
    padding-left: 28px;
}

/* ─── Form Inputs ────────────────────────────────────────────────────────────── */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* ─── Order Status Badges ────────────────────────────────────────────────────── */

.woocommerce-orders-table .order-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── Breadcrumb Trail ───────────────────────────────────────────────────────── */

.woocommerce-breadcrumb a {
    transition: color 0.3s;
}

.woocommerce-breadcrumb a:hover {
    color: var(--vs-red-hover, #e53935) !important;
}

/* ─── Rating Stars ───────────────────────────────────────────────────────────── */

.star-rating {
    transition: transform 0.3s;
}

.product:hover .star-rating {
    transform: scale(1.1);
}

/* ─── Cart Quantity Spinner ──────────────────────────────────────────────────── */

.woocommerce .quantity .qty {
    transition: border-color 0.3s, box-shadow 0.3s;
}

.woocommerce .quantity .qty:focus {
    border-color: var(--vs-red, #c62828);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}

/* ─── Loading / AJAX Overlay ─────────────────────────────────────────────────── */

.woocommerce .blockUI.blockOverlay::before {
    border-color: var(--vs-red, #c62828) transparent transparent transparent !important;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .products .product:hover {
        transform: none;
    }

    .products .product:active {
        transform: scale(0.98);
    }

    .woocommerce-MyAccount-navigation li a:hover {
        padding-left: 20px;
    }
}