/* ============================================
   MOBILE FOOTER POLISH - COMPACT & CLEAN
   Mobile Only (max-width: 767px)
   Desktop/Tablet: UNCHANGED
   ============================================ */

@media (max-width: 767px) {
    
    /* ============================================
       1. FOOTER SPACING - TIGHT & COMPACT
       ============================================ */
    
    footer {
        padding-top: clamp(20px, 4vw, 28px) !important;
        padding-bottom: clamp(12px, 2.5vw, 18px) !important;
        margin-top: clamp(20px, 4vw, 28px) !important;
    }
    
    .footer-grid {
        padding-bottom: clamp(12px, 2.5vw, 18px) !important;
        gap: clamp(18px, 3.5vw, 22px) !important;
    }
    
    .footer-col {
        margin-bottom: clamp(16px, 3vw, 20px) !important;
        padding-bottom: clamp(12px, 2.5vw, 16px) !important;
    }
    
    .footer-col:last-child {
        padding-bottom: 4px !important;
        margin-bottom: 0 !important;
    }
    
    .footer-col h3 {
        margin-bottom: clamp(10px, 2vw, 14px) !important;
        padding-bottom: clamp(5px, 1.2vw, 7px) !important;
        font-size: clamp(16px, 4vw, 18px) !important;
        text-align: center !important;
    }
    
    /* ============================================
       2. QUICK LINKS & COURSES - COMPACT LIST
       ============================================ */
    
    /* All footer lists - reset spacing - CENTER ALIGNED */
    .footer-links,
    .footer-col ul:not(.contact-list) {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 1.2px !important;
        text-align: center !important;
    }
    
    /* All footer list items - compact spacing (2px) - CENTER ALIGNED */
    .footer-links li,
    .footer-col ul:not(.contact-list) li {
        margin: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        padding-block: 2px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
    
    /* Quick Links section only - spacing 0.8px (typically 2nd footer-col) */
    .footer-col:nth-child(2) .footer-links li,
    .footer-col:nth-of-type(2) .footer-links li {
        padding-block: 0.8px !important;
        padding-top: 0.8px !important;
        padding-bottom: 0.8px !important;
    }
    
    /* Remove bottom border from last item */
    .footer-links li:last-child,
    .footer-col ul:not(.contact-list) li:last-child {
        border-bottom: none !important;
        padding-bottom: 2px !important;
    }
    
    /* Quick Links last item - spacing 0.8px */
    .footer-col:nth-child(2) .footer-links li:last-child,
    .footer-col:nth-of-type(2) .footer-links li:last-child {
        padding-bottom: 0.8px !important;
    }
    
    /* Remove any nested element spacing */
    .footer-links li *,
    .footer-col ul:not(.contact-list) li * {
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Footer links - compact, touch-friendly - CENTER ALIGNED */
    .footer-links li a,
    .footer-col ul:not(.contact-list) li a {
        font-size: clamp(13px, 3.2vw, 14px) !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        padding-block: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center !important;
        text-align: center !important;
        color: #aaa;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    /* Remove any <br> or empty elements inside */
    .footer-links li br,
    .footer-col ul:not(.contact-list) li br {
        display: none !important;
        height: 0 !important;
        line-height: 0 !important;
    }
    
    .footer-links li a:hover,
    .footer-col ul:not(.contact-list) li a:hover {
        color: var(--primary-red, #c62828);
        padding-left: 0 !important;
        transform: scale(1.05);
    }
    
    /* ============================================
       3. CONTACT US - TIGHT SPACING, ONE ROW PER ITEM
       ============================================ */
    
    .contact-list {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-top: clamp(3px, 0.75vw, 5px) !important;
        margin-bottom: 2px !important;
        display: flex;
        flex-direction: column;
        gap: clamp(5px, 1vw, 6px) !important;
    }
    
    .contact-list li {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: clamp(4px, 1vw, 6px) !important;
        font-size: clamp(13px, 3.2vw, 14px) !important;
        line-height: 1.3 !important;
    }
    
    /* Contact Icons - No extra spacing */
    .contact-list li i {
        font-size: clamp(14px, 3.5vw, 16px) !important;
        width: clamp(18px, 4.5vw, 22px) !important;
        min-width: clamp(18px, 4.5vw, 22px) !important;
        color: var(--primary-red, #c62828) !important;
        margin: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        flex-shrink: 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Contact Text/Links - Tight spacing */
    .contact-list li a,
    .contact-list li span {
        flex: 1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        color: #aaa;
        text-decoration: none;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.5 !important;
    }
    
    .contact-list li a {
        min-height: 40px;
        display: flex;
        align-items: center;
        transition: color 0.3s ease;
    }
    
    .contact-list li a:hover {
        color: var(--primary-red, #c62828) !important;
    }
    
    /* Address - Multi-line support but still one row */
    .contact-list li:has(i.fa-map-marker-alt) {
        align-items: flex-start;
    }
    
    .contact-list li:has(i.fa-map-marker-alt) i {
        margin-top: 3px;
    }
    
    .contact-list li:has(i.fa-map-marker-alt) a {
        align-items: flex-start;
        line-height: 1.6;
    }
    
    /* Phone Numbers - Single Line - compact, no stretch - 2 spaces between numbers */
    .contact-list li .phone-numbers {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
    }
    
    .contact-list li .phone-numbers a {
        flex: 0 0 auto !important;
        min-height: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        font-size: clamp(13px, 3.2vw, 14px) !important;
        padding: 0 !important;
        margin: 0 !important;
        text-decoration: none !important;
        color: #aaa !important;
        border-radius: 4px !important;
        transition: all 0.3s ease !important;
    }
    
    .contact-list li .phone-numbers a:hover {
        color: var(--primary-red, #c62828) !important;
        background: rgba(198, 40, 40, 0.1) !important;
    }
    
    .contact-list li .phone-sep {
        margin: 0 0.25em !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Ensure phone icon and numbers stay on same line */
    .contact-list li:has(i.fa-phone-alt),
    .contact-list li:has(i.fa-phone) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: clamp(8px, 2vw, 12px) !important;
    }
    
    .contact-list li:has(i.fa-phone-alt) i,
    .contact-list li:has(i.fa-phone) i {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    
    .contact-list li:has(i.fa-phone-alt) .phone-numbers,
    .contact-list li:has(i.fa-phone) .phone-numbers {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    
    /* Email - Single row */
    .contact-list li:has(i.fa-envelope) {
        align-items: center;
    }
    
    /* ============================================
       4. SOCIAL ICONS - MINIMAL SPACING, SAME LINE
       ============================================ */
    
    .footer-col:last-child > div[style*="margin-top"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .footer-social-wrap {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: clamp(6px, 1.5vw, 10px) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .footer-social-wrap::before {
        font-size: clamp(12px, 3vw, 14px) !important;
    }
    
    .footer-social-wrap > div {
        flex-wrap: nowrap !important;
        gap: clamp(6px, 1.5vw, 10px) !important;
    }
    
    .footer-col:last-child div[style*="display: flex"][style*="gap"] {
        gap: clamp(6px, 1.5vw, 10px) !important;
    }
    
    /* Footer icons - compact on mobile, same design */
    .footer-col:last-child div[style*="display: flex"] a,
    .footer-social-wrap .footer-social-link {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 15px !important;
    }
    
    /* ============================================
       5. FOOTER BOTTOM - COMPACT
       ============================================ */
    
    .copyright,
    footer .container:last-child {
        padding-top: clamp(12px, 2.5vw, 16px) !important;
        padding-bottom: clamp(8px, 1.8vw, 12px) !important;
        margin-top: clamp(12px, 2.5vw, 16px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .copyright .container,
    footer .container:last-child {
        font-size: clamp(11px, 2.8vw, 12px) !important;
        line-height: 1.4;
        text-align: center;
    }
    
    /* ============================================
       6. REMOVE ALL EXTRA SPACING
       ============================================ */
    
    /* Remove any <br> spacing */
    footer br {
        display: none !important;
    }
    
    /* Remove empty paragraphs */
    footer p:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove extra whitespace from text nodes */
    footer * {
        white-space: normal;
    }
    
    /* Remove any stray commas or punctuation spacing */
    footer li::before,
    footer li::after {
        content: none !important;
    }

    /* ============================================
       7. MOBILE BOTTOM NAV (sticky) + scroll clearance
       Footer / last content hides behind bar — body padding fixes it
       ---
       Height check (for Tawk / layout): total bar ≈ padding-top 5px + icon ~18–21px (clamp)
       + dot 4px + label ~7–8px + padding-bottom 6px + env(safe-area-inset-bottom).
       Typical ~52–58px content + safe area → often ~62–88px full getBoundingClientRect().height.
       JS sets --mpypcp-tawk-bottom from live nav rect (always above bar + 38px). Policy: _dev/TAWK-PLACEMENT.md
       ============================================ */
    html.mpypcp-mobile-nav-on {
        scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    html.mpypcp-mobile-nav-on body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box;
    }

    #mpypcp-mobile-bottom-nav {
        display: none;
    }

    /* Very light blush / barely-there red tint */
    html.mpypcp-mobile-nav-on #mpypcp-mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        z-index: 9998;
        justify-content: space-between;
        align-items: flex-end;
        padding: 5px max(4px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-right, 0px));
        margin: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;

        background: linear-gradient(180deg, #fffdfd 0%, #fff8f8 45%, #fff0f1 100%);
        border-radius: 0;
        border: none;
        border-top: 1px solid #fce4ec;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            0 -1px 8px rgba(183, 28, 28, 0.06);
    }

    #mpypcp-mobile-bottom-nav .mpypcp-mbn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        min-width: 0;
        padding: 0 2px 1px;
        text-decoration: none;
        color: #6d4c41;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-size: clamp(7px, 1.85vw, 8px);
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        transition: color 0.2s ease, transform 0.15s ease;
    }

    #mpypcp-mobile-bottom-nav .mpypcp-mbn-item:active {
        transform: scale(0.95);
    }

    #mpypcp-mobile-bottom-nav .mpypcp-mbn-ico {
        font-size: clamp(1.15rem, 4.2vw, 1.32rem);
        line-height: 1;
        margin-bottom: 1px;
        filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.6));
        transform: translateZ(0);
    }

    #mpypcp-mobile-bottom-nav .mpypcp-mbn-item.mpypcp-mbn-active .mpypcp-mbn-ico {
        filter: drop-shadow(0 1px 2px rgba(198, 40, 40, 0.15));
        transform: scale(1.05);
    }

    #mpypcp-mobile-bottom-nav .mpypcp-mbn-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: transparent;
        margin: 1px 0 2px;
        flex-shrink: 0;
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    }

    #mpypcp-mobile-bottom-nav .mpypcp-mbn-item.mpypcp-mbn-active {
        color: #c62828;
    }

    #mpypcp-mobile-bottom-nav .mpypcp-mbn-item.mpypcp-mbn-active .mpypcp-mbn-dot {
        background: #d32f2f;
        box-shadow: 0 0 0 1px rgba(211, 47, 47, 0.25);
        opacity: 1;
        transform: scale(1);
    }

    #mpypcp-mobile-bottom-nav .mpypcp-mbn-item:not(.mpypcp-mbn-active) .mpypcp-mbn-dot {
        height: 4px;
        margin: 1px 0 2px;
    }

    #mpypcp-mobile-bottom-nav .mpypcp-mbn-txt {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        line-height: 1.05;
        margin-top: 0;
    }

    /* ============================================
       Tawk.to — mobile placement (see _dev/TAWK-PLACEMENT.md)
       Bottom-right; JS sets bottom from nav geometry. Fallback = conservative bar+gap only.
       ============================================ */
    html.mpypcp-mobile-nav-on #tawkchat-container,
    html.mpypcp-mobile-nav-on #tawkchat-minimized,
    html.mpypcp-mobile-nav-on #tawkchat-minimized-container,
    html.mpypcp-mobile-nav-on #tawkchat-minimized-wrapper,
    html.mpypcp-mobile-nav-on #tawkchat-minimized-iframe-container,
    html.mpypcp-mobile-nav-on #tawkchat-iframe-container,
    html.mpypcp-mobile-nav-on .tawk-min-container {
        bottom: var(
            --mpypcp-tawk-bottom,
            calc(56px + env(safe-area-inset-bottom, 0px) + 38px)
        ) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        z-index: 10001 !important;
    }
}

@media (min-width: 768px) {
    html.mpypcp-mobile-nav-on body {
        padding-bottom: 0 !important;
    }

    #mpypcp-mobile-bottom-nav {
        display: none !important;
    }
}