/* ==========================================================================
   Beirut Lebanese Foods - Premium Footer System
   ========================================================================== */


/* =========================
   02. Back To Top Button
   ========================= */
.back-to-top{
    position:fixed;
    right:26px;
    bottom:26px;
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    background:var(--blf-green);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:9990;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    box-shadow:0 14px 35px rgba(169,205,46,.32);
    transition:.3s ease;
}

.back-to-top.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    background:#fff;
    color:#222;
}

/* =========================
   03. Footer Main Layout
   ========================= */
.footer.footer--dark{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            rgba(0,17,43,.92),
            rgba(0,17,43,.92)
        ),
        url("../images/bg-pattrens/pattren26.jpg") center center repeat,
        linear-gradient(
            135deg,
            #00112b 0%,
            #001634 20%,
            #001b3d 45%,
            #00112b 75%,
            #001634 100%
        );

    background-blend-mode:multiply;

    color:var(--blf-footer-text);
    padding:80px 0 0;
    border-top:4px solid var(--blf-green);
}
.footer .container{
    width:94%;
    max-width:1400px;
    margin:0 auto;
    position:relative;
    z-index:2;
}

.footer-content{
    display:grid;
    grid-template-columns:1.25fr .85fr .85fr 1.25fr;
    gap:42px;
    align-items:flex-start;
}

.footer-col{
    min-width:0;
}

/* =========================
   04. Brand Column
   ========================= */
.brand-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
}

.footer-logo{
    width:126px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.brand-title{
    font-family:var(--font-heading);
    font-size:25px;
    line-height:1.2;
    font-weight:700;
    color:var(--blf-footer-title);
    margin:0;
}

.footer-about-text{
    max-width:330px;
    color:var(--blf-footer-text);
    line-height:1.85;
    margin:0 0 24px;
}

.footer-quote-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 24px;
    border-radius:50px;
    background:var(--blf-green);
    color:#fff !important;
    font-size:12px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
    text-decoration:none;
    box-shadow:0 14px 35px rgba(169,205,46,.20);
    transition:.3s ease;
}

.footer-quote-btn:hover{
    background:#fff;
    color:#222 !important;
    transform:translateY(-2px);
}

/* =========================
   05. Titles & Links
   ========================= */
.footer-ttl{
    font-family:var(--font-heading);
    color:var(--blf-footer-title);
    font-size:23px;
    line-height:1.25;
    font-weight:700;
    margin:0 0 22px;
    position:relative;
    padding-bottom:14px;
}

.footer-ttl:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:54px;
    height:3px;
    border-radius:3px;
    background:var(--blf-green);
}

.footer p{
    color:var(--blf-footer-text);
}

.footer a{
    color:#e9edf3;
    text-decoration:none;
    transition:.25s ease;
}

.footer a:hover{
    color:var(--blf-green);
}

.footer-links{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:11px;
}

.footer-links li{
    margin:0;
    padding:0;
}

.footer-links a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--blf-footer-text);
    font-size:14px;
    line-height:1.4;
}

.footer-links a:before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--blf-green);
    opacity:.65;
    transition:.25s ease;
}

.footer-links a:hover{
    transform:translateX(4px);
}

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

/* =========================
   06. Contact Lines
   ========================= */
.contact-lines{
    display:grid;
    gap:10px;
    margin-bottom:20px;
}

.contact-lines p{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0;
    color:var(--blf-footer-text);
    line-height:1.6;
}

.contact-lines i{
    color:var(--blf-green);
    min-width:18px;
    margin-top:4px;
}

/* =========================
   07. Social Icons
   ========================= */
.social-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin:24px 0;
}

.social-icon{
    position:relative;
    width:42px;
    height:42px;
    aspect-ratio:1/1;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50% !important;
    background:#101010;
    color:#fff !important;
    text-decoration:none;
    overflow:hidden;
    isolation:isolate;
    transition:transform .35s ease, box-shadow .35s ease;
}

.social-icon:hover{
    transform:translateY(-5px);
    color:#fff !important;
}

.social-icon:before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:50%;
    background-size:400% 400%;
    animation:neonMove 5s linear infinite;
    opacity:0;
    z-index:-2;
    transition:.35s ease;
}

.social-icon:after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    filter:blur(22px);
    opacity:0;
    z-index:-3;
    transition:.35s ease;
    background:inherit;
}

.social-icon:hover:before,
.social-icon:hover:after{
    opacity:1;
}

