/**
 * 🎮 Retro Pixel Art Footer Styles
 * Inspired by 8-bit/16-bit gaming aesthetics
 */

/* Import Retro Font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Main Footer - Retro Style */
.main-footer {
    background: var(--retro-dark, #2e2e2e);
    color: var(--retro-white, #fff);
    margin-top: auto;
    position: relative;
    overflow: hidden;
    border-top: 5px solid var(--retro-green, #6abc3a);
    box-shadow: var(--retro-shadow-full, 0px 10px #00000038, 5px 5px #00000038, -5px 5px #00000038);
    font-family: var(--retro-font, "Press Start 2P", system-ui, monospace);
}

/* Footer decorative pixel pattern background */
.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(106, 188, 58, 0.1) 10px,
            rgba(106, 188, 58, 0.1) 20px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 10px,
            rgba(52, 152, 219, 0.1) 10px,
            rgba(52, 152, 219, 0.1) 20px
        );
    pointer-events: none;
    opacity: 0.3;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--retro-space-2xl, 40px) var(--retro-space-md, 15px) var(--retro-space-md, 15px);
    position: relative;
    z-index: 1;
    background: var(--retro-bg, #DCE3E6);
    border: 3px solid var(--retro-dark, #2e2e2e);
    margin: var(--retro-space-lg, 20px) auto;
    box-shadow: var(--retro-shadow-base, 0px 5px black, 0px -5px black, 5px 0px black, -5px 0px black);
    width: calc(100% - 40px); /* Đảm bảo có margin 20px mỗi bên */
}

/* Footer Content - Retro Style */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--retro-space-xl, 30px);
    margin-bottom: var(--retro-space-xl, 30px);
    flex-wrap: wrap;
    
    /* Animation */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

/* Footer Info Section - Retro Style */
.footer-info {
    display: flex;
    flex-direction: column;
    gap: var(--retro-space-sm, 10px);
    background: var(--retro-white, #fff);
    padding: var(--retro-space-md, 15px);
    border: 2px solid var(--retro-dark, #2e2e2e);
    box-shadow: var(--retro-shadow-base, 0px 5px black, 0px -5px black, 5px 0px black, -5px 0px black);
}

.footer-brand {
    font-size: var(--retro-font-size-md, 14px);
    font-weight: normal;
    color: var(--retro-dark, #2e2e2e);
    margin-bottom: var(--retro-space-xs, 5px);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--retro-yellow, #f1c40f);
    padding: var(--retro-space-xs, 5px) var(--retro-space-sm, 10px);
    border: 2px solid var(--retro-dark, #2e2e2e);
    display: inline-block;
    box-shadow: var(--retro-shadow-base, 0px 5px black, 0px -5px black, 5px 0px black, -5px 0px black);
}

.footer-contact,
.footer-phone {
    font-size: var(--retro-font-size-xs, 8px);
    color: var(--retro-dark, #2e2e2e);
    display: flex;
    align-items: center;
    gap: var(--retro-space-xs, 5px);
    text-transform: uppercase;
    background: var(--retro-lime, #a8e6cf);
    padding: var(--retro-space-xs, 5px);
    border: 1px solid var(--retro-green, #6abc3a);
}

/* Footer Links - Retro Style */
.footer-links {
    display: flex;
    gap: var(--retro-space-sm, 10px);
    flex-wrap: wrap;
}

.footer-links a {
    font-size: var(--retro-font-size-xs, 8px);
    color: var(--retro-white, #fff);
    text-decoration: none;
    transition: var(--retro-transition, 100ms ease);
    position: relative;
    display: inline-block;
    padding: var(--retro-space-sm, 10px);
    background: var(--retro-blue, #3498db);
    border: 2px solid var(--retro-dark, #2e2e2e);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--retro-shadow-base, 0px 5px black, 0px -5px black, 5px 0px black, -5px 0px black);
    font-family: var(--retro-font, "Press Start 2P", system-ui, monospace);
}

.footer-links a::before {
    content: '▶';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--retro-yellow, #f1c40f);
    font-size: var(--retro-font-size-xs, 8px);
    opacity: 0;
    transition: var(--retro-transition, 100ms ease);
}

.footer-links a:hover {
    background: var(--retro-green, #6abc3a);
    color: var(--retro-white, #fff);
    transform: translateY(-3px);
    box-shadow: var(--retro-shadow-full, 0px 10px #00000038, 5px 5px #00000038, -5px 5px #00000038);
    text-decoration: none;
}

.footer-links a:hover::before {
    opacity: 1;
    left: -10px;
}

/* Footer Bottom - Retro Style */
.footer-bottom {
    border-top: 3px solid var(--retro-dark, #2e2e2e);
    text-align: center;
    background: var(--retro-purple, #9b59b6);
    margin: var(--retro-space-md, 15px) calc(-1 * var(--retro-space-md, 15px)) calc(-1 * var(--retro-space-md, 15px));
    padding: var(--retro-space-md, 15px);
    border: 2px solid var(--retro-dark, #2e2e2e);
    box-shadow: var(--retro-shadow-base, 0px 5px black, 0px -5px black, 5px 0px black, -5px 0px black);
    
    /* Animation */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out 0.6s forwards;
}

.footer-bottom p {
    font-family: var(--retro-font, "Press Start 2P", system-ui, monospace);
    font-size: var(--retro-font-size-xs, 8px);
    color: var(--retro-white, #fff);
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--retro-dark, #2e2e2e);
}

/* Hover Effects for Info Section - Retro Style */
.footer-info {
    transition: var(--retro-transition, 100ms ease);
    position: relative;
}

.footer-info:hover {
    transform: translateY(-3px);
    box-shadow: var(--retro-shadow-full, 0px 10px #00000038, 5px 5px #00000038, -5px 5px #00000038);
}

/* Responsive Design - Retro Style */
@media (max-width: 768px) {
    .footer-container {
        padding: var(--retro-space-lg, 20px) var(--retro-space-md, 15px) var(--retro-space-md, 15px);
        margin: var(--retro-space-sm, 10px) auto;
        width: calc(100% - 20px); /* Margin 10px mỗi bên */
        max-width: none; /* Bỏ max-width để responsive tốt hơn */
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--retro-space-lg, 20px);
    }
    
    .footer-info {
        align-items: center;
        text-align: center;
        width: 100%;
    }
    
    .footer-brand {
        font-size: var(--retro-font-size-md, 14px); /* Tăng size lên */
        padding: var(--retro-space-sm, 10px);
    }
    
    .footer-contact,
    .footer-phone {
        font-size: var(--retro-font-size-sm, 10px); /* Tăng size lên */
        padding: var(--retro-space-xs, 5px) var(--retro-space-sm, 10px);
        justify-content: center;
    }
    
    .footer-links {
        justify-content: center;
        gap: var(--retro-space-sm, 10px) !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Stretch to full width */
        width: 100% !important;
    }
    
    .footer-links a {
        font-size: var(--retro-font-size-sm, 10px) !important; /* Tăng size lên */
        padding: var(--retro-space-sm, 10px) var(--retro-space-md, 15px) !important;
        width: 100% !important; /* Full width */
        max-width: 100% !important;
        min-width: auto !important; /* Remove min-width constraint */
        text-align: center !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    .footer-links a:hover {
        transform: translateY(-2px);
    }
    
    .footer-bottom {
        margin: var(--retro-space-md, 15px) calc(-1 * var(--retro-space-md, 15px)) calc(-1 * var(--retro-space-md, 15px));
        padding: var(--retro-space-md, 15px);
    }
    
    .footer-bottom p {
        font-size: var(--retro-font-size-sm, 10px); /* Tăng size lên */
    }
}

@media (max-width: 480px) {
    .footer-container {
        padding: var(--retro-space-md, 15px) var(--retro-space-sm, 10px) var(--retro-space-sm, 10px);
        margin: var(--retro-space-xs, 5px) auto;
        width: calc(100% - 10px); /* Margin 5px mỗi bên */
    }
    
    .footer-brand {
        font-size: var(--retro-font-size-sm, 10px); /* Tăng từ 8px lên 10px */
        padding: var(--retro-space-xs, 5px) var(--retro-space-sm, 10px);
    }
    
    .footer-contact,
    .footer-phone {
        font-size: var(--retro-font-size-xs, 8px); /* Tăng từ 6px lên 8px */
        padding: var(--retro-space-xs, 5px);
    }
    
    .footer-links {
        flex-direction: column !important;
        gap: var(--retro-space-xs, 5px) !important;
        align-items: stretch !important; /* Stretch to full width */
        width: 100% !important;
    }
    
    .footer-links a {
        font-size: var(--retro-font-size-xs, 8px) !important; /* Tăng từ 6px lên 8px */
        padding: var(--retro-space-xs, 5px) var(--retro-space-sm, 10px) !important;
        width: 100% !important; /* Full width */
        max-width: 100% !important;
        min-width: auto !important; /* Remove min-width constraint */
        box-sizing: border-box !important;
        display: block !important;
        text-align: center !important;
    }
    
    .footer-bottom {
        margin: var(--retro-space-sm, 10px) calc(-1 * var(--retro-space-sm, 10px)) calc(-1 * var(--retro-space-sm, 10px));
        padding: var(--retro-space-sm, 10px);
    }
    
    .footer-bottom p {
        font-size: var(--retro-font-size-xs, 8px); /* Tăng từ 6px lên 8px */
    }
}

/* Animation Keyframes */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll Animation Trigger */
.footer-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.footer-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Social Links - Retro Pixel Style (if added later) */
.social-links {
    display: flex;
    gap: var(--retro-space-sm, 10px);
    justify-content: center;
    margin-top: var(--retro-space-md, 15px);
    flex-wrap: wrap;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0; /* No border radius for pixel art */
    background: var(--retro-cyan, #4ecdc4);
    color: var(--retro-dark, #2e2e2e);
    text-decoration: none;
    transition: var(--retro-transition, 100ms ease);
    font-size: var(--retro-font-size-md, 14px);
    border: 2px solid var(--retro-dark, #2e2e2e);
    box-shadow: var(--retro-shadow-base, 0px 5px black, 0px -5px black, 5px 0px black, -5px 0px black);
    font-family: var(--retro-font, "Press Start 2P", system-ui, monospace);
}

.social-links a:hover {
    background: var(--retro-yellow, #f1c40f);
    color: var(--retro-dark, #2e2e2e);
    transform: translateY(-3px);
    box-shadow: var(--retro-shadow-full, 0px 10px #00000038, 5px 5px #00000038, -5px 5px #00000038);
}

/* ==================== DARK MODE SUPPORT FOR FOOTER ==================== */
@media (prefers-color-scheme: dark) {
    /* Main Footer - Dark Mode */
    .main-footer {
        background: var(--neutral-50, #0f0f23) !important;
        color: var(--neutral-800, #e5d4ff) !important;
        border-top-color: var(--primary-color, #fbbf24) !important;
        box-shadow: var(--shadow-xl) rgba(251, 191, 36, 0.3) !important;
    }
    
    /* Footer decorative pattern - Dark Mode */
    .main-footer::before {
        background: 
            repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(251, 191, 36, 0.15) 10px,
                rgba(251, 191, 36, 0.15) 20px
            ),
            repeating-linear-gradient(
                -45deg,
                transparent,
                transparent 10px,
                rgba(96, 165, 250, 0.15) 10px,
                rgba(96, 165, 250, 0.15) 20px
            ) !important;
        opacity: 0.4 !important;
    }
    
    /* Footer Container - Dark Mode */
    .footer-container {
        background: var(--neutral-100, #1a1a2e) !important;
        border-color: var(--primary-color, #fbbf24) !important;
        box-shadow: var(--shadow-lg) rgba(251, 191, 36, 0.3) !important;
    }
    
    /* Footer Info Section - Dark Mode */
    .footer-info {
        background: var(--neutral-200, #16213e) !important;
        border-color: var(--primary-color, #fbbf24) !important;
        box-shadow: var(--shadow-sm) rgba(251, 191, 36, 0.3) !important;
    }
    
    .footer-info:hover {
        box-shadow: var(--shadow-md) rgba(251, 191, 36, 0.5) !important;
    }
    
    /* Footer Brand - Dark Mode */
    .footer-brand {
        color: var(--neutral-100, #1a1a2e) !important;
        background: var(--primary-color, #fbbf24) !important;
        border-color: var(--primary-color, #fbbf24) !important;
        box-shadow: var(--shadow-sm) rgba(251, 191, 36, 0.3) !important;
    }
    
    /* Footer Contact Info - Dark Mode */
    .footer-contact,
    .footer-phone {
        color: var(--success-color, #34d399) !important;
        background: rgba(52, 211, 153, 0.2) !important;
        border-color: var(--success-color, #34d399) !important;
    }
    
    /* Footer Links - Dark Mode */
    .footer-links a {
        color: var(--neutral-100, #1a1a2e) !important;
        background: var(--info-color, #60a5fa) !important;
        border-color: var(--primary-color, #fbbf24) !important;
        box-shadow: var(--shadow-sm) rgba(251, 191, 36, 0.3) !important;
    }
    
    .footer-links a::before {
        color: var(--primary-color, #fbbf24) !important;
    }
    
    .footer-links a:hover {
        background: var(--primary-color, #fbbf24) !important;
        color: var(--neutral-100, #1a1a2e) !important;
        box-shadow: var(--shadow-md) rgba(251, 191, 36, 0.5) !important;
    }
    
    .footer-links a:hover::before {
        color: var(--neutral-100, #1a1a2e) !important;
    }
    
    /* Footer Bottom - Dark Mode */
    .footer-bottom {
        background: var(--neutral-300, #0f3460) !important;
        border-color: var(--primary-color, #fbbf24) !important;
        box-shadow: var(--shadow-sm) rgba(251, 191, 36, 0.3) !important;
    }
    
    .footer-bottom p {
        color: var(--neutral-800, #e5d4ff) !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7) !important;
    }
    
    /* Social Links - Dark Mode */
    .social-links a {
        background: var(--info-color, #60a5fa) !important;
        color: var(--neutral-100, #1a1a2e) !important;
        border-color: var(--primary-color, #fbbf24) !important;
        box-shadow: var(--shadow-sm) rgba(251, 191, 36, 0.3) !important;
    }
    
    .social-links a:hover {
        background: var(--primary-color, #fbbf24) !important;
        color: var(--neutral-100, #1a1a2e) !important;
        box-shadow: var(--shadow-md) rgba(251, 191, 36, 0.5) !important;
    }
}