/**
 * 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
 */

/* ==========================================================================
   Clarity parts of the settings forms and the Blocks section (wave 3):
   the "What this is for / What to do here" lines of a section header, the
   one-line description under each label, the collapsed "Advanced" group,
   the grouped fields of a block's editor, the blocks table (page sketch,
   strategy line, status, impressions), the live preview and the theme
   frame of the side panel, the tabs of the style editor, and the product
   filter of the product pairs. Scoped to .psairec-ui.
   ========================================================================== */

:is(.psairec-ui, #psairec-ui) .psairec-intro {
    display: grid;
    gap: 4px;
    margin: 6px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--psairec-brand, #4f46e5);
    border-radius: 0 8px 8px 0;
    background: var(--psairec-brand-tint, #eef2ff);
}

:is(.psairec-ui, #psairec-ui) .psairec-intro p {
    margin: 0;
    color: var(--psairec-ink-2, #374151);
    font-size: 13.5px;
    line-height: 1.45;
}

:is(.psairec-ui, #psairec-ui) .psairec-intro b {
    color: var(--psairec-ink, #1f2937);
}

/* ---- the one-line description under a label -------------------------------------------- */

:is(.psairec-ui, #psairec-ui) p.psairec-field-desc {
    flex-basis: 100%;
    width: 100%;
    margin: 2px 0 0;
    color: var(--psairec-muted, #6b7280);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
}

:is(.psairec-ui, #psairec-ui) .psairec-field-label {
    flex-wrap: wrap;
}

/* ---- the collapsed "Advanced" group ---------------------------------------------------- */

:is(.psairec-ui, #psairec-ui) details.psairec-advanced {
    margin: 16px 0 0;
    border: 1px solid var(--psairec-line, #e5e7eb);
    border-radius: 10px;
    background: var(--psairec-foot, #fafbfd);
}

:is(.psairec-ui, #psairec-ui) .psairec-advanced-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 14px;
    color: var(--psairec-ink, #1f2937);
    font-weight: 700;
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) .psairec-advanced-summary .psairec-hint {
    font-weight: 400;
}

:is(.psairec-ui, #psairec-ui) .psairec-advanced-summary:focus-visible {
    outline: 2px solid var(--psairec-brand, #4f46e5);
    outline-offset: 2px;
}

:is(.psairec-ui, #psairec-ui) .psairec-advanced-body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--psairec-line, #e5e7eb);
}

/* ---- a block's editor: grouped fields -------------------------------------------------- */

:is(.psairec-ui, #psairec-ui) fieldset.psairec-editor-group {
    min-width: 0;
    margin: 0 0 16px;
    padding: 12px 16px 14px;
    border: 1px solid var(--psairec-line, #e5e7eb);
    border-radius: 10px;
    background: #fff;
}

:is(.psairec-ui, #psairec-ui) legend.psairec-editor-legend {
    width: auto;
    margin: 0;
    padding: 0 6px;
    border: 0;
    color: var(--psairec-ink, #1f2937);
    font-size: 14px;
    font-weight: 700;
}

/* ---- the blocks table ------------------------------------------------------------------ */

:is(.psairec-ui, #psairec-ui) .psairec-prow-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

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

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-strategy small,
:is(.psairec-ui, #psairec-ui) .psairec-ptable td small {
    display: block;
    color: var(--psairec-muted, #6b7280);
    font-size: 12px;
    line-height: 1.35;
}

/* A sketch of the page with the block's place in it. */
:is(.psairec-ui, #psairec-ui) .psairec-pos {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 26px;
    height: 32px;
    margin-top: 2px;
    border: 1.5px solid var(--psairec-line-2, #d1d5db);
    border-radius: 4px;
    background: #fff;
}

:is(.psairec-ui, #psairec-ui) .psairec-pos-bar {
    position: absolute;
    top: 3px;
    right: 3px;
    left: 3px;
    height: 3px;
    border-radius: 1px;
    background: var(--psairec-line-2, #d1d5db);
}

:is(.psairec-ui, #psairec-ui) .psairec-pos-spot {
    position: absolute;
    right: 3px;
    bottom: 3px;
    left: 3px;
    height: 7px;
    border-radius: 2px;
    background: var(--psairec-brand, #4f46e5);
}

:is(.psairec-ui, #psairec-ui) :is(.psairec-pos-home, .psairec-pos-order_confirmation, .psairec-pos-not_found) .psairec-pos-spot {
    bottom: 11px;
}

:is(.psairec-ui, #psairec-ui) .psairec-pos-product_viewed .psairec-pos-spot {
    bottom: 3px;
    height: 5px;
    box-shadow: 0 -7px 0 var(--psairec-brand-line, #c7d2fe);
}

:is(.psairec-ui, #psairec-ui) .psairec-pos-product_side .psairec-pos-spot {
    top: 9px;
    bottom: auto;
    left: 13px;
    height: 8px;
}

:is(.psairec-ui, #psairec-ui) .psairec-pos-cart_modal .psairec-pos-spot {
    top: 10px;
    right: 5px;
    bottom: 8px;
    left: 5px;
    height: auto;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1.5px var(--psairec-brand, #4f46e5);
}

:is(.psairec-ui, #psairec-ui) :is(.psairec-pos-cart_sidebar, .psairec-pos-right_column) .psairec-pos-spot {
    top: 9px;
    left: 15px;
    height: auto;
}

:is(.psairec-ui, #psairec-ui) .psairec-pos-left_column .psairec-pos-spot {
    top: 9px;
    right: 15px;
    height: auto;
}

:is(.psairec-ui, #psairec-ui) .psairec-prow.is-off .psairec-pos-spot {
    background: var(--psairec-line-2, #d1d5db);
    box-shadow: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-pstatus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}

:is(.psairec-ui, #psairec-ui) .psairec-pstatus-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--psairec-soft, #f1f5f9);
    color: var(--psairec-muted, #6b7280);
    font-size: 13px;
    line-height: 1;
}

:is(.psairec-ui, #psairec-ui) .psairec-pstatus.is-ok {
    color: var(--psairec-success, #15803d);
}

:is(.psairec-ui, #psairec-ui) .psairec-pstatus.is-ok .psairec-pstatus-icon {
    background: var(--psairec-success-tint, #e7f6ec);
    color: var(--psairec-success, #15803d);
}

:is(.psairec-ui, #psairec-ui) .psairec-pstatus.is-warn {
    color: var(--psairec-warning, #b45309);
}

:is(.psairec-ui, #psairec-ui) .psairec-pstatus.is-warn .psairec-pstatus-icon {
    background: var(--psairec-warning-tint, #fef3e2);
    color: var(--psairec-warning, #b45309);
}

:is(.psairec-ui, #psairec-ui) .psairec-pstatus.is-fail {
    color: var(--psairec-danger, #b91c1c);
}

:is(.psairec-ui, #psairec-ui) .psairec-pstatus.is-fail .psairec-pstatus-icon {
    background: var(--psairec-danger-tint, #fdecec);
    color: var(--psairec-danger, #b91c1c);
}

:is(.psairec-ui, #psairec-ui) .psairec-pstatus:is(.is-off, .is-unknown) {
    color: var(--psairec-muted, #6b7280);
    font-weight: 400;
}

/* ---- the live preview and the theme frame of the side panel --------------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-live-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    margin-bottom: 8px;
}

:is(.psairec-ui, #psairec-ui) p.psairec-live-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-head .psairec-hint {
    margin: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-pickers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 16px;
    margin-bottom: 8px;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-picker > label {
    display: block;
    margin: 0 0 4px;
    font-weight: 600;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-picker .psairec-hint {
    margin: 4px 0 0;
    font-size: 12px;
}

:is(.psairec-ui, #psairec-ui) .psairec-live .psairec-alert {
    margin: 6px 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-cards .psairec-cards {
    display: flex;
    gap: 10px;
    margin: 8px 0 0;
    padding: 2px 2px 8px;
    overflow-x: auto;
    list-style: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-cards .psairec-pcard {
    flex: 0 0 180px;
    margin: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-theme-panel .psairec-frame {
    margin-top: 10px;
}

/* The block itself, rendered by the shop in a frame fitted to its height (scaled down on wide panels). */
:is(.psairec-ui, #psairec-ui) .psairec-live-langs:empty {
    display: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-langs .psairec-lang-tabs {
    margin: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-block {
    position: relative;
    margin: 0 0 8px;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-viewport {
    position: relative;
    min-height: 48px;
    overflow: hidden;
    border: 1px solid var(--psairec-line, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-viewport iframe {
    display: block;
    max-width: none;
    border: 0;
    transition: opacity .15s ease;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-block.is-loading .psairec-live-viewport iframe {
    opacity: .45;
}

:is(.psairec-ui, #psairec-ui) p.psairec-live-status {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--psairec-line, #e5e7eb);
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 8px rgba(31, 41, 55, .08);
    font-size: 12px;
    font-weight: 600;
    color: var(--psairec-muted, #6b7280);
}

:is(.psairec-ui, #psairec-ui) .psairec-live-block.is-failed p.psairec-live-status {
    position: static;
    padding: 8px 12px;
    border-color: var(--psairec-warning-line, #f5d9a8);
    border-radius: 8px;
    background: var(--psairec-warning-tint, #fef3e2);
    box-shadow: none;
    color: var(--psairec-warning, #b45309);
}

/* A block still taller than the strip at a readable scale (a grid of several rows): its top part fades
   out under "Show the whole block"; shown whole, the strip may grow and the button says "Show less". */
:is(.psairec-ui, #psairec-ui) .psairec-live-block.is-capped .psairec-live-viewport::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 72px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 80%);
    pointer-events: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-block .psairec-live-more {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(31, 41, 55, .18);
    transform: translateX(-50%);
}

:is(.psairec-ui, #psairec-ui) .psairec-live-block.is-expanded .psairec-live-more {
    position: static;
    display: flex;
    margin: 8px auto 0;
    box-shadow: none;
    transform: none;
}

/* (Above the phones' 60vh of an opened preview.) */
:is(.psairec-ui, #psairec-ui) .psairec-drawer-src .psairec-drawer .psairec-drawer-top.is-live-expanded {
    max-height: 82vh;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-why {
    margin: 4px 0 10px;
}

:is(.psairec-ui, #psairec-ui) button.psairec-live-why-toggle {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--psairec-brand, #4f46e5);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) button.psairec-live-why-toggle::after {
    content: " \25BE";
    text-decoration: none;
}

:is(.psairec-ui, #psairec-ui) button.psairec-live-why-toggle[aria-expanded="true"]::after {
    content: " \25B4";
}

/* ---- the strategy chooser of the editor: radio cards ---------------------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-field-strategy > .psairec-field-label,
:is(.psairec-ui, #psairec-ui) .psairec-field-strategy > .psairec-field-control {
    flex-basis: 100%;
}

:is(.psairec-ui, #psairec-ui) .psairec-schooser {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "radio name info" ". tag tag" ". why why" ". now now";
    align-content: start;
    align-items: start;
    gap: 2px 8px;
    padding: 10px 12px;
    border: 1px solid var(--psairec-line, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice:hover {
    border-color: var(--psairec-brand-line, #c7d2fe);
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice.is-selected {
    border-color: var(--psairec-brand, #4f46e5);
    background: var(--psairec-brand-tint, #eef2ff);
    box-shadow: 0 0 0 1px var(--psairec-brand, #4f46e5);
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice:has(.psairec-schoice-input:focus-visible) {
    outline: 2px solid var(--psairec-brand, #4f46e5);
    outline-offset: 2px;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice.is-disabled {
    border-style: dashed;
    background: var(--psairec-soft, #f1f5f9);
}

:is(.psairec-ui, #psairec-ui) input.psairec-schoice-input {
    position: relative;
    z-index: 1;
    grid-area: radio;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--psairec-brand, #4f46e5);
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) label.psairec-schoice-name {
    grid-area: name;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--psairec-ink, #1f2937);
    text-align: left;
    cursor: pointer;
}

/* The whole card selects its strategy; the (i) stays its own button. */
:is(.psairec-ui, #psairec-ui) label.psairec-schoice-name::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice.is-disabled :is(label.psairec-schoice-name, input.psairec-schoice-input) {
    color: var(--psairec-muted, #6b7280);
    cursor: not-allowed;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice .psairec-info-btn {
    position: relative;
    z-index: 1;
    grid-area: info;
    margin: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice-tag {
    grid-area: tag;
    font-size: 12px;
    line-height: 1.4;
    color: var(--psairec-muted, #6b7280);
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice-why {
    grid-area: why;
    font-size: 12px;
    line-height: 1.4;
    color: var(--psairec-warning, #b45309);
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice.is-disabled .psairec-schoice-why {
    color: var(--psairec-muted, #6b7280);
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice-now {
    grid-area: now;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice-now:has(> :not(:empty)) {
    margin-top: 4px;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice-thumbs {
    display: flex;
    gap: 4px;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice-thumbs:empty,
:is(.psairec-ui, #psairec-ui) .psairec-schoice-count:empty,
:is(.psairec-ui, #psairec-ui) .psairec-schoice-diff:empty {
    display: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice-thumb {
    display: block;
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--psairec-line, #e5e7eb);
    border-radius: 6px;
    background: var(--psairec-soft, #f1f5f9);
    object-fit: cover;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice-count {
    font-size: 12px;
    color: var(--psairec-muted, #6b7280);
}

/* "5 of 8 products would change": its line is kept, shown on hover and focus (always on touch screens). */
:is(.psairec-ui, #psairec-ui) .psairec-schoice-diff {
    flex-basis: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--psairec-brand-dark, #4338ca);
    visibility: hidden;
}

:is(.psairec-ui, #psairec-ui) .psairec-schoice:is(:hover, :focus-within) .psairec-schoice-diff {
    visibility: visible;
}

@media (hover: none) {
    :is(.psairec-ui, #psairec-ui) .psairec-schoice-diff {
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.psairec-ui, #psairec-ui) .psairec-schoice,
    :is(.psairec-ui, #psairec-ui) .psairec-live-viewport iframe {
        transition: none;
    }
}

/* ---- the style editor: tabs, preview on top in the side panel --------------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-style-tabs {
    margin-bottom: 14px;
}

:is(.psairec-ui, #psairec-ui) .psairec-style-module-note {
    margin: 0 0 12px;
}

:is(.psairec-ui, #psairec-ui) .psairec-drawer .psairec-style-editor {
    display: block;
}

:is(.psairec-ui, #psairec-ui) .psairec-drawer-top .psairec-style-preview {
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-drawer .psairec-style-group + .psairec-style-group {
    margin-top: 14px;
}

/* ---- product pairs: the product filter ------------------------------------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-pairs-picker {
    flex: 1 1 320px;
    min-width: 220px;
}

:is(.psairec-ui, #psairec-ui) .psairec-pairs-picker .psairec-chips {
    margin-bottom: 6px;
}

:is(.psairec-ui, #psairec-ui) .psairec-live-toggle {
    display: none;
}

@media (max-width: 700px) {
    :is(.psairec-ui, #psairec-ui) .psairec-live-cards .psairec-pcard {
        flex-basis: 150px;
    }

    :is(.psairec-ui, #psairec-ui) fieldset.psairec-editor-group {
        padding: 10px 12px 12px;
    }
}

/* Phones: the live preview closes to one line so the settings stay in view; the toggle opens it. */
@media (max-width: 600px) {
    :is(.psairec-ui, #psairec-ui) .psairec-live-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-live-head {
        align-items: center;
        margin-bottom: 0;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-live-head .psairec-hint,
    :is(.psairec-ui, #psairec-ui) .psairec-live:not(.is-open) .psairec-live-body {
        display: none;
    }

    /* Opened: the product cards first, the product and customer searches under them. */
    :is(.psairec-ui, #psairec-ui) .psairec-live.is-open .psairec-live-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-live-body > .psairec-live-pickers {
        order: 1;
        margin-bottom: 0;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-drawer-top:has(.psairec-live.is-open) {
        max-height: 60vh;
    }

    /* Compact cards (image beside the text) need this width for a product name; the row scrolls sideways. */
    :is(.psairec-ui, #psairec-ui) .psairec-live-cards .psairec-pcard {
        flex-basis: 230px;
    }
}