/* Mobile-Optimized CSS for AIOcclusal */
/* Comprehensive mobile responsiveness for all pages */

/* Base mobile-first approach */
* {
    box-sizing: border-box;
}

/* Mobile typography */
@media (max-width: 768px) {
    .display-1 { font-size: 2.5rem !important; }
    .display-2 { font-size: 2rem !important; }
    .display-3 { font-size: 1.75rem !important; }
    .display-4 { font-size: 1.5rem !important; }
    .display-5 { font-size: 1.25rem !important; }
    .display-6 { font-size: 1.1rem !important; }
    
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    h5 { font-size: 1rem !important; }
    h6 { font-size: 0.9rem !important; }
    
    .lead { font-size: 1rem !important; }
    .brand-font { font-size: 1.5rem !important; }
}

/* Mobile navigation */
@media (max-width: 768px) {
    .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        background: #f8f9fa;
        margin-top: 0.5rem;
    }
    
    .navbar-nav .dropdown-item {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
    }
    
    .navbar-collapse {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #dee2e6;
    }
}

/* Mobile buttons and CTAs */
@media (max-width: 768px) {
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    .btn {
        min-height: 44px; /* Touch target size */
        padding: 0.5rem 1rem;
    }
    
    .btn-group-vertical .btn {
        margin-bottom: 0.5rem;
    }
    
    /* Stack buttons on mobile */
    .d-flex.gap-3.justify-content-center.flex-wrap {
        flex-direction: column;
        gap: 0.75rem !important;
    }
    
    .d-flex.gap-3.justify-content-center.flex-wrap .btn {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
}

/* Mobile hero sections */
@media (max-width: 768px) {
    .vh-100 {
        min-height: 60vh !important;
        height: auto !important;
    }
    
    .hero-video {
        height: 60vh !important;
        object-position: center;
    }
    
    .position-relative.vh-100 {
        padding: 2rem 0;
        min-height: 60vh !important;
    }
    
    .hero-section {
        padding: 3rem 0 2rem 0;
    }
}

/* Mobile forms */
@media (max-width: 768px) {
    .form-control, .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    .form-floating > label {
        font-size: 0.875rem;
    }
    
    .input-group .form-control {
        border-radius: 0.375rem !important;
    }
    
    /* Stack form elements */
    .row .col-md-6 {
        margin-bottom: 1rem;
    }
    
    .form-check {
        margin-bottom: 0.75rem;
    }
}

/* Mobile cards and components */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    /* Feature cards */
    .feature-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .feature-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
}

/* Mobile tables */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .table td, .table th {
        padding: 0.5rem;
        white-space: nowrap;
    }
    
    /* Comparison table mobile optimization */
    .comparison-table {
        overflow-x: auto;
    }
    
    .comparison-table table {
        min-width: 600px;
    }
}

/* Mobile spacing and layout */
@media (max-width: 768px) {
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    .mt-5 {
        margin-top: 2rem !important;
    }
    
    /* Container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Grid spacing */
    .row.g-4 {
        --bs-gutter-y: 1rem;
    }
    
    .row.g-5 {
        --bs-gutter-y: 1.5rem;
    }
}

/* Mobile modals */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
    
    .modal-content {
        border-radius: 0.75rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-header {
        padding: 1rem;
        border-bottom: 1px solid #dee2e6;
    }
    
    .modal-footer {
        padding: 1rem;
        border-top: 1px solid #dee2e6;
    }
}

/* Mobile accordion */
@media (max-width: 768px) {
    .accordion-button {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .accordion-body {
        padding: 1rem;
        font-size: 0.9rem;
    }
}

/* Mobile dropdown menus */
@media (max-width: 768px) {
    .dropdown-menu {
        border: none;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        min-width: 200px;
    }
    
    .dropdown-item {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* Mobile images */
@media (max-width: 768px) {
    .img-fluid {
        max-width: 100%;
        height: auto;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Mobile-specific utilities */
@media (max-width: 768px) {
    .mobile-center {
        text-align: center !important;
    }
    
    .mobile-stack {
        flex-direction: column !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-show {
        display: block !important;
    }
    
    .mobile-mb-3 {
        margin-bottom: 1rem !important;
    }
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Touch-friendly scrolling */
.overflow-auto {
    -webkit-overflow-scrolling: touch;
}

/* Mobile-optimized animations */
@media (max-width: 768px) {
    .transition-all {
        transition: none !important;
    }
    
    .animate-fade-in {
        animation: none !important;
    }
}

/* ROI Calculator mobile */
@media (max-width: 768px) {
    .slider-container {
        margin: 1rem 0;
    }
    
    .slider {
        height: 6px;
    }
    
    .slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }
    
    .results-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .savings-highlight {
        font-size: 2rem;
    }
}

/* Contact form mobile */
@media (max-width: 768px) {
    .contact-form .row .col-md-6 {
        margin-bottom: 1rem;
    }
    
    .contact-form textarea {
        min-height: 120px;
    }
}

/* Resources page mobile */
@media (max-width: 768px) {
    .resource-card {
        margin-bottom: 1rem;
    }
    
    .resource-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Comparison page mobile */
@media (max-width: 768px) {
    .solution-card {
        margin-bottom: 1rem;
    }
    
    .comparison-content {
        padding: 1rem;
    }
}

/* Pricing page mobile */
@media (max-width: 768px) {
    .pricing-card {
        margin-bottom: 2rem;
    }
    
    .price-display {
        font-size: 2rem;
    }
}

/* Demo page mobile */
@media (max-width: 768px) {
    .demo-container {
        padding: 1rem;
    }
    
    .demo-iframe {
        height: 300px;
        border-radius: 0.5rem;
    }
}

/* Footer mobile */
@media (max-width: 768px) {
    footer .row {
        text-align: center;
    }
    
    footer .col-md-6 {
        margin-bottom: 1rem;
    }
    
    footer .text-md-end {
        text-align: center !important;
    }
}

/* Fix common Bootstrap mobile issues */
@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .d-flex.align-items-center {
        align-items: flex-start !important;
    }
    
    .text-end, .text-md-end {
        text-align: center !important;
    }
}

/* Ensure minimum touch targets */
a, button, .btn, .nav-link, .dropdown-item, input, textarea, select {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Text readability on mobile */
@media (max-width: 768px) {
    p, .card-text, .text-muted {
        line-height: 1.6;
        font-size: 0.95rem;
    }
    
    .small {
        font-size: 0.85rem;
    }
}