/* Mobile Optimization Styles */

/* ============================================
   Base Mobile Styles
   ============================================ */

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

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

/* ============================================
   Touch Targets (Minimum 44x44px for accessibility)
   ============================================ */

a, button, input[type="button"], input[type="submit"], 
input[type="checkbox"], input[type="radio"], 
.ms-nav-link, .ms-login-btn, .ms-mobile-toggle {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Unified Button Size on Mobile
   All primary buttons share same height/padding for consistent look
   ============================================ */

@media (max-width: 768px) {
    /* Standardize all button-like elements to same visual size */
    .btn,
    .btn--primary,
    .btn--secondary,
    .btn--outline,
    .btn--sm,
    .btn--lg,
    .pix-btn,
    .pix-btn.banner-btn,
    .pix-btn.banner-btn.color-two,
    .banner-btn-outline,
    button[type="submit"],
    input[type="submit"],
    input[type="button"]:not([class*="icon"]),
    a.pix-btn,
    a[class*="banner-btn"] {
        min-height: 48px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 120px !important; /* Prevent tiny buttons from short labels */
    }

    /* Banner button group: equal-width buttons in a row or stacked */
    .banner-buttons,
    .banner .banner-content .banner-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .banner-buttons .pix-btn,
    .banner-buttons .banner-btn,
    .banner-buttons .banner-btn-outline,
    .banner .banner-content .banner-buttons .pix-btn,
    .banner .banner-content .banner-buttons .banner-btn-outline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* Allow flex to control width */
    }

    /* Form button groups: full width, same size */
    .btn-group .btn,
    form .btn,
    form button[type="submit"],
    form input[type="submit"] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   Typography - Prevent auto-zoom on iOS
   ============================================ */

input, select, textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
}

/* ============================================
   Mobile Navigation Improvements
   ============================================ */

