/* Mobile Footer Layout Fix - 375px viewport */
/* Created: 2026-02-07 */

/* =============================================
   MOBILE FOOTER STYLES - 375px and below
   ============================================= */

@media screen and (max-width: 576px) {
    /* Footer container adjustments */
    #footer .footer-top {
        padding: 40px 15px 20px 15px;
        background-size: cover;
    }
    
    #footer .footer-top .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Stack footer columns properly */
    #footer .footer-top .row {
        flex-direction: column;
    }
    
    #footer .footer-top .col-lg-3,
    #footer .footer-top .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 25px;
    }
    
    /* Footer links section */
    #footer .footer-top .footer-links {
        margin-bottom: 20px;
        text-align: center;
    }
    
    #footer .footer-top .footer-links ul {
        padding: 0;
        margin: 0;
    }
    
    #footer .footer-top .footer-links ul li {
        padding: 8px 0;
        border-bottom-color: rgba(255, 255, 255, 0.2);
    }
    
    #footer .footer-top .footer-links ul li a {
        font-size: 14px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        display: block;
    }
    
    /* Section titles */
    #footer .footer-top .h4Title {
        font-size: 16px;
        text-align: center;
        margin-bottom: 15px;
    }
    
    #footer .footer-top .h4Title::before,
    #footer .footer-top .h4Title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Footer contact section */
    #footer .footer-top .footer-contact {
        text-align: center;
        margin-bottom: 20px;
    }
    
    #footer .footer-top .footer-contact p {
        font-size: 13px;
        margin-bottom: 10px !important;
    }
    
    #footer .footer-top .footer-contact img {
        max-width: 100%;
        height: auto;
    }
    
    /* Age and help icons row */
    #footer .age,
    #footer .help {
        width: 100%;
        max-width: 200px;
        margin: 10px auto;
        text-align: center;
        font-size: 12px;
    }
    
    #footer .age img,
    #footer .help img {
        display: block;
        margin: 0 auto 5px auto;
        max-width: 100%;
        height: auto;
    }
    
    /* Copyright section */
    #footer .copyright {
        font-size: 12px;
        padding: 15px 10px;
        text-align: center;
        line-height: 1.5;
    }
    
    #footer .copyright strong {
        display: block;
        margin-bottom: 5px;
    }
    
    #footer .copyright span {
        font-size: 10px;
        display: block;
        margin-top: 5px;
    }
    
    /* Newsletter form adjustments */
    #footer .footer-top .footer-newsletter {
        text-align: center;
    }
    
    #footer .footer-top .footer-newsletter input[type=email] {
        width: 60%;
        font-size: 13px;
        padding: 8px 10px;
    }
    
    #footer .footer-top .footer-newsletter input[type=submit] {
        width: 38%;
        font-size: 12px;
        padding: 8px 5px;
    }
    
    .subscribe-footer-form .form-control {
        width: 70% !important;
        font-size: 13px;
    }
    
    .subscribe-footer-form button {
        font-size: 12px;
        padding: 0 10px !important;
    }
    
    /* Social links */
    #footer .footer-top .social-links {
        text-align: center;
    }
    
    #footer .footer-top .social-links a {
        width: 32px;
        height: 32px;
        padding: 6px 0;
        font-size: 16px;
        margin: 0 3px;
    }
}

/* Extra small devices - 375px and below */
@media screen and (max-width: 375px) {
    #footer .footer-top {
        padding: 30px 10px 15px 10px;
    }
    
    #footer .footer-top .col-lg-3,
    #footer .footer-top .col-md-6 {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    #footer .footer-top .h4Title {
        font-size: 14px;
    }
    
    #footer .footer-top .footer-links ul li {
        padding: 6px 0;
    }
    
    #footer .footer-top .footer-links ul li a {
        font-size: 13px;
    }
    
    #footer .copyright {
        font-size: 11px;
        padding: 10px 5px;
    }
    
    #footer .copyright span {
        font-size: 9px;
    }
    
    #footer .age,
    #footer .help {
        font-size: 11px;
        max-width: 180px;
    }
    
    .subscribe-footer-form .form-control {
        width: 65% !important;
        font-size: 12px;
    }
    
    .subscribe-footer-form button {
        font-size: 11px;
        padding: 0 8px !important;
    }
}