/**
 * AI Search - Frontend Styles
 */

/* Container */
.ai-search-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Text Search Form */
.ai-search-section {
    margin-bottom: 30px;
}

/* =====================================================
   CS-Cart Style Search Box (index.tpl)
   ===================================================== */
.ai-search-block {
    max-width: 600px;
    margin: 0 auto 30px;
}

.ai-search-form-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.ai-search-form-wrapper:focus-within {
    border-color: #4285f4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.1);
}

.ai-search-input-field {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    outline: none !important;
    height: 40px !important;
    margin: 0 !important;
}

.ai-search-input-field:focus {
    outline: none !important;
    box-shadow: none !important;
}

.ai-search-camera-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    color: #5f6368;
    transition: color 0.2s;
    background: transparent;
    border: none;
}

.ai-search-camera-icon:hover {
    color: #4285f4;
}

.ai-search-magnifier {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border: none;
    border-left: 1px solid #ddd;
    padding: 0 15px;
    height: 40px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.ai-search-magnifier:hover {
    background: #4285f4;
    color: #fff;
}

.ai-search-magnifier .ty-icon-search {
    font-size: 18px;
}

.ai-search-form {
    max-width: 700px;
    margin: 0 auto;
}

.ai-search-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.ai-search-input {
    flex: 1;
    padding: 15px 20px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

.ai-search-input:focus {
    border-color: #2196F3;
    outline: none;
}

.ai-search-btn {
    padding: 15px 30px;
    font-size: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-search-btn i {
    font-size: 18px;
}

/* Divider */
.ai-search-divider {
    text-align: center;
    margin: 30px 0;
    position: relative;
}

.ai-search-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #ddd;
}

.ai-search-divider span {
    background: #fff;
    padding: 0 20px;
    color: #888;
    position: relative;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Image Search */
.ai-image-search-form {
    max-width: 500px;
    margin: 0 auto;
}

.ai-image-dropzone {
    border: 3px dashed #ddd;
    border-radius: 12px;
    padding: 50px 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fafafa;
}

.ai-image-dropzone:hover,
.ai-image-dropzone.dragover {
    border-color: #2196F3;
    background: #e3f2fd;
}

.ai-dropzone-content i {
    font-size: 48px;
    color: #999;
    margin-bottom: 15px;
    display: block;
}

.ai-dropzone-content p {
    font-size: 18px;
    color: #333;
    margin: 0 0 10px;
}

.ai-dropzone-hint {
    font-size: 13px;
    color: #888;
}

.ai-image-preview {
    margin-top: 20px;
    text-align: center;
}

.ai-image-preview img {
    max-width: 300px;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Loading */
.ai-search-loading {
    text-align: center;
    padding: 40px 20px;
}

.ai-loading-spinner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.ai-loading-spinner span {
    color: #666;
    font-size: 14px;
}

/* AI Interpretation */
.ai-search-interpretation {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 20px 25px;
    border-radius: 12px;
    margin: 20px 0 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.ai-interpretation-content h4 {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: 600;
}

.ai-interpretation-content p {
    margin: 8px 0;
    font-size: 14px;
    opacity: 0.95;
}

.ai-interpretation-content p strong {
    font-weight: 600;
}

/* Search Results */
.ai-search-count {
    text-align: center;
    padding: 15px;
    color: #666;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.ai-search-count .search-time {
    color: #999;
    font-size: 12px;
}

.ai-search-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 16px;
}

/* Product Grid */
.ai-search-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    padding: 10px 0;
}

.ai-product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ai-product-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

.ai-product-image {
    position: relative;
    padding-top: 100%;
    background: #f5f5f5;
}

.ai-product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-product-info {
    padding: 15px;
}

.ai-product-name {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4;
}

.ai-product-name a {
    color: #333;
    text-decoration: none;
}

.ai-product-name a:hover {
    color: #2196F3;
}

.ai-product-price {
    font-size: 18px;
    font-weight: 600;
    color: #e53935;
    margin-bottom: 8px;
}

.ai-similarity-score {
    margin-top: 10px;
}

.score-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

/* Similar Products Widget */
.ai-similar-products-widget {
    margin: 30px 0;
    padding: 25px;
    background: #f9f9f9;
    border-radius: 12px;
}

.ai-similar-products-widget h3 {
    margin: 0 0 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-similar-products-widget h3::before {
    content: '✨';
}

.ai-similar-products-list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 0;
}

.ai-similar-product {
    flex: 0 0 150px;
    text-align: center;
}

.ai-similar-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

.ai-similar-info {
    margin-top: 10px;
}

.ai-similar-name {
    display: block;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-similar-name:hover {
    color: #2196F3;
}

.ai-similar-price {
    font-size: 14px;
    font-weight: 600;
    color: #e53935;
}

.ai-similar-score {
    font-size: 11px;
    color: #888;
    margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .ai-search-input-wrapper {
        flex-direction: column;
    }
    
    .ai-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .ai-search-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .ai-product-info {
        padding: 10px;
    }
    
    .ai-product-name {
        font-size: 13px;
    }
    
    .ai-product-price {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .ai-search-container {
        padding: 15px;
    }
    
    .ai-search-products {
        grid-template-columns: 1fr;
    }
    
    .ai-product-card {
        display: flex;
        align-items: center;
    }
    
    .ai-product-image {
        flex: 0 0 100px;
        padding-top: 0;
        height: 100px;
    }
    
    .ai-product-info {
        flex: 1;
    }
}

/* =====================================================
   Google-style Search Box
   ===================================================== */

/* Main Search Box Container */
.ai-google-search-box {
    display: flex;
    align-items: center;
    max-width: 584px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    padding: 0 14px;
    height: 46px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ai-google-search-box:hover,
.ai-google-search-box:focus-within {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-color: rgba(223, 225, 229, 0);
}

/* Search Input */
.ai-google-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 10px 8px !important;
    font-size: 16px !important;
    line-height: 24px;
    color: #202124;
    box-shadow: none !important;
    outline: none !important;
}

.ai-google-input::placeholder {
    color: #9aa0a6;
}

/* Icons */
.ai-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 4px;
}

.ai-search-icon-left {
    cursor: default;
}

.ai-search-icons-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-search-icon svg {
    display: block;
}

.ai-image-search-btn,
.ai-voice-search-btn {
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.ai-image-search-btn:hover,
.ai-voice-search-btn:hover {
    background-color: rgba(60, 64, 67, 0.08);
}

/* Vertical Divider */
.ai-search-divider-vertical {
    width: 1px;
    height: 28px;
    background: #dadce0;
    margin: 0 8px;
}

/* Search Buttons */
.ai-search-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.ai-search-buttons .ai-search-btn {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    background: #f8f9fa;
    border: 1px solid #f8f9fa;
    color: #3c4043;
    transition: all 0.2s ease;
}

.ai-search-buttons .ai-search-btn:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background: #f8f9fa;
    border-color: #dadce0;
}

/* Image Search Popup */
.ai-image-search-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ai-image-popup-content {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 
                0 9px 46px 8px rgba(0,0,0,0.12), 
                0 11px 15px -7px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { 
        opacity: 0; 
        transform: translateY(20px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

.ai-image-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #e8eaed;
}

.ai-image-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #202124;
}

.ai-image-popup-close {
    font-size: 24px;
    color: #5f6368;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.ai-image-popup-close:hover {
    background-color: rgba(60, 64, 67, 0.08);
}

.ai-image-popup-body {
    padding: 24px;
}

/* Image Tabs */
.ai-image-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e8eaed;
}

.ai-image-tab {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #5f6368;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.ai-image-tab:hover {
    color: #1a73e8;
}

.ai-image-tab.active {
    color: #1a73e8;
}

.ai-image-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #1a73e8;
    border-radius: 3px 3px 0 0;
}

/* Tab Content */
.ai-image-tab-content {
    display: none;
}

.ai-image-tab-content.active {
    display: block;
}

/* Dropzone in Popup */
.ai-image-popup-body .ai-image-dropzone {
    border: 2px dashed #dadce0;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafbfc;
}

.ai-image-popup-body .ai-image-dropzone:hover,
.ai-image-popup-body .ai-image-dropzone.dragover {
    border-color: #1a73e8;
    background: #e8f0fe;
}

.ai-image-popup-body .ai-dropzone-content svg {
    display: block;
    margin: 0 auto 16px;
}

.ai-image-popup-body .ai-dropzone-content p {
    font-size: 16px;
    color: #202124;
    margin: 0 0 8px;
}

.ai-image-popup-body .ai-dropzone-hint {
    display: block;
    font-size: 14px;
    color: #5f6368;
    margin-bottom: 16px;
}

.ai-upload-btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
}

/* URL Input */
.ai-url-input-wrapper {
    display: flex;
    gap: 12px;
}

.ai-url-input {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

.ai-url-input:focus {
    border-color: #1a73e8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.ai-url-search-btn {
    padding: 12px 20px;
    border-radius: 8px;
}

/* Image Preview Area */
.ai-image-preview-area {
    max-width: 300px;
    margin: 20px auto;
    text-align: center;
}

.ai-image-preview-content {
    position: relative;
    display: inline-block;
}

.ai-preview-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ai-preview-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: #ea4335;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.ai-preview-remove:hover {
    transform: scale(1.1);
}

.ai-preview-label {
    margin-top: 12px;
    font-size: 14px;
    color: #5f6368;
}

/* Responsive Adjustments for Google-style Search */
@media (max-width: 600px) {
    .ai-google-search-box {
        max-width: 100%;
        height: 48px;
        border-radius: 8px;
    }
    
    .ai-search-buttons {
        flex-direction: column;
    }
    
    .ai-search-buttons .ai-search-btn {
        width: 100%;
    }
    
    .ai-image-popup-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .ai-image-popup-body {
        padding: 16px;
    }
    
    .ai-url-input-wrapper {
        flex-direction: column;
    }
}

/* =====================================================
   Header Search Camera Button (Image Search)
   ===================================================== */

.ty-search-block {
    position: relative;
}

.ai-search-camera-btn {
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: color 0.2s;
}

.ai-search-camera-btn:hover {
    color: #333;
}

.ty-search-block__input,
.ty-search-block .ty-search-block__input {
    padding-right: 80px !important;
}

/* RTL (Arabic) support - camera icon on left */
[dir="rtl"] .ai-search-camera-btn,
html[dir="rtl"] .ai-search-camera-btn,
body.ty-direction-rtl .ai-search-camera-btn,
.ty-direction-rtl .ai-search-camera-btn {
    right: auto;
    left: 45px;
}

[dir="rtl"] .ty-search-block__input,
html[dir="rtl"] .ty-search-block__input,
body.ty-direction-rtl .ty-search-block__input,
.ty-direction-rtl .ty-search-block__input {
    padding-right: 15px !important;
    padding-left: 80px !important;
}

/* Header Popup Overlay */
.ai-search-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-search-popup-modal {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

.ai-search-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.ai-search-popup-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.ai-search-popup-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 0;
}

.ai-search-popup-close:hover {
    color: #333;
}

.ai-search-popup-body {
    padding: 20px;
}

.ai-search-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.ai-search-tab {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
}

.ai-search-tab.active {
    background: #4285f4;
    color: #fff;
    border-color: #4285f4;
}

.ai-search-dropzone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s;
}

.ai-search-dropzone.dragover {
    border-color: #4285f4;
    background: #f0f7ff;
}

.ai-search-dropzone svg {
    color: #999;
    margin-bottom: 15px;
}

.ai-search-dropzone p {
    color: #666;
    margin: 0 0 10px;
    font-size: 14px;
}

.ai-search-dropzone span {
    color: #999;
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}

.ai-search-file-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #4285f4;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.ai-search-file-btn:hover {
    background: #3367d6;
}

