/**
 * Responsive CSS for "Request Your Quote" Form
 * Target Devices: iPhone 14, iPhone 14 Pro Max, iPad Mini
 * Approach: Mobile-first responsive design using CSS media queries
 * 
 * Breakpoints:
 * - Mobile: 320px - 767px
 * - Tablet: 768px - 1023px  
 * - Desktop: 1024px+
 * 
 * Special Considerations:
 * - iPhone 14: 390px x 844px (portrait), 844px x 390px (landscape)
 * - iPhone 14 Pro Max: 430px x 932px (portrait), 932px x 430px (landscape)
 * - iPad Mini: 744px x 1133px (portrait), 1133px x 744px (landscape)
 * 
 * IMPORTANT: This file uses !important declarations to override existing inline CSS
 */

/* ==========================================
   MOBILE FIRST RESPONSIVE STYLES
   ========================================== */

/* Mobile Styles (320px - 767px) */
@media (max-width: 767px) {
    
    /* ==========================================
       CONTAINER AND LAYOUT - HIGH PRIORITY
       ========================================== */
    
    main.py-8.md\\:py-12 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Remove horizontal padding from main content area on mobile */
    .p-8 {
        padding: 0 !important;
    }
    
    /* Hide section with py-12 px-8 classes on mobile */
    .py-12.px-8 {
        display: none !important;
    }
    
    .container-box {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1rem !important;
    }
    
    .section-box {
        padding: 0 !important;
        margin-bottom: 1rem !important;
        border-radius: 1rem !important;
    }
    
    /* ==========================================
       FORM SECTIONS - COMPACT MOBILE LAYOUT
       ========================================== */
    
    .form-section {
        padding: 1rem !important; /* Reduced from 1.5rem */
        margin-bottom: 1rem !important; /* Reduced from 1.5rem */
        border-radius: 1rem !important;
    }
    
    /* Contact details section specific spacing optimization */
    .form-section.mt-8 {
        margin-top: 0.75rem !important; /* Further reduced spacing between sections */
    }
    
    /* Reduce spacing within contact details grid */
    .form-section .grid.grid-cols-1.md\\:grid-cols-2 {
        gap: 0.75rem !important; /* Reduced from 1rem */
    }
    
    /* Address section spacing - compact */
    .form-section .grid.grid-cols-1.md\\:grid-cols-3 {
        gap: 0.75rem !important; /* Reduced from 1rem */
    }
    
    /* Info banners within contact section - more compact */
    .form-section .bg-gradient-to-r.from-sky-50.to-blue-50 {
        margin-bottom: 0.75rem !important; /* Reduced from 1rem */
        padding: 0.75rem !important; /* Reduced from 1rem */
    }
    
    /* Section headers - more compact */
    .section-header,
    h2.section-header,
    h3.section-header {
        font-size: 1.25rem !important; /* Reduced from 1.5rem */
        margin-bottom: 0.75rem !important; /* Reduced from 1rem */
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    /* Force all grid layouts to single column with high specificity */
    .grid.grid-cols-1.md\\:grid-cols-2,
    .grid.grid-cols-1.md\\:grid-cols-3,
    .grid.md\\:grid-cols-2,
    .grid.md\\:grid-cols-3,
    .grid.grid-cols-1.lg\\:grid-cols-2,
    .grid.grid-cols-2,
    div.grid.grid-cols-1.md\\:grid-cols-2,
    div.grid.grid-cols-1.md\\:grid-cols-3,
    div.grid.md\\:grid-cols-2,
    div.grid.md\\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        grid-template-columns: none !important;
    }
    
    /* ==========================================
       TYPOGRAPHY AND HEADERS
       ========================================== */
    
    h1.text-4xl.md\\:text-6xl,
    h1.text-4xl.md\\:text-5xl,
    h1.text-5xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    .section-header,
    h2.section-header,
    h3.section-header {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    .section-header i,
    h2.section-header i,
    h3.section-header i {
        display: inline-block !important;
        margin: 0 0.5rem 0 0 !important;
        font-size: 1.25rem !important;
    }
    
    /* ==========================================
       CUSTOMER TYPE TOGGLE - COMPACT MOBILE
       ========================================== */
    
    .customer-type-container {
        max-width: 100% !important;
        margin: 0 auto 0.75rem auto !important; /* Reduced from 1rem */
        padding: 0 !important;
    }
    
    .customer-type-container .flex {
        flex-direction: column !important;
        gap: 0.375rem !important; /* Reduced from 0.5rem */
        width: 100% !important;
    }
    
    .customer-type-toggle {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 0.75rem !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        transition: all 0.3s ease !important;
        margin-bottom: 0 !important;
        border: 2px solid #e2e8f0 !important;
        background: white !important;
        color: #4a5568 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }
    
    .customer-type-toggle.active {
        background: linear-gradient(135deg, #145da0 0%, #2e8bc0 100%) !important;
        color: white !important;
        border-color: #145da0 !important;
        box-shadow: 0 2px 8px rgba(20, 93, 160, 0.3) !important;
        transform: translateY(-1px) !important;
    }
    
    .customer-type-toggle span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    .customer-type-toggle i {
        margin-right: 0.375rem !important;
        font-size: 0.875rem !important;
        flex-shrink: 0 !important;
    }
    
    .customer-type-toggle:hover:not(.active) {
        background: #f7fafc !important;
        border-color: #b1d4e0 !important;
        transform: translateY(-1px) !important;
    }
    
    /* ==========================================
       SERVICE TYPE TABS
       ========================================== */
    
    .tab-container .flex,
    .tab-container div.flex {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .tab-button {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
        border-radius: 0.75rem !important;
        font-size: 1rem !important;
        border: none !important;
        background: none !important;
        color: #718096 !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
        transition: all 0.3s ease !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }
    
    .tab-button:hover {
        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
        color: #0c2d48 !important;
    }
    
    .tab-button.active {
        background: linear-gradient(135deg, #145da0 0%, #2e8bc0 100%) !important;
        color: white !important;
        box-shadow: 0 -4px 15px rgba(20, 93, 160, 0.3) !important;
    }
    
    .tab-button i {
        margin-right: 0.5rem !important;
        font-size: 1.1rem !important;
    }
    
    /* ==========================================
       FORM INPUTS AND LABELS
       ========================================== */
    
    .form-label,
    label.form-label {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    .form-input,
    input.form-input,
    .form-input[type="text"],
    .form-input[type="email"],
    .form-input[type="tel"],
    .form-input[type="number"],
    .form-input[type="date"],
    .form-input[type="time"],
    select.form-input,
    textarea.form-input {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border: 2px solid #e2e8f0 !important;
        border-radius: 0.75rem !important;
        min-height: 56px !important;
        background: white !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
    }
    
    /* iOS specific fixes */
    .form-input:focus,
    input.form-input:focus,
    select.form-input:focus,
    textarea.form-input:focus {
        border-color: #1a73e8 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1) !important;
        transform: none !important; /* Prevent zoom on iOS */
        font-size: 16px !important; /* Maintain size on focus */
    }
    
    /* Special styling for select dropdowns on mobile */
    select.form-input {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
        background-position: right 0.75rem center !important;
        background-repeat: no-repeat !important;
        background-size: 1.5em 1.5em !important;
        padding-right: 3rem !important;
    }
    
    /* Textarea specific styling */
    textarea.form-input {
        min-height: 120px !important;
        resize: vertical !important;
        line-height: 1.5 !important;
    }
    
    /* Input group styling - COMPACT FOR MOBILE */
    .form-input-group {
        margin-bottom: 0.75rem !important; /* Further reduced from 1rem */
    }
    
    /* Contact details section specific optimizations */
    .form-section .grid.grid-cols-1.md\\:grid-cols-2 .form-input-group {
        margin-bottom: 0.75rem !important; /* Consistent compact spacing */
    }
    
    /* Address section spacing - more compact */
    .form-section .mt-8 {
        margin-top: 1rem !important; /* Reduced from 1.5rem */
    }
    
    /* Sub-sections within contact details - compact */
    .form-section h4 {
        margin-bottom: 0.75rem !important; /* Reduced from 1rem */
        margin-top: 0.75rem !important; /* Reduced from 1rem */
        font-size: 1rem !important; /* Smaller heading */
    }
    
    /* Error message spacing - minimal */
    .error-message {
        margin-top: 0.125rem !important; /* Reduced from 0.25rem */
        margin-bottom: 0 !important;
        min-height: 0.75rem !important; /* Reduced from 1rem */
        font-size: 0.8rem !important; /* Smaller error text */
    }
    
    /* Form labels - more compact */
    .form-label,
    label.form-label {
        font-size: 0.85rem !important; /* Reduced from 0.9rem */
        font-weight: 600 !important;
        margin-bottom: 0.375rem !important; /* Reduced from 0.5rem */
        display: block !important;
    }
    
    /* Info banners - more compact */
    .form-section .bg-gradient-to-r.from-sky-50.to-blue-50 {
        margin-bottom: 0.75rem !important; /* Reduced from 1rem */
        padding: 0.75rem !important; /* Reduced from 1rem */
    }
    
    /* ==========================================
       EQUIPMENT SPECIFIC STYLING
       ========================================== */
    
    .equipment-item-card,
    div.equipment-item-card {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 1rem !important;
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Equipment type selection */
    #equipment-type-select {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Equipment fields container */
    #equipment-fields-container .grid,
    #equipment-fields-container div.grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Optional fields toggle button */
    #toggle-dumpster-optional-fields,
    button#toggle-dumpster-optional-fields {
        width: 100% !important;
        margin: 1rem 0 !important;
    }
    
    /* Optional fields container */
    #dumpster-optional-fields.grid,
    #dumpster-optional-fields div.grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* ==========================================
       TABLE TO CARD VIEW CONVERSION
       ========================================== */
    
    /* Hide table view on mobile */
    .table-view-container,
    div.table-view-container {
        display: none !important;
    }
    
    /* Show card view on mobile */
    .card-view-container,
    div.card-view-container {
        display: block !important;
    }
    
    /* Enhanced card styling for mobile */
    .item-card,
    div.item-card {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 1rem !important;
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .item-card-header,
    div.item-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    .item-card-title,
    div.item-card-title {
        font-weight: 600 !important;
        color: #1a73e8 !important;
        font-size: 1.1rem !important;
        flex: 1 !important;
    }
    
    .item-card-detail,
    div.item-card-detail {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0.75rem !important;
    }
    
    .item-card-detail label {
        font-size: 0.8rem !important;
        color: #6b7280 !important;
        margin-bottom: 0.25rem !important;
        font-weight: 500 !important;
    }
    
    .item-card-detail .edit-input,
    .item-card-detail input.edit-input {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.5rem !important;
        min-height: 48px !important;
    }
    
    /* Ensure junk item name input is visible */
    .junk-item-name,
    input.junk-item-name {
        display: block !important;
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 16px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.5rem !important;
        min-height: 48px !important;
        background: white !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Remove button styling in cards */
    .item-card .remove-btn,
    .item-card button.remove-btn {
        background: #ef4444 !important;
        color: white !important;
        border: none !important;
        border-radius: 0.5rem !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
        cursor: pointer !important;
        transition: background-color 0.3s ease !important;
    }
    
    .item-card .remove-btn:hover,
    .item-card .remove-btn:active,
    .item-card button.remove-btn:hover,
    .item-card button.remove-btn:active {
        background: #dc2626 !important;
    }
    
    /* ==========================================
       JUNK REMOVAL SPECIFIC STYLES
       ========================================== */
    
    /* AI Vision upload section */
    .bg-gradient-to-r.from-sky-50.to-blue-50,
    div.bg-gradient-to-r.from-sky-50.to-blue-50 {
        padding: 1.5rem !important;
        border-radius: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .bg-gradient-to-r.from-sky-50.to-blue-50 .flex.flex-col.lg\\:flex-row,
    .bg-gradient-to-r.from-sky-50.to-blue-50 div.flex.flex-col.lg\\:flex-row {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
    
    .bg-gradient-to-r.from-sky-50.to-blue-50 button {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        min-height: 56px !important;
    }
    
    /* AI loading message */
    #ai-vision-loading-message {
        margin-top: 1rem !important;
    }
    
    /* Junk items table becomes cards */
    #junk-items-table,
    table#junk-items-table {
        display: none !important;
    }
    
    #junk-items-card-view,
    div#junk-items-card-view {
        display: block !important;
    }
    
    /* ==========================================
       BUTTONS AND CTAs - COMPACT MOBILE
       ========================================== */
    
    .btn-primary,
    button.btn-primary,
    .modal-button,
    button.modal-button,
    #submit-quote-request,
    #add-equipment-item-btn,
    button#submit-quote-request,
    button#add-equipment-item-btn {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        border-radius: 0.75rem !important;
        min-height: 48px !important;
        margin-bottom: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        border: none !important;
        background: linear-gradient(135deg, #145da0 0%, #2e8bc0 100%) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(20, 93, 160, 0.3) !important;
    }
    
    /* Submit button special styling - more compact */
    #submit-quote-request,
    button#submit-quote-request {
        font-size: 0.8rem !important;
        padding: 0.8rem 0.25rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        background: linear-gradient(135deg, #0c2d48 0%, #145da0 100%) !important;
        box-shadow: 0 4px 12px rgba(12, 45, 72, 0.4) !important;
        min-height: 52px !important;
    }
    
    /* Add equipment button styling - compact */
    #add-equipment-item-btn,
    button#add-equipment-item-btn {
        margin: 0.75rem 0 !important;
        background: linear-gradient(135deg, #2e8bc0 0%, #145da0 100%) !important;
        box-shadow: 0 2px 8px rgba(46, 139, 192, 0.3) !important;
        padding: 0.75rem 1rem !important;
        min-height: 48px !important;
    }
    
    /* Button hover and active states */
    .btn-primary:hover,
    button.btn-primary:hover,
    #submit-quote-request:hover,
    #add-equipment-item-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 15px rgba(20, 93, 160, 0.4) !important;
    }
    
    .btn-primary:active,
    button.btn-primary:active,
    #submit-quote-request:active,
    #add-equipment-item-btn:active {
        transform: translateY(0) scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(20, 93, 160, 0.3) !important;
    }
    
    /* Disabled button state */
    .btn-primary:disabled,
    button.btn-primary:disabled,
    #submit-quote-request:disabled {
        background: #9ca3af !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: 0 1px 4px rgba(156, 163, 175, 0.3) !important;
    }
    
    /* Button icons - smaller */
    .btn-primary i,
    button.btn-primary i,
    #submit-quote-request i,
    #add-equipment-item-btn i {
        margin-right: 0.375rem !important;
        font-size: 0.875rem !important;
        flex-shrink: 0 !important;
    }
    
    /* ==========================================
       NAVIGATION AND PROGRESS INDICATORS
       ========================================== */
    
    /* Progress indicator responsive */
    .flex.justify-center.items-center.space-x-4,
    div.flex.justify-center.items-center.space-x-4 {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
    
    .flex.justify-center.items-center.space-x-4 .flex.items-center,
    .flex.justify-center.items-center.space-x-4 div.flex.items-center {
        justify-content: center !important;
    }
    
    .w-12.h-1.bg-gray-300.rounded-full,
    div.w-12.h-1.bg-gray-300.rounded-full {
        width: 2rem !important;
        height: 2px !important;
        transform: rotate(90deg) !important;
    }
    
    /* ==========================================
       FEATURE HIGHLIGHTS
       ========================================== */
    
    .flex.flex-wrap.justify-center.gap-6,
    div.flex.flex-wrap.justify-center.gap-6 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .flex.items-center.bg-white.rounded-full,
    div.flex.items-center.bg-white.rounded-full {
        margin-bottom: 0.5rem !important;
        padding: 0.75rem 1rem !important;
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }
    
    /* ==========================================
       ADDRESS SECTION
       ========================================== */
    
    /* Address input with icon */
    .relative input[name="address"],
    div.relative input[name="address"] {
        padding-left: 3rem !important;
    }
    
    .absolute.inset-y-0.left-0.pl-3,
    div.absolute.inset-y-0.left-0.pl-3 {
        padding-left: 1rem !important;
    }
    
    /* ==========================================
       MODAL AND OVERLAY RESPONSIVE
       ========================================== */
    
    .modal-content,
    div.modal-content {
        width: 95% !important;
        max-width: 350px !important;
        padding: 1.5rem !important;
        margin: 1rem !important;
        border-radius: 1rem !important;
    }
    
    .modal-content h2,
    .modal-content h3,
    div.modal-content h2,
    div.modal-content h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Success modal specific */
    #success-modal .modal-content,
    #success-modal div.modal-content {
        text-align: center !important;
    }
    
    /* ==========================================
       TOAST NOTIFICATIONS
       ========================================== */
    
    #toast-container,
    div#toast-container {
        bottom: 1rem !important;
        right: 1rem !important;
        left: 1rem !important;
        width: auto !important;
        z-index: 9999 !important;
    }
    
    .toast,
    div.toast {
        min-width: auto !important;
        max-width: 100% !important;
        margin-bottom: 0.5rem !important;
        padding: 1rem !important;
        border-radius: 0.75rem !important;
    }
    
    /* ==========================================
       LOADING AND ERROR STATES
       ========================================== */
    
    .error-message,
    span.error-message {
        font-size: 0.9rem !important;
        margin-top: 0.25rem !important;
        min-height: 1.25rem !important;
    }
    
    .form-input.border-red-500,
    input.form-input.border-red-500 {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    }
    
    /* AI analyzing state */
    #ai-vision-loading-message,
    div#ai-vision-loading-message {
        padding: 1rem !important;
        text-align: center !important;
    }
    
    .animate-spin {
        animation: spin 1s linear infinite !important;
    }
    
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
}

/* ==========================================
   ADDITIONAL MOBILE SUBMIT BUTTON OPTIMIZATION
   ========================================== */

@media (max-width: 767px) {
    #submit-quote-request,
    button#submit-quote-request {
        font-size: 0.8rem !important;
        padding: 0.8rem 0.25rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        background: linear-gradient(135deg, #0c2d48 0%, #145da0 100%) !important;
        box-shadow: 0 4px 12px rgba(12, 45, 72, 0.4) !important;
        min-height: 52px !important;
    }
}

/* ==========================================
   TABLET STYLES (768px - 1023px)
   ========================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    
    .container-box {
        padding: 2rem !important;
    }
    
    .section-box {
        padding: 3rem !important;
    }
    
    /* Allow 2-column layout on tablet for some sections */
    .grid.grid-cols-1.md\\:grid-cols-2,
    div.grid.grid-cols-1.md\\:grid-cols-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Keep single column for complex sections */
    .grid.grid-cols-1.md\\:grid-cols-3,
    div.grid.grid-cols-1.md\\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    
    /* Customer type toggle can be side-by-side */
    .customer-type-container .flex,
    .customer-type-container div.flex {
        flex-direction: row !important;
    }
    
    .customer-type-toggle {
        flex: 1 !important;
    }
    
    /* Service tabs can be side-by-side */
    .tab-container .flex,
    .tab-container div.flex {
        flex-direction: row !important;
        gap: 1rem !important;
    }
    
    .tab-button {
        flex: 1 !important;
        margin-bottom: 0 !important;
    }
    
    /* Form inputs slightly larger */
    .form-input,
    input.form-input {
        padding: 0.875rem !important;
        font-size: 1rem !important;
    }
    
    /* Show table view on tablet */
    .table-view-container,
    div.table-view-container {
        display: block !important;
    }
    
    .card-view-container,
    div.card-view-container {
        display: none !important;
    }
    
    /* Buttons can be smaller */
    .btn-primary,
    button.btn-primary {
        width: auto !important;
        min-width: 200px !important;
        padding: 0.875rem 2rem !important;
    }
    
    #submit-quote-request,
    button#submit-quote-request {
        width: 100% !important;
        max-width: 400px !important;
        margin: 1.5rem auto !important;
    }
}

