/* ===============================================
   WHATSAPP CTA MOBILE FIX
   Fixes overlap, spacing, typography, and button styles
   =============================================== */

/* === WHATSAPP BUTTON STYLES === */
.whatsapp-btn-custom {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    font-size: var(--font-size-xl);
    font-weight: 800;
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--radius-full);
    box-shadow: 0 10px 40px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-btn-custom:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 50px rgba(37, 211, 102, 0.5);
    color: white;
    /* Ensure text remains white */
}

.whatsapp-phone-container {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(255, 255, 255, 0.05);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.whatsapp-phone-number {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.whatsapp-quick-info {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

/* === CONTACT SECTION MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {

    /* Hide social dock on mobile to prevent overlap with WhatsApp CTA */
    .social-dock {
        display: none !important;
    }

    /* Contact section container */
    #contact .container {
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
    }

    /* WhatsApp card - reduce padding for mobile */
    #contact .glass {
        padding: clamp(1rem, 5vw, 2rem) !important;
        margin-bottom: var(--space-lg) !important;
    }

    /* WhatsApp icon - scale down on mobile */
    #contact .glass>div>div:first-child {
        width: clamp(60px, 15vw, 80px) !important;
        height: clamp(60px, 15vw, 80px) !important;
        font-size: clamp(2rem, 8vw, 3rem) !important;
        margin-bottom: var(--space-md) !important;
    }

    /* Heading - responsive scaling */
    #contact .glass h3 {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
        margin-bottom: var(--space-sm) !important;
        line-height: 1.3 !important;
    }

    /* Description text */
    #contact .glass>div>p {
        font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
        margin-bottom: var(--space-md) !important;
    }

    /* Phone number display */
    .whatsapp-phone-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        padding: var(--space-sm) var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
    }

    .whatsapp-phone-number {
        font-size: clamp(1.125rem, 4.5vw, 1.5rem) !important;
        letter-spacing: 0.02em !important;
        word-spacing: 0.1em !important;
        white-space: nowrap !important;
    }

    /* WhatsApp button - full width on mobile */
    .whatsapp-btn-custom {
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(0.75rem, 3vw, 1rem) clamp(1rem, 4vw, 1.5rem) !important;
        font-size: clamp(0.875rem, 3.5vw, 1.125rem) !important;
        justify-content: center !important;
        gap: var(--space-sm) !important;
        box-sizing: border-box !important;
    }

    /* WhatsApp button SVG */
    .whatsapp-btn-custom svg {
        width: clamp(20px, 5vw, 24px) !important;
        height: clamp(20px, 5vw, 24px) !important;
        flex-shrink: 0 !important;
    }

    /* Quick info section */
    .whatsapp-quick-info {
        gap: var(--space-md) !important;
        padding-top: var(--space-md) !important;
        margin-top: var(--space-md) !important;
    }

    .whatsapp-quick-info>div {
        flex: 1 1 auto !important;
        min-width: 80px !important;
    }

    /* Alternative contact methods - stack vertically */
    #contact>div>div:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-sm) !important;
    }

    #contact>div>div:last-child a {
        width: 100% !important;
        justify-content: center !important;
        padding: var(--space-sm) var(--space-md) !important;
    }
}

/* === VERY SMALL SCREENS (< 375px) === */
@media (max-width: 374px) {
    #contact .glass {
        padding: var(--space-md) !important;
    }

    #contact .glass h3 {
        font-size: 1.125rem !important;
    }

    .whatsapp-phone-number {
        font-size: 1rem !important;
    }

    /* Quick info - single column on very small screens */
    .whatsapp-quick-info {
        flex-direction: column !important;
        gap: var(--space-sm) !important;
    }
}

/* === SMALL SCREENS (375px - 414px) === */
@media (min-width: 375px) and (max-width: 414px) {
    #contact .glass {
        padding: clamp(1.25rem, 5vw, 1.5rem) !important;
    }
}

/* === MEDIUM MOBILE (415px - 480px) === */
@media (min-width: 415px) and (max-width: 480px) {
    #contact .glass {
        padding: clamp(1.5rem, 5vw, 2rem) !important;
    }
}

/* === TABLET PORTRAIT (481px - 768px) === */
@media (min-width: 481px) and (max-width: 768px) {

    /* Show social dock but with safe spacing */
    .social-dock {
        display: flex !important;
        bottom: calc(var(--space-md) + var(--safe-area-bottom)) !important;
        right: var(--space-sm) !important;
        z-index: calc(var(--z-elevated) - 1) !important;
    }

    /* Ensure WhatsApp button has higher z-index */
    .whatsapp-btn-custom {
        position: relative !important;
        z-index: var(--z-elevated) !important;
    }
}

/* === PREVENT HORIZONTAL SCROLL === */
@media (max-width: 768px) {
    #contact * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #contact .container {
        overflow-x: hidden !important;
    }
}

/* === SAFE AREA SUPPORT === */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        #contact {
            padding-bottom: calc(var(--space-2xl) + var(--safe-area-bottom)) !important;
        }
    }
}