.ai-search-preview {
    position: relative;
    text-align: center;
}

.ai-search-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
}

.ai-search-remove-img {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.ai-search-url-input input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.ai-search-popup-footer {
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.ai-search-submit-btn {
    padding: 12px 30px;
    background: #4285f4;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.ai-search-submit-btn:hover {
    background: #3367d6;
}

.ai-search-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ai-search-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #4285f4;
    border-radius: 50%;
    animation: ai-spin 1s linear infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

.ai-search-loading p {
    margin-top: 15px;
    color: #666;
}

.ai-search-tab-content {
    display: none;
}

.ai-search-tab-content.active,
#ai_search_tab_upload,
#ai_search_tab_url.active {
    display: block;
}

#ai_search_tab_url {
    display: none;
}

/* ==========================================================================
   As-you-type suggestions

   The markup these rules dress is rendered by
   addons/ai_search/components/suggestions.tpl, not by JavaScript, so the
   thumbnail already carries width and height from common/image.tpl. What
   follows is presentation only: if this stylesheet never loaded, the dropdown
   would still be a readable list of correctly sized rows rather than a column
   of full-page photographs.

   Colours are declared as custom properties on the panel itself rather than
   hardcoded down the file, so a theme that wants the dropdown to match its
   own palette overrides a handful of values instead of hunting through
   thirty rules. Every rule that paints text then names its colour explicitly
   and is scoped to `.ai-suggest ...`; see the note above .ai-suggest__name
   for what inheriting instead cost.
   ========================================================================== */

