/**
 * Clodzup Theme Custom Component Styles
 */

/* Header & Navigation Transitions */
header.sticky {
    transition: all 0.3s ease;
}

/* Product Card Interactions */
.clodzup-product-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.clodzup-product-card:hover {
    transform: translateY(-4px);
}

/* Circular Free Delivery SVG Animation */
#progress-circle-svg {
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toast Animation */
#toast {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

#toast.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Modals Overlay */
.clodzup-modal-backdrop {
    animation: fadeIn 0.2s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Sticky Mobile Bottom Bar */
.clodzup-sticky-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--clodzup-border);
    padding: 0.75rem 1rem;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
}

/* Variation Buttons Active State */
.variation-pill.active {
    border-color: var(--clodzup-gold) !important;
    background-color: rgba(197, 160, 89, 0.1) !important;
    color: var(--clodzup-dark) !important;
    font-weight: 600;
}