/* ==========================================
   IPAD MINI SPECIFIC (744px width in portrait)
   ========================================== */

@media (min-width: 744px) and (max-width: 768px) {
    /* iPad Mini portrait optimizations */
    .grid.grid-cols-1.md\\:grid-cols-3,
    div.grid.grid-cols-1.md\\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    
    .customer-type-container .flex,
    .customer-type-container div.flex {
        flex-direction: row !important;
    }
    
    .tab-container .flex,
    .tab-container div.flex {
        flex-direction: row !important;
        gap: 1rem !important;
    }
}

/* ==========================================
   IPHONE 14 PRO MAX SPECIFIC (430px width)
   ========================================== */

@media (max-width: 430px) {
    .section-header,
    h2.section-header,
    h3.section-header {
        font-size: 1.25rem !important;
    }
    
    h1.text-4xl.md\\:text-6xl,
    h1.text-5xl {
        font-size: 1.75rem !important;
    }
    
    .form-section {
        padding: 1rem !important;
    }
    
    .container-box {
        padding: 0.75rem !important;
    }
    
    /* Smaller buttons for larger phones */
    .customer-type-toggle,
    .tab-button {
        padding: 0.875rem !important;
        min-height: 56px !important;
    }
}

/* ==========================================
   IPHONE 14 STANDARD (390px width)
   ========================================== */

