/**
 * PC builder (quote-lead configurator) — v3.
 *
 * Styles for both modes: guided questionnaire (wizard) + guided 3D, the
 * stepper, the mode toggle, the 3D canvas + option panel, the searchable
 * combobox, brand cards, recap, compatibility badges and toasts. Depends on
 * tokens from main.css (surface, border, accent, …) in both theme variants
 * ([data-theme] blocks).
 */

/* ---------- layout ---------- */
.builder {
        display: grid;
        /*
         * `minmax(0, 1fr)` is load-bearing, not tidiness. Below 900px the grid has
         * no explicit template, so its single implicit track is `auto` — and an
         * `auto` track sizes to the MAX-CONTENT of its widest child, not to the
         * container. Measured on a 390px phone before this line: the track came
         * out 724px inside a 334.67px box, which put two thirds of the builder
         * off-screen and gave the whole page a horizontal scrollbar
         * (scrollWidth 744 vs clientWidth 375). `minmax(0, 1fr)` pins the track
         * to the container and lets the children wrap instead.
         */
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        margin-top: 1.5rem;
}

@media (min-width: 900px) {
        .builder {
                /*
                 * `minmax(0, 1fr)` on the build column as well. Measured at a 900px
                 * viewport: the 1fr track could not shrink below the build column's
                 * 724px min-content, so 724 + 340 + 24 of gap = 1088px of grid inside
                 * an 885px viewport and the page scrolled sideways in the narrow
                 * desktop band (901–1088px). The summary keeps its fixed 340px.
                 */
                grid-template-columns: minmax(0, 1fr) 340px;
                align-items: start;
        }
}

.builder__slots {
        display: grid;
        gap: 1.25rem;
}

.builder-slot {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1rem 1.1rem;
}

.builder-slot__title {
        margin: 0 0 0.75rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
}

.builder-slot__lock {
        font-size: 0.78rem;
        font-weight: 400;
        color: var(--text-dim);
}

.builder-slot__list {
        display: grid;
        gap: 0.5rem;
}

/* ---------- parts ---------- */
.builder-part {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0.5rem 0.65rem;
        background: var(--bg-elev);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        font: inherit;
        text-align: start;
        transition: border-color var(--ease) 0.15s, background var(--ease) 0.15s, opacity var(--ease) 0.15s;
}

.builder-part:hover:not(:disabled) {
        border-color: var(--accent);
}

.builder-part:disabled {
        opacity: 0.45;
        cursor: not-allowed;
}

.builder-part--selected {
        border-color: var(--ok-text);
        background: color-mix(in srgb, var(--ok) 18%, var(--bg-elev));
        box-shadow: 0 0 0 1px var(--ok-text), 0 0 12px var(--accent-glow);
}

.builder-part--incompatible {
        opacity: 0.55;
}

.builder-part--warning {
        border-color: var(--warning);
}

.builder-part--error {
        border-color: var(--danger);
}

.builder-part__img {
        width: 44px;
        height: 44px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        background: var(--surface-2);
        flex-shrink: 0;
}

.builder-part__name {
        flex: 1;
        font-size: 0.92rem;
}

.builder-part__price {
        color: var(--accent-text);
        font-weight: 600;
        white-space: nowrap;
}

.builder-part__badge {
        font-size: 0.75rem;
        color: var(--danger);
}

.builder-part__badge--warn {
        color: var(--warning-text);
}

.builder-slot__empty {
        margin: 0;
        color: var(--text-dim);
        font-size: 0.9rem;
}

/* ---------- summary ---------- */
.builder__summary {
        position: sticky;
        top: calc(var(--header-h) + 1rem);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.25rem;
}

.builder__summary-title {
        margin: 0 0 0.75rem;
        font-size: 1.05rem;
}

.builder__summary-empty {
        color: var(--text-dim);
        font-size: 0.92rem;
}

.builder__summary-list {
        list-style: none;
        margin: 0 0 0.75rem;
        padding: 0;
}

.builder__summary-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.4rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.9rem;
}

.builder__summary-list .builder-summary__name {
        flex: 1 1 auto;
        text-align: start;
}

