/**
 * AI Product Recommender
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Commercial License
 * you can't distribute, modify or sell this code
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file
 * If you need help please contact leo@prestachamps.com
 *
 * @author    PrestaChamps
 * @copyright PrestaChamps
 * @license   commercial
 */

/* ==========================================================================
   The search pickers (views/templates/admin/_shell/picker.tpl,
   views/js/admin/psairec-pickers.js): chips of the chosen items, a search
   box (ARIA combobox) and its list of suggestions, the "Browse" tree of the
   category pickers. Scoped to .psairec-ui; the ":is(.psairec-ui,
   #psairec-ui)" tier beats the Bootstrap inputs of the back office.
   ========================================================================== */

:is(.psairec-ui, #psairec-ui) .psairec-pick {
    position: relative;
    max-width: 640px;
}

:is(.psairec-ui, #psairec-ui) .psairec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-chips li + li {
    margin-top: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 36px;
    padding: 3px 3px 3px 8px;
    border: 1px solid var(--psairec-brand-line, #c7d2fe);
    border-radius: 8px;
    background: var(--psairec-brand-tint, #eef2ff);
    color: var(--psairec-ink, #1f2937);
    line-height: 1.25;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip.is-off {
    border-style: dashed;
    border-color: var(--psairec-line-2, #d1d5db);
    background: var(--psairec-soft, #f1f5f9);
    color: var(--psairec-muted, #6b7280);
}

:is(.psairec-ui, #psairec-ui) :is(.psairec-chip-img, .psairec-pick-img) {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #fff;
    object-fit: contain;
}

:is(.psairec-ui, #psairec-ui) :is(.psairec-chip-img, .psairec-pick-img).is-empty {
    display: inline-block;
    background: var(--psairec-soft, #f1f5f9);
    border: 1px dashed var(--psairec-line-2, #d1d5db);
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-text,
:is(.psairec-ui, #psairec-ui) .psairec-pick-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-label,
:is(.psairec-ui, #psairec-ui) .psairec-pick-label {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-sub,
:is(.psairec-ui, #psairec-ui) .psairec-pick-sub {
    overflow: hidden;
    color: var(--psairec-muted, #6b7280);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-remove {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--psairec-muted, #6b7280);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-remove:hover,
:is(.psairec-ui, #psairec-ui) .psairec-chip-remove:focus {
    background: var(--psairec-danger-tint, #fdecec);
    color: var(--psairec-danger, #b91c1c);
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-remove:focus-visible,
:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-toggle:focus-visible,
:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-pick:focus-visible {
    outline: 2px solid var(--psairec-brand, #4f46e5);
    outline-offset: 1px;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-box {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

:is(.psairec-ui, #psairec-ui) input.psairec-pick-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 38px;
    padding: 7px 10px 7px 34px;
    border: 1px solid var(--psairec-line-2, #d1d5db);
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center;
    box-shadow: none;
    color: var(--psairec-ink, #1f2937);
    font-size: 14px;
}

:is(.psairec-ui, #psairec-ui) input.psairec-pick-input:focus {
    border-color: var(--psairec-brand, #4f46e5);
    outline: 0;
    box-shadow: 0 0 0 3px var(--psairec-brand-ring, rgba(79, 70, 229, .18));
}

:is(.psairec-ui, #psairec-ui) .psairec-pick.is-invalid input.psairec-pick-input {
    border-color: var(--psairec-danger, #b91c1c);
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-browse {
    flex: 0 0 auto;
    min-height: 38px;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 40;
    max-height: 340px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid var(--psairec-line-2, #d1d5db);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
    list-style: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-list li + li {
    margin-top: 2px;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-opt .psairec-pick-img {
    width: 40px;
    height: 40px;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-opt .psairec-pick-main {
    flex: 1 1 auto;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-opt:hover,
:is(.psairec-ui, #psairec-ui) .psairec-pick-opt.is-active {
    background: var(--psairec-brand-tint, #eef2ff);
    box-shadow: inset 0 0 0 1px var(--psairec-brand-line, #c7d2fe);
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-opt.is-chosen {
    cursor: default;
    opacity: .65;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-meta {
    font-weight: 600;
    white-space: nowrap;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--psairec-success-tint, #e7f6ec);
    color: var(--psairec-success, #15803d);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-badge.is-out {
    background: var(--psairec-danger-tint, #fdecec);
    color: var(--psairec-danger, #b91c1c);
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-badge.is-chosen {
    background: var(--psairec-soft, #f1f5f9);
    color: var(--psairec-muted, #6b7280);
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-none {
    padding: 8px 10px;
    color: var(--psairec-muted, #6b7280);
}

:is(.psairec-ui, #psairec-ui) p.psairec-pick-msg {
    margin: 6px 0 0;
    color: var(--psairec-danger, #b91c1c);
    font-size: 13px;
    font-weight: 600;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree {
    max-height: 320px;
    margin-top: 8px;
    padding: 6px 8px;
    overflow-y: auto;
    border: 1px solid var(--psairec-line, #e5e7eb);
    border-radius: 8px;
    background: var(--psairec-foot, #fafbfd);
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-sub .psairec-pick-tree-list {
    padding-left: 22px;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-list li + li {
    margin-top: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-toggle,
:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-spacer {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--psairec-muted, #6b7280);
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-toggle:hover {
    background: var(--psairec-soft, #f1f5f9);
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-toggle[aria-expanded="true"] span[aria-hidden] {
    display: inline-block;
    transform: rotate(90deg);
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-pick {
    margin: 0;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--psairec-ink, #1f2937);
    text-align: left;
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-pick:hover {
    border-color: var(--psairec-line-2, #d1d5db);
    background: #fff;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-pick[aria-pressed="true"] {
    border-color: var(--psairec-brand-line, #c7d2fe);
    background: var(--psairec-brand-tint, #eef2ff);
    font-weight: 600;
}

:is(.psairec-ui, #psairec-ui) .psairec-pick-tree-pick[aria-pressed="true"]::before {
    content: "\2713\00a0";
    color: var(--psairec-brand, #4f46e5);
}

@media (max-width: 600px) {
    :is(.psairec-ui, #psairec-ui) .psairec-pick-opt .psairec-pick-side {
        display: none;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-pick-box {
        flex-wrap: wrap;
    }
}