/* Mobile Responsive CSS - Comprehensive Fixes */

/* CRITICAL: Prevent horizontal scrolling - MUST be applied to all pages */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Ensure all containers fit within screen width */
.container,
.global-nav,
.header-left,
.header-center,
.header-right,
.nav-menu,
.dropdown-menu,
.hero-container,
.hero-content,
.hero-text,
.hero-image,
.hero-image img,
#hero,
#hero-large,
#hero-filters,
.search-filters,
.filter-group,
.chef-cards,
.gallery-images,
.videos-gallery,
.photos-gallery,
.testimonials-grid,
.why-choose-grid,
.pricing-cards,
.menu-categories,
.contact-content,
.owner-profile,
.owner-info,
.cta-buttons,
.chef-header,
.chef-main-photo,
.chef-header-info,
.tags,
.review-header,
.video-container,
.video-thumbnail,
.play-button-large,
.video-title,
.photos-gallery,
.photo-item,
.videos-gallery,
.video-item,
.video-element,
.work-gallery,
.how-it-works-steps,
.who-we-are-content,
.who-we-are-text,
.footer-content,
.form-container,
.booking-form,
.contact-form,
.btn,
.submit-btn,
.search-btn {
    max-width: 100%;
    box-sizing: border-box;
}

/* CRITICAL: Fix all image overflow issues */
img {
    max-width: 100%;
    height: auto;
    width: 100%;
    object-fit: cover;
    box-sizing: border-box;
    display: block;
}

