/*
 * Datalatex_Cmssearch suggest.css — 4-tab UI
 * Colors via CSS vars from admin config (set in init.phtml after this file loads).
 */

/* ── Dropdown — appended to body, positioned via JS (fixed) ── */
#dlx-suggest-dropdown {
    position: fixed;
    z-index: 999999;
    background: #fff;
    border: 1px solid #d0d5e8;
    border-top: 3px solid var(--dlx-heading-bg, #124791);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
    font-family: inherit;
    font-size: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 550px;
}

/* ── Header: tabs + close ── */
.dlx-header {
    display: flex;
    align-items: stretch;
    background: #f4f6fb;
    border-bottom: 1px solid #e2e6f0;
    gap: 0;
}

.dlx-tabs {
    display: flex;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.dlx-tabs::-webkit-scrollbar { display: none; }

.dlx-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
    outline: none;
}
.dlx-tab:hover {
    color: var(--dlx-heading-bg, #124791);
}
.dlx-tab-active {
    color: var(--dlx-heading-bg, #124791);
    border-bottom-color: var(--dlx-heading-bg, #124791);
    background: #fff;
}
/* dlx-tab-empty removed — empty tabs are now hidden not disabled */
/* dlx-tab-count removed */

/* Close button */
.dlx-close {
    flex-shrink: 0;
    width: 38px;
    background: #c9a84c66;
    border: none;
    border-left: 1px solid #e2e6f0;
    font-size: 24px;
    line-height: 1;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
    outline: none;
}
.dlx-close:hover {
    color: #ef4444;
    background: #fff0f0;
}

/* ── Body — flex-grows, scrolls, footer stays outside ── */
.dlx-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;  /* critical for flex overflow to work */
}

/* No max-height needed — parent dropdown controls total height */
.dlx-body-products,
.dlx-body-categories,
.dlx-body-cms,
.dlx-body-terms,
.dlx-body-empty { flex: 1; min-height: 0; overflow-y: auto; }

/* ── Product list — 2x2 grid ── */
.dlx-prod-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.dlx-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #1a1a2e;
    border-bottom: 1px solid #f0f2f8;
    transition: background .1s;
    cursor: pointer;
    outline: none;
}
.dlx-product-item:last-child,
.dlx-product-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.dlx-product-item:nth-child(odd) { border-right: 1px solid #f0f2f8; }
.dlx-product-item:hover,
.dlx-product-item.dlx-active { background: var(--dlx-hover-bg, #eef2fb); }

/* Product image */
.dlx-prod-img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
}
.dlx-prod-img-wrap img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border: 1px solid #eaecf0;
    border-radius: 6px;
    background: #fafafa;
    display: block;
}
.dlx-oos {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: rgba(210,50,0,.88);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    padding: 2px 0;
    text-transform: uppercase;
    border-radius: 5px 5px 0 0;
    z-index: 1;
}

/* Product info */
.dlx-prod-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.dlx-prod-name {
    font-weight: 600;
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dlx-prod-name strong  { color: var(--dlx-highlight, #124791); }
.dlx-prod-sku          { font-size: 11px; color: #9aa0b0; }
.dlx-prod-price        { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.dlx-price             { color: var(--dlx-price, #cc0000); }
.dlx-sale-price        { color: var(--dlx-price, #cc0000); }
.dlx-old-price         { color: var(--dlx-old-price, #aaa); text-decoration: line-through; font-weight: 400; font-size: 12px; }
.dlx-from-label        { font-size: 11px; font-weight: 400; color: #888; }

/* ── Sticky footer — always visible at bottom ── */
.dlx-footer {
    flex-shrink: 0;
    border-top: 1px solid #e2e6f0;
    background: #fff;
}

/* View all products */
.dlx-view-all {
    display: block;
    text-align: center;
    padding: 12px 16px;
    background: var(--dlx-viewall-bg, #124791);
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: filter .15s;
}
.dlx-view-all:hover { filter: brightness(.88); }

/* ── List tabs (categories / pages / terms) ── */
.dlx-list { padding: 8px 0; }

.dlx-cat-item,
.dlx-page-item,
.dlx-term-item {
    display: block;
    padding: 10px 18px 10px 40px;
    color: #374151 !important;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #f0f2f8;
    transition: background .1s;
    cursor: pointer;
    outline: none;
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 16px 16px;
    line-height: 1.5;
}
.dlx-cat-item:last-child,
.dlx-page-item:last-child,
.dlx-term-item:last-child { border-bottom: none; }

.dlx-cat-item:hover,  .dlx-cat-item.dlx-active,
.dlx-page-item:hover, .dlx-page-item.dlx-active,
.dlx-term-item:hover, .dlx-term-item.dlx-active {
    background-color: var(--dlx-hover-bg, #eef2fb);
    color: var(--dlx-heading-bg, #124791);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 16px 16px;
}
.dlx-cat-item strong,
.dlx-page-item strong,
.dlx-term-item strong { color: var(--dlx-highlight, #124791); font-weight: 700; }

/* Icons as background-image on the element itself — no pseudo-element, no flex conflict */
.dlx-term-item {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.dlx-term-item:hover, .dlx-term-item.dlx-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23124791' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.dlx-cat-item {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}
.dlx-cat-item:hover, .dlx-cat-item.dlx-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23124791' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}
.dlx-page-item {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}
.dlx-page-item:hover, .dlx-page-item.dlx-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23124791' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}
.dlx-tab:hover{background: #ececec;}
.dlx-product-item:hover, .dlx-product-item.dlx-active, .dlx-cat-item:hover, .dlx-cat-item.dlx-, .dlx-page-item:hover, .dlx-page-item.dlx-active, .dlx-term-item:hover, .dlx-term-item.dlx-active{text-decoration: none}
/* View all pages — inline (inside list) */
.dlx-view-all-pages {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dlx-heading-bg, #124791);
    text-decoration: none;
    border-top: 1px solid #e2e6f0;
    transition: background .1s;
}
.dlx-view-all-pages:hover { background: #f0f4fb; text-decoration: underline; }

/* View all pages — footer variant (sticky) */
.dlx-view-all-footer {
    display: block;
    text-align: center;
    padding: 11px 16px;
    background: var(--dlx-viewall-bg, #124791);
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: filter .15s;
    border-top: none;
}
.dlx-view-all-footer:hover { background: var(--dlx-viewall-bg, #124791); filter: brightness(.88); }

/* ── No results / empty ── */
.dlx-no-results {
    padding: 24px 18px;
    color: #6b7280;
    font-size: 14px;
    text-align: center;
}

/* dlx-input-count removed */

/* ── Skeleton loader ── */
.dlx-skel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f8;
}
.dlx-skel-img {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
    background-size: 200% 100%;
    animation: dlx-shimmer 1.1s infinite linear;
}
.dlx-skel-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.dlx-skel-line {
    height: 11px;
    width: 80%;
    border-radius: 4px;
    background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
    background-size: 200% 100%;
    animation: dlx-shimmer 1.1s infinite linear;
}
.dlx-skel-short { width: 45%; }

@keyframes dlx-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Mobile ── */
@media (max-width: 768px) {

    /* Full width, flush to viewport edges */
    #dlx-suggest-dropdown {
        border-radius: 0;
        border-left: none;
        border-right: none;
        max-height: 80vh;
    }

    /* Tabs — smaller, scroll horizontally if needed */
    .dlx-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch;scrollbar-width: auto;}
    .dlx-tab  { padding: 9px 12px; font-size: 11px; white-space: nowrap; }

    /* Body — taller on mobile since no keyboard visible initially */
    .dlx-body,
    .dlx-body-products,
    .dlx-body-categories,
    .dlx-body-cms,
    .dlx-body-terms { max-height: 55vh; }

    /* Products — single column on mobile (no grid) */
    .dlx-prod-list {
        display: block;
    }
    .dlx-product-item {
        border-right: none !important;
        border-bottom: 1px solid #f0f2f8;
    }

    /* Smaller product image */
    .dlx-prod-img-wrap,
    .dlx-prod-img-wrap img {
        width: 56px;
        height: 56px;
    }

    /* Slightly smaller text */
    .dlx-prod-sku   { font-size: 10px; }

    /* List items — smaller padding */
    .dlx-cat-item,
    .dlx-page-item,
    .dlx-term-item {
        font-size: 13px;
        padding: 9px 16px 9px 38px;
        background-position: 12px center;
    }

    /* View all footer */
    .dlx-view-all,
    .dlx-view-all-footer { padding: 11px 16px; font-size: 11px; }

    /* Close button — slightly bigger tap target */
    .dlx-close { width: 44px; font-size: 22px; }
}

/* Extra small screens */
@media (max-width: 480px) {
    .dlx-tab { padding: 8px 10px; font-size: 10px; }
    .dlx-tab-count { padding: 1px 5px; font-size: 9px; }
    .dlx-prod-img-wrap,
    .dlx-prod-img-wrap img { width: 48px; height: 48px; }
    .dlx-product-item { gap: 9px; padding: 8px 12px; }
    .dlx-prod-name { font-size: 13px; }
}