.builder__summary-list .builder-summary__price {
        flex: 0 0 auto;
        white-space: nowrap;
}

.builder__summary-list .builder-summary__remove {
        flex: 0 0 auto;
        cursor: pointer;
        background: none;
        border: 1px solid var(--border);
        border-radius: 4px;
        color: var(--text-dim);
        font-size: 0.78rem;
        line-height: 1;
        padding: 0.2rem 0.5rem;
        transition: color 0.15s ease, border-color 0.15s ease;
}

.builder__summary-list .builder-summary__remove:hover,
.builder__summary-list .builder-summary__remove:focus-visible {
        color: var(--accent-text);
        border-color: var(--accent);
}

.builder__summary-total {
        margin: 0 0 1rem;
        font-size: 1.1rem;
}

/* ---------- compatibility issues ---------- */
.builder__issues {
        list-style: none;
        margin: 0 0 1rem;
        padding: 0;
        display: grid;
        gap: 0.5rem;
}

.builder__issue {
        font-size: 0.85rem;
        padding: 0.5rem 0.65rem;
        border-radius: var(--radius-sm);
        border-inline-start: 3px solid var(--danger);
        background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.builder__issue--warning {
        border-inline-start-color: var(--warning);
        background: color-mix(in srgb, var(--warning) 8%, transparent);
}

/* ---------- lead form ---------- */
.builder-lead input,
.builder-lead textarea {
        width: 100%;
        padding: 0.6rem 0.75rem;
        margin-bottom: 0.6rem;
        background: var(--bg);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font: inherit;
}

/* Vertical only: a note is allowed to grow, but a dragged corner that pushes
   the submit button off the sidebar is not a thing a visitor should be able
   to do by accident. */
.builder-lead textarea {
        resize: vertical;
        min-height: 4.5rem;
        line-height: 1.5;
}

.builder-lead__status {
        margin: 0.6rem 0 0;
        color: var(--ok-text);
        font-size: 0.9rem;
}

.builder-status {
        color: var(--text-dim);
        padding: 1.5rem 0;
}

.builder-status--error {
        color: var(--danger);
}

/* ---------- mode toggle ---------- */
.builder__modes {
        display: flex;
        gap: 0.5rem;
        grid-column: 1 / -1;
}

.builder__mode-btn {
        padding: 0.5rem 1rem;
        background: var(--bg-elev);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 999px;
        font: inherit;
        font-size: 0.9rem;
        cursor: pointer;
        transition: border-color var(--ease) 0.15s, background var(--ease) 0.15s;
}

.builder__mode-btn.is-active {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev));
        font-weight: 600;
}

/* ---------- 3D stage ---------- */
.builder__stage {
        position: relative;
        display: grid;
        gap: 1rem;
        grid-column: 1 / -1;
}

.builder__canvas {
        position: relative;
        height: 480px;
        background: linear-gradient(180deg, var(--surface-2, transparent), transparent);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        touch-action: none;
}

.builder__canvas canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
}

.builder__panel {
        position: absolute;
        inset-inline-end: 1rem;
        top: 1rem;
        width: min(340px, calc(100% - 2rem));
        max-height: calc(100% - 2rem);
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1rem;
        box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
}

/* Only the list area scrolls — head + search stay pinned above it (v0.2.33). */
.builder__panel-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
}

.builder__panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
}

.builder__panel-head h3 {
        margin: 0;
        font-size: 1rem;
}

.builder__panel-close {
        background: none;
        border: none;
        color: var(--text-dim);
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        padding: 0.2rem 0.4rem;
}

.builder__panel-list {
        display: grid;
        gap: 0.5rem;
}

/* ---------- the wrapper the mode's content and the extras share ----------
   assets/js/builder/main.js renders `.builder` > `.builder__main` > (the mode's
   own block, the extras area). The wrapper carried no rule of its own, so the
   two blocks inside it were separated by NOTHING: the chips row that ends the
   3D studio and the extras card below it met border to border, and the extras
   read as sitting on top of the part buttons (Valery, 2026-10-26: "תוריד את זה
   קצת למעלה זה עולה על הכפתורים האחרים כמו כרטיס מסך").

   The gap is the same 1.5rem `.builder` puts between its own rows, so the
   extras is spaced like every other band of the page instead of touching the
   one above it. `minmax(0, 1fr)` is here for the reason spelled out on
   `.builder` above: an implicit `auto` track sizes to the widest child, which
   is how the builder once grew a horizontal scrollbar on a phone. */
