/* ================================================================
   FOOTER — Mobile Responsive CSS
   ================================================================ */

/* Tablet — 2 columns */
@media (max-width: 960px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
        padding: 0 24px;
    }
}

/* Mobile nav appears at 768px — add bottom padding */
@media (max-width: 768px) {
    .site-footer {
        margin-top: 40px;
        padding-bottom: 68px; /* space for fixed bottom nav */
    }
    .footer-top { padding: 36px 0 28px; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        padding: 0 18px;
    }
    .ft-brand-name { font-size: 1.1rem; }
    .ft-desc { font-size: 0.8rem; margin-bottom: 14px; }
    .ft-col-title { font-size: 0.7rem; margin-bottom: 14px; }
    .ft-links a { font-size: 0.82rem; }
    .ft-contact-row { margin-bottom: 8px; }
    .ft-payments { margin-top: 14px; }
    .footer-bottom { padding: 14px 18px; }
    .footer-bottom-in { font-size: 0.72rem; }
}

/* Small phones — single column, centered */
@media (max-width: 520px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
        text-align: center;
    }
    .ft-brand-name { font-size: 1.05rem; }
    .ft-desc { font-size: 0.78rem; line-height: 1.6; }
    .ft-socials { justify-content: center; }
    .ft-nl-label { font-size: 0.76rem; }
    .ft-nl-row {
        flex-direction: column;
        gap: 10px;
    }
    .ft-nl-input {
        border-radius: 9px;
        text-align: center;
    }
    .ft-nl-btn {
        border-radius: 9px;
        width: 100%;
        padding: 11px;
    }
    .ft-col-title { margin-bottom: 12px; }
    .ft-links li { margin-bottom: 12px; }
    .ft-links a { font-size: 0.84rem; justify-content: center; }
    .ft-contact-row { justify-content: center; text-align: left; }
    .ft-payments { justify-content: center; margin-top: 14px; }
    .ft-pay { font-size: 0.68rem; padding: 5px 10px; }
    .footer-bottom { padding: 16px 16px; }
    .footer-bottom-in {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 6px;
    }
}

/* Extra small phones */
@media (max-width: 380px) {
    .footer-grid { padding: 0 14px; gap: 24px; }
    .ft-brand-name { font-size: 0.95rem; }
    .ft-links a { font-size: 0.8rem; }
}