/**
 * 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 dashboard (sections/dashboard.tpl), the page map sketches
   (_parts/page-sketch.tpl) and the setup guide (sections/start.tpl), on the
   tokens of psairec-ui.css. States: .is-ok green, .is-warn amber, .is-fail
   red, .is-off and .is-unknown grey. The tiles take two columns, four on
   wide screens (1680px) and one on phones (under 700px); the page map's five
   pages share the width, and on phones it scrolls inside its box.
   ========================================================================== */

.psairec-ui .psairec-dash {
    --psairec-state: var(--psairec-muted);
    --psairec-state-tint: var(--psairec-soft);
}

.psairec-ui :is(.is-ok) {
    --psairec-state: var(--psairec-success);
    --psairec-state-tint: var(--psairec-success-tint);
}

.psairec-ui :is(.is-warn, .is-unknown) {
    --psairec-state: var(--psairec-warning);
    --psairec-state-tint: var(--psairec-warning-tint);
}

.psairec-ui :is(.is-fail) {
    --psairec-state: var(--psairec-danger);
    --psairec-state-tint: var(--psairec-danger-tint);
}

.psairec-ui :is(.is-off) {
    --psairec-state: #9ca3af;
    --psairec-state-tint: var(--psairec-soft);
}

.psairec-ui .psairec-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--psairec-state);
    box-shadow: 0 0 0 3px var(--psairec-state-tint);
}

/* ---- status sentence ------------------------------------------------------ */

.psairec-ui .psairec-dash-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
    border: 1px solid var(--psairec-line);
    border-left: 4px solid var(--psairec-state);
    border-radius: 8px;
    background: var(--psairec-state-tint);
}

:is(.psairec-ui, #psairec-ui) .psairec-dash-status p {
    flex: 1 1 260px;
    margin: 0;
    font-size: 15px;
}

/* ---- tiles ---------------------------------------------------------------- */

.psairec-ui .psairec-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}

.psairec-ui .psairec-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--psairec-line);
    border-top: 4px solid var(--psairec-state);
    border-radius: var(--psairec-radius);
    background: #fff;
    box-shadow: var(--psairec-shadow);
}

:is(.psairec-ui, #psairec-ui):is(.psairec-ui, #psairec-ui) .psairec-tile h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    line-height: 1.3;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--psairec-ink-2);
}

:is(.psairec-ui, #psairec-ui) .psairec-tile-figure {
    margin: 2px 0 0;
    color: var(--psairec-muted);
    font-size: 13px;
}

:is(.psairec-ui, #psairec-ui) .psairec-tile-figure b {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--psairec-ink);
    font-variant-numeric: tabular-nums;
}

:is(.psairec-ui, #psairec-ui) .psairec-tile-line {
    font-size: 13.5px;
    color: var(--psairec-ink-2);
}

:is(.psairec-ui, #psairec-ui) :is(.psairec-tile-sub, .psairec-tile-explain) {
    font-size: 12.5px;
    color: var(--psairec-muted);
}

:is(.psairec-ui, #psairec-ui) .psairec-tile-explain {
    padding-top: 6px;
    border-top: 1px dashed var(--psairec-line);
}

:is(.psairec-ui, #psairec-ui) .psairec-tile-foot {
    margin-top: auto;
    padding-top: 4px;
}

