/**
 * UX/UI Enhancements
 * Giannibio Theme - Subtle improvements without major changes
 *
 * This file provides enhanced user experience through:
 * - Global smooth transitions on interactive elements
 * - Sidebar menu animations (slide-in, fade text)
 * - Product card enhancements (hover zoom, button reveal, sale badge, out-of-stock overlay)
 * - Single product improvements (breadcrumb, stock badge with pulse, gallery zoom)
 * - Toast notification system for "added to cart" feedback
 * - Scroll-to-top button (appears after 400px scroll)
 * - Loading skeleton animations
 * - Empty cart state styling
 * - E-commerce header menu underline animation
 * - Price display (strikethrough original, highlighted sale price)
 * - Micro-interactions (button press, link hover underline)
 * - Accessibility (focus-visible, prefers-reduced-motion support)
 */

/* ==========================================================================
   GLOBAL TRANSITIONS & ANIMATIONS
   ========================================================================== */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, button, input, .product, img {
    transition: all 0.25s ease;
}

/* Smooth image loading */
img {
    opacity: 1;
}

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded,
img:not([loading="lazy"]) {
    opacity: 1;
}


/* ==========================================================================
   PRODUCT CARDS ENHANCEMENTS
   ========================================================================== */

/* Product card container */
.woocommerce ul.products li.product {
    position: relative;
    overflow: hidden;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.single-product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #e53935;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);
}

/* Out of stock overlay */
.woocommerce ul.products li.product.outofstock .attachment-woocommerce_thumbnail {
    opacity: 0.5;
}

.woocommerce ul.products li.product.outofstock::after {
    content: 'Esaurito';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(30, 60, 20, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 5;
}


/* Add to cart button - always visible */
.woocommerce ul.products li.product .add_to_cart_button {
    opacity: 1;
    transform: translateY(0);
}

/* Loading state for add to cart */
.woocommerce ul.products li.product .add_to_cart_button.loading {
    opacity: 0.7;
    pointer-events: none;
}

.woocommerce ul.products li.product .add_to_cart_button.loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* Added to cart checkmark */
.woocommerce ul.products li.product .add_to_cart_button.added::after {
    content: '\2713';
    margin-left: 8px;
    animation: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   SINGLE PRODUCT ENHANCEMENTS
   ========================================================================== */

/* Breadcrumb */
.woocommerce-breadcrumb {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 16px;
    padding: 12px 0;
}

.woocommerce-breadcrumb a {
    color: #1e3c14;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.woocommerce-breadcrumb a:hover {
    opacity: 0.7;
}

.woocommerce-breadcrumb .breadcrumb-separator {
    margin: 0 8px;
    color: #ccc;
}

/* Stock status badge */
.single-product .stock {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 12px 0;
}

.single-product .stock.in-stock {
    background: #ecfdf5;
    color: #047857;
}

.single-product .stock.in-stock::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse 2s infinite;
}

.single-product .stock.out-of-stock {
    background: #fef2f2;
    color: #dc2626;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Gallery main image zoom */
.woocommerce-product-gallery__image a {
    cursor: zoom-in;
}

.woocommerce-product-gallery__image img {
    transition: transform 0.3s ease;
}

.woocommerce-product-gallery__image:hover img {
    transform: scale(1.02);
}

/* Quantity selector enhancement */
.single-product .quantity {
    display: inline-flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 4px;
}

.single-product .qty {
    background: white !important;
    border: none !important;
    text-align: center;
    font-weight: 600;
}

/* Add to cart button pulse on hover */
.single-product .single_add_to_cart_button:hover {
    box-shadow: 0 4px 20px rgba(30, 60, 20, 0.3);
}

/* Add to cart success feedback */
.single-product .single_add_to_cart_button.added {
    background-color: #047857 !important;
}

.single-product .single_add_to_cart_button.added::before {
    content: '\2713  ';
}

/* Back to shop link */
.single-product .back-to-shop {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    color: #1e3c14;
    text-decoration: none;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.single-product .back-to-shop:hover {
    transform: translateX(-4px);
}

.single-product .back-to-shop::before {
    content: '\2190';
    margin-right: 8px;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */

.giannibio-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1e3c14;
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.giannibio-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.giannibio-toast .toast-icon {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.giannibio-toast .toast-icon::after {
    content: '\2713';
    font-size: 14px;
}

.giannibio-toast a {
    color: white;
    text-decoration: underline;
    margin-left: 8px;
}

/* ==========================================================================
   SCROLL TO TOP BUTTON
   ========================================================================== */

.scroll-to-top {
    position: fixed;
    bottom: 100px;
    right: 84px; /* Account for sidebar */
    width: 48px;
    height: 48px;
    background: #1e3c14;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 998;
    box-shadow: 0 4px 16px rgba(30, 60, 20, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(30, 60, 20, 0.4);
}

.scroll-to-top::after {
    content: '\2191';
}

@media (max-width: 767px) {
    .scroll-to-top {
        right: 16px;
        bottom: 24px;
    }
}

/* ==========================================================================
   LOADING SKELETONS
   ========================================================================== */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.woocommerce-info.wc-empty-cart-message,
.cart-empty {
    text-align: center;
    padding: 48px 24px;
}

.cart-empty::before {
    content: '\1F6D2';
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

/* ==========================================================================
   FORM ENHANCEMENTS
   ========================================================================== */

/* Floating labels effect */
.wc-block-components-text-input {
    position: relative;
}

.wc-block-components-text-input label {
    transition: all 0.2s ease;
}

/* Input focus glow */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(30, 60, 20, 0.1) !important;
}

/* ==========================================================================
   ECOMMERCE HEADER ENHANCEMENTS
   ========================================================================== */

.ecommerce-menu ul li a {
    position: relative;
}

.ecommerce-menu ul li a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #1e3c14;
    transition: width 0.3s ease;
}

.ecommerce-menu ul li a:hover::after,
.ecommerce-menu ul li.current-menu-item a::after {
    width: 100%;
}

/* Cart icon with count badge */
.ecommerce-menu .cart-contents {
    position: relative;
}

.ecommerce-menu .cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e53935;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   PRICE ENHANCEMENTS
   ========================================================================== */

/* Original price strikethrough */
.price del {
    color: #999;
    font-size: 0.85em;
    margin-right: 8px;
}

/* Sale price highlight */
.price ins {
    text-decoration: none;
    color: #e53935;
    font-weight: 700;
}

/* ==========================================================================
   RELATED PRODUCTS SECTION
   ========================================================================== */

.related.products > h2,
.upsells.products > h2 {
    font-family: 'Moreganic', sans-serif;
    color: #1e3c14;
    font-size: 1.5rem;
    margin: 48px 0 24px 0;
    padding-top: 32px;
    border-top: 1px solid #eee;
}

/* ==========================================================================
   MICRO-INTERACTIONS
   ========================================================================== */

/* Button press effect */
button:active,
.button:active,
input[type="submit"]:active {
    transform: scale(0.98);
}

/* Link hover underline animation */
.entry-summary a:not(.button),
.description-product a {
    position: relative;
    text-decoration: none !important;
}

.entry-summary a:not(.button)::after,
.description-product a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.entry-summary a:not(.button):hover::after,
.description-product a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

/* Focus visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #1e3c14;
    outline-offset: 2px;
}

/* Skip link */
.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    background: #1e3c14;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    z-index: 9999;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}