/* ==========================================================================
   ANIMATIONS & MODERN UI/UX STYLESHEET
   Dự án: SHOPKEY - Hệ thống bán hàng tự động
   Mô tả: Tối ưu UI/UX, Hiệu ứng chuyển động Icon, Micro-interactions, Glassmorphism
   ========================================================================== */

/* ===== 1. KEYFRAME ANIMATIONS ===== */

/* Hiệu ứng bồng bềnh lơ lửng */
@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* Hiệu ứng nhịp đập phát sáng cho CTA / Flashsale / Hotline */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 14, 165, 233), 0.55);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--primary-rgb, 14, 165, 233), 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 14, 165, 233), 0);
        transform: scale(1);
    }
}

/* Hiệu ứng ánh sáng quét qua thẻ (Shimmer Sweep) */
@keyframes shimmerSweep {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Hiệu ứng nhảy số badge giỏ hàng / thông báo */
@keyframes badgeBounce {
    0%, 100% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.35) rotate(-5deg);
    }
    60% {
        transform: scale(0.9) rotate(5deg);
    }
}

/* Hiệu ứng rung lắc nhẹ icon khi hover hoặc có tương tác */
@keyframes iconWiggle {
    0%, 100% {
        transform: rotate(0);
    }
    20% {
        transform: rotate(-12deg);
    }
    40% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(-6deg);
    }
    80% {
        transform: rotate(4deg);
    }
}

/* Hiệu ứng xuất hiện mượt từ dưới lên */
@keyframes fadeInUpSmooth {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hiệu ứng gradient chuyển màu động */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===== 2. MICRO-INTERACTIONS & ICON MOTION CLASSES ===== */

/* Hover icon chuyển động */
.icon-wiggle-hover:hover i,
.icon-wiggle-hover:hover svg {
    display: inline-block;
    animation: iconWiggle 0.6s ease-in-out;
}

.icon-spin-hover:hover i,
.icon-spin-hover:hover svg {
    display: inline-block;
    transform: rotate(360deg);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-zoom-hover:hover i,
.icon-zoom-hover:hover svg {
    display: inline-block;
    transform: scale(1.22);
    transition: transform 0.25s ease;
}

.icon-float {
    animation: floatSlow 3.2s ease-in-out infinite;
}

.icon-pulse {
    animation: pulseGlow 2.2s infinite;
}

/* ===== 3. NÂNG CẤP THẺ SẢN PHẨM & CARD UI ===== */

/* Thẻ nâng nhẹ khi hover (3D Elevation) */
.product-card,
.category-card,
.home-slider-item,
.card-lift {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s ease !important;
    will-change: transform, box-shadow;
}

.product-card:hover,
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12),
                0 4px 8px -2px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .card-lift:hover {
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.5),
                0 0 0 1px var(--primary, #0ea5e9) !important;
}

/* Thẻ category hover */
.category-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}

.category-card:hover .category-card-icon img,
.category-card:hover .category-card-icon i {
    transform: scale(1.12);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== 4. NÚT BẤM HIỆN ĐẠI (BUTTONS) ===== */

/* Nút CTA có ánh sáng lướt qua (Shimmer Button) */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    transform: rotate(25deg);
    transition: none;
}

.btn-shimmer:hover::after {
    left: 140%;
    transition: left 0.8s ease-in-out;
}

/* Nút nảy nhẹ (Pulse CTA) */
.btn-cta-pulse {
    animation: pulseGlow 2.5s infinite;
}

/* Hiệu ứng gợn sóng khi nhấn */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple:active {
    transform: scale(0.98);
}

/* ===== 5. BADGES & NOTIFICATION INDICATORS ===== */

.badge-bounce-anim {
    animation: badgeBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.badge-flash-hot {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: #fff !important;
    position: relative;
    overflow: hidden;
    font-weight: 700;
}

.badge-flash-hot::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: shimmerSweep 2.2s infinite;
}

/* ===== 6. GLASSMORPHISM & HEADER NÂNG CAO ===== */

.glass-nav {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .glass-nav {
    background: rgba(15, 23, 42, 0.88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Input tìm kiếm phát sáng khi active */
.header-form input:focus {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22) !important;
    border-color: var(--primary, #0ea5e9) !important;
    transition: all 0.25s ease;
}

/* Nút chuyển chế độ Sáng / Tối xoay chuyển mượt mà */
.theme-toggle-btn {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle-btn:hover {
    transform: rotate(35deg) scale(1.08);
}

/* ===== 7. STICKY MOBILE CTA (CHO TRANG SẢN PHẨM) ===== */
@media (max-width: 991.98px) {
    .product-sticky-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 10px 16px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        animation: fadeInUpSmooth 0.3s ease;
    }

    [data-theme="dark"] .product-sticky-bottom-bar {
        background: rgba(30, 41, 59, 0.95);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .product-sticky-bottom-bar .sticky-price {
        font-size: 1.15rem;
        font-weight: 800;
        color: #ef4444;
        line-height: 1.2;
    }

    .product-sticky-bottom-bar .sticky-name {
        font-size: 0.8rem;
        color: var(--text-secondary, #64748b);
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-sticky-bottom-bar .sticky-actions {
        display: flex;
        gap: 8px;
    }

    /* Đẩy footer lên tránh che khuất trên mobile khi có thanh sticky */
    body.has-sticky-bar {
        padding-bottom: 65px;
    }
}

/* ===== 8. SCROLL-TO-TOP VỚI CHỈ SỐ CUỘN TRANG ===== */
.backtop-enhanced {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary, #0ea5e9);
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.backtop-enhanced.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.backtop-enhanced:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.backtop-enhanced i {
    transition: transform 0.25s ease;
}

.backtop-enhanced:hover i {
    transform: translateY(-2px);
}