/**
 * Mobile UX Optimization for tempcontrolpack.com
 * Created: 2026-01-12
 * Purpose: Optimize mobile user experience by:
 * 1. Hiding UserFeedback survey popup on mobile
 * 2. Optimizing MyStickElements floating buttons
 * 3. Increasing touch target areas
 * 4. Optimizing mobile form experience
 */

/* 1. Hide UserFeedback Survey on Mobile */
@media (max-width: 768px) {
    .userfeedback-widget,
    .userfeedback-survey-container,
    #userfeedback-survey-wrap,
    [class*="userfeedback"] {
        display: none !important;
        visibility: hidden !important;
    }
}

/* 2. Optimize MyStickElements Floating Buttons */
@media (max-width: 768px) {
    .mystickyelements-fixed,
    [class*="mystickyelements"] {
        bottom: 70px !important;
        right: 10px !important;
    }
    
    .mystickyelements-fixed a,
    .mystickyelements-fixed button {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
    }
}

/* 3. Optimize Modal Close Buttons */
@media (max-width: 768px) {
    #enquiry .close,
    #modalsearch .close,
    .modal .close {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 28px !important;
    }
}

/* 4. Increase Touch Target Areas */
@media (max-width: 768px) {
    nav a,
    .navbar a,
    .nav-link,
    header a {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }
    
    button,
    .btn,
    input[type="submit"] {
        min-height: 48px !important;
        min-width: 48px !important;
    }
}

/* 5. Optimize Mobile Form Experience */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 12px 15px !important;
        width: 100% !important;
    }
    
    .wpforms-submit,
    form button[type="submit"] {
        width: 100% !important;
        min-height: 52px !important;
    }
}

/* 6. Prevent Content Overlap with Floating Elements */
@media (max-width: 768px) {
    body {
        padding-bottom: 80px !important;
    }
    
    footer {
        padding-bottom: 80px !important;
    }
}