/**
 * Mobile Responsive Fixes for NeuroTrade
 * Ensures website looks identical on mobile and desktop
 */

/* Force proper viewport behavior */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix background zoom issue on mobile */
.background {
    background-attachment: scroll !important; /* Change from fixed to scroll on mobile */
    background-size: cover !important;
    background-position: center !important;
}

/* Prevent horizontal scrolling */
* {
    max-width: 100%;
}

/* Container widths - only override on mobile */
@media screen and (max-width: 768px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}

/* Fix navbar dropdown on mobile */
.navbar-dropdown-container {
    width: 100% !important;
    max-width: 100vw !important;
}

.hamburger-btn {
    position: fixed !important;
    top: 10px !important;
    left: 20px !important;
    z-index: 1002 !important;
    width: 50px !important;
    height: 50px !important;
    background: #0a1929 !important;
    border: 2px solid #00e5ff !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 229, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.hamburger-btn .line {
    width: 30px !important;
    height: 3px !important;
    background: #00e5ff !important;
    border-radius: 2px !important;
    display: block !important;
}

.dropdown-menu {
    width: 280px !important;
    max-width: 85vw !important;
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
}

.dropdown-menu.open {
    transform: translateX(0) !important;
}

/* Desktop dropdown logo - slightly smaller to prevent cutoff */
.menu-header .logo {
    font-size: 1.35rem !important;
    letter-spacing: 1.5px !important;
}

