/* New Footer Styles - Figma Design */
.footer-new{
    position: relative;
    background: var(--bg-surface-primary, #0B0A15);
    z-index: 1;
    padding: 40px 0;
}

/* Footer Bottom Right Background Image */
.footer-new .footer-bottom-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/resources/images/home_new/footer-bg.png');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.footer-new::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 10, 21, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateZ(0);
    z-index: -1;
    pointer-events: none;
}

.footer-new-content {
    background: var(--Mobile-bg-surface-primary, linear-gradient(180deg, var(--Colors-Base-White-5, rgba(235, 235, 238, 0.05)) 0%, var(--Colors-Base-White-1, rgba(235, 235, 238, 0.01)) 100%));
    border: 1px solid var(--colors-base-white-15, rgba(235, 235, 238, 0.15));
    border-radius: 24px;
    padding: var(--spacing-40, 40px);
}

.footer-top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 88px;
    margin-bottom: var(--spacing-80, 80px);
    width: 100%;
}

.footer-cta{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32, 32px);
    max-width: 299px;
}

.footer-description{
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: 400;
    font-size: var(--font-size-text-m, 16px);
    line-height: var(--font-line-height-text-m, 24px);
    letter-spacing: var(--font-letter-spacing-text-m, 0.1px);
    color: var(--fg-tertiary-rest, #9f9cb0);
    white-space: pre-wrap;
    margin: 0;
}

.footer-menu{
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    flex: 1;
    gap: var(--spacing-24, 24px);
}

.footer-menu-column{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24, 24px);
    flex: 1;
    min-width: 0;
    max-width: 200px;
}

/* Hide mobile footer on desktop */
.footer-mobile{
    display: none;
}

/* Show desktop footer on desktop */
.footer-desktop{
    display: block;
    margin: 80px 40px 0 40px;
}

.footer-menu-heading{
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 0.7px;
    color: var(--fg-primary-rest, #ebebee);
    margin: 0;
}

.footer-menu-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24, 24px);
}

.footer-menu-list li{
    margin: 0;
}

