/* Mobile fixes for Guided Discovery */

/* Mobile styles - hide summary panel and divider */
@media (max-width: 767px) {
    /* Hide summary panel and divider */
    .summary-panel,
    .panel-divider {
        display: none;
    }
    
    /* Discovery panel takes full width */
    .discovery-panel {
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Container adjustments */
    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Navigation title adjustments */
    .nav-title {
        margin-left: 0 !important;
        padding-left: 10px !important;
    }
    
    /* Top row adjustments */
    .top-row {
        padding-left: 10px !important;
    }
    
    /* Page wrapper adjustments */
    .page-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* Navigation bar adjustments */
    .nav-bar {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Navigation row adjustments */
    .nav-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Input container adjustments */
    .input-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Content row adjustments */
    .content-row {
        flex-direction: column;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    /* Step container adjustments */
    .step-container {
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Step adjustments */
    .step {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Input text adjustments */
    #inputText {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        padding-right: 45px !important;
    }
    
    /* Input suggestions wrapper adjustments */
    .input-suggestions-wrapper {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-width: 0 !important; /* Override the min-width: 200px */
    }
    
    /* Suggestions container adjustments */
    .suggestions-container {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix for nested containers within input-container */
    .input-container > div,
    .input-container > div > div {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative !important;
    }
    
    /* Fix X button positioning with higher specificity */
    #clearInputButton {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1000 !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: white !important;
        border-radius: 50% !important;
        box-sizing: border-box !important; /* Use border-box instead of content-box */
        border: none !important; /* Remove border */
        overflow: hidden !important; /* Prevent content from affecting shape */
        flex-shrink: 0 !important; /* Prevent shrinking */
        flex-grow: 0 !important; /* Prevent growing */
    }
    
    /* Ensure the SVG icon inside the button is properly sized */
    #clearInputButton svg {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        display: block !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
    
    /* Table scrollable wrapper styles */
    .table-scrollable-wrapper {
        overflow-x: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 15px !important;
    }
    
    /* Table styles for mobile */
    .comparison-table-container {
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure tables take up full width of their container */
    .table-scrollable-wrapper table {
        width: 100% !important;
        min-width: 500px !important; /* Ensure table has a minimum width to trigger scrolling */
    }
    
    /* Improve table cell readability on mobile */
    .table-scrollable-wrapper th,
    .table-scrollable-wrapper td {
        white-space: nowrap !important;
        padding: 8px !important;
    }
    
    /* Option button mobile fixes */
    .option-button {
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: calc(100vw - 40px) !important; /* Force fit within viewport minus padding */
        width: auto !important;
        box-sizing: border-box !important;
        display: block !important; /* Change to block for full width control */
        margin-bottom: 8px !important;
        margin-right: 0 !important;
        line-height: 1.4 !important; /* Better line spacing for wrapped text */
        min-height: auto !important; /* Remove fixed height constraint */
        height: auto !important; /* Allow natural height expansion */
        padding: 12px 16px !important;
        text-align: center !important;
        overflow: visible !important; /* Allow text to be fully visible */
    }
    
    /* Ensure button containers don't overflow */
    .option-buttons-container,
    .options-container {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0 10px !important; /* Add container padding */
    }
}