@media (max-width: 768px) {
    /* Mobile navbar container */
    .ms-navbar-container {
        padding: 0 12px;
        height: 48px;
    }
    
    /* Hide desktop navigation */
    .ms-navbar-menu,
    .ms-navbar-utils {
        display: none !important;
    }
    
    /* Mobile menu overlay - Only visible on mobile */
    .ms-mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
        padding: 20px;
        display: block !important; /* Ensure it's block on mobile */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Hide mobile menu on desktop/tablet */
    @media (min-width: 769px) {
        .ms-mobile-menu {
            display: none !important;
        }
    }
    
    .ms-mobile-menu.active {
        transform: translateX(0);
    }
    
    /* Prevent body scroll when mobile menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
    }
    
    /* Mobile menu items */
    .ms-mobile-menu .ms-nav-link {
        display: block !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid #e1e1e1;
        font-size: 16px !important;
        min-height: 48px !important;
        color: #323130 !important;
        text-decoration: none !important;
    }
    
    .ms-mobile-menu .ms-nav-link:hover {
        background-color: #f3f2f1;
        color: #0078d4;
    }
    
    /* Style utility links in mobile menu */
    .ms-mobile-utils {
        display: block !important;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #e1e1e1;
    }
    
    .ms-mobile-utils .ms-mobile-menu-link,
    .ms-mobile-utils .ms-nav-link,
    .ms-mobile-utils .ms-login-btn,
    .ms-mobile-utils .ms-signup-btn {
        display: flex !important;
        align-items: center !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid #f3f2f1 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        min-height: 48px !important;
        height: 48px !important;
        width: 100% !important;
        text-align: left !important;
        color: #323130 !important;
        text-decoration: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        transition: background-color 0.167s ease-in-out, color 0.167s ease-in-out;
        box-sizing: border-box !important;
    }
    
    .ms-mobile-utils .ms-mobile-menu-link:hover,
    .ms-mobile-utils .ms-mobile-menu-link:focus,
    .ms-mobile-utils .ms-nav-link:hover,
    .ms-mobile-utils .ms-login-btn:hover,
    .ms-mobile-utils .ms-signup-btn:hover {
        background-color: #f3f2f1 !important;
        color: #0078d4 !important;
    }
    
    .ms-mobile-utils .ms-mobile-menu-link:active,
    .ms-mobile-utils .ms-nav-link:active,
    .ms-mobile-utils .ms-login-btn:active,
    .ms-mobile-utils .ms-signup-btn:active {
        background-color: #edebe9 !important;
    }
    
    .ms-mobile-utils .ms-icon-link {
        display: none !important; /* Hide icon links in mobile menu */
    }
    
    /* Mobile dropdown in menu */
    .ms-mobile-menu .ms-mega-dropdown-menu,
    .ms-mobile-menu .ms-dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        min-width: 100%;
        max-width: 100%;
        background-color: #faf9f8;
        margin-top: 0;
        padding: 0;
    }
    
    .ms-mobile-menu .ms-dropdown-menu {
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
    }
    
    .ms-mobile-menu .ms-dropdown-item {
        display: block;
        padding: 14px 20px;
        font-size: 15px;
        color: #323130;
        text-decoration: none;
        border-bottom: 1px solid #f3f2f1;
        min-height: 44px;
        transition: background-color 0.167s ease-in-out, color 0.167s ease-in-out;
    }
    
    .ms-mobile-menu .ms-dropdown-item:last-child {
        border-bottom: none;
    }
    
    .ms-mobile-menu .ms-dropdown-item:hover,
    .ms-mobile-menu .ms-dropdown-item:active {
        background-color: #f3f2f1;
        color: #0078d4;
    }
    
    .ms-mobile-menu .ms-mega-dropdown-content {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }
    
    .ms-mobile-menu .ms-mega-column-links {
        margin-bottom: 20px;
    }
    
    /* Dropdown toggle indicator */
    .ms-mobile-menu .ms-dropdown-toggle .ms-chevron {
        margin-left: 8px;
        font-size: 10px;
        transition: transform 0.2s ease;
    }
    
    .ms-mobile-menu .ms-dropdown-toggle.active .ms-chevron {
        transform: rotate(180deg);
    }
    
    /* Mobile menu close button */
    .ms-mobile-close {
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        font-size: 32px;
        cursor: pointer;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
        color: #323130;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease;
    }
    
    .ms-mobile-close:hover {
        color: #0078d4;
    }
    
    /* Show mobile toggle button */
    .ms-mobile-toggle {
        display: flex !important;
    }
    
    /* Mobile toggle button color - white on homepage, black on other pages */
    body#home-version-1 .ms-mobile-toggle span {
        background-color: #ffffff !important;
    }
    
    body:not(#home-version-1) .ms-mobile-toggle span {
        background-color: #323130 !important;
    }
    
    /* Hide desktop utils on mobile */
    .ms-navbar-utils {
        display: none;
    }
    
    /* Mobile menu header */
    .ms-mobile-menu-header {
        position: relative;
        padding: 20px 0;
        border-bottom: 1px solid #e1e1e1;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .ms-mobile-menu-header .ms-logo-link {
        display: flex;
        align-items: center;
    }
    
    /* Top nav items section (Products) */
    .ms-mobile-nav-items {
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #e1e1e1;
        display: block !important;
        visibility: visible !important;
    }
    
    .ms-mobile-nav-title {
        font-size: 14px;
        font-weight: 600;
        color: #323130;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 16px;
        padding: 0 4px;
    }
    
    .ms-mobile-menu-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
    
    .ms-mobile-menu-list li {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f3f2f1;
        display: block !important;
        list-style: none !important;
    }
    
    .ms-mobile-menu-list li:last-child {
        border-bottom: none;
    }
    
    .ms-mobile-menu-list li a {
        display: block !important;
        padding: 14px 4px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #323130 !important;
        text-decoration: none !important;
        min-height: 48px !important;
        line-height: 1.5 !important;
        transition: background-color 0.167s ease-in-out, color 0.167s ease-in-out;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ms-mobile-menu-list li a:hover,
    .ms-mobile-menu-list li a:focus {
        background-color: #f3f2f1 !important;
        color: #0078d4 !important;
    }
    
    .ms-mobile-menu-list li a:active {
        background-color: #edebe9 !important;
    }
}

