/* ============================================================
   FOOTER CSS — SportZone Pro
   ============================================================ */

/* ── Pre-footer CTA ───────────────────────────────────────── */
.sz-prefooter {
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.06) 0%, rgba(0, 176, 255, 0.04) 100%);
    border-top: 1px solid rgba(0, 230, 118, 0.15);
    border-bottom: 1px solid var(--sz-border);
    padding: 48px 0;
}
.sz-prefooter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.sz-prefooter-text h2 {
    font-family: var(--sz-font-head);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.sz-prefooter-text h2 span { color: var(--sz-green); }
.sz-prefooter-text p { color: var(--sz-text2); font-size: 0.9rem; }
.sz-prefooter-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Footer Body ──────────────────────────────────────────── */
.sz-footer { background: #020a14; color: var(--sz-text2); }
.sz-footer-body { padding: 64px 0 40px; }
.sz-footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 40px;
}

/* Brand Column */
.sz-footer-brand { display: flex; flex-direction: column; gap: 16px; }
.sz-footer-logo { display: inline-block; margin-bottom: 4px; }
.sz-footer-logo .sz-logo-text { font-size: 1.2rem; }
.sz-footer-tagline { font-size: 0.88rem; color: var(--sz-text2); line-height: 1.6; max-width: 280px; }
.sz-social-links { display: flex; gap: 10px; margin-top: 4px; }
.sz-social-link {
    width: 38px; height: 38px;
    background: var(--sz-surface);
    border: 1px solid var(--sz-border2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sz-text2);
    transition: all 0.2s ease;
}
.sz-social-link:hover {
    background: var(--sz-green-glow);
    border-color: var(--sz-green);
    color: var(--sz-green);
    transform: translateY(-2px);
}
.sz-footer-contact { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.sz-footer-contact p { font-size: 0.82rem; display: flex; align-items: center; gap: 8px; margin: 0; }
.sz-footer-contact a { color: var(--sz-text2); transition: color 0.2s; }
.sz-footer-contact a:hover { color: var(--sz-green); }

/* Link Columns */
.sz-footer-col h4 {
    font-family: var(--sz-font-head);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sz-text);
    margin-bottom: 16px;
}
.sz-footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.sz-footer-col ul li a {
    font-size: 0.85rem;
    color: var(--sz-text2);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sz-footer-col ul li a:hover {
    color: var(--sz-green);
    transform: translateX(4px);
}

/* ── Footer Bottom Bar ────────────────────────────────────── */
.sz-footer-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 0;
}
.sz-footer-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.sz-footer-bar p { font-size: 0.78rem; color: var(--sz-muted); margin: 0; }
.sz-footer-nav { display: flex; list-style: none; gap: 16px; }
.sz-footer-nav a { font-size: 0.78rem; color: var(--sz-muted); transition: color 0.2s; }
.sz-footer-nav a:hover { color: var(--sz-green); }
.sz-footer-powered { opacity: 0.5; }
.sz-footer-powered a { color: inherit; }
.sz-footer-powered a:hover { color: var(--sz-green); opacity: 1; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sz-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .sz-footer-grid > :last-child { display: none; }
}
@media (max-width: 768px) {
    .sz-prefooter-inner { flex-direction: column; text-align: center; }
    .sz-prefooter-actions { justify-content: center; }
    .sz-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .sz-footer-grid { grid-template-columns: 1fr; }
    .sz-footer-bar-inner { flex-direction: column; text-align: center; gap: 8px; }
    .sz-footer-nav { justify-content: center; flex-wrap: wrap; gap: 10px; }
}