@media (max-width: 390px) {
    .section-header,
    h2.section-header,
    h3.section-header {
        font-size: 1.1rem !important;
    }
    
    .section-header i,
    h2.section-header i,
    h3.section-header i {
        font-size: 1.5rem !important;
    }
    
    .customer-type-toggle,
    .tab-button {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        min-height: 52px !important;
    }
    
    .form-input,
    input.form-input {
        padding: 0.875rem !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        min-height: 52px !important;
    }
    
    .container-box {
        padding: 0.5rem !important;
    }
    
    .form-section {
        padding: 0.75rem !important;
    }
}

/* ==========================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ========================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .section-box {
        padding: 1rem !important;
    }
    
    .form-section {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .section-header,
    h2.section-header,
    h3.section-header {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Compact layout for landscape */
    .grid.grid-cols-1.md\\:grid-cols-2,
    div.grid.grid-cols-1.md\\:grid-cols-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    
    /* Adjust heights for landscape */
    .form-input,
    .btn-primary,
    .customer-type-toggle,
    .tab-button,
    input.form-input,
    button.btn-primary {
        min-height: 48px !important;
    }
}

/* ==========================================
   WEBKIT SPECIFIC FIXES FOR IOS
   ========================================== */

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        .form-input,
        input.form-input,
        select.form-input,
        textarea.form-input {
            /* Prevent zoom on focus */
            font-size: 16px !important;
        }
        
        /* Fix for iOS button styling */
        .btn-primary,
        .tab-button,
        .customer-type-toggle,
        button.btn-primary,
        button.tab-button,
        button.customer-type-toggle {
            -webkit-appearance: none !important;
            appearance: none !important;
            border-radius: 0.75rem !important;
        }
        
        /* Fix for iOS select dropdown */
        select.form-input {
            -webkit-appearance: none !important;
            appearance: none !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
        }
    }
}

