/* ============================================
   CASIO ELITE - Main Stylesheet
   ============================================
   
   Table of Contents:
   ------------------
   1. CSS Variables
   2. Base Styles
   3. Scrollbar
   4. Glass Effect
   5. Page Transitions
   6. Product Cards
   7. Image Gallery
   8. Filter Buttons
   9. Chat Widget
   10. Animations
   11. Utilities
   12. Flash Sale Banner
   13. Sale Badges & Discounts
   14. Offers Section
   
============================================ */

/* ============================================
   1. CSS VARIABLES
============================================ */
:root {
    /* Brand Colors */
    --color-black: #050505;
    --color-dark: #0f0f0f;
    --color-accent: #ffb300;
    --color-accent-hover: #e5a100;
    --color-gray: #1a1a1a;
    --color-light-gray: #444;
    --color-white: #ffffff;
    
    /* Sale Colors */
    --color-sale: #ef4444;
    --color-sale-dark: #dc2626;
    --color-sale-glow: rgba(239, 68, 68, 0.3);
    --color-orange: #f97316;
    
    /* Glass Effect */
    --glass-bg: rgba(15, 15, 15, 0.8);
    --glass-blur: 12px;
    --glass-border: rgba(255, 179, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-slow: 0.7s ease;
    
    /* Spacing */
    --chat-width: 320px;
    --chat-height: 450px;
}

/* ============================================
   2. BASE STYLES
============================================ */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--color-black);
    color: var(--color-white);
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

/* ============================================
   3. SCROLLBAR
============================================ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-black);
}

::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-hover);
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-black);
}

/* ============================================
   4. GLASS EFFECT
============================================ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.glass-red {
    background: rgba(239, 68, 68, 0.1);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ============================================
   NAVBAR RESPONSIVE STYLES (Base - can be overridden)
============================================ */
#navbar {
    background: rgba(5, 5, 5, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

#navbar.scrolled {
    background: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Override Tailwind classes on mobile */
@media (max-width: 1024px) {
    #navbar {
        padding: 0.625rem 0.875rem !important;
    }
    
    #navbar .logo-wrapper span {
        font-size: 1.375rem !important;
    }
    
    #navbar button,
    #navbar a[onclick] {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 0.875rem !important;
    }
}

@media (max-width: 768px) {
    #navbar {
        padding: 0.5rem 0.75rem !important;
        min-height: 48px !important;
    }
    
    #navbar .container {
        padding: 0 !important;
    }
    
    #navbar .logo-wrapper {
        flex-shrink: 0 !important;
    }
    
    #navbar .logo-wrapper span {
        font-size: 1.125rem !important;
        line-height: 1.2 !important;
    }
    
    #navbar .flex.items-center.gap-2,
    #navbar .flex.items-center.gap-4 {
        gap: 0.375rem !important;
    }
    
    #navbar button,
    #navbar a[onclick] {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.75rem !important;
        padding: 0 !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
    }
    
    #navbar .hidden.md\:flex {
        display: none !important;
    }
    
    #navbar .hidden.lg\:flex {
        display: none !important;
    }
    
    /* Override Tailwind responsive classes */
    #navbar.py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    #navbar.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

@media (max-width: 640px) {
    #navbar {
        padding: 0.375rem 0.5rem !important;
        min-height: 44px !important;
    }
    
    #navbar .logo-wrapper span {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    
    #navbar button,
    #navbar a[onclick] {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.625rem !important;
        padding: 0 !important;
        min-width: 1.75rem !important;
        min-height: 1.75rem !important;
    }
    
    #navbar .flex.items-center.gap-2,
    #navbar .flex.items-center.gap-4 {
        gap: 0.25rem !important;
    }
    
    #navbar i {
        font-size: 0.75rem !important;
    }
    
    /* Override Tailwind responsive classes */
    #navbar.py-3 {
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
    }
    
    #navbar.px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    #navbar {
        padding: 0.25rem 0.375rem !important;
        min-height: 40px !important;
    }
    
    #navbar .logo-wrapper span {
        font-size: 0.875rem !important;
    }
    
    #navbar button,
    #navbar a[onclick] {
        width: 1.5rem !important;
        height: 1.5rem !important;
        font-size: 0.5rem !important;
        min-width: 1.5rem !important;
        min-height: 1.5rem !important;
    }
    
    #navbar i {
        font-size: 0.625rem !important;
    }
    
    /* Override Tailwind responsive classes */
    #navbar.py-3 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    #navbar.px-4 {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
}

/* ============================================
   5. PAGE TRANSITIONS
============================================ */
.hidden-page {
    display: none;
}

.active-page {
    display: block;
    animation: fadeIn 0.5s ease;
}

/* ============================================
   6. PRODUCT CARDS
============================================ */
.product-card {
    transition: var(--transition-smooth);
    will-change: transform;
    position: relative;
}

.product-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-accent);
}

