.footer-container {
    background: #1a1a2e;
    color: white;
    padding: 60px 20px 30px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    margin-bottom: 20px;
    color: #ffd700;
}

.footer-section p,
.footer-section a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
}

.whatsapp-float {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 100;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* ── Region link block (SEO internal linking) ───────────────── */
.footer-regions {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 28px;
    padding-top: 22px;
}
.footer-regions h3 {
    font-size: .95rem;
    margin: 0 0 8px;
    opacity: .9;
}
.footer-regions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    line-height: 1.9;
}
.footer-regions-row a {
    font-size: .82rem;
    opacity: .72;
    white-space: nowrap;
}
.footer-regions-row a:hover { opacity: 1; }

/* ── WhatsApp button on small screens — 15 Oct 2026 ──────────
   At bottom/right 40px the 60px bubble floated well inside the
   viewport and sat directly on top of the search field on the
   homepage and the auctions page, and over the thumbnail strip
   on a vehicle page — it swallowed those taps. Tucking it into
   the corner and trimming it slightly clears the content while
   keeping it comfortably tappable (52px > the 44px minimum). */
@media (max-width: 767px) {
    .whatsapp-float {
        bottom: 16px;
        right: 16px;
        width: 52px;
        height: 52px;
        font-size: 27px;
    }
}

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        transition: none;
    }
    .whatsapp-float:hover {
        transform: none;
    }
}