/* ==========================================
   iPhone 14 SPECIFIC OPTIMIZATIONS
   ========================================== */

/* iPhone 14 Portrait (390px x 844px) */
@media (max-width: 390px) and (max-height: 844px) and (orientation: portrait) {
    
    #request-quote-view,
    #junk-removal-view {
        padding: 0.5rem !important; /* Further reduced */
    }
    
    /* Ultra-tight spacing for iPhone 14 */
    .space-y-6 > * + * {
        margin-top: 0.75rem !important; /* Reduced from 1rem */
    }
    
    /* Header adjustments - more compact */
    .mobile-title {
        font-size: 1.125rem !important; /* Reduced from 1.25rem */
        line-height: 1.2 !important;
    }
    
    .mobile-subtitle {
        font-size: 0.75rem !important; /* Reduced from 0.8rem */
        line-height: 1.3 !important;
    }
    
    /* Form elements ultra-compact */
    .form-input,
    input.form-input,
    select.form-input,
    textarea.form-input {
        padding: 0.75rem !important; /* Reduced from 0.875rem */
        font-size: 16px !important;
        min-height: 44px !important; /* Reduced from default */
    }
    
    /* Ultra-compact buttons for iPhone 14 */
    .btn-primary,
    button.btn-primary,
    #submit-quote-request,
    #add-equipment-item-btn {
        padding: 0.75rem 0.875rem !important; /* Further reduced */
        font-size: 0.875rem !important; /* Reduced from 0.95rem */
        min-height: 44px !important; /* Reduced from 50px */
    }
    
    /* Customer type toggle ultra-compact for iPhone 14 */
    .customer-type-toggle {
        padding: 0.625rem 0.75rem !important; /* Further reduced */
        min-height: 44px !important; /* Reduced from 48px */
        font-size: 0.85rem !important; /* Reduced from 0.9rem */
    }
    
    .customer-type-toggle i {
        margin-right: 0.25rem !important; /* Reduced icon spacing */
        font-size: 0.8rem !important; /* Smaller icons */
    }
    
    /* Form section ultra-compact for iPhone 14 */
    .form-section {
        padding: 0.5rem !important; /* Further reduced from 0.75rem */
        margin-bottom: 1rem !important; /* Maintain some breathing room */
    }
    
    /* Contact details ultra-tight spacing for iPhone 14 */
    .form-input-group {
        margin-bottom: 0.5rem !important; /* Reduced from 0.75rem */
    }
    
    /* Form labels smaller for iPhone 14 */
    .form-label,
    label.form-label {
        font-size: 0.8rem !important; /* Reduced from 0.85rem */
        margin-bottom: 0.25rem !important; /* Reduced from 0.375rem */
    }
    
    /* Section headers smaller for iPhone 14 */
    .section-header,
    h2.section-header,
    h3.section-header {
        font-size: 1.125rem !important; /* Reduced from 1.25rem */
        margin-bottom: 0.5rem !important; /* Reduced from 0.75rem */
    }
    
    /* Address section ultra-compact */
    .form-section .mt-8 {
        margin-top: 0.5rem !important; /* Reduced from 0.75rem */
    }
    
    .form-section h4 {
        margin-bottom: 0.5rem !important; /* Reduced from 0.75rem */
        margin-top: 0.5rem !important; /* Reduced from 0.75rem */
        font-size: 0.9rem !important; /* Smaller heading */
    }
    
    /* Progress indicator smaller */
    .flex.justify-center.items-center div {
        font-size: 0.7rem !important; /* Further reduced */
    }
}