.product-card.has-discount:hover {
    border-color: var(--color-sale);
    box-shadow: 0 20px 40px var(--color-sale-glow);
}

.product-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ============================================
   7. IMAGE GALLERY
============================================ */
.image-gallery-main {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.thumb-img {
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition-fast);
}

.thumb-img:hover {
    opacity: 0.8;
}

.thumb-img.active {
    opacity: 1;
    border: 2px solid var(--color-accent);
}

/* ============================================
   8. FILTER BUTTONS
============================================ */
.filter-btn {
    transition: var(--transition-fast);
}

.filter-btn:hover:not(.active) {
    color: var(--color-white);
}

.filter-btn.active {
    background-color: var(--color-accent);
    color: var(--color-black);
}

.filter-btn.offer-filter.active {
    background: linear-gradient(135deg, var(--color-sale), var(--color-orange));
    color: var(--color-white);
}

/* ============================================
   9. CHAT WIDGET
============================================ */
.chat-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
}

.chat-box {
    position: fixed;
    bottom: 90px;
    left: 20px;
    width: var(--chat-width);
    height: var(--chat-height);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s ease;
    pointer-events: none;
    visibility: hidden;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.chat-box.open {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    visibility: visible;
    animation: slideUp 0.3s ease;
}

/* Chat Header */
.chat-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
}

/* Chat Messages Container */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    min-height: 200px;
    max-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
}

.chat-messages::-webkit-scrollbar {
    width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 2px;
}

/* Chat Input Container */
.chat-input-container {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
}

.chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem;
    color: white;
    outline: none;
    transition: border-color 0.3s ease;
}

.chat-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.2);
}

.chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.chat-send-btn {
    background: var(--color-accent);
    color: var(--color-black);
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.chat-send-btn:hover {
    background: var(--color-accent-hover);
    transform: scale(1.05);
}

/* Chat Widget Wrapper (for offers page) */
.chat-widget {
    position: fixed;
    bottom: 90px;
    left: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.chat-widget .chat-box {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 0;
}

@media (max-width: 768px) {
    .chat-box {
        width: calc(100vw - 2rem);
        max-width: 320px;
        left: 1rem;
        bottom: 80px;
    }
    
    .chat-widget {
        left: 1rem;
        bottom: 80px;
    }
    
    .chat-widget .chat-box {
        width: calc(100vw - 2rem);
        max-width: 320px;
    }
}

/* Chat Messages */
#chatMessages {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
}

#chatMessages::-webkit-scrollbar {
    width: 4px;
}

#chatMessages::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 4px;
}

/* Message Bubbles */
.message-user {
    background-color: var(--color-accent);
    color: var(--color-black);
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-right: 2rem;
}

.message-bot {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-left: 2rem;
}

/* ============================================
   10. ANIMATIONS
============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes flash {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

@keyframes shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px var(--color-sale-glow);
    }
    50% {
        box-shadow: 0 0 40px var(--color-sale-glow), 0 0 60px var(--color-sale-glow);
    }
}

/* Loading State */
.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

.animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
}

/* ============================================
   11. UTILITIES
============================================ */
/* Text Gradient */
.text-gradient {
    background: linear-gradient(to right, #fbbf24, #b45309);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Focus States */
input:focus,
button:focus {
    outline: none;
}

input:focus {
    border-color: var(--color-accent) !important;
}

/* Selection */
::selection {
    background-color: var(--color-accent);
    color: var(--color-black);
}

/* Smooth Images */
img {
    max-width: 100%;
    height: auto;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   12. FLASH SALE BANNER
============================================ */
.flash-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    overflow: hidden;
}

.flash-icon {
    animation: flash 1s ease-in-out infinite;
    color: #fbbf24;
}

.shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shine 3s ease-in-out infinite;
}

.countdown-unit {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 28px;
    text-align: center;
}

/* ============================================
   13. SALE BADGES & DISCOUNTS
============================================ */
/* Card Sale Badge */
.sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: linear-gradient(135deg, var(--color-sale), var(--color-orange));
    color: white;
    font-weight: 900;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 15px var(--color-sale-glow);
    animation: glow-pulse 2s ease-in-out infinite;
}

.sale-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-sale), var(--color-orange));
    z-index: -1;
    opacity: 0.5;
    filter: blur(8px);
}

/* Hero Sale Badge */
.sale-badge-hero {
    animation: bounce-slow 2s ease-in-out infinite;
}

/* Detail Page Sale Badge */
.sale-badge-detail {
    animation: shake 0.5s ease-in-out infinite;
}

/* Price Styles */
.original-price {
    text-decoration: line-through;
    color: #6b7280;
    font-size: 0.875rem;
}

.discount-price {
    color: var(--color-sale);
    font-weight: 900;
}

/* Savings Badge */
.savings-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Limited Stock Warning */
.limited-stock {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: pulse 2s ease-in-out infinite;
}