.footer-menu-list a{
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: var(--font-weight-regular, 400);
    font-size: var(--font-size-text-m, 16px);
    line-height: var(--font-line-height-text-m, 24px);
    letter-spacing: var(--font-letter-spacing-text-m, 0.1px);
    color: var(--fg-primary-rest, #ebebee);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-10, 10px);
    transition: color var(--transition, 100ms linear);
    -webkit-tap-highlight-color: transparent;
}

.footer-menu-list a:hover{
    color: var(--colors-peach-300, #ffbfb5);
}

.footer-menu-list a svg{
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.footer-bottom{
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.footer-brand{
    display: flex;
    justify-content: center;
    width: 100%;
}

.footer-brand-svg{
    width: 100%;
    max-width: 1248px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.footer-divider{
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, rgba(235, 235, 238, 0.2), transparent);
}

.footer-copyright-socials{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.footer-copyright{
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: 400;
    font-size: var(--font-size-text-m, 16px);
    line-height: var(--font-line-height-text-m, 24px);
    letter-spacing: var(--font-letter-spacing-text-m, 0.1px);
    color: var(--fg-tertiary-rest, #9f9cb0);
    margin: 0;
}

.footer-socials{
    display: flex;
    align-items: center;
    gap: var(--spacing-16, 16px);
}

.footer-social-icon{
    width: 56px;
    height: 56px;
    border: 1px solid var(--colors-violet-300-12, rgba(196, 181, 255, 0.12));
    border-radius: var(--roundings-round, 999px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 8px);
    transition: all var(--transition, 100ms linear);
    text-decoration: none;
}

.footer-social-icon:hover{
    border-color: var(--colors-violet-300, #c4b5ff);
    opacity: 0.8;
}

.footer-social-icon svg{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.footer-rights{
    font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
    font-weight: 400;
    font-size: var(--font-size-text-m, 16px);
    line-height: var(--font-line-height-text-m, 24px);
    letter-spacing: var(--font-letter-spacing-text-m, 0.1px);
    color: var(--fg-tertiary-rest, #9f9cb0);
    text-align: right;
    width: 184px;
    white-space: pre-wrap;
    margin: 0;
}

@media(width >= 768px) and (width < 1200px){
    /* Tablet to Medium Desktop: Evenly distribute footer columns */
    .footer-top{
        flex-direction: column;
        gap: var(--spacing-56, 56px);
    }
    
    .footer-menu{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
        width: 100%;
        gap: var(--spacing-24, 24px);
    }
    
    .footer-menu-column{
        flex: 1;
        min-width: 0;
        max-width: none;
    }
    
    .footer-brand-svg{
        max-width: 750px;
    }
}

/* Mobile Footer Styles (< 768px) - Completely Separate */
@media(width < 768px){
    /* Hide desktop footer on mobile */
    .footer-desktop{
        display: none;
    }
    
    /* Show mobile footer on mobile */
    .footer-mobile{
        display: block;
    }
    .footer-new{
        padding-bottom: 24px;
    }
    
    .footer-new-content.footer-mobile{
        padding: var(--spacing-24, 24px);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-40, 40px);
    }
    
    /* Mobile Top Section */
    .footer-top-mobile{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-40, 40px);
    }
    
    .footer-cta-mobile{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-16, 16px);
        max-width: 100%;
    }
    
    .footer-description-mobile{
        font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
        font-weight: 400;
        font-size: var(--font-size-text-m, 16px);
        line-height: var(--font-line-height-text-m, 24px);
        letter-spacing: var(--font-letter-spacing-text-m, 0.1px);
        color: var(--fg-tertiary-rest, #9f9cb0);
        white-space: pre-wrap;
        margin: 0;
    }
    
    /* Mobile Menu - Accordion Style */
    .footer-menu-mobile{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-24, 24px);
        width: 100%;
    }
    
    .footer-menu-column-mobile{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-20, 20px);
    }
    
    .footer-accordion-header-mobile{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0;
    }
    
    .footer-menu-heading-mobile{
        font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
        font-weight: 400;
        font-size: var(--font-size-h2, 20px);
        line-height: var(--font-line-height-h2, 20px);
        letter-spacing: var(--font-letter-spacing-h2, 0.2px);
        color: var(--fg-primary-rest, #ebebee);
        margin: 0;
    }
    
    .footer-accordion-toggle-mobile{
        background: transparent;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }
    
    .footer-accordion-icon-minus-mobile,
    .footer-accordion-icon-plus-mobile{
        width: 24px;
        height: 24px;
        display: block;
    }
    
    .footer-accordion-content-mobile{
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
        margin-top: 0;
    }
    
    .footer-accordion-item-mobile.active .footer-accordion-content-mobile{
        max-height: 500px;
        opacity: 1;
        margin-top: 0;
    }
    
    .footer-accordion-item-mobile.active .footer-accordion-icon-minus-mobile{
        display: block;
    }
    
    .footer-accordion-item-mobile.active .footer-accordion-icon-plus-mobile{
        display: none;
    }
    
    .footer-accordion-item-mobile:not(.active) .footer-accordion-icon-minus-mobile{
        display: none;
    }
    
    .footer-accordion-item-mobile:not(.active) .footer-accordion-icon-plus-mobile{
        display: block;
    }
    
    .footer-menu-list-mobile{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-24, 24px);
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .footer-menu-list-mobile li{
        margin: 0;
    }
    
    .footer-menu-list-mobile a{
        font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
        font-weight: var(--font-weight-regular, 400);
        font-size: var(--font-size-text-m, 16px);
        line-height: var(--font-line-height-text-m, 24px);
        letter-spacing: var(--font-letter-spacing-text-m, 0.1px);
        color: var(--fg-primary-rest, #ebebee);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: var(--spacing-10, 10px);
        transition: color var(--transition, 100ms linear);
    -webkit-tap-highlight-color: transparent;
    }
    
    .footer-menu-list-mobile a:hover{
        color: var(--colors-peach-300, #ffbfb5);
    }
    
    .footer-menu-list-mobile a svg{
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.footer-menu-list a:focus-visible,
.footer-menu-list-mobile a:focus-visible,
.footer-accordion-toggle-mobile:focus-visible{
    outline: none;
    box-shadow: none;
}

@media(width >= 768px){
    .footer-desktop{
        display: block;
    }
    .footer-mobile{
        display: none;
    }
}
    
    /* Menu Dividers */
    .footer-menu-divider-mobile{
        height: 4px;
        width: 100%;
        margin: 0;
        background: rgba(235, 235, 238, 0.1);
    }
    
    /* Mobile Bottom Section */
    .footer-bottom-mobile{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-40, 40px);
        width: 100%;
    }
    
    .footer-copyright-socials-mobile{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-24, 24px);
        align-items: center;
        width: 100%;
    }
    
    .footer-socials-mobile{
        display: flex;
        align-items: center;
        gap: var(--spacing-24, 24px);
        justify-content: center;
    }
    
    .footer-social-icon-mobile{
        width: 48px;
        height: 48px;
        border: 1px solid var(--colors-violet-300-12, rgba(196, 181, 255, 0.12));
        border-radius: var(--roundings-round, 999px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-8, 8px);
        text-decoration: none;
        transition: all var(--transition, 100ms linear);
    }
    
    .footer-social-icon-mobile:hover{
        border-color: var(--colors-violet-300, #c4b5ff);
        opacity: 0.8;
    }
    
    .footer-social-icon-mobile svg{
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
    
    .footer-copyright-text-mobile{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4, 4px);
        align-items: center;
        text-align: center;
    }
    
    .footer-copyright-mobile{
        font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
        font-weight: 400;
        font-size: var(--font-size-text-s, 14px);
        line-height: var(--font-line-height-text-s, 21px);
        letter-spacing: var(--font-letter-spacing-text-s, 0.1px);
        color: var(--fg-tertiary-rest, #9f9cb0);
        margin: 0;
    }
    
    .footer-rights-mobile{
        font-family: var(--font-family-inter-tight, "Inter Tight", sans-serif);
        font-weight: 400;
        font-size: var(--font-size-text-s, 14px);
        line-height: var(--font-line-height-text-s, 21px);
        letter-spacing: var(--font-letter-spacing-text-s, 0.1px);
        color: var(--fg-tertiary-rest, #9f9cb0);
        text-align: center;
        width: 184px;
        white-space: pre-wrap;
        margin: 0;
    }
    
    .footer-brand-mobile{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .footer-brand-svg-mobile{
        width: 100%;
        max-width: 279px;
        height: auto;
        display: block;
    }
}