/* Fix text overflow issues */
h1, h2, h3, h4, h5, h6, p, span, div {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Fix container padding and margins */
.container {
    padding: 0 1rem;
    margin: 0 auto;
}

/* Mobile responsive styles - FIXED VERSION */
@media (max-width: 768px) {
    
    /* ========== BUTTON TEXT STYLING FOR MOBILE ========== */
    /* Ensure button text is clear and readable on mobile */
    .btn,
    .btn-large,
    .submit-btn,
    .search-btn,
    .action-btn,
    button,
    [class*="btn"],
    [id*="btn"] {
        color: white !important;
        text-shadow: none !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow: visible !important;
    }
    
    /* Ensure links that look like buttons also have proper text */
    a.btn,
    a.btn-large,
    a[class*="btn"] {
        color: white !important;
        text-shadow: none !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
    }
    
    /* Fix any text color issues when button background changes */
    .btn:hover,
    .btn:active,
    .btn:focus,
    .btn-large:hover,
    .btn-large:active,
    .btn-large:focus {
        color: white !important;
        text-decoration: none !important;
    }

    /* ========== CHANGE GREEN BUTTONS TO BLUE IN MOBILE ========== */
    /* Change green (#28a745, #20c997, #10b981) to blue (#007bff) on mobile */
    
    /* Target any element with green background colors */
    [style*="background: #28a745"],
    [style*="background:#28a745"],
    [style*="background: #20c997"],
    [style*="background:#20c997"],
    [style*="background: #10b981"],
    [style*="background:#10b981"],
    [style*="background: #059669"],
    [style*="background:#059669"],
    [style*="background: #1e7e34"],
    [style*="background:#1e7e34"],
    [style*="background: linear-gradient(135deg, #28a745"],
    [style*="background: linear-gradient(135deg, #20c997"],
    [style*="background: linear-gradient(135deg, #10b981"],
    [style*="background: linear-gradient(45deg, #28a745"],
    [style*="background: linear-gradient(45deg, #10b981"],
    [style*="background: linear-gradient(to right, #28a745"],
    [style*="background: linear-gradient(to right, #20c997"],
    [style*="border-left: 4px solid #28a745"],
    [style*="border-left: 4px solid #20c997"],
    [style*="color: #28a745"],
    [style*="color: #20c997"],
    [style*="color: #10b981"],
    [style*="color: #1e7e34"],
    .btn[style*="#28a745"],
    .btn[style*="#20c997"],
    .btn[style*="#10b981"],
    .btn[style*="#1e7e34"] {
        background: #007bff !important;
        background-color: #007bff !important;
        border-color: #007bff !important;
        color: #007bff !important;
    }
    
    /* Target buttons with green gradient backgrounds */
    [style*="linear-gradient(135deg, #28a745, #20c997)"],
    [style*="linear-gradient(135deg, #10b981, #059669)"],
    [style*="linear-gradient(45deg, #10b981, #059669)"],
    [style*="linear-gradient(to right, #28a745"],
    [style*="linear-gradient(to right, #20c997"] {
        background: linear-gradient(135deg, #007bff, #0056b3) !important;
    }
    
    /* Change green icon colors to blue */
    [style*="color: #28a745"] i,
    [style*="color: #20c997"] i,
    [style*="color: #10b981"] i,
    [style*="color: #1e7e34"] i,
    .fa-check-circle[style*="color: #28a745"],
    .fa-check-circle[style*="color: #20c997"] {
        color: #007bff !important;
    }
    
    /* Change green border-left to blue */
    [style*="border-left: 4px solid #28a745"],
    [style*="border-left: 4px solid #20c997"] {
        border-left: 4px solid #007bff !important;
    }
    
    /* Change green background elements */
    [style*="background: #28a745"],
    [style*="background:#28a745"],
    [style*="background: #20c997"],
    [style*="background:#20c997"],
    [style*="background: #10b981"],
    [style*="background:#10b981"] {
        background: #007bff !important;
    }
    
    /* Change green gradient backgrounds */
    [style*="linear-gradient(135deg, #28a745"],
    [style*="linear-gradient(135deg, #20c997"],
    [style*="linear-gradient(135deg, #10b981"] {
        background: linear-gradient(135deg, #007bff, #0056b3) !important;
    }
    
    /* Target sticky-cta-bar buttons that might have green background */
    .sticky-cta-bar .btn,
    .sticky-cta-bar a.btn,
    [class*="sticky"] .btn {
        background: #007bff !important;
        color: white !important;
        border: none !important;
    }
    
    /* Target any button or link with green background color in mobile */
    button[style*="background"],
    a.btn[style*="background"],
    .btn[style*="background"] {
        background: #007bff !important;
    }
    
    /* Target buttons with green gradient backgrounds */
    [style*="linear-gradient(135deg, #28a745, #20c997)"],
    [style*="linear-gradient(135deg, #10b981, #059669)"],
    [style*="linear-gradient(45deg, #10b981, #059669)"] {
        background: linear-gradient(135deg, #007bff, #0056b3) !important;
    }
    
    /* Change green icon colors to blue */
    [style*="color: #28a745"] i,
    [style*="color: #20c997"] i,
    [style*="color: #10b981"] i {
        color: #007bff !important;
    }
    
    /* Change green border-left to blue */
    [style*="border-left: 4px solid #28a745"] {
        border-left: 4px solid #007bff !important;
    }
    
    /* Change green background elements */
    [style*="background: #28a745"],
    [style*="background:#28a745"],
    [style*="background: #20c997"],
    [style*="background:#20c997"] {
        background: #007bff !important;
    }
    
    /* Change green gradient backgrounds */
    [style*="linear-gradient(135deg, #28a745"],
    [style*="linear-gradient(135deg, #20c997"],
    [style*="linear-gradient(135deg, #10b981"] {
        background: linear-gradient(135deg, #007bff, #0056b3) !important;
    }

    /* ========== BIGGER BUTTONS FOR MOBILE ========== */
    .btn,
    .btn-large,
    .submit-btn,
    .search-btn,
    .action-btn {
        padding: 1rem 2rem !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        min-height: 56px !important;
        display: inline-block !important;
        width: auto !important;
        max-width: 280px !important;
        margin: 0.5rem auto !important;
        text-align: center !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    
    /* Primary button - stand out */
    .btn-primary,
    .btn-large[style*="background: #10b981"],
    a[href*="explore-chefs"][class*="btn"] {
        background: #4510b9 !important;
        color: white !important;
        border: none !important;
        padding: 1.25rem 2.5rem !important;
        font-size: 1.2rem !important;
    }
    
    /* Secondary button */
    .btn-secondary,
    a[href*="book-a-chef"][class*="btn"] {
        background: white !important;
        color: #1e3a8a !important;
        border: 2px solid #1e3a8a !important;
        padding: 1.25rem 2.5rem !important;
        font-size: 1.2rem !important;
    }
    
    /* Sticky CTA buttons - extra big */
    .sticky-cta-bar .btn {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        min-height: 52px !important;
        min-width: 140px !important;
    }
    
    /* ========== READABLE FONTS FOR MOBILE ========== */
    html {
        font-size: 16px !important;
    }
    
    body {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }
    
    h1 {
        font-size: 2.25rem !important;
        line-height: 1.25 !important;
    }
    
    h2 {
        font-size: 1.85rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
    }
    
    h4 {
        font-size: 1.2rem !important;
        line-height: 1.5 !important;
    }
    
    p, span, div {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }
    
    /* Small text should still be readable */
    .text-small,
    .small,
    small {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }
    
    /* Nav links */
    .nav-menu a {
        font-size: 1.1rem !important;
        padding: 1rem 1.5rem !important;
    }
    
    /* Footer text */
    .footer-content p,
    .footer-column p {
        font-size: 1rem !important;
    }
    
    .footer-column a {
        font-size: 1rem !important;
        padding: 0.75rem 0 !important;
    }
    
    /* ========== SINGLE COLUMN LAYOUT ========== */
    
    /* FAQ Section - Single column on mobile */
    #faq .faq-grid,
    #faq > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    #faq > div > div {
        margin-bottom: 1rem !important;
    }
    /* Header and Navigation */
    .global-nav {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 1rem;
    }

    .header-left, .header-center, .header-right {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .header-right {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    .action-buttons {
        width: 100%;
        justify-content: flex-start;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
        width: 100%;
        max-width: 100%;
    }

    .nav-menu li {
        width: 100%;
        max-width: 100%;
    }

    .nav-menu a {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 0.75rem 1rem;
        margin: 0.25rem 0;
        border-radius: 10px;
        font-size: 0.9rem;
        box-sizing: border-box;
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        max-width: 100%;
        background-color: #f8f9fa;
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: none;
        overflow: visible;
        transition: none;
        margin: 0.5rem 0;
        padding: 0.5rem 0;
        border-radius: 8px;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .dropdown-menu a {
        padding: 0.5rem 1rem;
        display: block;
        text-align: left;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.9rem;
        background: white;
        color: #333;
        box-shadow: none;
        margin: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border: none;
        box-sizing: border-box;
    }

    .dropdown-menu a:last-child {
        border-bottom: none;
    }

    /* Hero section mobile adjustments */
    #hero-large {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1rem;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .hero-content {
        flex-direction: column;
        gap: 2rem;
        max-width: 100%;
    }

    .hero-text {
        padding-right: 0;
        text-align: center;
        max-width: 100%;
    }

    .hero-image img {
        max-width: 100%;
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        box-sizing: border-box;
    }

    #hero {
        flex-direction: column;
        text-align: center;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Grid layouts - single column */
    .steps,
    .benefits-list,
    .services,
    .blog-posts,
    .gallery-images,
    .videos-gallery,
    .photos-gallery,
    .testimonials-grid,
    .why-choose-grid,
    .pricing-cards,
    .menu-categories {
        grid-template-columns: 1fr;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Contact and profile layouts */
    .contact-content {
        grid-template-columns: 1fr;
        max-width: 100%;
        box-sizing: border-box;
    }

    .owner-profile {
        grid-template-columns: 1fr;
        text-align: center;
        max-width: 100%;
        box-sizing: border-box;
    }

    .owner-info {
        text-align: center;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cta-buttons {
        flex-direction: column;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Search filters */
    .search-filters {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .filter-group {
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .search-btn {
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Chef header */
    .chef-header {
        flex-direction: column;
        text-align: center;
        max-width: 100%;
        box-sizing: border-box;
    }

    .chef-main-photo {
        width: 150px;
        height: 150px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .chef-header-info h1 {
        font-size: 2rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Tags and reviews */
    .tags {
        justify-content: center;
        max-width: 100%;
        box-sizing: border-box;
    }

    .review-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Video and photo elements */
    .video-container {
        margin: 0 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .video-thumbnail {
        height: 250px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .play-button-large {
        font-size: 3rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .video-title h3 {
        font-size: 1.5rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .video-title p {
        font-size: 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .photo-item img {
        height: 200px;
        max-width: 100%;
        width: 100%;
        object-fit: cover;
        box-sizing: border-box;
    }

    .video-element {
        height: 200px;
        max-width: 100%;
        width: 100%;
        object-fit: cover;
        box-sizing: border-box;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Footer copyright for mobile - show copyright text */
    .footer-bottom {
        display: block !important;
        text-align: center;
        padding: 1rem;
        background: #1a1a1a !important;
        color: #888 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .footer-bottom p {
        color: #888 !important;
        font-size: 0.9rem;
        margin: 0;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Ensure copyright text is visible in mobile */
    .footer-bottom p::before {
        content: "© 2026 Maharaja Chef Services. All rights reserved.";
        display: inline;
    }
    
    /* Hide any existing footer bottom content and replace with copyright */
    footer .footer-bottom {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Footer - ensure it's visible in mobile */
    footer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    footer hr {
        display: block !important;
    }

    /* Form elements */
    .form-container,
    .booking-form,
    .contact-form {
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 1rem;
    }

    /* Buttons */
    .btn,
    .submit-btn,
    .search-btn {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Text scaling */
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.5rem;
        line-height: 1.4;
    }

    p {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Touch-friendly elements */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }

    /* Mobile form improvements */
    .form-control {
        width: 100%;
        padding: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
        transition: border-color 0.3s;
        min-height: 48px;
    }

    /* Sticky CTA bar for mobile */
    .sticky-cta-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        padding: 1rem;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
        backdrop-filter: blur(10px);
    }

    .sticky-cta-bar .btn,
    .sticky-cta-bar a.btn,
    #sticky-cta-bar .btn,
    #sticky-cta-bar a.btn {
        background: #007bff !important;
        color: white !important;
        border: none !important;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 700;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        min-width: 120px;
        text-align: center;
        min-height: 44px;
        box-shadow: 0 2px 8px rgba(0,123,255,0.3);
    }

    .sticky-cta-bar .btn:hover,
    .sticky-cta-bar a.btn:hover {
        background: #0056b3 !important;
        color: white !important;
    }

    /* Content spacing improvements */
    main {
        padding: 1.5rem 1rem;
    }

    .hero-content {
        padding: 0 1rem;
    }

    .chef-details,
    .pricing-section,
    .menu-options,
    .dietary-tags,
    .reviews-section,
    .booking-cta {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Accessibility improvements */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid #007bff;
        outline-offset: 2px;
    }

    /* Performance optimizations for mobile */
    .global-header {
        will-change: transform;
    }

    .nav-menu {
        will-change: transform;
    }

    /* Reduced motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Tablet responsiveness */
@media (min-width: 769px) and (max-width: 1024px) {
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Video Modal Mobile Responsiveness */
@media (max-width: 768px) {
    .video-modal-content {
        max-width: 95vw;
        max-height: 95vh;
        padding: 15px;
    }

    .video-modal-close {
        font-size: 1.5rem;
        padding: 10px;
    }

    .video-modal-body video {
        max-width: 100%;
        max-height: 100%;
    }
}

@media (max-width: 480px) {
    nav {
        padding: 0.5rem;
    }

    .logo h1 {
        font-size: 1.2rem;
    }

    main {
        padding: 1rem 0.5rem;
    }

    #hero {
        padding: 2rem 1rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .video-modal-content {
        max-width: 98vw;
        max-height: 98vh;
        padding: 10px;
    }

    .video-modal-close {
        font-size: 1.2rem;
        padding: 8px;
    }

    .video-modal-body video {
        max-width: 100%;
        max-height: 100%;
    }
}

/* Ensure no horizontal overflow on any element */
* {
    box-sizing: border-box;
}

/* Force all elements to stay within viewport */
body {
    overflow-x: hidden;
}

/* Fix any remaining overflow issues */
.overflow-fix {
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
}

/* Mobile-specific image fixes */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
        width: 100%;
        object-fit: cover;
    }
    
    /* Ensure hero images scale properly */
    .hero-image img,
    .chef-main-photo,
    .photo-item img,
    .video-element {
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: cover;
    }
    
    /* Fix text alignment and wrapping */
    .text-center {
        text-align: center;
    }

    .text-left {
        text-align: left;
    }

    .text-right {
        text-align: right;
    }
    
    /* Improve touch targets */
    .btn,
    .nav-menu a,
    .dropdown-menu a {
        min-height: 44px;
        padding: 12px 16px;
    }

    /* CRITICAL: Override problematic inline styles that break mobile layout */
    
    /* Fix index.html hero section inline styles */
    #hero-large,
    #hero {
        flex-direction: column !important;
        text-align: center !important;
        padding: 2rem 1rem !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .hero-content {
        flex-direction: column !important;
        gap: 2rem !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .hero-text {
        padding-right: 0 !important;
        text-align: center !important;
        max-width: 100% !important;
        min-width: auto !important;
    }

    .hero-image {
        min-width: auto !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .hero-image img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
        box-sizing: border-box !important;
    }

    /* Fix chef profile inline styles */
    .chef-header-michael {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
    }

    .chef-main-photo-michael {
        width: 150px !important;
        height: 150px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .chef-header-info-michael h1 {
        font-size: 2rem !important;
        text-align: center !important;
    }

    /* Fix fixed widths that break mobile layout */
    [style*="min-width: 400px"],
    [style*="min-width: 420px"],
    [style*="min-width: 300px"],
    [style*="min-width: 200px"],
    [style*="min-width: 500px"],
    [style*="min-width: 350px"] {
        min-width: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix text overflow in inline styles */
    [style*="font-size: 3.5rem"],
    [style*="font-size: 3rem"],
    [style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    [style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    [style*="font-size: 1.5rem"] {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
    }

    /* Fix button widths */
    .btn,
    .submit-btn,
    .search-btn {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0.5rem 0 !important;
    }

    /* Fix grid layouts */
    .pricing-cards-michael,
    .menu-categories-michael,
    .chef-specialties-michael {
        grid-template-columns: 1fr !important;
    }

    /* Fix review headers */
    .review-header-michael {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    /* Fix booking CTA */
    .booking-cta-michael h2 {
        font-size: 2rem !important;
    }

    .btn-michael {
        padding: 1.25rem 2.5rem !important;
        font-size: 1.1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix gallery items */
    .carousel-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Fix social proof grid */
    .social-proof-grid {
        grid-template-columns: 1fr !important;
    }

    /* Fix service areas */
    #service-areas {
        padding: 1rem !important;
    }

    .service-area-tag {
        display: block !important;
        margin: 0.25rem 0 !important;
        width: 100% !important;
    }

    /* Fix testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    /* Fix trust badges */
    #trust-badges {
        padding: 1rem !important;
    }

    .trust-badge-item {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    /* Additional catering services specific fixes */
    #catering-services,
    #menu-options,
    #dietary-options,
    #catering-process,
    #catering-testimonials,
    #catering-pricing {
        grid-template-columns: 1fr !important;
    }

    /* Fix catering hero section */
    #hero-large {
        padding: 2rem 1rem !important;
    }

    .hero-content {
        gap: 1.5rem !important;
    }

    /* Fix catering service cards */
    .grid-template-columns-repeat-3,
    .grid-template-columns-repeat-2,
    .grid-template-columns-repeat-4 {
        grid-template-columns: 1fr !important;
    }

    /* Fix any remaining multi-column layouts */
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    /* Fix any remaining fixed widths in inline styles */
    [style*="min-width: 300px"],
    [style*="min-width: 350px"],
    [style*="min-width: 400px"],
    [style*="min-width: 420px"],
    [style*="min-width: 500px"],
    [style*="min-width: 600px"] {
        min-width: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix any remaining text overflow in inline styles */
    [style*="font-size: 4rem"],
    [style*="font-size: 3.5rem"],
    [style*="font-size: 3rem"],
    [style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    [style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    [style*="font-size: 1.5rem"] {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
    }

    /* Fix any remaining button widths */
    [style*="width: 300px"],
    [style*="width: 250px"],
    [style*="width: 200px"],
    [style*="width: 150px"] {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0.5rem 0 !important;
    }

    /* Fix any remaining image overflow */
    [style*="height: 300px"],
    [style*="height: 250px"],
    [style*="height: 200px"],
    [style*="height: 150px"] {
        height: auto !important;
        max-height: 300px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Fix any remaining container overflow */
    [style*="max-width: 1200px"],
    [style*="max-width: 1000px"],
    [style*="max-width: 800px"],
    [style*="max-width: 600px"] {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
    }

    /* Fix any remaining horizontal scrolling issues */
    [style*="overflow-x: auto"],
    [style*="overflow-x: scroll"] {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    /* Fix any remaining text wrapping issues */
    [style*="white-space: nowrap"],
    [style*="text-overflow: ellipsis"] {
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    /* Fix any remaining flexbox issues */
    [style*="flex-direction: row"] {
        flex-direction: column !important;
    }

    /* Fix any remaining margin/padding issues */
    [style*="margin-left: 60px"],
    [style*="margin-right: 60px"],
    [style*="margin-left: 40px"],
    [style*="margin-right: 40px"],
    [style*="margin-left: 20px"],
    [style*="margin-right: 20px"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Fix any remaining gap issues */
    [style*="gap: 2rem"],
    [style*="gap: 3rem"],
    [style*="gap: 4rem"] {
        gap: 1rem !important;
    }

    /* Fix any remaining padding issues */
    [style*="padding: 4rem"],
    [style*="padding: 3rem"],
    [style*="padding: 2rem"] {
        padding: 1.5rem 1rem !important;
    }

    /* Fix any remaining margin issues */
    [style*="margin: 60px"],
    [style*="margin: 40px"],
    [style*="margin: 30px"] {
        margin: 2rem 0 !important;
    }
    
    /* ========== BECOME A CHEF PAGE MOBILE FIXES ========== */
    /* Why Join Us Section */
    #why-join-us {
        padding: 3rem 15px !important;
    }
    
    #why-join-us h2 {
        font-size: 1.8rem !important;
    }
    
    #why-join-us .why-choose-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Requirements Section */
    #requirements {
        padding: 3rem 15px !important;
    }
    
    #requirements h2 {
        font-size: 1.8rem !important;
    }
    
    #requirements .requirements-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Application Process Section */
    #application-process {
        padding: 3rem 15px !important;
    }
    
    #application-process h2 {
        font-size: 1.8rem !important;
    }
    
    #application-process .steps {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Application CTA Section */
    #application-cta {
        padding: 3rem 15px !important;
    }
    
    #application-cta .form-header h2 {
        font-size: 1.8rem !important;
    }
    
    #application-cta .cta-content {
        padding: 1.5rem !important;
    }
    
    #application-cta .cta-actions {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    #application-cta .cta-info {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Chef Benefits Section */
    #chef-benefits {
        padding: 3rem 15px !important;
    }
    
    #chef-benefits h2 {
        font-size: 1.8rem !important;
    }
    
    #chef-benefits .benefits-list {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Chef Testimonials Section */
    #chef-testimonials {
        padding: 3rem 15px !important;
    }
    
    #chef-testimonials h2 {
        font-size: 1.8rem !important;
    }
    
    #chef-testimonials .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}