/**
 * 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 sections of psairec-pages.js: Get started, Checklist and results,
   Placements (table, row editor, preview), Recommendation engine, Visitor
   tracking, Python service. Loaded after the kit (psairec-ui.css), same
   weight tiers, scoped to .psairec-ui.
   ========================================================================== */

/* ---- headings inside a card, grouped fields -------------------------------------------- */

/* Doubled scope: PrestaShop 8's #content.bootstrap h3:not(.modal-title) (negative margins, grey band) outranks one. */
:is(.psairec-ui, #psairec-ui):is(.psairec-ui, #psairec-ui) .psairec-subhead {
    height: auto;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--psairec-muted);
}

.psairec-ui .psairec-field-group + .psairec-field-group {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--psairec-line);
}

/* ---- Get started: the steps ------------------------------------------------------------ */

:is(.psairec-ui, #psairec-ui) .psairec-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

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

.psairec-ui .psairec-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--psairec-muted);
}

.psairec-ui .psairec-step-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border: 2px solid var(--psairec-line-2);
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: var(--psairec-muted);
}

.psairec-ui .psairec-step.is-ok .psairec-step-mark {
    border-color: var(--psairec-success);
    background: var(--psairec-success-tint);
    color: var(--psairec-success);
}

.psairec-ui .psairec-step.is-current {
    color: var(--psairec-ink);
}

.psairec-ui .psairec-step.is-current .psairec-step-mark {
    border-color: var(--psairec-brand);
    background: var(--psairec-brand);
    color: #fff;
}

.psairec-ui .psairec-step.is-locked {
    opacity: .6;
}

:is(.psairec-ui, #psairec-ui) .psairec-step-title {
    font-weight: 600;
}

:is(.psairec-ui, #psairec-ui) .psairec-step-panel {
    padding: 14px 16px;
    border: 1px solid var(--psairec-brand-line);
    border-radius: 8px;
    background: #fbfbff;
}

:is(.psairec-ui, #psairec-ui) .psairec-step-panel > * + * {
    margin-top: 10px;
}

:is(.psairec-ui, #psairec-ui) .psairec-step-panel h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.psairec-ui .psairec-setup-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.psairec-ui .psairec-setup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.psairec-ui .psairec-setup-group + .psairec-setup-group {
    margin-top: 14px;
}

/* ---- switches with a text, one per placement (setup step 2) ------------------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-toggle-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-toggle-list li + li {
    margin-top: 0;
}

.psairec-ui .psairec-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--psairec-line);
    border-radius: 8px;
    background: #fff;
}

.psairec-ui .psairec-toggle-row.is-off {
    background: var(--psairec-foot);
}

.psairec-ui .psairec-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 13px;
}

.psairec-ui .psairec-toggle-text small {
    font-size: 12px;
    color: var(--psairec-muted);
}

/* ---- Checklist: pass details, the in-place button's result, KPI help ----------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-checklist-text small.psairec-checklist-detail {
    color: var(--psairec-success);
}

:is(.psairec-ui, #psairec-ui) .psairec-checklist-result {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 12.5px;
}

.psairec-ui .psairec-kpi-share {
    position: relative;
}

:is(.psairec-ui, #psairec-ui) .psairec-kpi-share .psairec-help {
    position: absolute;
    top: 10px;
    right: 10px;
}

:is(.psairec-ui, #psairec-ui) .psairec-kpi-share .psairec-help-text {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
}

/* ---- the results chart (inline SVG) --------------------------------------------------------- */

.psairec-ui .psairec-chart-box {
    margin-top: 14px;
}

.psairec-ui .psairec-chart-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--psairec-line);
}

:is(.psairec-ui, #psairec-ui) .psairec-chart-tabs .psairec-tab small {
    margin-left: 4px;
    font-weight: 400;
    color: var(--psairec-muted);
}