/* Discount Ribbon */
.discount-ribbon {
    position: absolute;
    top: 20px;
    left: -35px;
    background: linear-gradient(135deg, var(--color-sale), var(--color-sale-dark));
    color: white;
    padding: 6px 40px;
    font-size: 12px;
    font-weight: 700;
    transform: rotate(-45deg);
    box-shadow: 0 2px 10px var(--color-sale-glow);
    z-index: 10;
}

/* Hot Deal Indicator */
.hot-deal {
    position: relative;
}

.hot-deal::after {
    content: '🔥';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 20px;
    animation: bounce-slow 1s ease-in-out infinite;
}

/* ============================================
   14. OFFERS SECTION
============================================ */
#offers {
    position: relative;
}

/* Offer Card Enhancement */
.offer-card {
    position: relative;
    overflow: hidden;
}

.offer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-sale), var(--color-orange), var(--color-accent));
}

.offer-card:hover {
    border-color: var(--color-sale) !important;
}

/* Timer Badge in Cards */
.timer-badge {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.timer-badge i {
    color: var(--color-accent);
    animation: pulse 1s ease-in-out infinite;
}

/* Flash Deal Card */
.flash-deal-card {
    border: 2px solid transparent;
    background: 
        linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
        linear-gradient(135deg, var(--color-sale), var(--color-orange)) border-box;
}

/* Percentage Circle */
.percentage-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(
        var(--color-sale) var(--percentage, 50%),
        rgba(255, 255, 255, 0.1) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    position: relative;
}

.percentage-circle::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--color-dark);
    border-radius: 50%;
}

.percentage-circle span {
    position: relative;
    z-index: 1;
}

/* ============================================
   15. WHATSAPP BUTTON
============================================ */
.whatsapp-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.whatsapp-btn:hover {
    background: linear-gradient(135deg, #128C7E, #075E54);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

.whatsapp-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: whatsapp-shine 2s ease-in-out infinite;
}

@keyframes whatsapp-shine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

/* WhatsApp Floating Button (optional) */
.whatsapp-float {
    position: fixed;
    bottom: 90px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

/* ============================================
   CHAT ANIMATIONS & ENHANCEMENTS
============================================= */

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Chat box enhancements */
.chat-box {
    display: flex;
    flex-direction: column;
    max-height: 450px;
}

.chat-box #chatMessages {
    flex: 1;
    min-height: 250px;
    max-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
}

.chat-box #chatMessages::-webkit-scrollbar {
    width: 4px;
}

.chat-box #chatMessages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-box #chatMessages::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 2px;
}

/* Bot message styling */
.chat-box .bg-white\/10 {
    position: relative;
}

.chat-box .bg-white\/10::before {
    content: '🤖';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    background: var(--dark-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* User message styling */
.chat-box .bg-brand-accent {
    position: relative;
}

.chat-box .bg-brand-accent::before {
    content: '👤';
    position: absolute;
    top: -8px;
    left: -8px;
    font-size: 14px;
    background: var(--dark-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Typing indicator bounce */
.chat-box .animate-bounce {
    animation: bounce 0.6s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Chat input focus state */
.chat-box input:focus {
    box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.2);
}

/* Disabled state */
.chat-box input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.whatsapp-float::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.4);
    animation: whatsapp-pulse 2s ease-out infinite;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ============================================
   FOOTER STYLES
============================================= */

footer {
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--accent-color), 
        transparent
    );
}

footer a {
    position: relative;
}

footer ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 1px;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

footer ul li a:hover::after {
    width: 100%;
}

/* Newsletter Form */
footer form input:focus {
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.1);
}

footer form button {
    position: relative;
    overflow: hidden;
}

footer form button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

footer form button:hover::before {
    left: 100%;
}

/* Social Icons Hover Effects */
footer .flex.gap-3 a {
    position: relative;
    overflow: hidden;
}

footer .flex.gap-3 a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

footer .flex.gap-3 a:hover::before {
    opacity: 1;
}

/* Payment Icons */
footer img[alt="Visa"],
footer img[alt="Mastercard"] {
    filter: grayscale(100%);
    transition: all 0.3s;
}

footer img[alt="Visa"]:hover,
footer img[alt="Mastercard"]:hover {
    filter: grayscale(0%);
}

/* Contact Info Icons Animation */
footer ul li a span:first-child,
footer ul li > div span:first-child {
    transition: all 0.3s;
}

footer ul li a:hover span:first-child {
    transform: scale(1.1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .flash-banner {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    .countdown-unit {
        min-width: 24px;
        font-size: 14px;
    }
    
    .sale-badge {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 80px;
    }
    
    /* Footer Mobile */
    footer .grid {
        text-align: center;
    }
    
    footer .grid > div:first-child {
        margin-bottom: 2rem;
    }
    
    footer .flex.gap-3 {
        justify-content: center;
    }
    
    footer ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    footer ul li a::after {
        display: none;
    }
    
    footer form {
        flex-direction: column;
    }
    
    footer form button {
        width: 100%;
    }
}