/* Mobile-specific optimizations for DelayRepayChecker.html */

/* Mobile Optimizations */
/* Ensure ticker is visible in mobile wizard */
@media (max-width: 768px) {
    #mobile-wizard .ticker-wrap {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 5rem !important; /* Position below fixed header (80px) */
        width: 100% !important;
        overflow: hidden !important;
    }
    
    #mobile-wizard .ticker {
        display: flex !important;
        animation: ticker 30s linear infinite !important;
    }
}

@media (max-width: 640px) {
    /* ============================================
       MOBILE HEADER CSS VARIABLES
       DRY: Centralized values for easy maintenance
       ============================================ */
    :root {
        --mobile-header-height-standard: 5rem; /* 80px - standard header height */
        --mobile-header-height-reduced: 3.5rem; /* 56px - reduced when wizard active */
        --mobile-header-logo-height: 2rem; /* 32px */
        --mobile-header-padding-x: 1rem; /* 16px horizontal padding */
        --mobile-header-btn-size: 2.5rem; /* 40px min touch target */
        --mobile-header-btn-gap: 0.5rem; /* 8px gap between buttons */
        --mobile-menu-width: calc(100vw - 1rem);
        --mobile-menu-max-width: 20rem;
        --mobile-menu-offset: 0.5rem;
    }

    /* Ensure minimum font size to prevent zoom on iOS */
    input[type="time"],
    input[type="date"],
    input[type="text"],
    select {
        font-size: 16px !important;
        min-height: 44px;
        padding: 0.75rem 1rem !important;
    }

    /* Optimize refund hero card for mobile */
    .refund-hero {
        padding: 1.5rem !important;
    }

    .refund-hero p:first-child {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }

    .refund-hero #total-refund-kpi-office {
        font-size: 2.5rem !important;
    }

    /* Better touch targets for buttons (Excluding Header) */
    button:not(nav button),
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1.25rem !important;
    }

    /* Checkbox and radio improvements */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }

    /* Better spacing for form groups */
    .space-y-6>*+* {
        margin-top: 1.25rem !important;
    }

    /* Improve autocomplete touch targets */
    .autocomplete-results li {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
    }

    /* KPI cards - better mobile display */
    .kpi-card {
        min-width: 130px !important;
    }

    /* Mobile table card refinements */
    .mobile-table-card tbody tr {
        padding: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }

    .mobile-table-card td {
        padding: 0.5rem 0 !important;
        font-size: 1rem !important;
        align-items: flex-start !important;
    }

    .mobile-table-card td::before {
        font-size: 0.875rem !important;
        min-width: 100px;
        flex-shrink: 0;
    }

    /* Claim button in mobile cards */
    .mobile-table-card td:has(a[href*="delay"]) {
        display: block !important;
        text-align: center;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
    }

    .mobile-table-card td:has(a[href*="delay"])::before {
        display: none;
    }

    /* Settings panel improvements */
    #settings-panel {
        font-size: 16px;
    }

    #settings-panel input,
    #settings-panel select {
        min-height: 44px;
    }

    /* Prevent card overflow on index page */
    .stat-card {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    /* Ensure stat cards grid doesn't overflow */
    .grid.grid-cols-2 {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Pricing cards container overflow fix */
    #pricing-container {
        max-width: 100vw;
    }

    pricing-card {
        max-width: calc(100vw - 3rem);
    }

    /* Hide subscription form on mobile - use progressive disclosure */
    section:has(#subscription-form) {
        display: none !important;
    }

    /* Simplify decorative elements on mobile */
    .blob,
    section .absolute.bg-emerald-500\/5,
    section .absolute.bg-blue-500\/5 {
        display: none !important;
    }

    /* Simplify stat cards - remove hover effects, reduce padding */
    .stat-card {
        padding: 1rem !important;
        border-radius: 0.75rem !important;
    }

    .stat-card:hover {
        transform: none !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    }

    /* Reduce section padding on mobile */
    section.py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    section.sm\:py-20 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Simplify "Reality Gap" section - shorter copy */
    .prose.prose-lg p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    /* Hide citations on mobile for cleaner look */
    .text-xs.text-left.text-slate-500 {
        display: none !important;
    }

    /* Simplify large stat card */
    .stat-card.col-span-2 {
        padding: 1.25rem !important;
    }

    .stat-card.col-span-2 .text-3xl {
        font-size: 1.75rem !important;
    }

    /* Pricing section mobile optimizations */
    #pricing {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #pricing h2 {
        font-size: 1.875rem !important;
        line-height: 1.3 !important;
    }

    #pricing p {
        font-size: 0.9375rem !important;
    }

    /* Simplify pricing cards on mobile */
    pricing-card {
        padding: 1.25rem !important;
    }

    pricing-card:hover {
        transform: none !important;
    }

    /* Mobile typography improvements */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em;
    }

    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    p, .text-base, .text-lg {
        line-height: 1.7 !important;
    }

    /* Increase section spacing for cleaner feel */
    section {
        margin-bottom: 1.5rem;
    }

    /* Better button spacing */
    app-button, button {
        min-height: 48px !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* ============================================
       GLOBAL MOBILE HEADER FORMATTING
       DRY: Centralized mobile header styles
       ============================================ */
    
    /* Mobile Header Container - Base Styles */
    /* Ensure consistent padding on the container, not the nav element */
    nav .mobile-header-container,
    app-header nav .mobile-header-container {
        padding-left: 1.5rem !important; /* px-6 = 24px, consistent across all pages */
        padding-right: 1.5rem !important;
    }
    
    /* On larger screens, use px-8 (2rem) */
    @media (min-width: 1024px) {
        nav .mobile-header-container,
        app-header nav .mobile-header-container {
            padding-left: 2rem !important; /* lg:px-8 = 32px */
            padding-right: 2rem !important;
        }
    }

    /* Mobile Header Height - Standard (applies to all pages, including when wizard is visible) */
    nav .mobile-header-container,
    nav .h-20,
    app-header nav .h-20,
    app-header nav .mobile-header-container,
    body:has(#mobile-wizard) nav .mobile-header-container,
    body:has(#mobile-wizard) nav .h-20,
    body:has(#mobile-wizard) app-header nav .h-20,
    body:has(#mobile-wizard) app-header nav .mobile-header-container {
        height: var(--mobile-header-height-standard) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Mobile Header Logo */
    nav .mobile-header-logo,
    nav .brand-logo,
    app-header nav .brand-logo {
        height: var(--mobile-header-logo-height) !important;
        width: auto !important;
    }

    /* Mobile Header Actions Container (theme toggle, menu button, etc.) */
    nav .mobile-header-actions,
    nav .flex.items-center.gap-2.md\:hidden {
        display: flex !important;
        align-items: center !important;
        gap: var(--mobile-header-btn-gap) !important;
    }

    /* Mobile Header Buttons (theme toggle, menu button) */
    nav .mobile-header-btn,
    nav #theme-toggle-mobile,
    nav #mobile-menu-btn {
        padding: 0.5rem !important;
        border-radius: 0.5rem !important;
        min-width: var(--mobile-header-btn-size) !important;
        min-height: var(--mobile-header-btn-size) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }

    nav .mobile-header-btn:hover,
    nav #theme-toggle-mobile:hover,
    nav #mobile-menu-btn:hover {
        background-color: rgba(148, 163, 184, 0.1) !important;
    }

    .dark nav .mobile-header-btn:hover,
    .dark nav #theme-toggle-mobile:hover,
    .dark nav #mobile-menu-btn:hover {
        background-color: rgba(148, 163, 184, 0.2) !important;
    }

    /* Mobile Menu Dropdown - Base Position (consistent across all pages) */
    nav .mobile-header-menu,
    nav #mobile-menu,
    body:has(#mobile-wizard) nav .mobile-header-menu,
    body:has(#mobile-wizard) nav #mobile-menu {
        right: var(--mobile-menu-offset) !important;
        width: var(--mobile-menu-width) !important;
        max-width: var(--mobile-menu-max-width) !important;
        top: var(--mobile-header-height-standard) !important;
        position: absolute !important;
        z-index: 50 !important;
    }

    /* Hide tracker flyout on mobile - both the container and button - COMPLETE HIDE */
    #tracker-flyout-container,
    #tracker-toggle-btn,
    button#tracker-toggle-btn,
    div#tracker-flyout-container,
    [id="tracker-flyout-container"],
    [id="tracker-toggle-btn"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Hide flyout button even if it's inside wizard or anywhere else */
    #mobile-wizard #tracker-toggle-btn,
    #mobile-wizard #tracker-flyout-container,
    body #tracker-toggle-btn,
    body #tracker-flyout-container {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Ensure wizard is full screen on mobile - use dvh for dynamic viewport height */
    #mobile-wizard {
        top: 0 !important;
        height: 100dvh !important; /* Dynamic viewport height accounts for mobile browser bars */
        height: 100vh !important; /* Fallback for browsers that don't support dvh */
        max-height: 100dvh !important;
        max-height: 100vh !important; /* Fallback */
        overflow: hidden !important; /* Prevent any scrolling */
        display: flex !important;
        flex-direction: column !important;
        /* Add bottom padding to account for browser navigation bar */
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem) !important;
    }
    
    /* Wizard slides must fit within viewport - no scrolling */
    .wizard-slide {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    
    /* Wizard slide content containers - use flex to fit content */
    .wizard-slide > div {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    
    /* Prevent main element in wizard from scrolling */
    #mobile-wizard main {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important; /* Allow flex shrinking */
    }

    /* Mobile-optimized footer - add extra padding for browser bar */
    footer {
        padding: 1.5rem 1rem !important;
        /* Add safe-area-inset-bottom + extra padding to account for mobile browser navigation bar */
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + 2rem) !important;
        font-size: 0.8125rem !important;
    }
    
    /* Add bottom padding to body to account for mobile browser bar */
    body {
        /* Use safe-area-inset-bottom if available, otherwise use 2rem fallback */
        padding-bottom: env(safe-area-inset-bottom, 2rem);
    }
    
    /* Ensure main content has bottom padding on mobile to prevent overlap */
    main {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* Last section before footer - add extra bottom padding to prevent content from being hidden */
    section:last-of-type {
        padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* One-line footer navigation on mobile */
    footer .flex.flex-row.items-center.justify-center {
        gap: 0.75rem !important;
        flex-wrap: nowrap !important;
    }

    /* Larger touch targets for footer links */
    footer .footer-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        flex-shrink: 0 !important;
    }

    /* Larger touch targets for social icons */
    footer .footer-social-link {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* Copyright section mobile styling */
    footer .footer-copyright {
        text-align: center !important;
        width: 100% !important;
    }

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

    /* Legal text mobile styling */
    footer .footer-legal {
        text-align: center !important;
        width: 100% !important;
    }

    footer .footer-legal p {
        font-size: 0.6875rem !important;
        line-height: 1.4 !important;
    }

    /* Remove extra padding on mobile footer container */
    footer .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Better border spacing on mobile */
    footer .border-b {
        margin-bottom: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Hide desktop content on mobile - show only wizard (only when wizard is visible) */
    body.wizard-visible main.md\:block {
        display: none !important;
    }

    /* Hide other sections on mobile (keep only wizard and ticker) - only when wizard is visible */
    body.wizard-visible section:not(#mobile-ticker-top):not(#mobile-signup-cta) {
        display: none !important;
    }

    body.wizard-visible #mobile-signup-cta {
        display: none !important;
    }
    
    /* Show main content on mobile when logged in (wizard not visible) - override hidden class */
    body:not(.wizard-visible) main.hidden {
        display: block !important;
    }
    
    body:not(.wizard-visible) main.md\:block {
        display: block !important;
    }

    /* Wizard slide styles for mobile - ensure content fits without scrolling */
    /* Account for global header height (80px) + ticker height (~40px) = ~120px */
    .wizard-slide {
        padding: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Wizard slide inner divs - use flex to distribute space and fit content */
    .wizard-slide > div {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important; /* Allow flex shrinking */
        padding-top: 0.5rem !important; /* Keep existing top padding */
        /* Add bottom padding for browser bar clearance - ensures buttons are visible */
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 6rem) !important;
    }
    
    /* Ensure flex-1 containers can shrink */
    .wizard-slide .flex-1 {
        min-height: 0 !important;
        overflow: hidden !important;
        flex-shrink: 1 !important;
        max-height: 100% !important;
    }

    /* Wizard reward screen styling */
    #wizard-reward-amount {
        font-size: 4rem !important;
        line-height: 1 !important;
    }

    /* Wizard input styling - compact to fit on screen */
    #mobile-wizard .input-field {
        font-size: 16px !important;
        min-height: 44px !important;
        padding: 0.625rem 1rem !important;
    }
    
    /* Reduce spacing in wizard to fit content on screen */
    #mobile-wizard .space-y-4 > * + *,
    #mobile-wizard .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
    
    /* Reduce margins on wizard headings and text */
    #mobile-wizard h1,
    #mobile-wizard h2 {
        margin-bottom: 0.75rem !important;
    }
    
    #mobile-wizard p {
        margin-bottom: 1rem !important;
    }
    
    /* Make wizard buttons more compact */
    #mobile-wizard app-button {
        min-height: 48px !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* Ensure wizard input fields have proper left padding for icons */
    /* Override the general input[type="text"] padding rule above (line 9-14) */
    /* This ensures both placeholder and entered text appear to the right of icons */
    /* Icon is at left-4 (1rem), icon is w-5 (1.25rem), so need at least 1rem + 1.25rem + gap = ~4rem */
    #mobile-wizard input[type="text"]#wizard-calc-from,
    #mobile-wizard input[type="text"]#wizard-calc-to,
    #mobile-wizard input[type="text"]#wizard-calc-price,
    #mobile-wizard #wizard-calc-from[type="text"],
    #mobile-wizard #wizard-calc-to[type="text"],
    #mobile-wizard #wizard-calc-price[type="text"] {
        padding-top: 0.875rem !important;
        padding-right: 1rem !important;
        padding-bottom: 0.875rem !important;
        padding-left: 4rem !important;
    }

    /* Wizard button styling */
    #mobile-wizard app-button {
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    /* ALL wizard buttons - ensure visibility above browser navigation bar */
    .wizard-slide app-button,
    .wizard-slide button[type="button"]:not(nav button) {
        margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* Button containers - extra bottom clearance */
    .wizard-slide > div > div:last-child {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Specific button containers with mt-8 class */
    .wizard-slide .mt-8 {
        margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Day Selector - Ensure all 7 days fit horizontally on all screen sizes */
    day-selector,
    .day-selector-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 0.25rem !important; /* 4px gap on mobile for tighter spacing */
        width: 100% !important;
    }

    /* Day selector labels - fill grid cells */
    day-selector label {
        min-width: 0 !important; /* Allow grid to control width */
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Day selector buttons - fill parent label and maintain square aspect ratio */
    day-selector label > div {
        width: 100% !important;
        height: 100% !important;
        min-height: 2.5rem !important; /* 40px minimum for touch target */
        aspect-ratio: 1 !important; /* Maintain square shape */
        max-width: 100% !important;
    }

    /* Override Tailwind fixed sizes to allow responsive sizing */
    day-selector .w-10,
    day-selector .h-10,
    day-selector .sm\:w-11,
    day-selector .sm\:h-11 {
        width: 100% !important;
        height: 100% !important;
    }

    /* Show global header on mobile when wizard is visible */
    /* The wizard should use the standard global header component */
    body.wizard-visible app-header {
        display: block !important;
        z-index: 60 !important; /* Ensure header is above wizard (z-40) */
    }
    
    /* Ensure header nav has proper z-index when wizard is visible */
    body.wizard-visible app-header nav {
        z-index: 60 !important;
    }

    /* Hide community banner on mobile */
    community-goal-banner {
        display: none !important;
    }

    /* Ensure wizard starts at slide 1 */
    .wizard-slide:first-child {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Show "Check My Commute" button on initial splash page */
    /* Button is now visible to allow users to proceed */
    
    /* Toast notifications - ensure they're visible above wizard on mobile */
    #toast-container {
        left: 1rem !important;
        right: 1rem !important;
        bottom: 2rem !important;
        transform: none !important;
        z-index: 10001 !important;
        max-width: calc(100vw - 2rem) !important;
        position: fixed !important;
    }
    
    .toast-notification {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure toasts are above mobile wizard (z-40) */
    #mobile-wizard ~ #toast-container,
    body > #toast-container {
        z-index: 10001 !important;
    }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
    .refund-hero #total-refund-kpi-office {
        font-size: 3.5rem !important;
    }
}