/* ============================================
   Responsive Tables
   ============================================ */

@media (max-width: 768px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    thead, tbody, tr {
        display: block;
    }
    
    th, td {
        display: block;
        text-align: left;
        padding: 12px;
        border-bottom: 1px solid #e1e1e1;
    }
    
    th {
        background-color: #f3f2f1;
        font-weight: 600;
    }
}

/* ============================================
   Form Optimization
   ============================================ */

@media (max-width: 768px) {
    form {
        width: 100%;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        width: 100%;
        padding: 12px;
        margin-bottom: 16px;
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        font-size: 16px; /* Prevents iOS zoom */
        box-sizing: border-box;
    }
    
    button[type="submit"],
    input[type="submit"],
    .btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
        min-height: 48px;
        margin-bottom: 12px;
    }
}

/* ============================================
   Spacing and Padding
   ============================================ */

@media (max-width: 768px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    section {
        padding: 30px 0;
    }
    
    .hero-section {
        height: auto;
        min-height: 60vh;
        padding: 40px 0;
    }
    
    .hero-content {
        padding: 20px 0;
    }
    
    h1 {
        font-size: 28px !important;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 24px !important;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 20px !important;
        line-height: 1.4;
    }
    
    h4 {
        font-size: 18px !important;
        line-height: 1.4;
    }
    
    p {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* ============================================
   Cards and Grids
   ============================================ */

@media (max-width: 768px) {
    .row {
        margin-left: -8px;
        margin-right: -8px;
    }
    
    .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 16px;
    }
    
    .card, .support-card {
        margin-bottom: 20px;
        padding: 20px;
    }
}

/* ============================================
   Sitemap Mobile Optimization
   ============================================ */

@media (max-width: 768px) {
    .sitemap-container {
        padding: 20px 16px;
    }
    
    .sitemap-section {
        margin-bottom: 30px;
    }
    
    .sitemap-category {
        margin-bottom: 20px;
    }
    
    .sitemap-category-header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .sitemap-category-content {
        padding: 16px;
    }
    
    .sitemap-section-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }
}

/* ============================================
   Feature Flags Mobile
   ============================================ */

@media (max-width: 768px) {
    .feature-flags-layout {
        flex-direction: column;
    }
    
    .feature-flags-sidebar {
        width: 100%;
        min-height: auto;
        position: static;
    }
    
    .feature-flags-main {
        padding: 20px 16px;
    }
}

/* ============================================
   Footer Mobile
   ============================================ */

@media (max-width: 768px) {
    footer {
        padding: 40px 16px 20px;
    }
    
    footer .row > div {
        margin-bottom: 30px;
    }
    
    footer ul {
        margin-bottom: 20px;
    }
}

/* ============================================
   Button Groups
   ============================================ */

@media (max-width: 768px) {
    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* ============================================
   Modal and Popups
   ============================================ */

@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-content {
        padding: 20px;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

@media (max-width: 768px) {
    .d-mobile-none {
        display: none !important;
    }
    
    .d-mobile-block {
        display: block !important;
    }
    
    .text-center-mobile {
        text-align: center;
    }
    
    .w-mobile-100 {
        width: 100% !important;
    }
}

/* ============================================
   Landscape Mobile (Tablets)
   ============================================ */


@media (min-width: 769px) and (max-width: 1024px) {
    .ms-mega-dropdown-menu {
        min-width: 90%;
        max-width: 90%;
    }
    
    .ms-mega-dropdown-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   Performance: Reduce animations on mobile
   ============================================ */

@media (max-width: 768px) {
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
}