.social-icon i{
    display:inline-block;
    font-size:16px;
    transition:.35s ease;
}

.social-icon:hover i{
    transform:scale(1.15);
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px currentColor;
}

.social-icon-instagram:before,
.social-icon-instagram:after{
    background-image:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#6b209c,#f09433);
}

.social-icon-facebook:before,
.social-icon-facebook:after{
    background-image:linear-gradient(45deg,#1877f2,#42a5ff,#0d47a1,#1877f2);
}

.social-icon-linkedin:before,
.social-icon-linkedin:after{
    background-image:linear-gradient(45deg,#0a66c2,#00a0dc,#0077b5,#0a66c2);
}

.social-icon-whatsapp:before,
.social-icon-whatsapp:after{
    background-image:linear-gradient(45deg,#25d366,#1ebe5d,#128c4a,#25d366);
}

.social-icon-twitter:before,
.social-icon-twitter:after{
    background-image:linear-gradient(45deg,#1da1f2,#fff,#0f1419,#1da1f2);
}

.social-icon-tiktok:before,
.social-icon-tiktok:after{
    background-image:linear-gradient(45deg,#25f4ee,#000,#fe2c55,#25f4ee);
}

@keyframes neonMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* =========================
   08. Newsletter
   ========================= */
.newsletter{
    margin-top:8px;
}

.newsletter-title{
    font-size:16px;
    font-weight:800;
    margin:0 0 12px;
    color:#fff;
}

.subscribe-inline{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
}

.subscribe-inline input[type="email"]{
    width:100%;
    min-height:46px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--blf-footer-border);
    border-radius:50px;
    padding:0 18px;
    color:#e9edf3;
    outline:none;
    transition:.25s ease;
}

.subscribe-inline input[type="email"]::placeholder{
    color:#8b93a3;
}

.subscribe-inline input[type="email"]:focus{
    border-color:rgba(169,205,46,.75);
    box-shadow:0 0 0 3px rgba(169,205,46,.16);
    background:rgba(255,255,255,.09);
}

.btn-sub{
    min-height:46px;
    border:0;
    border-radius:50px;
    padding:0 22px;
    background:var(--blf-green);
    color:#fff;
    cursor:pointer;
    font-weight:800;
    text-transform:uppercase;
    font-size:12px;
    transition:.25s ease;
}

.btn-sub:hover{
    background:#fff;
    color:#222;
    transform:translateY(-2px);
}

.sub-msg{
    grid-column:1/-1;
    margin:3px 0 0;
    min-height:18px;
    font-size:13px;
    color:#8fa1ad;
}

/* =========================
   09. Copyright Bottom Bar
   ========================= */
.footer-bottom{
    position:relative;
    z-index:2;
    margin-top:58px;
    border-top:1px solid var(--blf-footer-border);
    padding:22px 0;
    text-align:center;
    background:rgba(0,0,0,.18);
}

.footer-bottom .copy{
    margin:0;
    color:#aab5c0;
    font-size:14px;
}

/* =========================
   10. Accessibility Helper
   ========================= */
.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,1px,1px);
    white-space:nowrap;
    border:0;
}

/* =========================
   11. Responsive Footer
   ========================= */
@media(max-width:1199px){
    .footer-content{
        grid-template-columns:1.1fr 1fr 1fr;
    }

    .contact-media{
        grid-column:1/-1;
    }

    .subscribe-inline{
        max-width:520px;
    }
}

@media(max-width:768px){
    .footer.footer--dark{
        padding-top:62px;
    }

    .footer-content{
        grid-template-columns:1fr 1fr;
        gap:32px;
    }

    .footer-brand-col,
    .contact-media{
        grid-column:1/-1;
    }

    .footer-about-text{
        max-width:100%;
    }
}

@media(max-width:575px){
    .footer .container{
        width:90%;
    }

    .footer-content{
        grid-template-columns:1fr;
        gap:28px;
    }

    .footer-col{
        padding-top:22px;
        border-top:1px solid var(--blf-footer-border);
    }

    .footer-brand-col{
        padding-top:0;
        border-top:0;
    }

    .footer-logo{
        width:112px;
    }

    .brand-title{
        font-size:22px;
    }

    .footer-ttl{
        font-size:21px;
    }

    .subscribe-inline{
        grid-template-columns:1fr;
    }

    .btn-sub{
        width:100%;
    }

    .back-to-top{
        right:18px;
        bottom:18px;
        width:42px;
        height:42px;
    }
}