/**
 * Mobile Enhancements for DVC Sales
 * These styles ONLY apply to mobile devices (max-width: 1279px for xl breakpoint)
 * Desktop view remains completely unchanged
 */

/* ===== MOBILE HEADER IMPROVEMENTS ===== */
@media (max-width: 1279px) {
    /* Make header more compact on mobile */
    header .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Logo sizing on mobile */
    header img[alt="Logo"] {
        height: 40px !important;
    }

    /* Mobile hamburger button styling */
    header button.xl\:hidden {
        padding: 8px;
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.1);
    }

    header button.xl\:hidden:active {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Mobile menu overlay improvements */
    .fixed.top-0.right-0.h-full.w-4\/5 {
        width: 85% !important;
        max-width: 320px;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }

    /* Mobile menu header */
    .fixed.top-0.right-0.h-full .p-4.flex.justify-between {
        background-color: #4674C6;
        color: white;
    }

    /* Mobile menu items */
    .fixed.top-0.right-0.h-full ul li a {
        padding: 12px 0;
        font-size: 16px;
        border-bottom: 1px solid #eee;
    }

    /* Mobile menu collapsible sections */
    .fixed.top-0.right-0.h-full ul li > div {
        padding: 12px 0;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid #eee;
    }

    /* Sub-menu items in mobile */
    .fixed.top-0.right-0.h-full ul ul li a {
        padding: 10px 0;
        font-size: 14px;
        border-bottom: none;
    }
}

/* ===== MOBILE FOOTER IMPROVEMENTS ===== */
@media (max-width: 1023px) {
    /* Stack footer columns on mobile */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Center footer content on mobile */
    footer > .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Footer logo section */
    footer .grid > div:first-child {
        text-align: center;
    }

    footer .grid > div:first-child .flex.flex-row {
        justify-content: center;
    }

    /* Footer column headers */
    footer h3 {
        text-align: center;
        margin-bottom: 12px;
    }

    /* Footer links */
    footer ul {
        text-align: center;
    }

    /* Hide large mockup image on mobile */
    footer .grid > div:last-child img {
        max-height: 150px;
        margin: 0 auto;
    }

    /* Bottom footer */
    #footer-bottom {
        padding: 15px 10px;
    }

    #footer-bottom .space-x-2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
}

