/* =================================================================
   REGROSSA MUSIC - RESPONSIVE FIXES
   Critical fixes for mobile and tablet views
   ================================================================= */

/* ===========================
   MOBILE FIXES (Max 767px)
   =========================== */
@media (max-width: 767px) {

    /* CRITICAL: Force-hide floating buttons with hyper-specific selectors */
    body #social-footer-widget,
    body #donation-footer-widget,
    body #sigueme-tab,
    body #apoyame-tab,
    body [data-id="floating_html"] #social-footer-widget,
    body [data-id="floating_html"] #donation-footer-widget {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Additional catch-all for floating buttons */
    .elementor-element[data-id*="sigueme"],
    .elementor-element[data-id*="apoyame"],
    .elementor-element[data-id*="sígueme"],
    .elementor-element[data-id*="apóyame"],
    .floating-button,
    div[class*="float"]:has(a[href*="instagram"]),
    div[class*="float"]:has(a[href*="paypal"]) {
        display: none !important;
    }

    /* Add responsive padding to all sections */
    .elementor-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .elementor-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Fix QR code size on homepage */
    .elementor-widget-image img[src*="qr"],
    .elementor-widget-image img[alt*="QR"] {
        max-width: 150px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Ensure headings are readable and properly sized */
    .elementor-heading-title {
        font-size: clamp(24px, 6vw, 42px) !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    h1.elementor-heading-title {
        font-size: clamp(28px, 7vw, 48px) !important;
    }

    h2.elementor-heading-title {
        font-size: clamp(24px, 6vw, 36px) !important;
    }

    /* Fix video containers */
    .elementor-widget-video {
        margin-bottom: 20px !important;
    }

    /* Ensure buttons have proper spacing */
    .elementor-button {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }

    /* Fix form fields on contact page */
    .elementor-field-group {
        margin-bottom: 15px !important;
    }

    .elementor-field {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
        padding: 12px !important;
    }

    /* Fix grid layouts */
    .elementor-grid {
        grid-gap: 15px !important;
    }

    /* Ensure footer content is readable */
    footer .elementor-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Fix menu on mobile */
    .elementor-nav-menu--dropdown {
        width: 100% !important;
    }
}

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

    /* Reduce floating button size on tablet */
    .elementor-element[data-id*="sigueme"],
    .elementor-element[data-id*="apoyame"],
    .floating-button {
        transform: scale(0.75) !important;
        transform-origin: bottom right !important;
    }

    /* Adjust section padding */
    .elementor-section {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Adjust heading sizes */
    .elementor-heading-title {
        font-size: clamp(32px, 5vw, 56px) !important;
    }
}

/* ===========================
   LANDSCAPE MOBILE FIX
   =========================== */
@media (max-height: 500px) and (orientation: landscape) {

    /* Hide floating buttons in landscape mobile */
    .elementor-element[data-id*="sigueme"],
    .elementor-element[data-id*="apoyame"],
    .floating-button {
        display: none !important;
    }

    /* Reduce padding in landscape */
    .elementor-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* ===========================
   UTILITY CLASSES
   =========================== */

/* Force hide on mobile - can be added to any element via Custom CSS Classes */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block !important;
    }
}

/* Force hide on tablet */
.hide-tablet {
    display: block !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}