/* ==================== */
/* Footer Component Styles */
/* ==================== */

/* Footer CSS Variables */
:root {
    --color-footer-bg: #3A3F4A;
    --color-footer-text: #D1D5DC;
    --color-footer-text-light: #99A1AF;
    --color-footer-text-dark: #6A7282;
    --color-white: #FFFFFF;
    
    /* Spacing */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-2xl: 40px;
    
    /* Font Sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    
    /* Layout */
    --max-width: 1425px;
}

/* ==================== */
/* Footer Styles */
/* ==================== */
.footer {
    background-color: var(--color-footer-bg);
    padding: 25px 88px;
    margin-top: 10px;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer-links {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.footer-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 20px;
    transition: opacity 0.3s ease;
}

.footer-link:first-child {
    color: var(--color-white);
}

.footer-link:not(:first-child) {
    color: var(--color-footer-text);
}

.footer-link:hover {
    opacity: 0.7;
}

.footer-info {
    font-size: var(--font-size-xs);
    line-height: 16px;
    margin-top: var(--spacing-md);
}

.footer-info-item {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: 4px;
    align-items: flex-start;
}

.footer-info-item:first-child {
    margin-bottom: 4px;
}

.footer-info-label {
    color: var(--color-footer-text);
    font-weight: 400;
}

.footer-info-text {
    color: var(--color-footer-text-light);
    font-weight: 400;
}

.footer-email-link {
    text-decoration: none;
    color: var(--color-footer-text-light);
    transition: color 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}

.footer-email-link:hover {
    color: var(--color-white);
    opacity: 0.8;
}

.footer-info-item:first-child .footer-info-text {
    color: var(--color-footer-text);
}

.footer-copyright {
    margin-top: 28px;
    font-size: var(--font-size-xs);
    color: var(--color-footer-text-dark);
    font-weight: 400;
    line-height: 16px;
}

/* ==================== */
/* Responsive Styles */
/* ==================== */

/* Tablet */
@media (max-width: 1440px) {
    .footer {
        padding: 25px var(--spacing-2xl);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .footer {
        padding: 20px var(--spacing-md);
    }
    
    .footer-links {
        flex-direction: row;
        gap: var(--spacing-sm);
    }
    
    .footer-info-item {
        flex-direction: row;
        gap: 10px;
    }
}