/* ===== MOBILE SIDEBAR IMPROVEMENTS (for support pages) ===== */
@media (max-width: 1023px) {
    /* Sidebar toggle button styling */
    button[aria-label="Open Sidebar"] {
        background-color: #4674C6;
        color: white;
        border-radius: 0 8px 8px 0;
        padding: 12px 10px;
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Sidebar when open */
    aside.fixed {
        top: 80px !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }

    /* Sidebar header */
    aside .flex.items-center.justify-between {
        background-color: #4674C6;
        color: white;
        padding: 15px;
    }

    aside .flex.items-center.justify-between h2 {
        color: white;
    }

    /* Sidebar close button */
    aside button svg {
        color: white;
    }

    /* Sidebar navigation items */
    aside ul li a {
        padding: 14px 20px;
        font-size: 15px;
    }

    aside ul li a:hover,
    aside ul li a.border-l-4 {
        background-color: white;
    }
}

/* ===== MOBILE GENERAL IMPROVEMENTS ===== */
@media (max-width: 767px) {
    /* Improve touch targets */
    a, button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Better text sizing */
    body {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Main content padding */
    main {
        padding: 0 10px;
    }

    /* Container fluid adjustments */
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Better form inputs on mobile */
    input, select, textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* ===== SMALL MOBILE DEVICES ===== */
@media (max-width: 479px) {
    /* Even more compact header */
    header img[alt="Logo"] {
        height: 35px !important;
    }

    /* Mobile menu full width on small screens */
    .fixed.top-0.right-0.h-full.w-4\/5 {
        width: 100% !important;
        max-width: none;
    }

    /* Footer adjustments */
    footer {
        padding: 30px 15px !important;
    }

    footer .grid {
        gap: 20px !important;
    }
}

/* ===== TABLET SPECIFIC ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Two column footer on tablets */
    footer .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Sidebar adjustments */
    aside.fixed {
        width: 280px !important;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Compact header in landscape */
    header .container-fluid {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* Scrollable mobile menu */
    .fixed.top-0.right-0.h-full ul {
        max-height: calc(100vh - 50px);
        overflow-y: auto;
    }
}

/* ===== SAFE AREA SUPPORT (for notched devices) ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    header {
        padding-top: env(safe-area-inset-top);
    }

    footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===== DARK MODE MEDIA QUERY (if system prefers) ===== */
/* Commented out for now - can be enabled if needed
@media (prefers-color-scheme: dark) {
    .fixed.top-0.right-0.h-full {
        background-color: #1a1a2e;
        color: #eee;
    }
}
*/

/* ===== PRINT STYLES ===== */
@media print {
    header, footer, aside, .fixed {
        display: none !important;
    }

    main {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ===== HIDE PROBLEMATIC ELEMENTS ON MOBILE ===== */
/* Fix for reCAPTCHA and Google Maps errors on mobile */
@media (max-width: 1023px) {
    /* Hide reCAPTCHA badge/widget on mobile */
    .grecaptcha-badge,
    .g-recaptcha,
    [data-sitekey],
    iframe[src*="recaptcha"] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide Google Maps elements that cause errors on mobile */
    .gm-style,
    .gm-err-container,
    [id*="google-map"],
    [class*="google-map"],
    .pac-container {
        display: none !important;
    }

    /* Hide any map placeholder/container on mobile if it shows errors */
    .map-container,
    .google-maps-container,
    #map {
        display: none !important;
    }
}

/* ===== MODULE PAGE CONTENT MOBILE FIXES ===== */
@media (max-width: 1023px) {
    /* Ensure content doesn't overflow */
    .page-content-body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Fix tables on mobile */
    .page-content-body table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix images on mobile */
    .page-content-body img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix iframes on mobile */
    .page-content-body iframe {
        max-width: 100% !important;
    }

    /* Better text sizing on mobile */
    .page-content-body h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .page-content-body h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .page-content-body h3,
    .page-content-body h4 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    .page-content-body p,
    .page-content-body li {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Main container adjustments */
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Main content area */
    main.flex-1 {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ===== EXTRA SMALL MOBILE ===== */
@media (max-width: 479px) {
    .page-content-body h1 {
        font-size: 20px !important;
    }

    .page-content-body h2 {
        font-size: 18px !important;
    }

    .page-content-body p,
    .page-content-body li {
        font-size: 14px !important;
    }
}

/* ===== COMPARE PRICES PAGE - STACKED MOBILE LAYOUT ===== */
@media (max-width: 767px) {
    /* Hide the table on mobile */
    .page-content-body table {
        display: none !important;
    }

    /* Show mobile stacked version */
    .mobile-comparison {
        display: block !important;
    }

    /* Mobile comparison cards */
    .mobile-comparison .comparison-card {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        border: 2px solid #4674C6;
    }

    .mobile-comparison .comparison-card h3 {
        text-align: center;
        color: #4674C6;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #4674C6;
    }

    .mobile-comparison .form-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }

    .mobile-comparison .form-row:last-child {
        border-bottom: none;
    }

    .mobile-comparison .form-label {
        font-weight: 600;
        color: #333;
        font-size: 14px;
    }

    .mobile-comparison .form-value {
        font-weight: 500;
    }

    .mobile-comparison .vs-divider {
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        color: #4674C6;
        padding: 15px 0;
    }

    .mobile-comparison .savings-section {
        background: linear-gradient(135deg, #4674C6, #22527C);
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        color: white;
    }

    .mobile-comparison .savings-section h4 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .mobile-comparison .savings-section .savings-amount {
        font-size: 28px;
        font-weight: 700;
    }

    .mobile-comparison .savings-section .savings-percent {
        font-size: 36px;
        font-weight: 700;
        margin-top: 10px;
    }
}

/* Hide mobile version on desktop */
@media (min-width: 768px) {
    .mobile-comparison {
        display: none !important;
    }
}

/* ===== SIDEBAR SPACE ADJUSTMENT FOR MOBILE ===== */
@media (max-width: 1023px) {
    /* Add left margin for sidebar toggle button */
    main.flex-1 {
        margin-left: 0 !important;
    }

    /* Reduce content width to leave space for sidebar */
    .mobile-comparison {
        max-width: calc(100% - 50px) !important;
        margin-left: auto !important;
        margin-right: 10px !important;
    }

    /* Adjust main content area */
    .container-fluid {
        padding-left: 50px !important;
        padding-right: 10px !important;
    }

    /* Module layout content adjustment */
    #module-content,
    .page-content-body {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Content section adjustments */
    .content-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Extra small screens */
@media (max-width: 479px) {
    .container-fluid {
        padding-left: 45px !important;
        padding-right: 8px !important;
    }

    .mobile-comparison {
        max-width: calc(100% - 45px) !important;
        margin-right: 8px !important;
    }

    .mobile-comparison .comparison-card {
        padding: 15px !important;
    }

    .mobile-comparison .form-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .mobile-comparison .form-row select,
    .mobile-comparison .form-row input {
        width: 100% !important;
    }
}

/* ===== MOBILE TOUCH-FRIENDLY BUTTONS ===== */
@media (max-width: 1023px) {
    /* All buttons minimum touch target size */
    button, 
    .btn,
    input[type="button"],
    input[type="submit"],
    a.btn {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }

    /* Plus/Minus increment buttons */
    .mobile-comparison .form-row button,
    .icon-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 24px !important;
        font-weight: bold !important;
        border-radius: 8px !important;
        background-color: #4674C6 !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-comparison .form-row button:active,
    .icon-btn:active {
        background-color: #22527C !important;
        transform: scale(0.95);
    }

    /* Reset button */
    .mobile-comparison button[class*="bg-custom-blue"] {
        min-height: 54px !important;
        padding: 16px 32px !important;
        font-size: 18px !important;
        border-radius: 12px !important;
    }

    /* Form inputs larger for touch */
    .mobile-comparison input[type="number"],
    .mobile-comparison select {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
    }

    /* Dropdown selects */
    .mobile-comparison select {
        min-height: 48px !important;
        padding: 12px !important;
    }

    /* CTA buttons */
    a[class*="inline-block"][class*="px-8"] {
        min-height: 56px !important;
        padding: 16px 32px !important;
        font-size: 18px !important;
    }

    /* Header mobile menu button */
    header button.xl\:hidden {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
    }

    /* Mobile menu items */
    .fixed.top-0.right-0.h-full ul li a,
    .fixed.top-0.right-0.h-full ul li > div {
        min-height: 48px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
    }
}

/* Extra small screens - even bigger buttons */
@media (max-width: 479px) {
    .mobile-comparison .form-row button {
        width: 48px !important;
        height: 48px !important;
        font-size: 26px !important;
    }

    .mobile-comparison button[class*="bg-custom-blue"] {
        width: 100% !important;
        min-height: 56px !important;
        font-size: 18px !important;
    }
}

/* ===== V3 LAYOUT - COMPARE PRICES STACKED ===== */
@media (max-width: 1023px) {
    /* Hide ALL tables in compare prices on mobile */
    table,
    .overflow-x-auto table,
    section table {
        display: none !important;
    }

    /* Show mobile comparison */
    .mobile-comparison {
        display: block !important;
    }
}

/* Desktop - hide mobile comparison, show table */
@media (min-width: 1024px) {
    .mobile-comparison {
        display: none !important;
    }
    
    table {
        display: table !important;
    }
}

/* ===== V3 LAYOUT - CONTENT WIDTH FOR SIDEBAR ===== */
@media (max-width: 1023px) {
    /* Main content container - leave room for sidebar */
    .container-fluid,
    .container,
    main,
    section,
    .space-y-10 {
        max-width: calc(100vw - 70px) !important;
        margin-left: 60px !important;
        margin-right: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* Mobile comparison cards - fit in reduced width */
    .mobile-comparison {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
    }

    .mobile-comparison .comparison-card {
        width: 100% !important;
        padding: 15px !important;
    }

    /* Form inputs smaller to fit */
    .mobile-comparison input,
    .mobile-comparison select {
        max-width: 100% !important;
    }
}

@media (max-width: 479px) {
    .container-fluid,
    .container,
    main,
    section,
    .space-y-10 {
        margin-left: 55px !important;
        margin-right: 5px !important;
        max-width: calc(100vw - 60px) !important;
    }
}

/* ===== V3 LAYOUT SPECIFIC - MAIN CONTENT WIDTH ===== */
@media (max-width: 767px) {
    /* V3 layout main content - proper width for sidebar */
    #mainContent {
        margin-left: 110px !important;
        width: calc(100% - 110px) !important;
        max-width: calc(100vw - 110px) !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #mainContent.collapsed {
        margin-left: 50px !important;
        width: calc(100% - 50px) !important;
        max-width: calc(100vw - 50px) !important;
    }

    /* All child containers should respect parent width */
    #mainContent .mx-auto,
    #mainContent .container,
    #mainContent .container-fluid,
    #mainContent section,
    #mainContent > div {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }

    /* Table must be hidden on mobile */
    #mainContent table {
        display: none !important;
    }

    /* Mobile comparison must show */
    #mainContent .mobile-comparison {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Cards fit properly */
    #mainContent .mobile-comparison .comparison-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Page title sizing */
    #mainContent h1 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
}

/* ===== V3 COLOR SCHEME FOR MOBILE COMPARISON ===== */
@media (max-width: 767px) {
    /* Comparison cards with color scheme */
    #mainContent .mobile-comparison .comparison-card {
        background: #FCFAF4 !important; /* Dark cream */
        border: 2px solid #203864 !important; /* Navy blue */
        border-radius: 12px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
    }

    #mainContent .mobile-comparison .comparison-card h3 {
        color: #203864 !important; /* Navy blue */
        border-bottom: 2px solid #203864 !important;
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
        font-size: 16px !important;
        text-align: center !important;
    }

    #mainContent .mobile-comparison .form-row {
        background: #F7F2E0 !important; /* Light cream */
        padding: 10px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #mainContent .mobile-comparison .form-label {
        color: #203864 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }

    #mainContent .mobile-comparison .vs-divider {
        color: #203864 !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }

    #mainContent .mobile-comparison .savings-section {
        background: #203864 !important; /* Navy blue */
        color: white !important;
        border-radius: 12px !important;
        padding: 20px !important;
        text-align: center !important;
    }

    /* Touch-friendly inputs */
    #mainContent .mobile-comparison input,
    #mainContent .mobile-comparison select {
        min-height: 44px !important;
        font-size: 16px !important;
        border: 1px solid #203864 !important;
        border-radius: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Touch-friendly buttons */
    #mainContent .mobile-comparison button {
        min-width: 44px !important;
        min-height: 44px !important;
        background: #203864 !important;
        color: white !important;
        border-radius: 8px !important;
        font-size: 18px !important;
        font-weight: bold !important;
    }

    /* Reset button */
    #mainContent .mobile-comparison .text-center button {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 16px !important;
    }
}