/*
 * MerchStudio version 0.12 - Core CSS File
 * Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
 * Client-side Search Bar Styles
 *
 * @version tpl/core/client/css/search.css - 0.01 - 2025-11-11 - E5 SWE
 */

/*
 * We use the form as the main wrapper.
 * position: relative is crucial for positioning the button inside.
 */
#merch_search_form {
    position: relative;
    display: flex;
    flex-grow: 1;
    max-width: 400px;
    margin: 0 1rem; /* Give it space from other header elements */
}

#merch_search_keywords {
    /* Full width of the form wrapper */
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--border_radius_std);
    padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* Right padding makes room for button */
    font-size: 0.9rem;
    background-color: var(--base);
    color: var(--text);
    /* Smooth transition for focus */
    transition: border-color 0.2s, box-shadow 0.2s;
}

#merch_search_keywords:focus {
    outline: none;
    border-color: var(--accent_blue);
    background-color: var(--bg);
    box-shadow: 0 0 0 2px var(--shadow);
}

#merch_search_btn {
    /* We position the button absolutely inside the form */
    position: absolute;
    top: 0;
    right: 0;
    height: 100%; /* Match the input field height */
    
    /* Remove all default button styling */
    background: transparent;
    border: none;
    
    /* Sizing and spacing for the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; /* Clickable area */
    padding: 0;
    cursor: pointer;
    
    /* We set the icon color using 'color' */
    color: var(--middle_grey);
    transition: color 0.2s;
}

#merch_search_btn .merch_icon {
    width: 1rem;
    height: 1rem;
}

#merch_search_btn:hover,
#merch_search_btn:focus {
    color: var(--contrast);
    outline: none;
}

/* --- Live Search Dropdown --- */
.search_live_preview {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none; /* Hidden by default */
}

.preview_section {
    padding: 10px 0;
    border-bottom: 1px solid var(--base);
}

.preview_heading {
    margin: 0 10px 5px;
    font-size: 0.8em;
    text-transform: uppercase;
    color: var(--middle_grey);
}

.preview_item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    text-decoration: none;
    color: var(--text);
    transition: background-color 0.2s;
}

.preview_item:hover {
    background-color: var(--hover);
}

.preview_thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}

.preview_thumb.placeholder {
    background-color: var(--base);
}

.preview_details {
    display: flex;
    flex-direction: column;
}

.preview_title {
    font-weight: 600;
    font-size: 0.95em;
}

.preview_price {
    font-size: 0.85em;
    color: var(--highlight);
}

.preview_empty {
    padding: 15px;
    text-align: center;
    color: var(--middle_grey);
}

.preview_view_all {
    display: block;
    padding: 10px;
    text-align: center;
    background-color: var(--base);
    color: var(--link);
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9em;
}

.preview_view_all:hover {
    background-color: var(--hover);
}

/* --- Full Page Results Styles --- */
#search_results_page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.search_section {
    margin-bottom: 40px;
}

.search_section h2 {
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Content List Grid */
.content_list_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.content_card {
    background-color: var(--base);
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: transform 0.2s;
}

.content_card:hover {
    transform: translateY(-3px);
    border-color: var(--highlight);
}

.content_link {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    color: var(--text);
}

.content_icon {
    margin-right: 15px;
    color: var(--middle_grey);
}

.content_details h3 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    text-align: left;
}

/* Tiny badge for the live preview */
.item_type_badge.tiny {
    font-size: 0.7em;
    padding: 2px 5px;
    margin-left: auto;
}