/* iPhone 14 Landscape (844px x 390px) */
@media (max-width: 844px) and (max-height: 390px) and (orientation: landscape) {
    
    #request-quote-view,
    #junk-removal-view {
        padding: 0.5rem !important;
        min-height: 100vh !important;
    }
    
    /* Reduce all spacing in landscape */
    .space-y-6 > * + * {
        margin-top: 0.75rem !important;
    }
    
    /* Compact header in landscape */
    .relative.overflow-hidden.rounded-2xl {
        padding: 0.75rem !important;
        border-radius: 1rem !important;
    }
    
    .mobile-title {
        font-size: 1.125rem !important;
        line-height: 1.1 !important;
    }
    
    .mobile-subtitle {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }
    
    /* Hide progress indicator in landscape to save space */
    .mt-6.sm\\:mt-8.flex.justify-center {
        display: none !important;
    }
    
    /* More compact form sections */
    .form-section {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Smaller form inputs */
    .form-input,
    input.form-input,
    select.form-input,
    textarea.form-input {
        padding: 0.75rem !important;
        min-height: 40px !important;
        font-size: 16px !important;
    }
    
    /* Compact buttons */
    .btn-primary,
    button.btn-primary,
    #submit-quote-request,
    #add-equipment-item-btn {
        padding: 0.75rem 1rem !important;
        min-height: 40px !important;
        font-size: 0.9rem !important;
    }
    
    /* Two-column layout for certain elements in landscape */
    .grid.grid-cols-1.md\\:grid-cols-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* Customer type toggle horizontal in landscape */
    .customer-type-container .flex {
        flex-direction: row !important;
        gap: 0.75rem !important;
    }
    
    .customer-type-toggle {
        flex: 1 !important;
        padding: 0.75rem 1rem !important;
        min-height: 40px !important;
        font-size: 0.85rem !important;
    }
    
    /* Service tabs horizontal in landscape */
    .tab-container .flex {
        flex-direction: row !important;
        gap: 0.5rem !important;
    }
    
    .tab-button {
        flex: 1 !important;
        padding: 0.75rem 1rem !important;
        min-height: 40px !important;
        margin-bottom: 0 !important;
    }
    
    /* Contact details more compact spacing */
    .form-input-group {
        margin-bottom: 0.5rem !important;
    }
    
    /* Reduce section spacing */
    .form-section.mt-8 {
        margin-top: 0.5rem !important;
    }
}