:is(.psairec-ui, #psairec-ui) .psairec-chart-pane {
    margin: 10px 0 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-chart {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    overflow: visible;
}

.psairec-ui .psairec-chart-grid {
    stroke: var(--psairec-line);
    stroke-width: 1;
}

.psairec-ui .psairec-chart-axis {
    font-size: 11px;
    fill: var(--psairec-muted);
}

.psairec-ui .psairec-chart-area {
    fill: var(--psairec-brand-tint);
    stroke: none;
}

.psairec-ui .psairec-chart-line {
    fill: none;
    stroke: var(--psairec-brand);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.psairec-ui .psairec-chart-dot {
    fill: var(--psairec-brand);
    stroke: #fff;
    stroke-width: 2;
}

.psairec-ui .psairec-results .psairec-table-wrap {
    margin-top: 14px;
}

/* ---- Placements: the table grouped by page ------------------------------------------------------ */

:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-pgroup-head > th {
    padding: 12px 10px 6px;
    border: 0;
    border-bottom: 1px solid var(--psairec-line);
    background: var(--psairec-ground);
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    color: var(--psairec-muted);
}

.psairec-ui .psairec-pgroup-title {
    margin-right: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--psairec-ink);
}

.psairec-ui .psairec-pgroup-desc {
    font-size: 12.5px;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-switch {
    width: 1%;
    padding-right: 4px;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-name {
    min-width: 150px;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-prow > td {
    padding: 7px 8px;
    line-height: 1.35;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-name small {
    max-width: 320px;
}

/* The headers may wrap ("Seen / last 7 days"): the columns keep the width for the rows. */
:is(.psairec-ui, #psairec-ui) .psairec-ptable > thead > tr > th {
    white-space: normal;
}

/* Below 1600 px the sketch of the page gives its width to the name. */
@media (max-width: 1599px) {
    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-block > .psairec-pos {
        display: none;
    }
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable small.psairec-prow-warning {
    margin-top: 4px;
    color: var(--psairec-warning);
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-actions {
    white-space: nowrap;
    text-align: right;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-actions .psairec-btn + .psairec-btn {
    margin-left: 4px;
}

/* One short row per block: a name or strategy with its (i) on one line, one
   small line under it; the explanations are in the pop-ups. */
:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-line {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.35;
}

/* A 24 px target (WCAG 2.2, target size) that still looks like a small 19 px circle. */
:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-line .psairec-info-btn {
    width: 24px;
    height: 24px;
    margin: -4px -3px 0 0; /* the line keeps its 20 px; 3 px of space to the link under it */
    border: 0;
    background: radial-gradient(circle closest-side, var(--psairec-brand-tint) 0 8.5px, var(--psairec-brand-line) 8.5px 9.5px, transparent 10px);
    font-size: 11px;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-line .psairec-info-btn:is(:hover, :focus-visible) {
    background: radial-gradient(circle closest-side, var(--psairec-brand) 0 9.5px, transparent 10px);
    color: #fff;
}

/* The tagline takes two lines at most, so it is read whole (the pop-up has the rest). */
:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-strategy small {
    display: -webkit-box;
    min-width: 140px;
    max-width: 200px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

/* A long title takes two lines at most (the whole of it in its tooltip). */
:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-title-text {
    display: -webkit-box;
    min-width: 120px;
    max-width: 180px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-pstatus {
    align-items: flex-start;
    white-space: normal;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-pstatus-icon {
    flex: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-btn-icon {
    min-width: 30px;
    padding: 0 6px;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-btn-icon .material-icons {
    font-size: 18px;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-see {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 3px;
    min-height: 0;
    margin: 3px 0 0; /* 24 px of free space around it and the (i) above (WCAG 2.2 target size) */
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    color: var(--psairec-brand);
    white-space: nowrap;
    cursor: pointer;
}

/* The link under the name stays on one line (its whole text in its tooltip). */
:is(.psairec-ui, #psairec-ui) .psairec-ptable button.psairec-prow-see {
    display: block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A long name of a block or a strategy takes two lines at most (the whole name in its tooltip and pop-up). */
:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-line > b {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-see:hover,
:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-see:focus-visible {
    text-decoration: underline;
    color: var(--psairec-brand-dark);
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-lang-text:not([hidden]) {
    display: block;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-untranslated {
    margin-right: 4px;
    padding: 1px 6px;
    font-size: 11px;
    white-space: nowrap;
    cursor: help;
}

:is(.psairec-ui, #psairec-ui) .psairec-mini-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border: 1px solid var(--psairec-line);
    border-radius: 999px;
    background: var(--psairec-soft);
    font-size: 11px;
    line-height: 17px;
    color: var(--psairec-ink-2);
    white-space: nowrap;
}

:is(.psairec-ui, #psairec-ui) .psairec-mini-chip.is-warn {
    border-color: var(--psairec-warning-line);
    background: var(--psairec-warning-tint);
    color: var(--psairec-warning);
}

:is(.psairec-ui, #psairec-ui) .psairec-place-dialog code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--psairec-soft);
    font-size: 12.5px;
}

/* A block that is off: its texts in the muted grey on a lighter ground (still 4.8:1, WCAG AA; a faded row was
   2:1), its page sketch faded; its links and (i) keep their colour. */
:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-prow.is-off > td {
    background: var(--psairec-foot);
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-prow.is-off > td:not(.psairec-prow-switch):not(.psairec-prow-actions),
:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-prow.is-off :is(b, small, .psairec-prow-title-text) {
    color: var(--psairec-muted);
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-prow.is-off .psairec-pos {
    opacity: .55;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-prow.is-off > td {
    padding-top: 6px;
    padding-bottom: 6px;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-prow.is-off .psairec-prow-name small:not(.psairec-prow-warning) {
    display: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-prow.is-editing > td {
    background: var(--psairec-brand-tint);
}

/* ---- Placements: the row editor ---------------------------------------------------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-editor-row > td {
    padding: 0;
    background: #fbfbff;
}

:is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-editor-row:hover > td {
    background: #fbfbff;
}

.psairec-ui .psairec-row-form {
    padding: 12px 16px 14px;
    border-left: 3px solid var(--psairec-brand);
}

:is(.psairec-ui, #psairec-ui) .psairec-editor-title {
    margin: 0 0 6px;
    font-size: 14px;
}

.psairec-ui .psairec-editor-fields .psairec-field + .psairec-field {
    margin-top: 12px;
}

.psairec-ui .psairec-editor-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

/* ---- Preview -------------------------------------------------------------------------------------- */

.psairec-ui #psairec_preview_frame {
    margin-top: 14px;
}

/* ---- Recommendation engine: cron lines ------------------------------------------------------------ */

:is(.psairec-ui, #psairec-ui) .psairec-cron-line + .psairec-cron-line {
    margin-top: 12px;
}

:is(.psairec-ui, #psairec-ui) .psairec-cron-line > label {
    display: block;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--psairec-ink-2);
}

:is(.psairec-ui, #psairec-ui) .psairec-cron-last {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--psairec-muted);
}

.psairec-ui .psairec-cron-last.is-fresh .psairec-status-dot {
    background: var(--psairec-success);
}

/* ---- Visitor tracking: before and after consent --------------------------------------------------- */

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

/* ---- medium screens: the title under the block's name --------------------------------------------- */

/* The copy of the title under the name is for medium screens only (the Title column shows it elsewhere). */
:is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-name-title {
    display: none;
}

/* By the table's own width (container query on .psairec-table-wrap), not the window's: with PrestaShop's side menu
   open, a 1200-1439 px window leaves the table 626-792 px, too narrow for the Title column (852 px needed). */
@container (min-width: 520px) and (max-width: 859px) {
    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-title {
        display: none;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-name-title {
        display: block;
        margin-top: 2px;
        font-size: 12.5px;
        line-height: 1.35;
        color: var(--psairec-ink-2);
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-name-title .psairec-prow-title-text {
        display: -webkit-inline-box;
        min-width: 0;
        max-width: 100%;
        vertical-align: top;
        font-style: italic;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-name {
        min-width: 150px;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-actions .psairec-btn + .psairec-btn {
        margin: 4px 0 0;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-actions .psairec-btn {
        display: flex;
        width: 100%;
    }
}

/* ---- narrow screens ------------------------------------------------------------------------------- */

@media (max-width: 599px) {
    :is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-pgroup-head > th {
        display: block;
    }

    /* Stacked rows: the name of the strategy next to its label, the tagline whole under it. */
    :is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr > td:is(.psairec-prow-strategy, .psairec-prow-shows) {
        flex-wrap: wrap;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-strategy .psairec-prow-line {
        flex: 1 1 0;
        justify-content: flex-end;
        min-width: 0;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr > td:is(.psairec-prow-strategy, .psairec-prow-shows) > small {
        flex: 0 0 100%;
        max-width: none;
        margin-top: -8px;
        white-space: normal;
        text-align: right;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-switch,
    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-actions {
        width: 100%;
        text-align: left;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable .psairec-prow-actions {
        justify-content: flex-start;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-ptable > tbody > tr.psairec-editor-row > td {
        display: block;
        padding: 0;
        text-align: left;
    }

    .psairec-ui .psairec-steps {
        flex-direction: column;
    }
}