/* .ty-search-block is position:relative in every CS-Cart theme, so the panel
   anchors under the search box without this add-on having to position the
   theme's own elements. */
.ai-suggest {
    /* One light palette, tuned as a set so the four kinds of text in a row
       read as a hierarchy rather than as four unrelated greys: the name is
       the darkest, the price is nearly as dark because it is the other thing
       being compared, and the code and the struck-out old price recede. */
    --ai-suggest-bg: #ffffff;
    --ai-suggest-fg: #202b3a;
    --ai-suggest-price: #16202e;
    --ai-suggest-muted: #8b95a3;
    --ai-suggest-line: #e9edf2;
    --ai-suggest-hover: #f4f7fb;
    --ai-suggest-accent: #1b74e4;
    --ai-suggest-radius: 12px;

    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 400;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--ai-suggest-bg);
    color: var(--ai-suggest-fg);
    border: 1px solid var(--ai-suggest-line);
    border-radius: var(--ai-suggest-radius);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
    text-align: start;

    /* The panel is inserted already-visible, so it would otherwise appear as
       a hard jump on the first keystroke and again on every replacement. */
    animation: ai-suggest-in .14s ease-out;
}

@keyframes ai-suggest-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Anyone who has asked their system not to animate gets no animation. */
@media (prefers-reduced-motion: reduce) {
    .ai-suggest {
        animation: none;
    }
}