/* iPhone 14 Pro Max Portrait (430px x 932px) */
@media (max-width: 430px) and (max-height: 932px) and (orientation: portrait) {
    
    /* Slightly more generous spacing for Pro Max */
    #request-quote-view,
    #junk-removal-view {
        padding: 1rem !important;
    }
    
    .space-y-6 > * + * {
        margin-top: 1.25rem !important;
    }
    
    /* Allow larger text on Pro Max */
    .mobile-title {
        font-size: 1.375rem !important;
    }
    
    .mobile-subtitle {
        font-size: 0.875rem !important;
    }
    
    /* More comfortable form inputs */
    .form-input,
    input.form-input,
    select.form-input,
    textarea.form-input {
        padding: 1rem !important;
    }
    
    .btn-primary,
    button.btn-primary {
        padding: 1rem 1.25rem !important;
    }
}

/* iPhone 14 Pro Max Landscape (932px x 430px) */
@media (max-width: 932px) and (max-height: 430px) and (orientation: landscape) {
    
    /* Ultra-compact layout for Pro Max landscape */
    #request-quote-view,
    #junk-removal-view {
        padding: 0.5rem !important;
    }
    
    .space-y-6 > * + * {
        margin-top: 0.5rem !important;
    }
    
    /* Force horizontal layouts where possible */
    .grid.grid-cols-1.md\\:grid-cols-2,
    .grid.grid-cols-1.md\\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }
    
    /* Compact form sections */
    .form-section {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Extra compact inputs and buttons */
    .form-input,
    .btn-primary {
        min-height: 36px !important;
        padding: 0.5rem !important;
        font-size: 16px !important;
    }
}

/* ==========================================
   SAFE AREA INSETS FOR MODERN iPhones
   ========================================== */

@supports (padding: max(0px)) {
    @media (max-width: 844px) {
        #request-quote-view,
        #junk-removal-view {
            padding-left: max(0rem, env(safe-area-inset-left)) !important;
            padding-right: max(0rem, env(safe-area-inset-right)) !important;
            padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
            padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
        }
        
        /* Ensure forms don't overlap with dynamic island or home indicator */
        .bg-white\/90.backdrop-blur-sm.rounded-2xl.shadow-2xl {
            margin-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
        }
    }
}