.builder__main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
}

/* ---------- extras (v0.2.57): "אביזרים נוספים" ----------
   Sits between the 3D studio and the spec summary, full width like the
   studio. Category field -> product picker -> +/− qty; the picks land in
   picked.peripherals (summary + total) and never in the 3D scene. */
.builder-extras {
        display: grid;
        gap: 1rem;
        grid-column: 1 / -1;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.25rem;
}

.builder-extras__head {
        display: grid;
        gap: 0.35rem;
}

.builder-extras__title {
        margin: 0;
        font-size: 1.05rem;
}

.builder-extras__hint {
        margin: 0;
        color: var(--text-dim);
        font-size: 0.88rem;
}

.builder-extras__form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
}

@media (min-width: 700px) {
        .builder-extras__form {
                grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
                align-items: start;
        }
}

.builder-extras__field {
        display: grid;
        gap: 0.4rem;
        min-width: 0;
}

.builder-extras__label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-dim);
}

.builder-extras__select {
        width: 100%;
        padding: 0.6rem 0.75rem;
        background: var(--bg-elev);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font: inherit;
        font-size: 0.92rem;
        cursor: pointer;
}

.builder-extras__select:hover,
.builder-extras__select:focus-visible {
        border-color: var(--accent);
}

.builder-extras__count {
        justify-self: start;
        font-size: 0.78rem;
        font-weight: 700;
        padding: 0.15rem 0.5rem;
        border-radius: 999px;
        background: var(--ok);
        color: #0c0b0a;
}

.builder-extras__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.5rem;
}

.builder-extras__row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.6rem 0.9rem;
        background: color-mix(in srgb, var(--ok) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--ok-text) 45%, transparent);
        border-radius: var(--radius-sm);
}

.builder-extras__name {
        flex: 1 1 200px;
        font-size: 0.92rem;
        font-weight: 600;
}

.builder-extras__price {
        flex: 0 0 auto;
        color: var(--accent-text);
        font-weight: 600;
        white-space: nowrap;
}

.builder-extras__remove {
        flex: 0 0 auto;
        padding: 0.3rem 0.8rem;
        background: transparent;
        color: var(--text-dim);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font: inherit;
        font-size: 0.85rem;
        cursor: pointer;
        transition: color var(--ease) 0.15s, border-color var(--ease) 0.15s;
}

.builder-extras__remove:hover {
        color: var(--danger);
        border-color: var(--danger);
}

/* Quick-search box at the top of every option panel (v0.2.32).
   Sits above the scrollable list area, so it stays visible while the
   results scroll beneath it (Valery, v0.2.33). */
.builder__panel-search {
        margin-bottom: 0.75rem;
}

.builder__panel-search-input {
        width: 100%;
        box-sizing: border-box;
        padding: 0.45rem 0.6rem;
        font-size: 0.92rem;
        color: var(--text);
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius);
}

.builder__panel-search-input:focus {
        outline: none;
        border-color: var(--accent-ring);
}

.builder__panel-empty {
        padding: 0.75rem 0.25rem;
        color: var(--text-dim);
        font-size: 0.9rem;
        text-align: center;
}

/* ---------- toast ---------- */
.builder__toast {
        position: fixed;
        inset-inline-start: 50%;
        bottom: 1.5rem;
        transform: translateX(50%);
        z-index: 60;
        max-width: min(480px, calc(100vw - 2rem));
        padding: 0.7rem 1.1rem;
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--danger);
        border-radius: var(--radius);
        box-shadow: 0 12px 32px rgb(0 0 0 / 0.3);
        font-size: 0.92rem;
}

@media (max-width: 899px) {
        .builder__canvas {
                height: 340px;
        }

        .builder__summary {
                position: static;
        }
}

/* ---------- Cloudflare Turnstile (quote-lead form) ---------- */
.builder-lead .xmod-turnstile {
        margin: 0.6rem 0;
}