:is(.psairec-ui, #psairec-ui) .psairec-tile .psairec-tile-list {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

:is(.psairec-ui, #psairec-ui) .psairec-tile-list li {
    display: flex;
    gap: 6px;
    margin: 0 0 4px;
}

:is(.psairec-ui, #psairec-ui) .psairec-tile-list small {
    display: block;
    color: var(--psairec-muted);
    font-size: 12px;
}

.psairec-ui .psairec-mark {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--psairec-state-tint);
    color: var(--psairec-state);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.psairec-ui .psairec-spark {
    display: block;
    width: 100%;
    height: 48px;
}

.psairec-ui .psairec-spark-area {
    fill: var(--psairec-brand-tint);
}

.psairec-ui .psairec-spark-line {
    fill: none;
    stroke: var(--psairec-brand);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* ---- page map ------------------------------------------------------------- */

/* position: the screen-reader texts of the links (absolute) stay inside the scroll box; without it they
   widened the whole page on phones. */
.psairec-ui .psairec-map-scroll {
    position: relative;
    overflow-x: auto;
    padding: 2px 2px 8px;
}

.psairec-ui .psairec-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 12px;
}

:is(.psairec-ui, #psairec-ui) .psairec-map-page {
    margin: 0;
    min-width: 0;
}

:is(.psairec-ui, #psairec-ui) :is(.psairec-map-page figcaption, .psairec-wizard-page legend) {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--psairec-ink);
}

.psairec-ui .psairec-sketch {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
}

.psairec-ui .psairec-sk-page { fill: #fff; stroke: var(--psairec-line-2); }
.psairec-ui .psairec-sk-bar { fill: var(--psairec-soft); }
.psairec-ui .psairec-sk-ink { fill: #cbd5e1; }
.psairec-ui .psairec-sk-line { fill: #e2e8f0; }
.psairec-ui .psairec-sk-fill { fill: #f1f5f9; }
.psairec-ui .psairec-sk-btn { fill: #94a3b8; }
.psairec-ui .psairec-sk-dim { fill: rgba(15, 23, 42, .12); }
.psairec-ui .psairec-sk-modal { fill: #fff; stroke: var(--psairec-line-2); }
.psairec-ui .psairec-sk-ok { fill: var(--psairec-success-tint); stroke: var(--psairec-success); }
.psairec-ui .psairec-sk-tick { fill: none; stroke: var(--psairec-success); stroke-width: 2.5; }

.psairec-ui .psairec-sk-slot rect {
    fill: var(--psairec-state-tint);
    stroke: var(--psairec-state);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.psairec-ui .psairec-sk-slot:is(.is-ok, .is-on) rect {
    stroke-dasharray: none;
}

.psairec-ui .psairec-sk-slot.is-on {
    --psairec-state: var(--psairec-brand);
    --psairec-state-tint: var(--psairec-brand-tint);
}

.psairec-ui .psairec-sk-slot circle {
    fill: var(--psairec-state);
}

.psairec-ui .psairec-sk-slot text {
    fill: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
}

:is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-chips {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-chips li + li {
    margin-top: 6px;
}

/* A chip and, next to it, the arrow that opens the block on the shop. */
:is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-chips li {
    display: flex;
    align-items: center;
    gap: 4px;
}

:is(.psairec-ui, #psairec-ui):is(.psairec-ui, #psairec-ui) .psairec-chips .psairec-chip {
    flex: 0 1 auto;
    min-width: 0;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-see {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--psairec-line);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    line-height: 1;
    color: var(--psairec-brand);
    text-decoration: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-see:hover,
:is(.psairec-ui, #psairec-ui) .psairec-chip-see:focus-visible {
    border-color: var(--psairec-brand-line);
    background: var(--psairec-brand-tint);
    text-decoration: none;
}

:is(.psairec-ui, #psairec-ui):is(.psairec-ui, #psairec-ui) .psairec-chip {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--psairec-line);
    border-left: 3px solid var(--psairec-state);
    border-radius: 8px;
    background: #fff;
    color: var(--psairec-ink);
    text-decoration: none;
    line-height: 1.3;
}

:is(.psairec-ui, #psairec-ui):is(.psairec-ui, #psairec-ui) .psairec-chip:hover,
:is(.psairec-ui, #psairec-ui):is(.psairec-ui, #psairec-ui) .psairec-chip:focus {
    border-color: var(--psairec-brand-line);
    background: var(--psairec-brand-tint);
    text-decoration: none;
}

.psairec-ui .psairec-chip-n {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--psairec-state);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-text b {
    display: block;
    font-size: 12.5px;
}

:is(.psairec-ui, #psairec-ui) .psairec-chip-text small {
    display: block;
    color: var(--psairec-muted);
    font-size: 11.5px;
}

:is(.psairec-ui, #psairec-ui) .psairec-map-other {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--psairec-muted);
}

:is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--psairec-muted);
}

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

.psairec-ui .psairec-legend li::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 3px;
    background: var(--psairec-state);
    vertical-align: -1px;
}

/* ---- how it works --------------------------------------------------------- */

:is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-how {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-how-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--psairec-line);
    border-radius: 8px;
    background: var(--psairec-foot);
}

.psairec-ui .psairec-how-step:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    top: 30px;
    right: -14px;
    z-index: 1;
    color: var(--psairec-brand);
    font-size: 16px;
    font-weight: 700;
}

.psairec-ui .psairec-how-icon {
    width: 44px;
    height: 44px;
}

.psairec-ui .psairec-how-icon circle,
.psairec-ui .psairec-how-icon path,
.psairec-ui .psairec-how-icon rect {
    fill: none;
    stroke: var(--psairec-brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.psairec-ui .psairec-how-icon > circle:first-child {
    fill: var(--psairec-brand-tint);
    stroke: none;
}

.psairec-ui .psairec-how-icon .psairec-how-fill {
    fill: var(--psairec-brand);
    stroke: none;
}

.psairec-ui .psairec-how-n {
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--psairec-muted);
    font-size: 12px;
    font-weight: 700;
}

:is(.psairec-ui, #psairec-ui) .psairec-how-step p {
    font-size: 13px;
    color: var(--psairec-ink-2);
}

:is(.psairec-ui, #psairec-ui) .psairec-how-step a {
    margin-top: auto;
    font-size: 13px;
}

/* ---- setup guide ---------------------------------------------------------- */

.psairec-ui .psairec-wizard-progress {
    flex: 0 0 100%;
    margin-top: 8px;
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-count {
    margin: 0 0 6px;
    font-size: 13.5px;
}

.psairec-ui .psairec-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--psairec-soft);
}

.psairec-ui .psairec-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--psairec-brand);
    transition: width .3s ease;
}

:is(.psairec-ui, #psairec-ui) .psairec-card-head .psairec-wizard-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-steps li {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: var(--psairec-muted);
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-steps li.is-current {
    color: var(--psairec-ink);
    font-weight: 700;
}

.psairec-ui .psairec-wizard-mark {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--psairec-line-2);
    border-radius: 50%;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

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

.psairec-ui .psairec-wizard-steps .is-ok:not(.is-current) .psairec-wizard-mark {
    border-color: var(--psairec-success);
    color: var(--psairec-success);
}

/* A step left for later: a red "!" until it is done, its title clickable. */
.psairec-ui .psairec-wizard-steps li.is-skipped:not(.is-current) .psairec-wizard-mark {
    border-color: var(--psairec-danger);
    background: var(--psairec-danger);
    color: #fff;
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-steps li.is-skipped {
    color: var(--psairec-danger);
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-steps li.is-skipped .psairec-link-btn {
    color: var(--psairec-danger);
}

/* The progress line: one segment per step (done, current, skipped in red, next). */
:is(.psairec-ui, #psairec-ui) .psairec-progress.psairec-wizard-line {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    background: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-line span {
    width: auto;
    border-radius: 999px;
    background: var(--psairec-soft);
    transition: background-color .3s ease;
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-line span.is-done,
:is(.psairec-ui, #psairec-ui) .psairec-wizard-line span.is-current {
    background: var(--psairec-brand);
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-line span.is-skipped {
    background: var(--psairec-danger);
}

:is(.psairec-ui, #psairec-ui) .psairec-card-head .psairec-wizard-skipped {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--psairec-danger);
}

.psairec-ui .psairec-wizard-skipped-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--psairec-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

:is(.psairec-ui, #psairec-ui):is(.psairec-ui, #psairec-ui) .psairec-wizard-body h3 {
    height: auto;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}

.psairec-ui .psairec-wizard-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

/* One page per row: its sketch on the left, its ticks on the right. */
:is(.psairec-ui, #psairec-ui) .psairec-wizard-page {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: start;
    gap: 8px 16px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--psairec-line);
    border-radius: 8px;
    background: var(--psairec-foot);
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-page legend {
    float: left;
    grid-column: 1 / -1;
    width: 100%;
}

:is(.psairec-ui, #psairec-ui) .psairec-wizard-page.is-other {
    grid-template-columns: minmax(0, 1fr);
}

.psairec-ui .psairec-wizard-page .psairec-sketch {
    max-width: 140px;
}

:is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-wizard-ticks {
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-wizard-ticks li + li {
    margin-top: 8px;
}

:is(.psairec-ui, #psairec-ui) .psairec-tick {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--psairec-line);
    border-radius: 8px;
    background: #fff;
    font-weight: 400;
    cursor: pointer;
}

:is(.psairec-ui, #psairec-ui) .psairec-tick:has(input:checked) {
    border-color: var(--psairec-brand-line);
    background: var(--psairec-brand-tint);
}

:is(.psairec-ui, #psairec-ui) .psairec-tick input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--psairec-brand);
}

.psairec-ui .psairec-tick .psairec-chip-n {
    --psairec-state: var(--psairec-brand);
}

:is(.psairec-ui, #psairec-ui) .psairec-tick-text small {
    display: block;
    margin-top: 2px;
    color: var(--psairec-muted);
    font-size: 12px;
}

:is(.psairec-ui, #psairec-ui) .psairec-badge.is-brand {
    background: var(--psairec-brand-tint);
    color: var(--psairec-brand-dark);
}

.psairec-ui .psairec-wizard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.psairec-ui .psairec-wizard-foot .psairec-hint {
    flex: 0 0 100%;
}

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

@media (min-width: 1680px) {
    .psairec-ui .psairec-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .psairec-ui .psairec-wizard-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    :is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-how {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .psairec-ui .psairec-how-step:nth-child(2)::after {
        content: none;
    }
}

@media (max-width: 699px) {
    .psairec-ui .psairec-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.psairec-ui, #psairec-ui) .psairec-card-body .psairec-how {
        grid-template-columns: minmax(0, 1fr);
    }

    .psairec-ui .psairec-how-step:not(:last-child)::after {
        content: "\2193";
        top: auto;
        right: auto;
        bottom: -15px;
        left: 24px;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-card-head .psairec-wizard-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The five pages scroll sideways inside their box. */
    .psairec-ui .psairec-map {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 170px;
    }

    :is(.psairec-ui, #psairec-ui) .psairec-wizard-page {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px 10px;
    }

    .psairec-ui .psairec-wizard-page .psairec-sketch {
        max-width: 96px;
    }
}

/* A result that just arrived is ringed for a moment (psairec-dashboard.js). */
.psairec-ui :is(.psairec-dash, .psairec-wizard) .psairec-alert {
    transition: box-shadow .4s ease;
}

.psairec-ui :is(.psairec-dash, .psairec-wizard) .psairec-alert.psairec-flash {
    box-shadow: 0 0 0 4px var(--psairec-brand-ring);
}