/* ===== Minimal custom styles — Tailwind handles the rest ===== */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #FFF6E5; }
::-webkit-scrollbar-thumb { background: #0D5788; border-radius: 10px; border: 2px solid #FFF6E5; }
.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #0D5788; border-radius: 10px; }
.custom-scroll { scrollbar-width: thin; scrollbar-color: #0D5788 transparent; }

/* Floating products in hero */
.floating-product {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease-out, box-shadow 0.3s;
    box-shadow: 0 8px 32px rgba(13,87,136,0.15);
    animation: floatProduct 8s ease-in-out infinite;
    will-change: transform;
    background: white;
    border: 2px solid rgba(13,87,136,0.1);
}
.floating-product:hover {
    transform: scale(1.4) !important;
    z-index: 100 !important;
    box-shadow: 0 16px 48px rgba(255,209,0,0.4);
    border-color: #FFD100;
}
.floating-product img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.floating-product .fp-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(13,87,136,0.9));
    padding: 6px 8px; font-size: 10px; font-weight: 700;
    text-align: center; color: #fff;
}
.floating-product .fp-price { color: #FFD100; font-size: 11px; font-weight: 800; }

@keyframes floatProduct {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-12px) rotate(1deg); }
    75% { transform: translateY(8px) rotate(-1deg); }
}

