/* 
Mobile UX Improvements for House Hunter 2
Responsive design fixes for mobile devices
*/

/* DESKTOP: Hide all mobile elements completely */
@media (min-width: 769px) {
    .mobile-menu-overlay,
    .mobile-menu,
    .hamburger-menu-trigger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* MOBILE: Show mobile elements only on small screens */
@media (max-width: 768px) {
    .mobile-menu-overlay,
    .hamburger-menu-trigger {
        display: block !important;
    }
}

/* ===== MOBILE NAVIGATION FIXES ===== */
@media (max-width: 768px) {
    /* Force single-line header layout */
    .navbar {
        padding: 8px 0 !important;
        min-height: auto !important;
    }
    
    .navbar-container {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        min-height: 44px;
        align-items: center !important;
        /* Prevent overflow */
        overflow-x: visible !important;
        max-width: 100vw !important;
    }
    
    /* Ensure navbar brand meets touch target requirements */
    .navbar-brand {
        font-size: 0 !important; /* Hide text */
        min-width: 44px !important; /* Meet touch target requirement */
        min-height: 44px !important; /* Meet touch target requirement */
        flex-shrink: 0 !important;
        margin-right: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .navbar-brand:hover {
        background-color: var(--hh-color-base-cloud) !important;
    }
    
    .navbar-brand img {
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
    }
    
    /* Compact navigation items */
    .navbar-nav {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
    
    .nav-link {
        font-size: 12px !important;
        padding: 6px 8px !important;
        white-space: nowrap !important;
        border-radius: 4px !important;
    }
    
    /* Hide GitHub links on mobile */
    .nav-link[href*="github"] {
        display: none !important;
    }
    
    .token-counter {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 12px !important;
    }
    
    .token-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Logout button meets touch target requirements */
    .logout-btn {
        font-size: 0 !important;
        min-width: 44px !important; /* Meet touch target requirement */
        min-height: 44px !important; /* Meet touch target requirement */
        padding: 10px !important;
        border-radius: 22px !important;
        background: #f3f4f6 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .logout-btn:hover {
        background: #e5e7eb !important;
    }
    
    .logout-btn:after {
        content: '🚪';
        font-size: 18px !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 480px) {
    /* Ultra-compact for very small screens */
    .navbar {
        padding: 6px 0 !important;
    }
    
    .navbar-container {
        padding: 0 12px !important;
        gap: 6px !important;
        min-height: 40px !important;
    }
    
    .navbar-brand img {
        width: 28px !important;
        height: 28px !important;
    }
    
    .navbar-nav {
        gap: 4px !important;
    }
    
    .nav-link {
        font-size: 11px !important;
        padding: 4px 6px !important;
    }
    
    .token-counter {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
    
    .token-icon {
        width: 24px !important;
        height: 24px !important;
    }
    
    .logout-btn {
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 4px !important;
    }
    
    .logout-btn:after {
        font-size: 14px !important;
    }
}

/* ===== HISTORY PAGE MOBILE IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Hide search input and entries selector on mobile */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        display: none !important;
    }
    
    /* Move table title higher and make it prominent */
    .table-header {
        padding: 12px 16px !important;
        margin-bottom: 8px !important;
    }
    
    .table-header h5 {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    /* Convert large buttons to small icons */
    .btn-group .btn {
        padding: 6px 8px !important;
        font-size: 12px !important;
        min-height: auto !important;
    }
    
    .btn-outline-primary,
    .btn-export {
        padding: 6px 8px !important;
        font-size: 0 !important; /* Hide text */
        min-width: 32px !important;
        min-height: 32px !important;
        position: relative !important;
    }
    
    /* Add icons via CSS */
    .btn-outline-primary:before {
        content: '⚙️';
        font-size: 14px !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .btn-export:before {
        content: none; /* Removed emoji to allow SVG image to show */
    }
    
    /* Compact action buttons in table */
    .btn-sm {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 4px !important;
        font-size: 12px !important;
        touch-action: manipulation;
    }
    
    /* Better spacing for action button groups */
    .btn-group .btn {
        margin-right: 2px !important;
    }
    
    .btn-group .btn:last-child {
        margin-right: 0 !important;
    }
    
    /* Move table up by reducing top margins */
    .container {
        padding-top: 8px !important;
    }
    
    .table-card {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }
}

/* ===== RESPONSIVE DATATABLE FIXES ===== */
@media (max-width: 768px) {
    /* DataTable responsive wrapper */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Table container with horizontal scroll */
    table.dataTable {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: collapse;
    }
    
    /* Hide less important columns on mobile */
    table.dataTable th:nth-child(4), /* Sq Ft */
    table.dataTable td:nth-child(4),
    table.dataTable th:nth-child(6), /* Renovation */
    table.dataTable td:nth-child(6),
    table.dataTable th:nth-child(8), /* Cash-on-Cash */
    table.dataTable td:nth-child(8),
    table.dataTable th:nth-child(9), /* IRR */
    table.dataTable td:nth-child(9) {
        display: none;
    }
    
    /* Adjust remaining column widths */
    table.dataTable th:nth-child(1), /* Address */
    table.dataTable td:nth-child(1) {
        min-width: 140px;
        max-width: 160px;
    }
    
    table.dataTable th:nth-child(2), /* Price */
    table.dataTable td:nth-child(2) {
        min-width: 80px;
        max-width: 100px;
    }
    
    table.dataTable th:nth-child(3), /* Beds/Baths */
    table.dataTable td:nth-child(3) {
        min-width: 60px;
        max-width: 80px;
    }
    
    table.dataTable th:nth-child(5), /* Investment */
    table.dataTable td:nth-child(5) {
        min-width: 80px;
        max-width: 100px;
    }
    
    table.dataTable th:nth-child(7), /* NPV */
    table.dataTable td:nth-child(7) {
        min-width: 80px;
        max-width: 100px;
    }
    
    table.dataTable th:nth-child(10), /* Analyzed */
    table.dataTable td:nth-child(10) {
        min-width: 80px;
        max-width: 100px;
    }
    
    table.dataTable th:nth-child(11), /* Actions */
    table.dataTable td:nth-child(11) {
        min-width: 60px;
        max-width: 80px;
    }
    
    /* Improve text wrapping */
    table.dataTable td {
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        line-height: 1.3;
        padding: 8px 4px !important;
        font-size: 12px;
    }
    
    table.dataTable th {
        padding: 8px 4px !important;
        font-size: 11px;
        font-weight: 600;
    }
}

@media (max-width: 480px) {
    /* More aggressive column hiding for very small screens */
    table.dataTable th:nth-child(3), /* Beds/Baths */
    table.dataTable td:nth-child(3),
    table.dataTable th:nth-child(5), /* Investment */
    table.dataTable td:nth-child(5) {
        display: none;
    }
    
    /* Adjust remaining columns for iPhone SE */
    table.dataTable th:nth-child(1), /* Address */
    table.dataTable td:nth-child(1) {
        min-width: 120px;
        max-width: 140px;
    }
    
    table.dataTable th:nth-child(2), /* Price */
    table.dataTable td:nth-child(2) {
        min-width: 70px;
        max-width: 90px;
    }
    
    table.dataTable th:nth-child(7), /* NPV */
    table.dataTable td:nth-child(7) {
        min-width: 70px;
        max-width: 90px;
    }
    
    table.dataTable th:nth-child(10), /* Analyzed */
    table.dataTable td:nth-child(10) {
        min-width: 70px;
        max-width: 90px;
    }
    
    table.dataTable th:nth-child(11), /* Actions */
    table.dataTable td:nth-child(11) {
        min-width: 60px;
        max-width: 80px;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    
    /* Smaller text for very small screens */
    table.dataTable td {
        font-size: 11px;
        padding: 6px 3px !important;
    }
    
    table.dataTable th {
        font-size: 10px;
        padding: 6px 3px !important;
    }
    
    /* Better action buttons for mobile */
    table.dataTable td .btn-sm {
        min-width: 24px !important;
        min-height: 24px !important;
        padding: 2px !important;
        margin: 1px !important;
        font-size: 10px !important;
        border-width: 1px !important;
    }
    
    /* Make action button container more compact */
    table.dataTable td .btn-group {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
    }
}

/* ===== DATATABLE CONTROLS MOBILE FIXES ===== */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .dataTables_wrapper .dataTables_length select {
        width: auto;
        display: inline-block;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        width: 200px;
        margin-left: 5px;
    }
    
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin-top: 10px;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 8px 12px;
        margin: 2px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .dataTables_wrapper .dataTables_filter input {
        width: 150px;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 8px;
        font-size: 11px;
    }
}

/* ===== FORM AND BUTTON IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Ensure touch targets are at least 44px */
    .submit-btn,
    .login-btn,
    .logout-btn,
    button {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    /* Market search results checkbox improvements - proper touch targets */
    .property-checkbox,
    .select-all-checkbox input[type="checkbox"] {
        /* Use proper dimensions instead of scaling */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        /* Remove scaling, use proper sizing */
        transform: none !important;
        /* Add visual feedback */
        border: 2px solid #d1d5db !important;
        border-radius: 4px !important;
        background: #ffffff !important;
        transition: all 0.2s ease !important;
    }
    
    .property-checkbox:checked,
    .select-all-checkbox input[type="checkbox"]:checked {
        background: var(--hh-color-brand-primary) !important;
        border-color: var(--hh-color-brand-primary) !important;
    }
    
    /* Prevent iOS zoom on form fields */
    input[type="checkbox"] {
        font-size: 16px !important; /* Prevent iOS zoom */
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* Add checkmark for checked state */
    .property-checkbox:checked::after,
    .select-all-checkbox input[type="checkbox"]:checked::after {
        content: "✓" !important;
        color: white !important;
        font-size: 24px !important;
        font-weight: bold !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        line-height: 1 !important;
    }
    
    /* Improve checkbox container spacing */
    .select-all-checkbox {
        min-height: 44px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 6px !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }
    
    /* Property card checkbox positioning */
    .property-checkbox {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 10 !important;
    }
    
    /* Form container adjustments */
    .form-container {
        padding: 24px 20px 32px !important;
    }
    
    .container {
        margin: 0 12px;
        max-width: calc(100% - 24px);
    }
    
    /* Input field improvements */
    input[type="url"],
    input[type="text"],
    input[type="email"],
    input[type="password"],
    .ai-tier-select {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 14px 16px;
        min-height: 44px;
        box-sizing: border-box;
    }
    
    /* AI Tier Selection Mobile Styles */
    .tier-details {
        padding: 10px;
        margin-top: 10px;
    }
    
    .tier-badges {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 6px;
    }
    
    .tier-badge {
        padding: 3px 6px;
        font-size: 11px;
        text-align: center;
    }
    
    .tier-description {
        font-size: 12px;
        line-height: 1.3;
    }
    
    .cost-preview {
        margin-top: 16px;
        padding: 12px;
    }
    
    .cost-header,
    .token-balance,
    .cost-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .cost-header {
        margin-bottom: 6px;
    }
    
    .token-balance {
        margin-bottom: 6px;
        padding-bottom: 6px;
    }
    
    .submit-btn {
        flex-direction: column;
        gap: 4px;
        padding: 16px 12px;
    }
    
    .btn-cost {
        font-size: 12px;
        opacity: 0.8;
    }
}

@media (max-width: 480px) {
    .form-container {
        padding: 20px 16px 24px !important;
    }
    
    .container {
        margin: 0 8px;
        max-width: calc(100% - 16px);
        border-radius: 8px;
    }
    
    .header {
        padding: 16px 20px !important;
    }
    
    .header h1 {
        font-size: 1.5em !important;
    }
    
    .header p {
        font-size: 0.85em !important;
    }
}

/* ===== LOADING SCREEN MOBILE FIXES ===== */
@media (max-width: 768px) {
    .progress-dashboard {
        padding: 16px;
        margin: 12px;
    }
    
    .stage {
        padding: 12px;
    }
    
    .stage-title {
        font-size: 13px;
    }
    
    .stage-message {
        font-size: 12px;
    }
    
    .stage-status {
        font-size: 10px;
        padding: 2px 6px;
    }
}

@media (max-width: 480px) {
    .progress-dashboard {
        padding: 12px;
        margin: 8px;
    }
    
    .progress-header h3 {
        font-size: 1em;
    }
    
    .analysis-id {
        font-size: 10px;
    }
    
    .stage {
        padding: 10px;
    }
    
    .stage-title {
        font-size: 12px;
    }
    
    .stage-message {
        font-size: 11px;
    }
}

/* ===== RESULTS PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    /* Property results layout adjustments */
    .results-container {
        padding: 12px;
    }
    
    .property-header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .property-title {
        font-size: 1.3em;
        line-height: 1.4;
    }
    
    /* Chart containers should be responsive */
    .chart-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .chart-container canvas,
    .chart-container svg {
        max-width: 100%;
        height: auto;
    }
    
    /* Parameters table responsive */
    .parameters-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .parameters-table table {
        min-width: 300px;
        font-size: 13px;
    }
    
    .parameters-table th,
    .parameters-table td {
        padding: 8px 6px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .results-container {
        padding: 8px;
    }
    
    .property-header {
        padding: 12px 16px;
    }
    
    .property-title {
        font-size: 1.2em;
    }
    
    .parameters-table table {
        font-size: 12px;
    }
    
    .parameters-table th,
    .parameters-table td {
        padding: 6px 4px;
    }
}

/* ===== FOOTER MOBILE FIXES ===== */
@media (max-width: 768px) {
    footer {
        padding: 20px 0 !important;
        margin-top: 30px !important;
    }
    
    footer .container {
        padding: 0 12px !important;
    }
    
    footer p {
        font-size: 14px !important; /* Increased from 0.8em for better readability */
        line-height: 1.5;
        margin-bottom: 8px !important;
    }
    
    /* Improve footer link touch targets */
    footer a {
        margin: 0 6px !important;
        padding: 12px !important; /* Add padding for better touch targets */
        display: inline-block !important;
        min-height: 44px !important; /* Meet touch target requirement */
        line-height: 20px !important;
        text-decoration: underline !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
    }
    
    footer a:hover {
        background-color: rgba(0, 123, 255, 0.1) !important;
        text-decoration: none !important;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 16px 0 !important;
        margin-top: 20px !important;
    }
    
    footer p {
        font-size: 12px !important; /* Specific size instead of relative em */
    }
    
    footer a {
        margin: 0 4px !important;
        padding: 8px !important; /* Reduce padding slightly for small screens */
    }
}

/* ===== TYPOGRAPHY AND LAYOUT FIXES ===== */
@media (max-width: 768px) {
    /* Fix H1 line height that was flagged as too tight */
    .page-header h1,
    h1 {
        line-height: 1.3 !important; /* Improve from tight 24px to proper ratio */
        font-size: 28px !important; /* Slightly smaller for mobile */
        margin-bottom: 12px !important;
    }
    
    /* Fix navigation overflow issue */
    .navbar-nav {
        /* Prevent overflow by making navigation more compact */
        max-width: calc(100vw - 80px) !important; /* Account for logo space */
        overflow: visible !important;
        justify-content: flex-end !important;
    }
    
    /* Hide less important nav items on very small screens */
    .nav-link:nth-child(n+3),
    .mobile-hidden {
        display: none !important; /* Hide third nav item and beyond on mobile */
    }
    
    /* Make remaining nav links more compact */
    .nav-link {
        padding: 8px 6px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    /* Ensure token counter doesn't cause overflow */
    .token-counter {
        flex-shrink: 0 !important;
        max-width: 120px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 480px) {
    /* Even more aggressive space saving for small screens */
    .page-header h1,
    h1 {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }
    
    .nav-link:nth-child(n+2) {
        display: none !important; /* Hide second nav item and beyond on very small screens */
    }
    
    .token-counter {
        max-width: 100px !important;
        font-size: 10px !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Improve focus indicators on mobile */
    button:focus,
    input:focus,
    select:focus,
    a:focus {
        outline: 3px solid #007bff;
        outline-offset: 2px;
    }
    
    /* Better spacing for touch */
    .nav-link:not(:last-child) {
        margin-right: 8px;
    }
    
    /* Prevent text selection on buttons */
    button,
    .button,
    .btn {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* GPU acceleration for smooth scrolling */
    .dataTables_wrapper,
    .chart-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: scroll-position;
    }
    
    /* Reduce animations on mobile for performance */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Optimize for touch scrolling */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* ===== HORIZONTAL SCROLL PREVENTION ===== */
@media (max-width: 768px) {
    /* Prevent any horizontal overflow */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Specific fixes for common overflow elements */
    .container,
    .navbar-container,
    .form-container,
    .progress-dashboard {
        max-width: 100%;
        overflow-x: visible;
    }
    
    /* Table containers must handle overflow properly */
    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto;
        overflow-y: visible;
        width: 100%;
    }
}

/* ===== LOGIN PAGE MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Mobile-first login container */
    .login-container {
        margin: var(--hh-space-md) !important;
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        max-width: none !important;
        width: calc(100vw - 32px) !important;
        min-height: auto !important;
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    /* Optimize logo section for mobile */
    .logo {
        margin-bottom: var(--hh-space-xl) !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .logo img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .logo h1 {
        font-size: var(--hh-type-h2-size) !important;
    }
    
    /* Touch-friendly auth tabs */
    .auth-tab {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        font-size: var(--hh-type-body-size) !important;
        min-height: 44px !important; /* Touch target compliance */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Mobile-optimized form groups */
    .form-group {
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .form-group label {
        font-size: var(--hh-type-body-size) !important;
        margin-bottom: var(--hh-space-xs) !important;
    }
    
    /* Critical: Prevent iOS zoom on input focus */
    .form-group input,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"] {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
        border-radius: var(--hh-radius-md) !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        min-height: 48px !important; /* Touch-friendly height */
        -webkit-appearance: none !important; /* Remove iOS styling */
        appearance: none !important;
    }
    
    .form-group input:focus {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.1) !important;
    }
    
    /* Enhanced password toggle for mobile */
    .password-toggle {
        right: var(--hh-space-md) !important;
        width: 44px !important; /* Touch target compliance */
        height: 44px !important;
        font-size: var(--hh-type-lg-size) !important;
        background: none !important;
        border: none !important;
        border-radius: var(--hh-radius-sm) !important;
        transition: all 0.2s ease !important;
    }
    
    .password-toggle:hover,
    .password-toggle:focus {
        background: var(--hh-color-base-cloud) !important;
        color: var(--hh-color-brand-primary) !important;
    }
    
    .password-field-container input[type="password"],
    .password-field-container input[type="text"] {
        padding-right: 60px !important; /* Account for larger touch target */
    }
    
    /* Enhanced mobile auth button */
    .auth-button {
        padding: var(--hh-space-lg) !important;
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 52px !important; /* Generous touch target */
        border-radius: var(--hh-radius-md) !important;
        margin-bottom: var(--hh-space-lg) !important;
        transition: all 0.2s ease !important;
    }
    
    .auth-button:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Mobile-optimized divider */
    .auth-divider {
        margin: var(--hh-space-xl) 0 !important;
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Google Sign-in button mobile optimization */
    .google-signin-button {
        width: 100% !important;
        min-height: 52px !important;
        border-radius: var(--hh-radius-md) !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        background: var(--hh-color-base-white) !important;
        transition: all 0.2s ease !important;
    }
    
    .google-signin-button:hover {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .google-signin-button:active {
        transform: scale(0.98) !important;
    }
    
    /* Back to home link mobile optimization */
    .back-link {
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        border-radius: var(--hh-radius-sm) !important;
        transition: all 0.2s ease !important;
    }
    
    .back-link:hover {
        background: var(--hh-color-base-cloud) !important;
        text-decoration: none !important;
    }
}

/* ===== LOGIN PAGE COMPACT MOBILE (iPhone SE and smaller) ===== */
@media (max-width: 375px) {
    .login-container {
        margin: var(--hh-space-sm) !important;
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        width: calc(100vw - 16px) !important;
    }
    
    .logo {
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .logo img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .logo h1 {
        font-size: var(--hh-type-h3-size) !important;
    }
    
    .form-group {
        margin-bottom: var(--hh-space-md) !important;
    }
    
    .form-group input {
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        min-height: 44px !important;
    }
    
    .auth-button {
        min-height: 48px !important;
        font-size: var(--hh-type-body-size) !important;
    }
}

/* ===== HOME/SEARCH PAGE MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Mobile-first container layout */
    .container {
        max-width: 100% !important;
        padding: 0 var(--hh-space-lg) !important;
        margin: 0 !important;
    }
    
    /* Hero section mobile optimization */
    .hero-section {
        padding: var(--hh-space-xl) 0 !important;
        text-align: center !important;
    }
    
    .hero-title {
        font-size: var(--hh-type-h2-size) !important;
        line-height: var(--hh-type-h2-lh) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .hero-subtitle {
        font-size: var(--hh-type-body-size) !important;
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    /* Mobile-optimized tab buttons */
    .tab-button {
        flex: 1 !important;
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        font-size: var(--hh-type-body-size) !important;
        min-height: 52px !important; /* Touch target compliance */
        border-radius: var(--hh-radius-md) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--hh-space-sm) !important;
        transition: all 0.2s ease !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        background: var(--hh-color-base-white) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .tab-button.active {
        background: var(--hh-color-brand-slate) !important; /* Use slate instead of orange for distinction */
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-slate) !important;
    }
    
    .tab-button:not(.active):hover {
        border-color: var(--hh-color-brand-slate) !important;
        background: var(--hh-color-brand-slate-300) !important; /* Use slate for consistency */
    }
    
    .tab-button:active {
        transform: scale(0.98) !important;
    }
    
    /* Mobile form container */
    .form-container {
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-lg) !important;
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        margin: var(--hh-space-lg) 0 !important;
        box-shadow: var(--hh-shadow-lg) !important;
        border: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    /* Single property URL form */
    .form-row.single {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--hh-space-lg) !important;
    }
    
    .form-group {
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .form-group label {
        font-size: var(--hh-type-body-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        margin-bottom: var(--hh-space-sm) !important;
        display: block !important;
    }
    
    /* Mobile-optimized inputs */
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        padding: var(--hh-space-lg) !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border: 2px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-md) !important;
        min-height: 52px !important; /* Touch-friendly */
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none !important;
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.1) !important;
    }
    
    /* Market search form optimization */
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--hh-space-md) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    /* Two-column layout for price inputs on mobile */
    .form-row.price-inputs {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--hh-space-md) !important;
    }
    
    .form-row.price-inputs .form-group {
        flex: 1 !important;
        margin-bottom: 0 !important;
    }
    
    /* Primary action buttons */
    .btn-primary,
    .analyze-button,
    .search-button {
        width: 100% !important;
        padding: var(--hh-space-lg) !important;
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 56px !important; /* Generous touch target */
        border-radius: var(--hh-radius-md) !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        box-shadow: var(--hh-shadow-md) !important;
        margin-top: var(--hh-space-lg) !important;
    }
    
    .btn-primary:hover,
    .analyze-button:hover,
    .search-button:hover {
        background: var(--hh-color-brand-primary-600) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-1px) !important;
    }
    
    .btn-primary:active,
    .analyze-button:active,
    .search-button:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Progress indicators for mobile */
    .progress-bar-container {
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-md) !important;
        padding: var(--hh-space-lg) !important;
        margin: var(--hh-space-lg) 0 !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .stages-container {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .stage-item {
        padding: var(--hh-space-md) !important;
        border-radius: var(--hh-radius-sm) !important;
        border: 1px solid var(--hh-color-borders-subtle) !important;
        font-size: var(--hh-type-small-size) !important;
    }
    
    /* Loading states mobile optimization */
    .loading-spinner {
        margin: var(--hh-space-xl) auto !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .loading-text {
        text-align: center !important;
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin-top: var(--hh-space-md) !important;
    }
}

/* ===== HOME/SEARCH PAGE COMPACT MOBILE ===== */
@media (max-width: 375px) {
    .container {
        padding: 0 var(--hh-space-md) !important;
    }
    
    .hero-section {
        padding: var(--hh-space-lg) 0 !important;
    }
    
    .hero-title {
        font-size: var(--hh-type-h3-size) !important;
    }
    
    .form-container {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
    }
    
    .tab-button {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        min-height: 48px !important;
    }
    
    .form-group input,
    .form-group select {
        padding: var(--hh-space-md) !important;
        min-height: 48px !important;
    }
    
    .btn-primary,
    .analyze-button,
    .search-button {
        min-height: 52px !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-md) !important;
    }
    
    /* Stack price inputs vertically on very small screens */
    .form-row.price-inputs {
        flex-direction: column !important;
        gap: var(--hh-space-sm) !important;
    }
}

/* ===== ANALYSIS RESULTS PAGE MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Main container mobile optimization */
    .container.results-section {
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Compact header layout mobile optimization */
    .compact-header-layout {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        margin-bottom: var(--hh-space-md) !important;
        border-radius: var(--hh-radius-md) !important;
    }
    
    /* Property address mobile optimization */
    .property-address {
        font-size: var(--hh-type-h3-size) !important;
        line-height: var(--hh-type-h3-lh) !important;
        margin-bottom: var(--hh-space-md) !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Hero details mobile optimization - stack vertically */
    .hero-details {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--hh-space-md) !important;
        margin-top: var(--hh-space-md) !important;
    }
    
    /* Property details grid mobile optimization */
    .property-details-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--hh-space-md) !important;
    }
    
    /* Property photo gallery mobile optimization */
    .main-photo-container {
        height: 200px !important; /* Reduce height for mobile */
        margin-bottom: var(--hh-space-md) !important;
    }
    
    .photo-gallery-grid {
        display: flex !important; /* Change to horizontal scroll */
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: var(--hh-space-xs) !important;
        padding: var(--hh-space-sm) 0 !important;
    }
    
    .photo-gallery-grid img {
        flex-shrink: 0 !important;
        width: 80px !important;
        height: 60px !important;
        border-radius: var(--hh-radius-sm) !important;
    }
    
    /* Chart sections mobile optimization */
    .chart-section {
        margin-bottom: var(--hh-space-xl) !important;
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-sm) !important;
    }
    
    .chart-section h3 {
        font-size: var(--hh-type-h4-size) !important;
        margin-bottom: var(--hh-space-lg) !important;
        text-align: center !important;
    }
    
    /* Key metrics grid mobile optimization */
    .key-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on mobile */
        gap: var(--hh-space-sm) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .metric-card {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        background: var(--hh-color-base-cloud) !important;
        border-radius: var(--hh-radius-sm) !important;
        text-align: center !important;
    }
    
    .metric-value {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        display: block !important;
        margin-bottom: var(--hh-space-xs) !important;
    }
    
    .metric-label {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
        font-weight: var(--hh-type-body-weight) !important;
    }
    
    /* Chart container mobile optimization */
    .chart-container,
    #pricing-chart,
    #occupancy-chart,
    #adr-chart,
    #cash-flow-chart {
        height: 280px !important; /* Reduce chart height for mobile */
        width: 100% !important;
        margin-bottom: var(--hh-space-md) !important;
        border-radius: var(--hh-radius-sm) !important;
        background: var(--hh-color-base-white) !important;
        overflow: hidden !important;
    }
    
    /* ECharts responsive configuration will be handled by JavaScript */
    .echarts-container {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Toggle buttons mobile optimization */
    .toggle-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--hh-space-xs) !important;
        justify-content: center !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .toggle-btn {
        flex: 1 !important;
        min-width: 80px !important;
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
        font-size: var(--hh-type-small-size) !important;
        min-height: 44px !important; /* Touch target compliance */
        border-radius: var(--hh-radius-sm) !important;
        touch-action: manipulation !important;
    }
    
    /* Financial analysis section mobile optimization */
    .financial-analysis-section {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
    }
    
    .monthly-expenses {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--hh-space-sm) !important;
    }
    
    .expense-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        background: var(--hh-color-base-cloud) !important;
        border-radius: var(--hh-radius-sm) !important;
        font-size: var(--hh-type-small-size) !important;
    }
    
    /* Summary statistics mobile optimization */
    .summary-stats {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--hh-space-md) !important;
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-md) !important;
        margin-top: var(--hh-space-lg) !important;
    }
    
    .stat-group {
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
        padding-bottom: var(--hh-space-md) !important;
    }
    
    .stat-group:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    
    .stat-title {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        margin-bottom: var(--hh-space-sm) !important;
        color: var(--hh-color-text-primary) !important;
    }
    
    .stat-items {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .stat-item {
        text-align: center !important;
        padding: var(--hh-space-sm) !important;
        background: var(--hh-color-base-cloud) !important;
        border-radius: var(--hh-radius-sm) !important;
    }
    
    .stat-value {
        display: block !important;
        font-size: var(--hh-type-body-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin-bottom: var(--hh-space-xs) !important;
    }
    
    .stat-label {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Data tables mobile optimization */
    .data-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: var(--hh-space-lg) 0 !important;
        border-radius: var(--hh-radius-md) !important;
        border: 1px solid var(--hh-color-borders-default) !important;
    }
    
    .data-table {
        width: 100% !important;
        min-width: 600px !important; /* Minimum width for horizontal scroll */
        font-size: var(--hh-type-small-size) !important;
        border-collapse: collapse !important;
    }
    
    .data-table th {
        background: var(--hh-color-base-cloud) !important;
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
        font-size: var(--hh-type-small-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        text-align: left !important;
        border-bottom: 2px solid var(--hh-color-borders-default) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    .data-table td {
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
        white-space: nowrap !important;
    }
    
    .data-table tr:nth-child(even) {
        background: var(--hh-color-base-offWhite) !important;
    }
    
    /* Property images mobile optimization */
    .property-images-container {
        margin: var(--hh-space-lg) 0 !important;
    }
    
    .image-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--hh-space-sm) !important;
    }
    
    .main-image {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover !important;
        border-radius: var(--hh-radius-md) !important;
        margin-bottom: var(--hh-space-md) !important;
    }
    
    .thumbnail-grid {
        display: flex !important;
        gap: var(--hh-space-xs) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: var(--hh-space-sm) 0 !important;
    }
    
    .thumbnail {
        flex-shrink: 0 !important;
        width: 80px !important;
        height: 60px !important;
        object-fit: cover !important;
        border-radius: var(--hh-radius-sm) !important;
        cursor: pointer !important;
        border: 2px solid transparent !important;
        transition: border-color 0.2s ease !important;
    }
    
    .thumbnail:hover,
    .thumbnail.active {
        border-color: var(--hh-color-brand-primary) !important;
    }
    
    /* Error state mobile optimization */
    .error-message {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        background: var(--hh-color-status-error) !important;
        color: var(--hh-color-text-inverse) !important;
        border-radius: var(--hh-radius-md) !important;
        text-align: center !important;
        font-size: var(--hh-type-body-size) !important;
        margin: var(--hh-space-lg) 0 !important;
    }
    
    /* Loading states mobile optimization */
    .loading-state {
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        text-align: center !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    .loading-spinner {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto var(--hh-space-lg) !important;
    }
    
    /* Back navigation mobile optimization */
    .back-navigation {
        margin-bottom: var(--hh-space-lg) !important;
        padding: var(--hh-space-md) !important;
    }
    
    .back-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: var(--hh-space-sm) !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        min-height: 44px !important; /* Touch target compliance */
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-brand-primary) !important;
        text-decoration: none !important;
        border-radius: var(--hh-radius-sm) !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
    }
    
    .back-btn:hover {
        background: var(--hh-color-brand-primary-300) !important;
        color: var(--hh-color-text-primary) !important;
        text-decoration: none !important;
    }
}

/* ===== ANALYSIS RESULTS PAGE COMPACT MOBILE ===== */
@media (max-width: 480px) {
    /* Ultra-compact for very small screens */
    .container.results-section {
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
    }
    
    .compact-header-layout {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
    }
    
    .property-address {
        font-size: var(--hh-type-h4-size) !important;
        line-height: var(--hh-type-h4-lh) !important;
    }
    
    /* Single column metrics for very small screens */
    .key-metrics-grid {
        grid-template-columns: 1fr !important;
        gap: var(--hh-space-xs) !important;
    }
    
    .metric-card {
        padding: var(--hh-space-sm) !important;
    }
    
    .metric-value {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .metric-label {
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* Reduced chart height for very small screens */
    .chart-container,
    #pricing-chart,
    #occupancy-chart,
    #adr-chart,
    #cash-flow-chart {
        height: 220px !important;
    }
    
    /* Single column stats for very small screens */
    .stat-items {
        grid-template-columns: 1fr !important;
    }
    
    .stat-item {
        padding: var(--hh-space-xs) !important;
    }
    
    .stat-value {
        font-size: var(--hh-type-small-size) !important;
    }
    
    .stat-label {
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* Main image smaller for very small screens */
    .main-image {
        height: 180px !important;
    }
    
    .thumbnail {
        width: 60px !important;
        height: 45px !important;
    }
    
    /* Toggle buttons more compact */
    .toggle-btn {
        padding: var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
        min-height: 40px !important;
    }
    
    /* Chart sections more compact */
    .chart-section {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .chart-section h3 {
        font-size: var(--hh-type-small-size) !important;
        margin-bottom: var(--hh-space-md) !important;
    }
}

/* ===== PROPERTIES PAGE MOBILE OPTIMIZATION (DataTable focus) ===== */
@media (max-width: 768px) {
    /* Properties page container optimization */
    .container {
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        max-width: 100% !important;
    }
    
    /* Table card mobile optimization */
    .table-card {
        margin: var(--hh-space-sm) 0 !important;
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-sm) !important;
        background: var(--hh-color-base-white) !important;
        border: 1px solid var(--hh-color-borders-default) !important;
    }
    
    /* Table header mobile optimization */
    .table-header {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        background: var(--hh-color-base-cloud) !important;
        border-bottom: 1px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-md) var(--hh-radius-md) 0 0 !important;
    }
    
    .table-header h5 {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        margin-bottom: var(--hh-space-xs) !important;
    }
    
    .table-header .text-muted {
        font-size: var(--hh-type-small-size) !important;
        margin-bottom: 0 !important;
    }
    
    /* Control buttons mobile optimization */
    .btn-group .btn {
        min-height: 44px !important; /* Touch target compliance */
        min-width: 44px !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: var(--hh-type-small-size) !important;
        margin-right: var(--hh-space-xs) !important;
        border-radius: var(--hh-radius-sm) !important;
        touch-action: manipulation !important;
    }
    
    .btn-outline-primary {
        border-color: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-brand-primary) !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-primary) !important;
    }
    
    .btn-export {
        background: var(--hh-color-brand-sage) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-sage) !important;
    }
    
    .btn-export:hover,
    .btn-export:focus {
        background: var(--hh-color-brand-sage-700) !important;
        border-color: var(--hh-color-brand-sage-700) !important;
    }
    
    /* Enhanced properties DataTable mobile optimization */
    .table-responsive {
        border-radius: 0 0 var(--hh-radius-md) var(--hh-radius-md) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    
    #propertyTable {
        width: 100% !important;
        min-width: 1200px !important; /* Ensure horizontal scroll for all columns */
        font-size: var(--hh-type-small-size) !important;
        border-collapse: collapse !important;
        margin-bottom: 0 !important;
    }
    
    /* Table header styling for mobile */
    #propertyTable thead th {
        background: var(--hh-color-base-cloud) !important;
        color: var(--hh-color-text-primary) !important;
        font-size: var(--hh-type-small-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        border-bottom: 2px solid var(--hh-color-borders-strong) !important;
        white-space: nowrap !important;
        text-align: left !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    /* Table body styling for mobile */
    #propertyTable tbody td {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    
    #propertyTable tbody tr {
        transition: background-color 0.2s ease !important;
    }
    
    #propertyTable tbody tr:hover {
        background: var(--hh-color-base-offWhite) !important;
    }
    
    #propertyTable tbody tr:nth-child(even) {
        background: rgba(245, 245, 245, 0.5) !important;
    }
    
    #propertyTable tbody tr:nth-child(even):hover {
        background: var(--hh-color-base-offWhite) !important;
    }
    
    /* Column width optimization for mobile horizontal scroll */
    #propertyTable th:nth-child(1), /* Address */
    #propertyTable td:nth-child(1) {
        min-width: 180px !important;
        max-width: 220px !important;
    }
    
    #propertyTable th:nth-child(2), /* Price */
    #propertyTable td:nth-child(2) {
        min-width: 100px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(3), /* Beds/Baths */
    #propertyTable td:nth-child(3) {
        min-width: 90px !important;
        text-align: center !important;
    }
    
    #propertyTable th:nth-child(4), /* Sq Ft */
    #propertyTable td:nth-child(4) {
        min-width: 80px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(5), /* Investment */
    #propertyTable td:nth-child(5) {
        min-width: 110px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(6), /* Renovation */
    #propertyTable td:nth-child(6) {
        min-width: 100px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(7), /* NPV */
    #propertyTable td:nth-child(7) {
        min-width: 100px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(8), /* Cash-on-Cash */
    #propertyTable td:nth-child(8) {
        min-width: 110px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(9), /* IRR */
    #propertyTable td:nth-child(9) {
        min-width: 80px !important;
        text-align: right !important;
    }
    
    #propertyTable th:nth-child(10), /* Analyzed */
    #propertyTable td:nth-child(10) {
        min-width: 100px !important;
    }
    
    #propertyTable th:nth-child(11), /* Actions */
    #propertyTable td:nth-child(11) {
        min-width: 120px !important;
        text-align: center !important;
    }
    
    /* Action buttons in table mobile optimization */
    #propertyTable .btn-sm {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        margin: 0 var(--hh-space-xs) !important;
        border-radius: var(--hh-radius-sm) !important;
        touch-action: manipulation !important;
    }
    
    #propertyTable .btn-sm:first-child {
        margin-left: 0 !important;
    }
    
    #propertyTable .btn-sm:last-child {
        margin-right: 0 !important;
    }
    
    /* View button */
    #propertyTable .btn-primary {
        background: var(--hh-color-brand-primary) !important;
        border-color: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
    }
    
    #propertyTable .btn-primary:hover {
        background: var(--hh-color-brand-primary-600) !important;
        border-color: var(--hh-color-brand-primary-600) !important;
    }
    
    /* Delete button */
    #propertyTable .btn-outline-danger {
        border-color: var(--hh-color-status-error) !important;
        color: var(--hh-color-status-error) !important;
        background: var(--hh-color-base-white) !important;
    }
    
    #propertyTable .btn-outline-danger:hover {
        background: var(--hh-color-status-error) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-status-error) !important;
    }
    
    /* DataTable controls mobile optimization */
    .dataTables_wrapper .dataTables_length {
        margin-bottom: var(--hh-space-md) !important;
    }
    
    .dataTables_wrapper .dataTables_length select {
        min-height: 44px !important; /* Touch target compliance */
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: var(--hh-type-body-size) !important;
        border: 1px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-sm) !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        min-height: 44px !important; /* Touch target compliance */
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border: 1px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-sm) !important;
        background: var(--hh-color-base-white) !important;
        width: 100% !important;
        max-width: 300px !important;
        margin-left: var(--hh-space-sm) !important;
    }
    
    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.1) !important;
    }
    
    /* Pagination mobile optimization */
    .dataTables_wrapper .dataTables_paginate {
        margin-top: var(--hh-space-lg) !important;
        text-align: center !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-height: 44px !important; /* Touch target compliance */
        min-width: 44px !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        margin: 0 var(--hh-space-xs) !important;
        border: 1px solid var(--hh-color-brand-slate) !important;
        background: var(--hh-color-base-white) !important;
        color: var(--hh-color-brand-slate) !important;
        border-radius: var(--hh-radius-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
        transition: all 0.2s ease !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: var(--hh-color-brand-slate) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-slate) !important;
        text-decoration: none !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-primary) !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
        opacity: 0.5 !important;
        pointer-events: none !important;
    }
    
    /* DataTable info mobile optimization */
    .dataTables_wrapper .dataTables_info {
        padding: var(--hh-space-md) 0 !important;
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
        text-align: center !important;
    }
    
    /* Loading state mobile optimization */
    .dataTables_wrapper .dataTables_processing {
        background: rgba(255, 255, 255, 0.9) !important;
        color: var(--hh-color-text-primary) !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-xl) !important;
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    /* Empty state mobile optimization */
    .dataTables_empty {
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        text-align: center !important;
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Mobile-specific horizontal scroll indicator */
    .table-responsive::after {
        content: "← Scroll to view more columns →";
        position: sticky;
        right: 0;
        bottom: 0;
        background: var(--hh-color-brand-primary-300);
        color: var(--hh-color-text-primary);
        padding: var(--hh-space-xs) var(--hh-space-sm);
        font-size: var(--hh-type-helper-size);
        text-align: center;
        border-radius: var(--hh-radius-sm) var(--hh-radius-sm) 0 0;
        z-index: 5;
        opacity: 0.8;
    }
    
    /* Property modal mobile optimization */
    .modal-dialog {
        margin: var(--hh-space-md) !important;
        max-width: calc(100vw - 24px) !important;
    }
    
    .modal-content {
        border-radius: var(--hh-radius-md) !important;
    }
    
    .modal-header {
        padding: var(--hh-space-lg) var(--hh-space-lg) var(--hh-space-md) !important;
        border-bottom: 1px solid var(--hh-color-borders-default) !important;
    }
    
    .modal-title {
        font-size: var(--hh-type-h3-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
    }
    
    .modal-body {
        padding: var(--hh-space-lg) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    
    .modal-footer {
        padding: var(--hh-space-md) var(--hh-space-lg) var(--hh-space-lg) !important;
        border-top: 1px solid var(--hh-color-borders-default) !important;
    }
    
    .modal-footer .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
    }
}

/* ===== PROPERTIES PAGE COMPACT MOBILE ===== */
@media (max-width: 480px) {
    /* Ultra-compact for very small screens */
    .container {
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
    }
    
    .table-header {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
    }
    
    .table-header h5 {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .table-header .text-muted {
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* More compact buttons for very small screens */
    .btn-group .btn {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* More compact table for very small screens */
    #propertyTable {
        min-width: 1000px !important; /* Reduced but still scrollable */
        font-size: var(--hh-type-helper-size) !important;
    }
    
    #propertyTable thead th {
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    #propertyTable tbody td {
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* More compact action buttons */
    #propertyTable .btn-sm {
        min-height: 32px !important;
        min-width: 32px !important;
        padding: var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* Compact pagination */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    /* More compact modal for very small screens */
    .modal-dialog {
        margin: var(--hh-space-sm) !important;
        max-width: calc(100vw - 16px) !important;
    }
    
    .modal-header {
        padding: var(--hh-space-md) var(--hh-space-md) var(--hh-space-sm) !important;
    }
    
    .modal-title {
        font-size: var(--hh-type-h4-size) !important;
    }
    
    .modal-body {
        padding: var(--hh-space-md) !important;
    }
    
    .modal-footer {
        padding: var(--hh-space-sm) var(--hh-space-md) var(--hh-space-md) !important;
    }
    
    /* Hide scroll indicator text on very small screens */
    .table-responsive::after {
        content: "← Scroll →";
        font-size: var(--hh-type-helper-size);
        padding: var(--hh-space-xs);
    }
}

/* ===== TOKEN PURCHASING PAGE MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Pricing page main container mobile optimization */
    .pricing-container {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Pricing header mobile optimization */
    .pricing-header {
        text-align: center !important;
        padding: var(--hh-space-xl) 0 var(--hh-space-lg) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .pricing-header h1 {
        font-size: var(--hh-type-h1-size) !important;
        line-height: var(--hh-type-h1-lh) !important;
        margin-bottom: var(--hh-space-md) !important;
        color: var(--hh-color-text-primary) !important;
    }
    
    .pricing-header p {
        font-size: var(--hh-type-body-size) !important;
        line-height: var(--hh-type-body-lh) !important;
        color: var(--hh-color-text-secondary) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    /* Pricing grid mobile optimization */
    .pricing-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--hh-space-lg) !important;
        max-width: none !important;
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    /* Pricing card mobile optimization */
    .pricing-card {
        background: var(--hh-color-base-white) !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-lg) !important;
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        position: relative !important;
        box-shadow: var(--hh-shadow-md) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    .pricing-card.popular {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: none !important; /* Remove desktop scale effect on mobile */
    }
    
    .pricing-card.current-plan {
        border-color: var(--hh-color-brand-sage) !important;
        background: rgba(129, 178, 154, 0.05) !important;
    }
    
    /* Popular badge mobile optimization */
    .popular-badge {
        position: absolute !important;
        top: -12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        padding: var(--hh-space-xs) var(--hh-space-md) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-small-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        white-space: nowrap !important;
        box-shadow: var(--hh-shadow-sm) !important;
    }
    
    /* Plan header mobile optimization */
    .plan-header {
        text-align: center !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .plan-name {
        font-size: var(--hh-type-h2-size) !important;
        font-weight: var(--hh-type-h2-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .plan-description {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    /* Plan pricing mobile optimization */
    .plan-price {
        text-align: center !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .price-amount {
        font-size: 48px !important; /* Large, readable price */
        font-weight: var(--hh-type-h1-weight) !important;
        color: var(--hh-color-brand-primary) !important;
        line-height: 1 !important;
        margin-bottom: var(--hh-space-xs) !important;
    }
    
    .price-currency {
        font-size: var(--hh-type-h3-size) !important;
        vertical-align: top !important;
    }
    
    .price-period {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    .tokens-included {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-primary) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        margin-top: var(--hh-space-sm) !important;
    }
    
    /* Plan features mobile optimization */
    .plan-features {
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    .plan-features ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .plan-features li {
        padding: var(--hh-space-sm) 0 !important;
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-primary) !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: var(--hh-space-sm) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    .plan-features li:last-child {
        border-bottom: none !important;
    }
    
    .plan-features li::before {
        content: "✓" !important;
        color: var(--hh-color-brand-sage) !important;
        font-weight: bold !important;
        font-size: var(--hh-type-lg-size) !important;
        flex-shrink: 0 !important;
    }
    
    /* Purchase button mobile optimization */
    .purchase-btn {
        width: 100% !important;
        padding: var(--hh-space-lg) var(--hh-space-xl) !important;
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 56px !important; /* Generous touch target */
        border-radius: var(--hh-radius-md) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .purchase-btn:not(.current-plan) {
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .purchase-btn:not(.current-plan):hover {
        background: var(--hh-color-brand-primary-600) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-1px) !important;
    }
    
    .purchase-btn:not(.current-plan):active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    .purchase-btn.current-plan {
        background: var(--hh-color-brand-sage) !important;
        color: var(--hh-color-text-inverse) !important;
        cursor: not-allowed !important;
        opacity: 0.8 !important;
    }
    
    .purchase-btn:disabled {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }
    
    /* Loading state for purchase buttons */
    .purchase-btn.loading {
        opacity: 0.7 !important;
        pointer-events: none !important;
    }
    
    .purchase-btn.loading::after {
        content: "" !important;
        width: 20px !important;
        height: 20px !important;
        border: 2px solid transparent !important;
        border-top: 2px solid currentColor !important;
        border-radius: 50% !important;
        animation: spin 1s linear infinite !important;
        margin-left: var(--hh-space-sm) !important;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* FAQ section mobile optimization */
    .faq-section {
        margin-top: var(--hh-space-2xl) !important;
        padding: var(--hh-space-xl) 0 !important;
        border-top: 1px solid var(--hh-color-borders-default) !important;
    }
    
    .faq-title {
        text-align: center !important;
        font-size: var(--hh-type-h2-size) !important;
        font-weight: var(--hh-type-h2-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    .faq-item {
        border: 1px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-md) !important;
        margin-bottom: var(--hh-space-md) !important;
        overflow: hidden !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .faq-question {
        width: 100% !important;
        padding: var(--hh-space-lg) var(--hh-space-lg) !important;
        background: none !important;
        border: none !important;
        text-align: left !important;
        font-size: var(--hh-type-body-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 60px !important; /* Touch target compliance */
        touch-action: manipulation !important;
        transition: all 0.2s ease !important;
    }
    
    .faq-question:hover {
        background: var(--hh-color-base-cloud) !important;
    }
    
    .faq-icon {
        font-size: var(--hh-type-h2-size) !important;
        font-weight: 300 !important;
        color: var(--hh-color-brand-sage) !important;
        transition: transform 0.2s ease !important;
        flex-shrink: 0 !important;
        margin-left: var(--hh-space-sm) !important;
    }
    
    .faq-item.active .faq-icon {
        transform: rotate(45deg) !important;
    }
    
    .faq-answer {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        background: var(--hh-color-base-offWhite) !important;
    }
    
    .faq-item.active .faq-answer {
        max-height: 300px !important; /* Increased for mobile content */
    }
    
    .faq-answer p {
        padding: var(--hh-space-lg) !important;
        margin: 0 !important;
        font-size: var(--hh-type-body-size) !important;
        line-height: var(--hh-type-body-lh) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Error and success message mobile optimization */
    .error-message,
    .success-message {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        border-radius: var(--hh-radius-md) !important;
        margin-bottom: var(--hh-space-lg) !important;
        text-align: center !important;
        font-size: var(--hh-type-body-size) !important;
        line-height: var(--hh-type-body-lh) !important;
    }
    
    .error-message {
        background: rgba(254, 226, 226, 1) !important;
        border: 1px solid rgba(254, 202, 202, 1) !important;
        color: #dc2626 !important;
    }
    
    .success-message {
        background: rgba(209, 250, 229, 1) !important;
        border: 1px solid rgba(187, 247, 208, 1) !important;
        color: #059669 !important;
    }
    
    /* Stripe payment form mobile optimization */
    .stripe-form-container {
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-lg) !important;
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        border: 1px solid var(--hh-color-borders-default) !important;
        margin-top: var(--hh-space-lg) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .stripe-form-container h3 {
        font-size: var(--hh-type-h3-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        color: var(--hh-color-text-primary) !important;
        text-align: center !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .stripe-element {
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-md) !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        margin-bottom: var(--hh-space-lg) !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .stripe-element:focus-within {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.1) !important;
    }
    
    /* Payment button styling */
    .stripe-submit-btn {
        width: 100% !important;
        padding: var(--hh-space-lg) !important;
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 56px !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        border-radius: var(--hh-radius-md) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .stripe-submit-btn:hover:not(:disabled) {
        background: var(--hh-color-brand-primary-600) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-1px) !important;
    }
    
    .stripe-submit-btn:active:not(:disabled) {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    .stripe-submit-btn:disabled {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }
}

/* ===== TOKEN PURCHASING PAGE COMPACT MOBILE ===== */
@media (max-width: 480px) {
    /* Ultra-compact for very small screens */
    .pricing-container {
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
    }
    
    .pricing-header {
        padding: var(--hh-space-lg) 0 var(--hh-space-md) !important;
    }
    
    .pricing-header h1 {
        font-size: var(--hh-type-h2-size) !important;
        line-height: var(--hh-type-h2-lh) !important;
    }
    
    .pricing-grid {
        gap: var(--hh-space-md) !important;
    }
    
    /* More compact pricing cards */
    .pricing-card {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
    }
    
    .plan-name {
        font-size: var(--hh-type-h3-size) !important;
    }
    
    .price-amount {
        font-size: 40px !important;
    }
    
    .purchase-btn {
        min-height: 52px !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
    }
    
    /* More compact FAQ section */
    .faq-section {
        padding: var(--hh-space-lg) 0 !important;
        margin-top: var(--hh-space-xl) !important;
    }
    
    .faq-title {
        font-size: var(--hh-type-h3-size) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .faq-question {
        padding: var(--hh-space-md) !important;
        min-height: 52px !important;
        font-size: var(--hh-type-small-size) !important;
    }
    
    .faq-answer {
        max-height: 250px !important;
    }
    
    .faq-answer p {
        padding: var(--hh-space-md) !important;
        font-size: var(--hh-type-small-size) !important;
    }
    
    /* More compact Stripe form */
    .stripe-form-container {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
    }
    
    .stripe-element {
        min-height: 44px !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
    }
    
    .stripe-submit-btn {
        min-height: 52px !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-md) !important;
    }
}

/* ===== PHASE 1: BUTTON SIZE REFINEMENTS ===== */
@media (max-width: 768px) {
    /* Primary action buttons - force single line display */
    button[type="submit"],
    .btn-primary,
    .main-action-btn,
    .analyze-btn,
    .search-btn {
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
        font-size: var(--hh-type-body-size) !important; /* Reduced from lg-size */
        font-weight: var(--hh-type-h4-weight) !important;
        min-height: 48px !important; /* Reduced from 56px */
        line-height: 1.2 !important;
        white-space: nowrap !important; /* Force single line */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: var(--hh-radius-md) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--hh-space-sm) !important;
        touch-action: manipulation !important;
        transition: all 0.2s ease !important;
    }
    
    /* Specific button text content refinements - using ID selectors instead of :contains() */
    #analyzeBtn,
    button[id="analyzeBtn"] {
        font-size: 16px !important; /* Bigger text as requested */
        padding: 12px 16px !important;
        height: 48px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    #searchMarketBtn,
    button[id="searchMarketBtn"] {
        font-size: 16px !important; /* Bigger text as requested */
        padding: 12px 16px !important;
        height: 48px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Form submission buttons in home/search page */
    .form-container button[type="submit"] {
        width: 100% !important;
        padding: 12px 24px !important;
        font-size: 15px !important;
        min-height: 48px !important;
        white-space: nowrap !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-md) !important;
        cursor: pointer !important;
        margin-top: var(--hh-space-lg) !important;
    }
    
    .form-container button[type="submit"]:hover {
        background: var(--hh-color-brand-primary-600) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-1px) !important;
    }
    
    .form-container button[type="submit"]:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Force single-line button text - highest specificity */
    .form-container #searchMarketBtn .btn-text,
    .form-container #analyzeBtn .btn-text {
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        vertical-align: middle !important;
    }
    
    /* Alternative approach - target the entire button content */
    .form-container #searchMarketBtn,
    .form-container #analyzeBtn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important; /* Small gap between icon and text */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 16px !important; /* Bigger text as requested */
        line-height: 1.2 !important; /* Tight line height */
    }
}

/* Compact mobile - even smaller buttons for very small screens */
@media (max-width: 480px) {
    button[type="submit"],
    .btn-primary,
    .main-action-btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    button:contains("Analyze Property"),
    button:contains("Search Market") {
        font-size: 14px !important;
        padding: 10px 16px !important;
        height: 44px !important;
    }
}

/* ===== PHASE 2: SEARCH RESULTS PAGE CONDENSATION ===== */
@media (max-width: 768px) {
    /* Search criteria header condensation - 2 lines max */
    .search-criteria-header {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-md) !important;
        margin-bottom: var(--hh-space-lg) !important;
        box-shadow: var(--hh-shadow-sm) !important;
    }
    
    .search-criteria {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: var(--hh-space-xs) !important;
        margin-bottom: var(--hh-space-sm) !important; /* Reduced spacing */
    }
    
    .search-location {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin-right: var(--hh-space-md) !important;
        flex-shrink: 0 !important;
    }
    
    .search-criteria-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--hh-space-xs) !important;
        flex-grow: 1 !important;
    }
    
    .criteria-tag {
        background: var(--hh-color-brand-primary-300) !important;
        color: var(--hh-color-text-primary) !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-small-size) !important;
        white-space: nowrap !important;
    }
    
    .search-results-count {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin: 0 !important;
        text-align: left !important;
    }
    
    /* Property cards - single line bed/bath/sqft */
    .property-card {
        padding: var(--hh-space-md) !important; /* Reduced padding */
        margin-bottom: var(--hh-space-md) !important; /* Reduced margin */
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-sm) !important;
        background: var(--hh-color-base-white) !important;
        border: 1px solid var(--hh-color-borders-default) !important;
    }
    
    .property-image {
        height: 160px !important; /* Reduced from ~200px */
        width: 100% !important;
        object-fit: cover !important;
        border-radius: var(--hh-radius-sm) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    /* Address and price on same line */
    .property-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: var(--hh-space-sm) !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .property-price {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        color: var(--hh-color-brand-primary) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .property-address {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
        line-height: 1.3 !important;
        flex-grow: 1 !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    
    /* Property details as single line pills */
    .property-details {
        display: flex !important;
        gap: var(--hh-space-xs) !important;
        margin: var(--hh-space-sm) 0 !important;
        flex-wrap: nowrap !important; /* Keep on same line */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: var(--hh-space-xs) !important; /* Space for scrollbar */
    }
    
    .property-detail,
    .property-detail-pill {
        background: var(--hh-color-base-cloud) !important;
        color: var(--hh-color-text-primary) !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-small-size) !important;
        font-weight: var(--hh-type-small-weight) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    /* Combine bed/bath/sqft into single line */
    .beds-baths-sqft {
        display: flex !important;
        gap: var(--hh-space-xs) !important;
    }
    
    .beds-pill,
    .baths-pill,
    .sqft-pill {
        background: var(--hh-color-base-cloud) !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-small-size) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Property action buttons */
    .property-actions {
        margin-top: var(--hh-space-md) !important;
        display: flex !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .analyze-btn {
        flex-grow: 1 !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: var(--hh-type-small-size) !important;
        min-height: 40px !important;
        border-radius: var(--hh-radius-sm) !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
    }
    
    .analyze-btn:hover {
        background: var(--hh-color-brand-primary-600) !important;
        transform: translateY(-1px) !important;
    }
    
    .analyze-btn:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Selection checkbox for bulk actions */
    .property-checkbox {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
        accent-color: var(--hh-color-brand-primary) !important;
    }
    
    /* Properties grid mobile optimization */
    .properties-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--hh-space-md) !important;
        padding: 0 !important;
    }
    
    /* Results pagination */
    .load-more-container {
        text-align: center !important;
        padding: var(--hh-space-xl) 0 !important;
    }
    
    .load-more-btn {
        padding: var(--hh-space-md) var(--hh-space-xl) !important;
        font-size: var(--hh-type-body-size) !important;
        min-height: 48px !important;
        background: var(--hh-color-brand-sage) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        border-radius: var(--hh-radius-md) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        transition: all 0.2s ease !important;
    }
    
    .load-more-btn:hover {
        background: var(--hh-color-brand-sage-700) !important;
        transform: translateY(-1px) !important;
    }
}

/* Compact mobile - further condensation */
@media (max-width: 480px) {
    .search-criteria-header {
        padding: var(--hh-space-sm) !important;
    }
    
    .search-location {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .criteria-tag {
        font-size: var(--hh-type-helper-size) !important;
        padding: 2px 8px !important;
    }
    
    .property-card {
        padding: var(--hh-space-sm) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .property-image {
        height: 140px !important;
    }
    
    .property-price {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .property-address {
        font-size: var(--hh-type-helper-size) !important;
    }
    
    .property-detail-pill {
        font-size: var(--hh-type-helper-size) !important;
        padding: 2px 8px !important;
    }
    
    .analyze-btn {
        min-height: 36px !important;
        font-size: var(--hh-type-helper-size) !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
    }
}

/* ===== PHASE 3: ANALYSIS RESULTS HEADER CONDENSATION ===== */
@media (max-width: 768px) {
    /* Header section condensation - from ~50% of page to 2 lines */
    .compact-header-layout {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        margin-bottom: var(--hh-space-md) !important;
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-sm) !important;
    }
    
    /* Line 1: Property address + key price (abbreviated) */
    .property-header-line-1 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: var(--hh-space-sm) !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .property-address {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin: 0 !important;
        flex-grow: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Abbreviated pricing with K/M notation */
    .price-abbreviated {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        color: var(--hh-color-brand-primary) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Line 2: Condensed bed/bath + mini toggles */
    .property-header-line-2 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .beds-baths-compact {
        display: flex !important;
        gap: var(--hh-space-xs) !important;
        align-items: center !important;
    }
    
    .beds-baths-compact .pill {
        background: var(--hh-color-base-cloud) !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-small-size) !important;
        white-space: nowrap !important;
    }
    
    /* Mini toggle buttons - condensed */
    .toggle-buttons-mini {
        display: flex !important;
        gap: var(--hh-space-xs) !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .toggle-btn-mini {
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        font-size: var(--hh-type-helper-size) !important;
        min-height: 32px !important;
        min-width: 60px !important;
        border-radius: var(--hh-radius-sm) !important;
        border: 1px solid var(--hh-color-borders-default) !important;
        background: var(--hh-color-base-white) !important;
        color: var(--hh-color-text-primary) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
    }
    
    .toggle-btn-mini.active {
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border-color: var(--hh-color-brand-primary) !important;
    }
    
    /* Hide photo gallery on mobile */
    .photo-gallery-grid,
    .property-images-container .image-grid,
    .thumbnail-grid {
        display: none !important; /* Remove side gallery */
    }
    
    /* Keep only main image, make it more compact */
    .main-photo-container {
        height: 200px !important; /* Reduced from larger height */
        margin-bottom: var(--hh-space-md) !important;
        border-radius: var(--hh-radius-md) !important;
        overflow: hidden !important;
    }
    
    .main-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Image navigation arrows - make touch friendly */
    .image-nav-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
        font-size: var(--hh-type-body-size) !important;
    }
    
    /* Financial Analysis Parameters - hide description column */
    .financial-parameters-table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin: var(--hh-space-lg) 0 !important;
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-md) !important;
        overflow: hidden !important;
        box-shadow: var(--hh-shadow-sm) !important;
    }
    
    /* Hide description column on mobile */
    .financial-parameters-table th:nth-child(2),
    .financial-parameters-table td:nth-child(2) {
        display: none !important;
    }
    
    .financial-parameters-table th {
        background: var(--hh-color-base-cloud) !important;
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        text-align: left !important;
        border-bottom: 1px solid var(--hh-color-borders-default) !important;
    }
    
    .financial-parameters-table td {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        font-size: var(--hh-type-small-size) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    .financial-parameters-table tr:last-child td {
        border-bottom: none !important;
    }
    
    /* Parameter name column */
    .financial-parameters-table th:first-child,
    .financial-parameters-table td:first-child {
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        width: 60% !important;
    }
    
    /* Value column */
    .financial-parameters-table th:last-child,
    .financial-parameters-table td:last-child {
        text-align: right !important;
        font-weight: var(--hh-type-body-weight) !important;
        color: var(--hh-color-text-primary) !important;
        width: 40% !important;
    }
    
    /* Price formatting with K/M notation using CSS content replacement */
    .price-display::after {
        content: attr(data-abbreviated) !important;
    }
    
    .price-display {
        font-size: 0 !important; /* Hide original text */
    }
    
    /* Chart sections remain the same height but with better spacing */
    .chart-section {
        margin-bottom: var(--hh-space-lg) !important;
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
    }
    
    .chart-container,
    #pricing-chart,
    #occupancy-chart,
    #adr-chart,
    #cash-flow-chart {
        height: 250px !important; /* Slightly reduced from 280px */
    }
    
    /* Summary statistics more compact */
    .summary-stats {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        margin-top: var(--hh-space-md) !important;
    }
    
    .stat-group {
        padding-bottom: var(--hh-space-sm) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .stat-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .stat-item {
        padding: var(--hh-space-sm) !important;
    }
}

/* Compact mobile - ultra condensed analysis results */
@media (max-width: 480px) {
    .compact-header-layout {
        padding: var(--hh-space-sm) !important;
    }
    
    .property-address {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .price-abbreviated {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .beds-baths-compact .pill {
        font-size: var(--hh-type-helper-size) !important;
        padding: 2px 8px !important;
    }
    
    .toggle-btn-mini {
        font-size: 11px !important;
        min-height: 28px !important;
        min-width: 50px !important;
        padding: 4px 8px !important;
    }
    
    .main-photo-container {
        height: 160px !important;
    }
    
    .financial-parameters-table th,
    .financial-parameters-table td {
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
        font-size: var(--hh-type-helper-size) !important;
    }
    
    .chart-container,
    #pricing-chart,
    #occupancy-chart,
    #adr-chart,
    #cash-flow-chart {
        height: 220px !important;
    }
    
    .stat-items {
        grid-template-columns: 1fr !important; /* Single column for very small screens */
    }
}

/* ===== PHASE 4: HAMBURGER NAVIGATION MENU ===== */
@media (max-width: 768px) {
    /* Clean top navbar - hide desktop navigation items */
    .navbar-nav .nav-link:not(.hamburger-trigger):not(.token-counter):not(.auth-buttons) {
        display: none !important;
    }
    
    /* Hamburger menu trigger button */
    .hamburger-menu-trigger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: var(--hh-radius-sm) !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    
    .hamburger-menu-trigger:hover {
        background: var(--hh-color-base-cloud) !important;
    }
    
    /* Hamburger lines */
    .hamburger-line {
        width: 24px !important;
        height: 2px !important;
        background: var(--hh-color-text-primary) !important;
        transition: all 0.3s ease !important;
        border-radius: 2px !important;
    }
    
    /* Active hamburger animation (X shape) */
    .hamburger-menu-trigger.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .hamburger-menu-trigger.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
    }
    
    .hamburger-menu-trigger.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px) !important;
    }

    /* Hamburger button icons */
    .hamburger-icon,
    .close-icon {
        width: 20px !important;
        height: 20px !important;
        filter: var(--hh-color-text-primary-filter) !important;
        transition: all 0.2s ease !important;
    }

    /* Mobile menu divider */
    .mobile-menu-divider {
        height: 1px !important;
        background: var(--hh-color-borders-default) !important;
        margin: var(--hh-space-md) var(--hh-space-lg) !important;
    }
    
    /* Off-canvas mobile menu */
    .mobile-menu-overlay {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        touch-action: none !important;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: -300px !important; /* Start off-screen */
        width: 280px !important;
        height: 100vh !important;
        background: var(--hh-color-base-white) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        z-index: 1000 !important;
        transition: right 0.3s ease !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .mobile-menu.active {
        right: 0 !important; /* Slide in */
    }
    
    /* Mobile menu header */
    .mobile-menu-header {
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        border-bottom: 1px solid var(--hh-color-borders-default) !important;
        background: var(--hh-color-base-cloud) !important;
    }
    
    .mobile-menu-title {
        font-size: var(--hh-type-h3-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin: 0 !important;
    }
    
    /* Mobile menu items */
    .mobile-menu-items {
        padding: var(--hh-space-lg) 0 !important;
    }
    
    .mobile-menu-item {
        display: block !important;
        width: 100% !important;
        padding: var(--hh-space-lg) var(--hh-space-xl) !important;
        font-size: var(--hh-type-body-size) !important;
        font-weight: var(--hh-type-body-weight) !important;
        color: var(--hh-color-text-primary) !important;
        text-decoration: none !important;
        border: none !important;
        background: transparent !important;
        text-align: left !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
        min-height: 56px !important; /* Touch target compliance */
        display: flex !important;
        align-items: center !important;
        gap: var(--hh-space-md) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    .mobile-menu-item:hover,
    .mobile-menu-item:focus {
        background: var(--hh-color-base-offWhite) !important;
        color: var(--hh-color-text-primary) !important;
        text-decoration: none !important;
    }
    
    .mobile-menu-item:active {
        background: var(--hh-color-brand-primary-300) !important;
        transition: background 0.1s ease !important;
    }
    
    .mobile-menu-item:last-child {
        border-bottom: none !important;
    }
    
    /* Mobile menu icons */
    .mobile-menu-icon {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Sign out button styling in mobile menu */
    .mobile-menu-item.sign-out {
        color: var(--hh-color-status-error) !important;
        border-top: 1px solid var(--hh-color-borders-default) !important;
        margin-top: var(--hh-space-lg) !important;
    }
    
    .mobile-menu-item.sign-out:hover {
        background: rgba(217, 93, 72, 0.1) !important;
        color: var(--hh-color-status-error) !important;
    }
    
    .mobile-menu-item.sign-out .mobile-menu-icon {
        color: var(--hh-color-status-error) !important;
    }
    
    /* Token counter in mobile menu */
    .mobile-token-display {
        padding: var(--hh-space-lg) var(--hh-space-xl) !important;
        background: var(--hh-color-brand-primary-300) !important;
        border-radius: var(--hh-radius-md) !important;
        margin: var(--hh-space-lg) var(--hh-space-lg) 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .mobile-token-count {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        color: var(--hh-color-text-primary) !important;
    }
    
    .mobile-token-label {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Clean up top navbar for mobile */
    .navbar-container {
        padding: 0 var(--hh-space-md) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .navbar-brand {
        flex-shrink: 0 !important;
    }
    
    .navbar-nav {
        display: flex !important;
        align-items: center !important;
        gap: var(--hh-space-md) !important;
    }
    
    /* Show only essential items in top bar */
    .navbar-nav .token-counter {
        display: flex !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: var(--hh-type-small-size) !important;
        min-height: 40px !important;
    }
    
    /* Body scroll prevention when menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Compact mobile navigation */
@media (max-width: 480px) {
    .navbar-container {
        padding: 0 var(--hh-space-sm) !important;
    }
    
    .mobile-menu {
        width: 260px !important; /* Slightly narrower for small screens */
    }
    
    .mobile-menu-header {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
    }
    
    .mobile-menu-title {
        font-size: var(--hh-type-h4-size) !important;
    }
    
    .mobile-menu-item {
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
        min-height: 52px !important;
        font-size: var(--hh-type-small-size) !important;
    }
    
    .mobile-token-display {
        margin: var(--hh-space-md) var(--hh-space-md) 0 !important;
        padding: var(--hh-space-md) !important;
    }
    
    .mobile-token-count {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .hamburger-menu-trigger {
        width: 40px !important;
        height: 40px !important;
    }
    
    .hamburger-line {
        width: 20px !important;
    }
}

/* ===== PHASE 5: FOOTER REPOSITIONING & TOKEN CARD SIZING ===== */
@media (max-width: 768px) {
    /* Footer repositioning - move much lower on page */
    footer,
    .footer,
    .site-footer {
        margin-top: var(--hh-space-3xl) !important; /* Push footer down */
        padding-top: var(--hh-space-2xl) !important;
        padding-bottom: var(--hh-space-xl) !important;
        background: var(--hh-color-base-offWhite) !important;
        border-top: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    /* 3-line footer layout on mobile */
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--hh-space-md) !important;
        text-align: center !important;
        max-width: 100% !important;
        padding: 0 var(--hh-space-md) !important;
    }
    
    /* Line 1: LLC information */
    .footer-line-1,
    .footer-copyright {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin: 0 !important;
        order: 1 !important;
    }
    
    /* Line 2: Terms and Privacy Policy links */
    .footer-line-2,
    .footer-links {
        display: flex !important;
        justify-content: center !important;
        gap: var(--hh-space-lg) !important;
        order: 2 !important;
        flex-wrap: wrap !important;
    }
    
    .footer-link {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-brand-primary) !important;
        text-decoration: none !important;
        padding: var(--hh-space-xs) var(--hh-space-sm) !important;
        border-radius: var(--hh-radius-sm) !important;
        transition: all 0.2s ease !important;
        min-height: 44px !important; /* Touch target compliance */
        display: flex !important;
        align-items: center !important;
        touch-action: manipulation !important;
    }
    
    .footer-link:hover,
    .footer-link:focus {
        background: var(--hh-color-brand-primary-300) !important;
        color: var(--hh-color-text-primary) !important;
        text-decoration: none !important;
    }
    
    /* Line 3: Disclaimer text */
    .footer-line-3,
    .footer-disclaimer {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-tertiary) !important;
        margin: 0 !important;
        order: 3 !important;
        line-height: var(--hh-type-small-lh) !important;
    }
    
    /* Token purchasing page - double card width */
    .pricing-grid .pricing-card {
        max-width: 340px !important; /* Double from ~170px */
        width: 100% !important;
        margin: 0 auto var(--hh-space-lg) !important;
    }
    
    /* Enhanced token card sizing */
    .pricing-card {
        padding: var(--hh-space-2xl) var(--hh-space-xl) !important; /* More generous padding */
        border: 2px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-lg) !important;
        box-shadow: var(--hh-shadow-md) !important;
        transition: all 0.3s ease !important;
    }
    
    .pricing-card:hover {
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-2px) !important;
    }
    
    .pricing-card.popular {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: scale(1.02) !important;
    }
    
    /* Plan header in enlarged cards */
    .plan-header {
        text-align: center !important;
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    .plan-name {
        font-size: var(--hh-type-h2-size) !important;
        font-weight: var(--hh-type-h2-weight) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .plan-description {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin-bottom: 0 !important;
    }
    
    /* Plan pricing in enlarged cards */
    .plan-price {
        text-align: center !important;
        margin: var(--hh-space-xl) 0 !important;
        padding: var(--hh-space-lg) 0 !important;
        border-top: 1px solid var(--hh-color-borders-subtle) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    .price-amount {
        font-size: 56px !important; /* Larger price display */
        font-weight: var(--hh-type-h1-weight) !important;
        color: var(--hh-color-brand-primary) !important;
        line-height: 1 !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .price-period {
        font-size: var(--hh-type-lg-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    .tokens-included {
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin-top: var(--hh-space-md) !important;
    }
    
    /* Plan features in enlarged cards */
    .plan-features {
        margin: var(--hh-space-xl) 0 !important;
    }
    
    .plan-features ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    .plan-features li {
        padding: var(--hh-space-md) 0 !important;
        font-size: var(--hh-type-body-size) !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: var(--hh-space-md) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    .plan-features li:last-child {
        border-bottom: none !important;
    }
    
    .plan-features li::before {
        content: "✓" !important;
        color: var(--hh-color-brand-sage) !important;
        font-weight: bold !important;
        font-size: var(--hh-type-lg-size) !important;
        flex-shrink: 0 !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(129, 178, 154, 0.2) !important;
        border-radius: 50% !important;
    }
    
    /* Purchase buttons in enlarged cards */
    .purchase-btn {
        width: 100% !important;
        padding: var(--hh-space-xl) var(--hh-space-2xl) !important; /* More generous button */
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 64px !important; /* Larger touch target */
        border-radius: var(--hh-radius-md) !important;
        margin-top: var(--hh-space-xl) !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
    }
    
    .purchase-btn:not(.current-plan) {
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .purchase-btn:not(.current-plan):hover {
        background: var(--hh-color-brand-primary-600) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-2px) !important;
    }
    
    .purchase-btn:not(.current-plan):active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Popular badge positioning for enlarged cards */
    .popular-badge {
        position: absolute !important;
        top: -16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        padding: var(--hh-space-sm) var(--hh-space-lg) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-body-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        box-shadow: var(--hh-shadow-md) !important;
        white-space: nowrap !important;
    }
}

/* Compact mobile footer and token cards */
@media (max-width: 480px) {
    /* More compact footer for small screens */
    footer,
    .footer,
    .site-footer {
        margin-top: var(--hh-space-2xl) !important;
        padding-top: var(--hh-space-xl) !important;
        padding-bottom: var(--hh-space-lg) !important;
    }
    
    .footer-content {
        gap: var(--hh-space-sm) !important;
        padding: 0 var(--hh-space-sm) !important;
    }
    
    .footer-line-1,
    .footer-copyright,
    .footer-line-3,
    .footer-disclaimer {
        font-size: var(--hh-type-helper-size) !important;
    }
    
    .footer-line-2,
    .footer-links {
        gap: var(--hh-space-md) !important;
    }
    
    .footer-link {
        font-size: var(--hh-type-helper-size) !important;
        min-height: 40px !important;
    }
    
    /* Compact token cards for small screens */
    .pricing-grid .pricing-card {
        max-width: 300px !important;
    }
    
    .pricing-card {
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
    }
    
    .plan-name {
        font-size: var(--hh-type-h3-size) !important;
    }
    
    .price-amount {
        font-size: 48px !important;
    }
    
    .price-period,
    .tokens-included {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .plan-features li {
        font-size: var(--hh-type-small-size) !important;
        padding: var(--hh-space-sm) 0 !important;
    }
    
    .purchase-btn {
        padding: var(--hh-space-lg) var(--hh-space-xl) !important;
        font-size: var(--hh-type-body-size) !important;
        min-height: 56px !important;
    }
    
    .popular-badge {
        top: -12px !important;
        font-size: var(--hh-type-small-size) !important;
        padding: var(--hh-space-xs) var(--hh-space-md) !important;
    }
}