.ai-suggest__scroll {
    max-height: 62vh;
    overflow-y: auto;
    /* Stops a flick at the end of the list from scrolling the page behind it. */
    overscroll-behavior: contain;
}

.ai-suggest__section + .ai-suggest__section {
    border-top: 1px solid var(--ai-suggest-line);
}

.ai-suggest .ai-suggest__section-title {
    padding: 10px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ai-suggest-muted);
}

.ai-suggest__list,
.ai-suggest__chips {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Categories, as chips ------------------------------------------------
   A category is a destination, not a product, so it reads better as a short
   tappable label than as another full-height row competing with the
   photographs below it. */

.ai-suggest__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 14px 12px;
}

.ai-suggest .ai-suggest__chip,
.ai-suggest .ai-suggest__chip:hover,
.ai-suggest .ai-suggest__chip:focus,
.ai-suggest .ai-suggest__chip:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 11px;
    border: 1px solid var(--ai-suggest-line);
    border-radius: 999px;
    background: var(--ai-suggest-bg);
    color: var(--ai-suggest-fg);
    font-size: 12.5px;
    line-height: 1.4;
    text-decoration: none;
}

.ai-suggest .ai-suggest__item--chip.is-active .ai-suggest__chip,
.ai-suggest .ai-suggest__chip:hover {
    border-color: var(--ai-suggest-accent);
    background: var(--ai-suggest-hover);
}