/* Responsive text sizing */
@media screen and (max-width: 768px) {
    /* Fix background for mobile */
    .background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
        transform: none !important;
    }

    /* Scale down large text - more readable on mobile */
    h1 {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    h2 {
        font-size: 1.2rem !important;
    }

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

    /* Fix hero sections */
    .hero h1, .hero-title {
        font-size: 1.3rem !important;
        line-height: 1.1 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }

    .hero p, .subtitle, .tagline {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    /* Body text - readable size */
    p, li, span, div {
        font-size: 0.95rem !important;
    }

    /* Specific title fixes - prevent wrapping where needed */
    .hero-title, .page-title, .main-title {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    /* Menu items on mobile */
    .menu-list a, .submenu-toggle {
        font-size: 0.95rem !important;
        padding: 12px 20px !important;
        white-space: nowrap !important;
    }

    .dropdown-menu {
        font-size: 0.9rem !important;
    }

    /* Mobile dropdown menu logo - smaller */
    .menu-header .logo {
        font-size: 1.2rem !important;
        letter-spacing: 1px !important;
    }

    /* Mobile-only: smaller main page logo */
    .hero .logo {
        font-size: 2.2rem !important;
        letter-spacing: 2px !important;
    }

    /* Mobile-only: match user-label to logo size */
    .hero .user-label {
        font-size: 2.2rem !important;
        letter-spacing: 2px !important;
        line-height: 1 !important;
    }

    /* Mobile-only: match provider-label to logo size */
    .hero .provider-label {
        font-size: 2.2rem !important;
        letter-spacing: 2px !important;
        line-height: 1 !important;
    }

    /* Fix navigation */
    .nav {
        padding: 15px 20px !important;
        flex-wrap: wrap !important;
    }

    .nav a {
        font-size: 0.9rem !important;
        margin: 5px 10px !important;
    }

    /* Fix buttons - readable size */
    .btn, button, .cta, .button, .role-button {
        width: 100% !important;
        max-width: 300px !important;
        font-size: 1rem !important;
        padding: 12px 20px !important;
        margin: 10px auto !important;
        display: block !important;
    }

    /* Keep primary CTA buttons at their original width */
    .cta-primary {
        width: auto !important;
        display: inline-block !important;
        padding: 20px 50px !important;
    }

    /* Keep AI Assistant chat button at fixed size */
    .ai-chat-btn, #ai-chat-button {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        display: flex !important;
        border-radius: 50% !important;
        padding: 0 !important;
    }

    /* Provider-index: Make mockup images fill containers more */
    .mockup-container {
        padding: 10px !important;
    }

    .mockup-images-wrapper {
        gap: 20px !important;
        margin: 50px 0 !important;
    }

    .mockup-image {
        border-radius: 8px !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Fix feature grid */
    .features, .feature-grid, .grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px !important;
    }

    /* Fix cards/boxes */
    .card, .box, .feature-box, .faq-item {
        width: 100% !important;
        margin: 15px 0 !important;
        padding: 20px !important;
    }

    /* Fix tables */
    table {
        font-size: 0.9rem !important;
        display: block !important;
        overflow-x: auto !important;
    }

    /* Fix forms */
    input, select, textarea {
        width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }

    /* Fix FAQ tabs */
    .tabs {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .tab-button {
        width: 100% !important;
        padding: 12px 20px !important;
    }

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

    .price-card {
        margin: 20px 0 !important;
    }

    /* Prevent text overflow */
    p, li, span, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Flow diagram text - same as body text */
    .flow-content h4 {
        font-size: 1rem !important;
    }

    .flow-content p {
        font-size: 0.95rem !important;
    }

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

    /* Fix modals - highest specificity */
    #providerModal .modal-content,
    #accountModal .modal-content,
    .modal .modal-content {
        width: 95% !important;
        max-width: 95vw !important;
        margin: 10px !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    /* Modal header responsive */
    .modal .modal-header h2,
    #providerModal .modal-header h2 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }

    /* Quick add options stack vertically */
    #providerModal .quick-add-options,
    #accountModal .quick-add-options,
    .modal .quick-add-options {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    #providerModal .quick-option,
    #accountModal .quick-option,
    .modal .quick-option {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
    }

    /* Form groups in modals */
    .modal .validation-form .form-group,
    #providerModal .validation-form .form-group {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    .modal .validation-form input,
    .modal .validation-form select,
    .modal .validation-form textarea,
    #providerModal input,
    #providerModal select,
    #providerModal textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Validation form itself */
    .modal .validation-form,
    #providerModal .validation-form {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.2rem !important;
    }

    h2 {
        font-size: 1rem !important;
    }

    h3 {
        font-size: 0.9rem !important;
    }

    .hero h1, .hero-title {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
    }

    .hero p, .subtitle, .tagline {
        font-size: 1rem !important;
    }

    .hero-title, .page-title, .main-title {
        font-size: 1rem !important;
    }

    /* Body text - readable size */
    p, li, span, div {
        font-size: 0.85rem !important;
    }

    /* Buttons readable */
    .btn, button, .cta, .button, .role-button {
        font-size: 0.9rem !important;
    }

    /* Nav text readable */
    .nav a {
        font-size: 0.85rem !important;
    }

    /* Tables readable */
    table {
        font-size: 0.8rem !important;
    }

    /* Flow diagram text - same as body text */
    .flow-content h4 {
        font-size: 0.9rem !important;
    }

    .flow-content p {
        font-size: 0.85rem !important;
    }

    .container {
        padding: 10px !important;
    }

    .nav {
        padding: 10px 15px !important;
    }

    /* Ensure hamburger button is visible */
    .hamburger-btn {
        top: 8px !important;
        left: 15px !important;
        width: 45px !important;
        height: 45px !important;
        gap: 5px !important;
    }

    .hamburger-btn .line {
        width: 28px !important;
        height: 2.5px !important;
    }

    /* Menu width on small screens */
    .dropdown-menu {
        width: 260px !important;
        max-width: 90vw !important;
    }

    /* Even smaller dropdown logo for very small screens */
    .menu-header .logo {
        font-size: 1.05rem !important;
        letter-spacing: 0.5px !important;
    }

    /* Even smaller main page logo for very small screens */
    .hero .logo {
        font-size: 1.8rem !important;
        letter-spacing: 1.5px !important;
    }

    /* Even smaller user-label to match logo */
    .hero .user-label {
        font-size: 1.8rem !important;
        letter-spacing: 1.5px !important;
        line-height: 1 !important;
    }

    /* Even smaller provider-label to match logo */
    .hero .provider-label {
        font-size: 1.8rem !important;
        letter-spacing: 1.5px !important;
        line-height: 1 !important;
    }

    .menu-list a, .submenu-toggle {
        font-size: 0.9rem !important;
        padding: 10px 15px !important;
    }
}

/* Landscape mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto !important;
        padding: 40px 20px !important;
    }
}

/* Prevent zoom on input focus (iOS) */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}