/* ============================================================
   vefogix-match custom FOOTER — injected site-wide, replaces the
   old seolounge footer ("Designed by RadiantThemes" + social icons).
   ============================================================ */

/* Hide the old theme footer entirely (footer-style-six real classes). */
.wraper_footer, .wraper_footer_main, .wraper_footer_copyright,
.footer_main, .footer_copyright, .footer_main_item, .footer_copyright_item,
.footer, footer.footer, .site-footer, .footer-main,
.wraper-footer, .copyright, .footer-copyright { display: none !important; }

.vfx-footer { background: #0b1530; color: #aebdd6; font-family: 'Inter', sans-serif; padding: 64px 22px 0; }
.vfx-footer-inner { max-width: 1280px; margin: 0 auto; }
.vfx-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08); }
.vfx-footer .vfx-footer-brand,
.vfx-footer .vfx-footer-brand a,
.vfx-footer .vfx-footer-brand img {
    background: none !important; background-color: transparent !important;
    box-shadow: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important;
}
.vfx-footer .vfx-footer-brand img {
    height: 50px; margin-bottom: 16px; display: block; filter: none !important;
}
/* Text logo for footer — avoids the LiteSpeed WebP optimizer flattening the
   transparent PNG to a white box. Clean white wordmark on the dark footer. */
.vfx-footer-logo-text {
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.01em;
    color: #ffffff; margin-bottom: 18px; line-height: 1;
}
.vfx-footer-logo-text span { color: #4ba0f5; margin-left: 7px; }
.vfx-footer-brand p { font-size: 14px; line-height: 1.7; color: #93a4c4; margin: 0 0 16px; }
.vfx-footer-contact { font-size: 14px; line-height: 1.9; }
.vfx-footer-contact a { color: #cdd9ee; text-decoration: none; }
.vfx-footer-contact a:hover { color: #fff; }
/* strong resets so the theme's global ul/li styling can't center or over-space these */
.vfx-footer .vfx-footer-col { text-align: left; }
.vfx-footer .vfx-footer-col h4 { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 16px; text-align: left; }
.vfx-footer .vfx-footer-col ul { list-style: none !important; margin: 0 !important; padding: 0 !important; text-align: left; }
.vfx-footer .vfx-footer-col li { margin: 0 0 11px !important; padding: 0 !important; line-height: 1.4; list-style: none !important; }
.vfx-footer .vfx-footer-col li::before { content: none !important; }
.vfx-footer .vfx-footer-col a { color: #aebdd6; text-decoration: none; font-size: 14px; transition: color .15s; display: inline-block; }
.vfx-footer .vfx-footer-col a:hover { color: #fff; }
.vfx-footer-bottom {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    padding: 24px 0; font-size: 13.5px; color: #7e90b3;
}
.vfx-footer-pay { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vfx-footer-pay span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #cdd9ee; }
.vfx-footer-social { display: flex; gap: 14px; }
.vfx-footer-social a { color: #aebdd6; font-size: 16px; text-decoration: none; }
.vfx-footer-social a:hover { color: #fff; }

@media (max-width: 1000px) { .vfx-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 640px) {
    .vfx-footer { padding: 40px 18px 0; }
    /* brand block spans the full width on top; link columns sit 2-up below it */
    .vfx-footer-top { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding-bottom: 32px; text-align: left; }
    .vfx-footer-brand { grid-column: 1 / -1; }
    .vfx-footer-col { text-align: left; }
    .vfx-footer-col h4 { margin-bottom: 12px; }
    .vfx-footer-col li { margin-bottom: 9px; }
    .vfx-footer-bottom { flex-direction: column; text-align: center; gap: 14px; }
    .vfx-footer-social, .vfx-footer-pay { justify-content: center; }
}
@media (max-width: 380px) { .vfx-footer-top { grid-template-columns: 1fr; } }

/* ============ Footer logo color + payment icons + social icons ============ */
.vfx-footer-logo-text { font-family:'Inter',sans-serif; font-weight:800; font-size:26px; letter-spacing:-.5px; margin-bottom:18px; }
.vfx-footer-logo-text .k { color:#29b6f6; }
.vfx-footer-logo-text { color:#fff; }
.vfx-footer-logo-text .seo { background:linear-gradient(90deg,#6366f1,#a855f7); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-left:4px; }

/* social icons */
.vfx-footer-social { display:flex; gap:10px; margin-top:18px; }
.vfx-footer-social a { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#cbd5e1; transition:.15s; }
.vfx-footer-social a:hover { background:linear-gradient(135deg,#29b6f6,#7c3aed); color:#fff; transform:translateY(-2px); }

/* payment icons — the same SVG brand marks used on the checkout pay page, on small
   white chips. height + width:auto keeps each SVG's aspect ratio (a fixed width made
   them collapse to a blank pill, so DON'T set width). */
.vfx-footer-pay { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.vfx-footer-pay img {
    height:26px; width:auto; display:block; box-sizing:content-box;
    background:#fff; border-radius:5px; padding:3px 6px;
}