/* 
   REFINED REACT-STYLE FOOTER CSS
   Matches Footer.tsx structure with consistent professional colors.
*/

:root {
    --header-bg: #0f172a;
    --footer-primary: #6366f1;
    --footer-secondary: #0ea5e9;
    --footer-accent: #f59e0b;
}

.bg-header {
    background-color: var(--header-bg) !important;
}

.text-header-foreground {
    color: #ffffff !important;
}

.text-primary {
    color: var(--footer-primary) !important;
}

.bg-primary\/20 {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

.text-secondary {
    color: var(--footer-secondary) !important;
}

.bg-secondary\/20 {
    background-color: rgba(14, 165, 233, 0.15) !important;
}

.text-accent {
    color: var(--footer-accent) !important;
}

.bg-accent\/20 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

.gradient-primary {
    background: linear-gradient(135deg, var(--footer-primary), var(--footer-secondary)) !important;
}

.footer-link-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-link-hover:hover {
    transform: translateX(4px);
    color: #ffffff !important;
}

.social-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

footer.bg-header .container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 640px) {
    footer.bg-header .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* Footer Bottom Styles */
.footer-bottom {
    width: 100%;
}

.copyright-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.designed-by-link {
    text-decoration: none;
    transition: all 0.3s ease;
}

.designed-by-link:hover {
    text-decoration: underline;
}