.ai-suggest .ai-suggest__chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-suggest .ai-suggest__chip-count {
    flex: 0 0 auto;
    color: var(--ai-suggest-muted);
    font-size: 11px;
}

/* --- Product rows -------------------------------------------------------- */

.ai-suggest__item + .ai-suggest__item {
    border-top: 1px solid var(--ai-suggest-line);
}

.ai-suggest .ai-suggest__link,
.ai-suggest .ai-suggest__link:hover,
.ai-suggest .ai-suggest__link:focus,
.ai-suggest .ai-suggest__link:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    color: var(--ai-suggest-fg);
    text-decoration: none;
}

.ai-suggest__item.is-active,
.ai-suggest__item:not(.ai-suggest__item--chip):hover {
    background: var(--ai-suggest-hover);
}

/* A fixed box the thumbnail sits inside. The image tag is CS-Cart's and
   already carries the right dimensions; this keeps every row the same height
   even when a product has no photograph at all. */
.ai-suggest__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--ai-suggest-line);
    border-radius: 8px;
    background: var(--ai-suggest-bg);
}

.ai-suggest__thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* min-width:0 lets a long product name ellipsis instead of forcing the row
   wider than the dropdown. */
.ai-suggest__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Every piece of text below states its own colour and is scoped to
   `.ai-suggest ...` rather than inheriting.
   
   Inheriting is what broke this. The name carried no colour of its own, so a
   theme rule on a span inside the search block won on specificity and painted
   it in the theme's dark text - invisible on a dark panel, and unpredictable
   on a light one. Only the <mark> survived, which is why a row whose name did
   not literally contain the query looked like it had no name at all. */
.ai-suggest .ai-suggest__name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ai-suggest-fg);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

/* The matched run. <mark>'s default is a yellow highlighter, which fights
   every theme it lands in; colour alone carries it, and the surrounding name
   is already semibold so the weight stays put - otherwise a fully matched
   name jumps in width as the shopper types. */
.ai-suggest .ai-suggest__mark {
    background: transparent;
    color: var(--ai-suggest-accent);
    font-weight: 600;
}

.ai-suggest .ai-suggest__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 11.5px;
    color: var(--ai-suggest-muted);
}

.ai-suggest .ai-suggest__code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ai-suggest-muted);
    /* A code is Latin text inside an Arabic row; without this the bidi
       algorithm reorders it and "L-201913" renders as "201913-L". */
    direction: ltr;
    unicode-bidi: isolate;
}

/* The one deliberately off-palette colour in the panel: sold out is a
   warning, and a warning that matches the surrounding greys is not one. */
.ai-suggest .ai-suggest__stock {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(192, 57, 43, .09);
    color: #c0392b;
    font-size: 11px;
    white-space: nowrap;
}

/* --- Behaviour badges ---------------------------------------------------- */

/* "Trending" and "most searched" are claims about other shoppers, so they sit
   apart from the product's own facts: tinted where the code and price are
   plain, and small enough that a row without one does not look unfinished.
   Only ever one per row - see the template for why. */
.ai-suggest .ai-suggest__badge {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.ai-suggest .ai-suggest__badge--trending {
    background: rgba(217, 119, 6, .12);
    color: #b45309;
}

.ai-suggest .ai-suggest__badge--searched {
    background: rgba(27, 116, 228, .1);
    color: var(--ai-suggest-accent);
}

/* Sold out is signalled by the badge, not by fading the whole row - a greyed
   row reads as disabled, and this one is still a working link. Only the
   photograph is muted, which is enough to scan past. */
.ai-suggest__item.is-sold-out .ai-suggest__thumb img {
    opacity: .55;
}

.ai-suggest__prices {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: end;
}

/* .ty-price-num is the theme's own class and it carries a colour, so this
   has to outrank it rather than sit beside it. */
.ai-suggest .ai-suggest__price {
    color: var(--ai-suggest-price);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ai-suggest .ai-suggest__price--ask {
    color: var(--ai-suggest-muted);
    font-size: 12px;
    font-weight: 600;
}

.ai-suggest .ai-suggest__old-price {
    color: var(--ai-suggest-muted);
    font-size: 11.5px;
    font-weight: 400;
    text-decoration: line-through;
    white-space: nowrap;
}

/* --- Empty state --------------------------------------------------------- */

.ai-suggest .ai-suggest__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 14px;
    color: var(--ai-suggest-muted);
    font-size: 13px;
}

.ai-suggest .ai-suggest__empty-icon {
    flex: 0 0 auto;
    opacity: .7;
}

/* --- Footer -------------------------------------------------------------- */

.ai-suggest__footer {
    border-top: 1px solid var(--ai-suggest-line);
    background: var(--ai-suggest-hover);
}

.ai-suggest .ai-suggest__all,
.ai-suggest .ai-suggest__all:hover,
.ai-suggest .ai-suggest__all:focus,
.ai-suggest .ai-suggest__all:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ai-suggest-accent);
    text-decoration: none;
}

