/**
 * Amazon-Style Dropdown CSS
 * Clean, simple dropdown attached to search input
 */

@media (max-width: 768px) {
    
    /* Hide all search buttons */
    input[type="submit"][value="Sök"],
    input[type="submit"][value="Search"],
    button[type="submit"],
    button.button,
    .wp-block-search__button,
    .search-submit,
    .search-form button,
    .searchform button,
    form button[type="submit"],
    form input[type="submit"] {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Search wrapper container */
    .amazon-search-wrapper {
        position: relative;
        width: 100%;
    }
    
    /* Search input styling */
    .amazon-dropdown-init {
        width: 100%;
        padding: 12px 16px;
        padding-right: 40px; /* Space for clear button */
        font-size: 16px; /* Prevent zoom on iOS */
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fff;
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
    }
    
    .amazon-dropdown-init:focus {
        outline: none;
        border-color: #0066cc;
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    }
    
    /* When dropdown is open, square the bottom corners of input */
    .amazon-dropdown-init.dropdown-open {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: transparent;
    }
    
    /* Dropdown container */
    .amazon-dropdown {
        position: absolute;
        top: calc(100% - 1px);
        left: 0;
        right: 0;
        background: #ffffff;
        border: 1px solid #ddd;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 99999;
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden; /* Prevent horizontal scroll */
        -webkit-overflow-scrolling: touch;
        margin-top: 0;
    }
    
    /* Inner container */
    .dropdown-inner {
        background: #fff;
    }
    
    /* Loading state */
    .dropdown-loading {
        padding: 12px 16px;
        text-align: center;
        color: #666;
        font-size: 14px;
        background: #fafafa;
    }
    
    /* Suggestions container */
    .dropdown-suggestions {
        background: #fff;
    }
    
    /* Individual suggestion item */
    .suggestion-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 16px 11px 14px; /* More padding on the right */
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        background: #fff;
        transition: background 0.1s;
        text-decoration: none;
        color: #333;
        gap: 12px;
    }
    
    .suggestion-item:active {
        background: #f0f0f0;
    }
    
    .suggestion-item:last-child {
        border-bottom: none;
    }
    
    /* Arrow icon for 'see all' */
    .arrow-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-right: 8px;
        opacity: 0.5;
    }
    
    /* Suggestion text */
    .suggestion-text {
        flex: 1;
        font-size: 14px;
        line-height: 1.4;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Stock indicator */
    .stock-indicator {
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 500;
        padding: 3px 8px;
        border-radius: 12px;
        white-space: nowrap;
    }
    
    .stock-indicator.in-stock {
        background: #e8f5e9;
        color: #2e7d32;
    }
    
    .stock-indicator.low-stock {
        background: #fff3e0;
        color: #e65100;
    }
    
    .stock-indicator.out-of-stock {
        background: #ffebee;
        color: #c62828;
    }
    
    /* See all results link - Always visible */
    .suggestion-item.see-all {
        background: linear-gradient(to bottom, #f8f8f8, #f0f0f0);
        border-top: 2px solid #e0e0e0;
        font-weight: 600;
        padding: 13px 16px 13px 14px;
        position: sticky;
        bottom: 0;
        margin-top: 4px;
    }
    
    .suggestion-item.see-all:active {
        background: linear-gradient(to bottom, #e8e8e8, #e0e0e0);
    }
    
    .suggestion-item.see-all .suggestion-text {
        display: flex;
        align-items: center;
        color: #0066cc;
        font-weight: 600;
        font-size: 14px;
    }
    
    .see-all-text {
        color: #0066cc;
        font-weight: 600;
    }
    
    /* Empty state */
    .dropdown-empty {
        padding: 16px 20px;
        text-align: center;
        color: #666;
        font-size: 14px;
    }
    
    /* Hide all search buttons - we don't need them */
    .amazon-search-wrapper button[type="submit"],
    .amazon-search-wrapper input[type="submit"],
    .amazon-search-wrapper .search-submit,
    .amazon-search-wrapper + button[type="submit"],
    .amazon-search-wrapper + input[type="submit"],
    button.typesense-search-submit,
    .typesense-search-form button,
    .woocommerce-product-search button {
        display: none !important;
    }
    
    /* Scrollbar styling */
    .amazon-dropdown::-webkit-scrollbar {
        width: 6px;
    }
    
    .amazon-dropdown::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .amazon-dropdown::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    .amazon-dropdown::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* Animation */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .amazon-dropdown {
        animation: fadeIn 0.15s ease-out;
    }
}

/* Hide modal completely on mobile */
@media (max-width: 768px) {
    #typesense-search-overlay,
    #typesense-search-modal,
    .typesense-modal-container,
    .mobile-search-dropdown {
        display: none !important;
    }
    
    /* Additional button hiding for forms */
    form button[type="submit"],
    form input[type="submit"],
    form .search-submit,
    .search-form button,
    .searchform button,
    button:has-text("Sök"),
    input[value="Sök"],
    input[value="Search"],
    .typesense-search-form button,
    .woocommerce-product-search button,
    form.search-form button,
    form.searchform button {
        display: none !important;
    }
    
    /* Ensure search input takes full width */
    .amazon-search-wrapper {
        width: 100%;
    }
    
    form.search-form,
    form.searchform,
    .typesense-search-form,
    .woocommerce-product-search {
        width: 100%;
    }
}