/* Product cards custom */
.product-card {
    background: white;
    border: 2px solid rgba(13,87,136,0.08);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.product-card:hover {
    transform: translateY(-6px);
    border-color: #FFD100;
    box-shadow: 0 16px 40px rgba(13,87,136,0.12);
}
.product-card.featured { border-color: rgba(255,209,0,0.4); }

.product-img {
    width: 100%; height: 220px; overflow: hidden; position: relative;
    background: #F5F5F5;
}
.product-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.product-card:hover .product-img img { transform: scale(1.08); }

.quick-add {
    position: absolute; bottom: 12px; right: 12px;
    width: 38px; height: 38px; border-radius: 50%;
    background: #FFD100; border: none; color: #0D5788; font-size: 20px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    opacity: 0; transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 12px rgba(255,209,0,0.3);
}
.product-card:hover .quick-add { opacity: 1; transform: translateY(0); }
.quick-add:hover { background: #E63946; color: #fff; transform: scale(1.1) !important; }

.product-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-discount { background: #E63946; color: #fff; }
.badge-featured { background: #FFD100; color: #0D5788; }
.badge-new { background: #2EBD59; color: #fff; }

/* Category tab active */
.cat-tab.active { background: #0D5788 !important; border-color: #0D5788 !important; color: #fff !important; }

/* Search suggestions */
.search-suggestions-active { display: block !important; }
.suggestion-item {
    padding: 12px 20px; cursor: pointer; font-size: 0.95rem;
    color: #333; transition: all 0.15s;
    border-bottom: 1px solid #f0f0f0;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: #FFF6E5; color: #0D5788; }
.suggestion-label { font-size: 0.75rem; color: #E63946; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px 6px; font-weight: 800; }

/* Cart items */
.cart-item {
    display: flex; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}
.cart-item-img {
    width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    background: #F5F5F5;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-name { font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0D5788; }
.cart-item-price { font-size: 0.9rem; color: #E63946; font-weight: 800; margin-top: 2px; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cart-item-qty button {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid #ddd;
    background: white; color: #0D5788; cursor: pointer; font-weight: 800;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    transition: all 0.2s;
}
.cart-item-qty button:hover { background: #FFD100; border-color: #FFD100; }
.cart-item-qty span { font-size: 0.9rem; font-weight: 700; min-width: 20px; text-align: center; }
.cart-item-remove {
    background: none; border: none; color: #999; cursor: pointer;
    font-size: 18px; padding: 4px; transition: color 0.2s;
}
.cart-item-remove:hover { color: #E63946; }

/* Toast */
.toast {
    position: fixed; bottom: 24px; left: 50%; z-index: 5000;
    background: #0D5788; color: #fff; padding: 14px 28px; border-radius: 999px;
    font-weight: 700; font-size: 0.9rem;
    transform: translateX(-50%) translateY(100px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(13,87,136,0.3);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* Topbar scroll hide */
.topbar { transition: transform 0.35s ease, opacity 0.35s ease; }
.topbar.hidden-up { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* Navbar smooth reposition on scroll */
.navbar-scroll-up { top: 0 !important; transition: top 0.35s ease, background 0.3s, backdrop-filter 0.3s; }

/* Scroll to top button */
#scrollTopBtn { transition: opacity 0.3s, transform 0.3s, background 0.2s, color 0.2s; }
#scrollTopBtn.visible { opacity: 1; pointer-events: auto; }
#scrollTopBtn:hover { transform: translateY(-3px); }
#scrollTopBtn .arrow-up { animation: arrowBounce 1.6s infinite; }
@keyframes arrowBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Checkout / Auth input fields */
.input-field {
    background: white; border: 2px solid #e0e0e0;
    border-radius: 10px; padding: 10px 14px;
    color: #333; font-size: 0.9rem; font-family: 'Nunito', sans-serif;
    outline: none; transition: border-color 0.2s;
}
.input-field:focus { border-color: #FFD100; }

/* Active states */
.modal-active { opacity: 1 !important; pointer-events: auto !important; }
.modal-active .modal-content-inner { transform: translateY(0) !important; }
.cart-open { right: 0 !important; }
.cart-overlay-open { opacity: 1 !important; pointer-events: auto !important; }

/* ===== ANIMATED BAG LOGO (Navbar) ===== */
.bag-logo { overflow: visible; }
.bag-group-logo { transform-origin: 100px 170px; animation: logo-bounce 3.5s infinite ease-in-out; }
.bag-shadow { transform-origin: 100px 170px; animation: logo-shadow 3.5s infinite ease-in-out; }

@keyframes logo-bounce {
    0%, 15%, 85%, 100% { transform: translateY(0) scale(1); }
    20% { transform: translateY(3px) scale(1.03, 0.97); }
    30% { transform: translateY(-18px) scale(0.97, 1.04); }
    40% { transform: translateY(0) scale(1.02, 0.98); }
    50% { transform: translateY(-5px) scale(0.99, 1.01); }
    60%, 80% { transform: translateY(0) scale(1); }
}
@keyframes logo-shadow {
    0%, 15%, 85%, 100% { transform: scale(1); opacity: 1; }
    30% { transform: scale(0.6); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.85); opacity: 0.7; }
}

/* ===== GIFT MASCOT ANIMATIONS (Squash & Stretch) ===== */
.gift-shadow { transform-origin: 200px 285px; animation: gift-shadow-anim 3.5s infinite ease-in-out; }
.gift-bag { transform-origin: 200px 260px; animation: gift-bag-jump 3.5s infinite ease-in-out; }
.gift-face-idle { animation: gift-hide-idle 3.5s infinite; }
.gift-face-surprised { animation: gift-show-surprised 3.5s infinite; }
.gift-sparkles { transform-origin: 120px 80px; animation: gift-sparkle-pop 3.5s infinite ease-out; }
.gift-cart { transform-origin: 290px 270px; animation: gift-cart-wiggle 3.5s infinite ease-in-out; }

@keyframes gift-bag-jump {
    0%, 15%, 85%, 100% { transform: translateY(0) scale(1); }
    20% { transform: translateY(8px) scale(1.04, 0.96); }
    30% { transform: translateY(-38px) scale(0.96, 1.05); }
    40% { transform: translateY(0) scale(1.03, 0.97); }
    50% { transform: translateY(-10px) scale(0.99, 1.01); }
    60%, 80% { transform: translateY(0) scale(1); }
}
@keyframes gift-shadow-anim {
    0%, 15%, 85%, 100% { transform: scale(1); opacity: 1; }
    20% { transform: scale(1.05); opacity: 1; }
    30% { transform: scale(0.45); opacity: 0.25; }
    40% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.85); opacity: 0.6; }
    60%, 80% { transform: scale(1); opacity: 1; }
}
@keyframes gift-hide-idle {
    0%, 26%, 76%, 100% { opacity: 1; }
    27%, 75% { opacity: 0; }
}
@keyframes gift-show-surprised {
    0%, 26%, 76%, 100% { opacity: 0; }
    27%, 75% { opacity: 1; }
}
@keyframes gift-sparkle-pop {
    0%, 26%, 76%, 100% { opacity: 0; transform: scale(0.5) rotate(-15deg); }
    30% { opacity: 1; transform: scale(1.2) rotate(5deg); }
    40%, 75% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes gift-cart-wiggle {
    0%, 25%, 85%, 100% { transform: rotate(0deg); }
    32% { transform: rotate(-6deg) translateY(-4px); }
    42% { transform: rotate(3deg) translateY(0); }
    52% { transform: rotate(-2deg); }
    62% { transform: rotate(0deg); }
}

/* Gift results */
.gift-result-card {
    background: white; border: 2px solid #f0f0f0; border-radius: 16px;
    padding: 16px; transition: all 0.3s; cursor: pointer;
}
.gift-result-card:hover { border-color: #FFD100; box-shadow: 0 8px 24px rgba(255,209,0,0.2); transform: translateY(-2px); }
.gift-ai-reason { font-size: 0.75rem; color: #2EBD59; font-style: italic; margin-top: 6px; }

/* Responsive */
@media (max-width: 768px) {
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
    .product-img { height: 160px; }
    .gift-mascot { width: 120px !important; height: 120px !important; }
}
@media (max-width: 480px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-img { height: 140px; }
}