/* ===== 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;
    }
}


/* ===== 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;
    }
}