/* ============================================
   ELITE DENTISTRY - MOBILE STYLES
   Clean, Professional Mobile Experience
   ============================================ */

@media (max-width: 768px) {
    /* ============================================
       CRITICAL: PREVENT HORIZONTAL SCROLL
       ============================================ */
    html {
        overflow-x: hidden !important;
    }
    
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    .container {
        padding: 0 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ============================================
       MOBILE HEADER & NAVIGATION
       ============================================ */
    header {
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }

    nav {
        padding: 0.5rem 0 !important;
    }

    .nav-container {
        padding: 0 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .logo {
        flex-shrink: 0 !important;
    }

    .logo-image {
        height: 32px !important;
        width: auto !important;
        max-width: 140px !important;
    }

    /* Hide desktop nav elements on mobile */
    .nav-cta {
        display: none !important;
    }

    /* Show hamburger - CRITICAL */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 10px !important;
        z-index: 1002 !important;
        position: relative !important;
        order: 3 !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        width: 24px !important;
        height: 2.5px !important;
        background: #5990AE !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px) !important;
    }

    /* Mobile Menu - Hidden by Default */
    .nav-links {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 56px) !important;
        background: rgba(15, 15, 35, 0.98) !important;
        flex-direction: column !important;
        padding: 1rem 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        list-style: none !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        z-index: 1001 !important;
        display: flex !important;
    }

    .nav-links.active {
        transform: translateX(0) !important;
    }

    .nav-links li {
        width: 100% !important;
        border-bottom: 1px solid rgba(89, 144, 174, 0.15) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-links a {
        display: block !important;
        padding: 1rem 1.5rem !important;
        font-size: 1.1rem !important;
        color: #ffffff !important;
        text-decoration: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .nav-links a:hover,
    .nav-links a:active {
        background: rgba(89, 144, 174, 0.1) !important;
        color: #5990AE !important;
    }

    /* Body overlay when menu open */
    body.menu-open {
        overflow: hidden !important;
    }
    
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        pointer-events: none;
    }

    /* ============================================
       HERO SECTION - MOBILE
       ============================================ */
    .hero {
        padding: calc(56px + 2rem) 1rem 2.5rem 1rem !important;
        min-height: 100px !important;
    }

    .hero-content {
        text-align: center !important;
        padding: 0 !important;
    }

    .hero-badge-top {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        margin-bottom: 1rem !important;
        display: inline-block !important;
    }

    .hero h1 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.75rem !important;
    }

    .hero-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }

    .hero-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        display: flex !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.875rem 1.25rem !important;
        font-size: 0.95rem !important;
    }

    .hero-trust {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        margin-top: 1.5rem !important;
        display: flex !important;
    }

    .trust-item {
        flex: 0 0 auto !important;
        text-align: center !important;
        min-width: 80px !important;
    }

    .trust-value {
        font-size: 1.1rem !important;
    }

    .trust-label {
        font-size: 0.7rem !important;
    }

    /* ============================================
       SECTIONS - MOBILE SPACING
       ============================================ */
    section {
        padding: 2rem 0 !important;
    }

    section h2 {
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.75rem !important;
    }

    .section-intro {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }

    /* ============================================
       QUOTE/CONSULTATION FORM - MOBILE
       ============================================ */
    .quote-section {
        padding: 2rem 0 !important;
    }

    .quote-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .quote-intro {
        text-align: center !important;
    }

    .quote-intro h2 {
        font-size: 1.4rem !important;
    }

    .quote-intro p {
        font-size: 0.9rem !important;
    }

    .quote-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-top: 1rem !important;
        align-items: stretch !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .quote-feature {
        font-size: 0.85rem !important;
        justify-content: flex-start !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0.875rem 1.25rem !important;
        box-sizing: border-box !important;
    }
    
    .quote-feature svg {
        flex-shrink: 0 !important;
    }
    
    .quote-feature span {
        text-align: left !important;
    }

    .quote-form-container {
        padding: 0 !important;
        width: 100% !important;
    }

    .quote-form {
        padding: 1.25rem !important;
    }

    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .form-group {
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    .form-group label {
        font-size: 0.85rem !important;
        margin-bottom: 0.375rem !important;
        display: block !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 48px !important;
    }

    .form-group textarea {
        min-height: 100px !important;
    }

    .quote-form .btn {
        width: 100% !important;
        margin-top: 0.5rem !important;
    }

    /* ============================================
       SERVICE CARDS - MOBILE
       ============================================ */
    .service-grid,
    .services-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .service-card {
        padding: 1.25rem !important;
    }

    .service-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 0.75rem !important;
    }

    .service-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    .service-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .service-card p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    /* ============================================
       SERVICE AREAS / SUBURBS - MOBILE
       ============================================ */
    .suburbs-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .suburb {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }

    .suburbs-footer {
        margin-top: 1.5rem !important;
    }

    .suburbs-footer p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* ============================================
       PRICING SECTION - MOBILE
       ============================================ */
    .pricing {
        padding: 2rem 0 !important;
    }

    .pricing-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .pricing-card,
    .requirements-card {
        padding: 1.25rem !important;
        width: 100% !important;
    }

    .pricing-card h3,
    .requirements-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.75rem !important;
    }

    .price {
        font-size: 1.75rem !important;
    }

    .price-subtitle {
        font-size: 0.85rem !important;
    }

    .requirement-item {
        padding: 0.75rem 0 !important;
    }

    .requirement-item strong {
        font-size: 0.95rem !important;
    }

    .requirement-item p {
        font-size: 0.85rem !important;
    }

    .note {
        font-size: 0.85rem !important;
        padding: 0.75rem !important;
        margin-top: 1rem !important;
    }

    /* ============================================
       FAQ SECTION - MOBILE
       ============================================ */
    .faqs {
        padding: 2rem 0 !important;
    }

    .faq-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .faq-item {
        border-radius: 8px !important;
    }

    .faq-item summary,
    .faq-question {
        padding: 1rem !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    .faq-item p,
    .faq-answer {
        padding: 0 1rem 1rem 1rem !important;
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }

    /* ============================================
       TESTIMONIALS - MOBILE
       ============================================ */
    .testimonials {
        padding: 2rem 0 !important;
    }

    .testimonials-header {
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }

    .testimonials-header .stars {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    .testimonials-header h2 {
        font-size: 1.4rem !important;
    }

    .testimonials-header p {
        font-size: 0.9rem !important;
    }

    .testimonials-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .testimonial-card {
        padding: 1.25rem !important;
    }

    .testimonial-card .stars {
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }

    .testimonial-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }

    .testimonial-author strong {
        font-size: 0.95rem !important;
    }

    .testimonial-author span {
        font-size: 0.8rem !important;
    }

    /* ============================================
       CTA SECTIONS - MOBILE
       ============================================ */
    .cta-section {
        padding: 2rem 1rem !important;
        text-align: center !important;
    }

    .cta-section h2 {
        font-size: 1.4rem !important;
        margin-bottom: 0.75rem !important;
    }

    .cta-section .section-intro {
        font-size: 0.9rem !important;
        margin-bottom: 1.25rem !important;
    }

    .cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .cta-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ============================================
       CONTACT SECTION - MOBILE
       ============================================ */
    .contact {
        padding: 2rem 0 !important;
    }

    .contact-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .contact-info,
    .contact-cta {
        padding: 1.25rem !important;
        width: 100% !important;
    }

    .contact-info h3,
    .contact-cta h3 {
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
    }

    .info-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    .info-icon {
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    .info-item strong {
        font-size: 0.9rem !important;
    }

    .info-item p {
        font-size: 0.875rem !important;
        margin: 0.25rem 0 0 0 !important;
    }

    .business-hours {
        margin-top: 1rem !important;
    }

    .business-hours strong {
        font-size: 0.9rem !important;
    }

    .business-hours p {
        font-size: 0.85rem !important;
        margin: 0.25rem 0 !important;
    }

    .contact-cta p {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }

    .contact-cta-image {
        margin-top: 1.25rem !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .contact-cta-image img {
        width: 100% !important;
        height: auto !important;
        max-height: 260px !important;
        object-fit: cover !important;
        object-position: center top !important;
        border-radius: 12px !important;
        display: block !important;
    }

    /* ============================================
       FOOTER - MOBILE
       ============================================ */
    footer {
        padding: 2.5rem 0 2rem 0 !important;
    }

    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .footer-section {
        margin-bottom: 0.5rem !important;
        padding: 0 0.5rem !important;
    }

    .footer-logo {
        height: 40px !important;
        margin: 0 auto 1rem auto !important;
    }

    .footer-section h4 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }

    .footer-section p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.5rem !important;
    }

    .footer-section ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-section ul li {
        margin-bottom: 0.75rem !important;
    }

    .footer-section ul a {
        font-size: 0.9rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
        padding: 1.5rem 1rem 0 1rem !important;
        margin-top: 2rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: 100% !important;
    }

    .footer-bottom p {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.5rem !important;
    }

    .disclaimer {
        font-size: 0.8rem !important;
        opacity: 0.7 !important;
        line-height: 1.5 !important;
        padding: 0 0.5rem !important;
        margin-top: 0.5rem !important;
    }

    /* ============================================
       CHAT WIDGET - MOBILE
       ============================================ */
    .ai-chat-widget {
        bottom: 16px !important;
        right: 16px !important;
    }

    .chat-toggle {
        width: 52px !important;
        height: 52px !important;
    }

    .chat-window {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 85vh !important;
        max-height: 85vh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .chat-header {
        padding: 0.875rem 1rem !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .chat-header h3 {
        font-size: 1rem !important;
    }

    .chat-messages {
        padding: 1rem !important;
        height: calc(85vh - 140px) !important;
    }

    .chat-message {
        max-width: 85% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }

    .chat-form {
        padding: 0.75rem 1rem !important;
    }

    .chat-form input {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 0.75rem !important;
    }

    .chat-form button {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }

    .chat-suggestions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0 !important;
    }

    .suggestion-btn {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* ============================================
       BUTTONS - TOUCH OPTIMIZED
       ============================================ */
    .btn {
        min-height: 48px !important;
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9rem !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .btn-sm {
        min-height: 40px !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* ============================================
       UTILITY FIXES
       ============================================ */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
    
    /* Fix any overflow issues */
    section,
    .container,
    .quote-wrapper,
    .pricing-wrapper,
    .contact-wrapper,
    .footer-content {
        overflow-x: hidden !important;
    }
}

/* Small phones */
@media (max-width: 374px) {
    .hero h1 {
        font-size: 1.5rem !important;
    }

    section h2 {
        font-size: 1.25rem !important;
    }

    .suburbs-grid {
        grid-template-columns: 1fr !important;
    }

    .trust-item {
        min-width: 70px !important;
    }

    .trust-value {
        font-size: 1rem !important;
    }

    .trust-label {
        font-size: 0.65rem !important;
    }
    
    .container {
        padding: 0 0.75rem !important;
    }
}

/* Landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: calc(56px + 1.5rem) 1rem 1.5rem 1rem !important;
    }

    .chat-window {
        height: 75vh !important;
    }

    .chat-messages {
        height: calc(75vh - 140px) !important;
    }

    section {
        padding: 1.5rem 0 !important;
    }
}