.ai-suggest .ai-suggest__all:hover {
    text-decoration: underline;
}

.ai-suggest .ai-suggest__all-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ai-suggest-accent);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    /* "+52" is Latin punctuation plus digits in an Arabic line; isolating it
       keeps the plus sign on the left of the number instead of being flipped
       to the right by the surrounding right-to-left run. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- Loading ------------------------------------------------------------- */

/* Set by ai_search_suggest.js on the container while a request is in flight.
   A bar rather than a spinner: the panel below it is still the previous
   answer and remains usable, which a spinner over the whole box would deny. */
.ai-suggest-loading {
    position: relative;
}

.ai-suggest-loading::after {
    content: "";
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    height: 2px;
    z-index: 401;
    border-radius: 2px;
    /* The accent repeated as a literal rather than read from the token.
       This rule sits on .ty-search-block - an ANCESTOR of the panel, not a
       descendant - and custom properties only inherit downwards, so
       var(--ai-suggest-accent) would resolve to nothing here. */
    background: linear-gradient(90deg, transparent, #1b74e4, transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: ai-suggest-bar 1s linear infinite;
}

@keyframes ai-suggest-bar {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-suggest-loading::after {
        animation: none;
        background-position: 0 0;
        background-size: 100% 100%;
        opacity: .4;
    }
}

/* --- Direction ----------------------------------------------------------- */

/* The layout is flex and uses logical properties (start/end), so nothing
   needs mirroring by hand. What does need saying is the gradient direction:
   `90deg` is a physical angle and does not flip with the document. */
[dir="rtl"] .ai-suggest-loading::after {
    animation-direction: reverse;
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 767px) {
    .ai-suggest {
        --ai-suggest-radius: 10px;
    }

    .ai-suggest__scroll {
        max-height: 56vh;
    }

    .ai-suggest__thumb {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .ai-suggest__link {
        gap: 10px;
        padding: 8px 12px;
    }

    /* Below this width a price column and a name column cannot both survive.
       The price is the shorter string, so it keeps its place and the name
       gets whatever is left. */
    .ai-suggest__name {
        font-size: 13px;
    }
}

/* --- Why there is no dark-mode block here -------------------------------- */

/* There used to be a `prefers-color-scheme: dark` block that repainted the
   panel dark. It was wrong: that media query reports the VISITOR'S OPERATING
   SYSTEM, not the storefront. The storefront is light for everybody, so a
   shopper whose laptop was set to dark mode got a black dropdown hanging off
   a white page - and, worse, any product name the query did not literally
   appear in was drawn in the theme's own dark text on that black panel and
   simply could not be read.

   The dropdown follows the page it belongs to. If this theme ever gains a
   real dark mode, the place to hook it is the token block at the top of this
   section, keyed on whatever class that mode sets on <html> - never on the
   visitor's OS preference. */

/* --- Coexisting with another live search --------------------------------- */

/* Set on <html> by ai_search_suggest.js when this add-on has taken over the
   dropdown. Cart-Power's cp_live_search re-shows its own panel from a click
   handler on the search input, so hiding that panel from script would only
   last until the next click - the rule has to outrank it, not race it.
   Its requests are stopped separately; this is only about what is drawn. */
.ai-suggest-owns-search .live-search-box {
    display: none !important;
}