/**
 * BW Model Configurator.
 *
 * Two jobs:
 *
 *  1. The model-number matrix — this widget's own markup, styled from
 *     scratch. One slot per segment, filling in as selections are made.
 *
 *  2. Reshaping the bw-ai-core wizard below it. Its own stylesheet is
 *     token-driven, so the widget's colour controls rewrite custom properties
 *     rather than overriding rules; what remains here is the structural
 *     change — the "Your Selections" sidebar and the gradient progress bar
 *     come out, because the matrix now carries both jobs and carries them
 *     better.
 *
 * Declared with `oswaldai-cfg-form` as a dependency, so this always loads
 * after the wizard's own sheet and wins on source order at equal
 * specificity. No !important anywhere below.
 */

.elementor-widget-bw-model-configurator {
    --bw-blue: #005eb8;
    --bw-blue-dk: #00427f;
    --bw-tint: #e8f0f9;
    --bw-orange: #f28120;
    --bw-ink: #101720;
    --bw-body: #5b6570;
    --bw-mute: #8a95a1;
    --bw-line: #e2e6ea;
    --bw-soft: #f7f9fb;
}

.elementor-widget-bw-model-configurator * {
    box-sizing: border-box;
}

/* Full width by default — the widget fills whatever column it is dropped
   into, and the Max Width control caps it if you want it narrower. The
   wizard's own stylesheet caps .bwcfg at 1100px, which is what was keeping
   the card off the edges of the section. */
.elementor-widget-bw-model-configurator .bw-mc {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* ============================================================ matrix === */
.elementor-widget-bw-model-configurator .bw-mc-matrix {
    padding: 24px 26px 20px;
    border: 1px solid var(--bw-line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: var(--bw-soft);
}

.elementor-widget-bw-model-configurator .bw-mc-matrix[hidden] {
    display: none;
}

.elementor-widget-bw-model-configurator .bw-mc-matrix-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

/* the wizard's product image, relocated beside the number it is building */
.elementor-widget-bw-model-configurator .bw-mc-thumb {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--bw-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.elementor-widget-bw-model-configurator .bw-mc-thumb[hidden] {
    display: none;
}

/* product shots are photographed on white, so multiply drops the box seam */
.elementor-widget-bw-model-configurator .bw-mc-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

.elementor-widget-bw-model-configurator .bw-mc-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.elementor-widget-bw-model-configurator .bw-mc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}

.elementor-widget-bw-model-configurator .bw-mc-title {
    font: 800 13px/1.2 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
}

.elementor-widget-bw-model-configurator .bw-mc-title span + span,
.elementor-widget-bw-model-configurator .bw-mc-title > span:last-child {
    display: block;
    margin-top: 3px;
    font: 800 10px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--bw-mute);
}

.elementor-widget-bw-model-configurator .bw-mc-count {
    font: 400 12px/1 'Open Sans', Arial, sans-serif;
    color: var(--bw-mute);
}

/* ------------------------------------------------------------- slots --- */
.elementor-widget-bw-model-configurator .bw-mc-slots {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
}

.elementor-widget-bw-model-configurator .bw-mc-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: default;
}

.elementor-widget-bw-model-configurator .bw-mc-slot-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    padding: 0 10px;
    border: 2px solid var(--bw-line);
    border-radius: 10px;
    background: #fff;
    font: 700 17px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .5px;
    color: var(--bw-ink);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

/* Fixed segment names, not the chosen option's label — the row then reads
   the same whether a slot is filled or not, and never truncates differently
   from one step to the next. The choice itself is the code in the box, with
   the full description on hover and in the aria-label. */
.elementor-widget-bw-model-configurator .bw-mc-slot-cap {
    max-width: 84px;
    font: 700 8.5px/1.25 'Open Sans', Arial, sans-serif;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-align: center;
    color: var(--bw-mute);
}

/* the product's own code — never chosen, so it reads as fixed */
.elementor-widget-bw-model-configurator .bw-mc-slot.is-base .bw-mc-slot-box {
    border-color: var(--bw-ink);
    background: var(--bw-ink);
    color: #fff;
}

.elementor-widget-bw-model-configurator .bw-mc-slot.is-done {
    cursor: pointer;
}

.elementor-widget-bw-model-configurator .bw-mc-slot.is-done .bw-mc-slot-box {
    border-color: var(--bw-blue);
    color: var(--bw-blue-dk);
}

.elementor-widget-bw-model-configurator .bw-mc-slot.is-done:hover .bw-mc-slot-box {
    background: var(--bw-tint);
}

.elementor-widget-bw-model-configurator .bw-mc-slot.is-done .bw-mc-slot-cap {
    color: var(--bw-body);
}

.elementor-widget-bw-model-configurator .bw-mc-slot.is-done:focus-visible {
    outline: 2px solid var(--bw-orange);
    outline-offset: 3px;
    border-radius: 12px;
}

/* the one being answered right now — the only orange in the component */
.elementor-widget-bw-model-configurator .bw-mc-slot.is-current .bw-mc-slot-box {
    border-color: var(--bw-orange);
    color: var(--bw-orange);
    box-shadow: 0 0 0 4px rgba(242, 129, 32, .12);
}

.elementor-widget-bw-model-configurator .bw-mc-slot.is-current .bw-mc-slot-cap {
    color: var(--bw-orange);
}

.elementor-widget-bw-model-configurator .bw-mc-slot.is-todo .bw-mc-slot-box {
    border-style: dashed;
    color: var(--bw-mute);
}

/* literal separators ("-") sit between slots at their real position, so the
   shape of the finished number is visible from the first step */
.elementor-widget-bw-model-configurator .bw-mc-sep {
    align-self: center;
    margin: 0 1px 22px;
    font: 700 17px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--bw-mute);
}

.elementor-widget-bw-model-configurator .bw-mc-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    flex-wrap: wrap;
}

.elementor-widget-bw-model-configurator .bw-mc-foot[hidden] {
    display: none;
}

.elementor-widget-bw-model-configurator .bw-mc-full {
    font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .6px;
    color: var(--bw-ink);
    word-break: break-all;
}

.elementor-widget-bw-model-configurator .bw-mc-copy {
    padding: 7px 14px;
    border: 2px solid var(--bw-blue);
    border-radius: 999px;
    background: #fff;
    font: 800 10px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--bw-blue);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.elementor-widget-bw-model-configurator .bw-mc-copy:hover {
    background: var(--bw-blue);
    color: #fff;
}

.elementor-widget-bw-model-configurator .bw-mc-copy[hidden] {
    display: none;
}

/* Opt-in: worth it on a product with a long question list, just clutter over
   the answer tiles on a short one. The matrix is the sticky element, not the
   whole widget, so the questions still scroll under it. */
.elementor-widget-bw-model-configurator .bw-mc.is-sticky-sku .bw-mc-matrix {
    position: sticky;
    top: 0;
    z-index: 20;
    border-radius: 16px 16px 0 0;
}

/* ====================================================== the wizard === */
/* Sits directly under the matrix as one card. */
.elementor-widget-bw-model-configurator .bwcfg {
    max-width: none;
    margin: 0;
    border: 1px solid var(--bw-line);
    border-radius: 0 0 16px 16px;
    background: #fff;
    font-size: 15px;
    color: var(--bw-ink);
}

/* The matrix replaces the sidebar, which listed the same selections the
   model number already encodes. Removing the element would strand the
   question panel in the 280px grid column (a documented bug in that
   plugin), so the grid is collapsed to one column at the same time. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__sidebar {
    display: none;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__layout {
    display: block;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    padding: 0;
}

/* Progress: kept, but as a thin blue rule across the top of the question
   area. The gradient came from the wizard's own fill — the `background`
   shorthand below replaces the whole image, not just its colour. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__progressbar {
    height: 3px;
    border-radius: 0;
    background: var(--bw-line);
    overflow: hidden;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__progressbar-fill {
    height: 100%;
    border-radius: 0;
    background: var(--bw-blue);
    background-image: none;
    transition: width .25s ease;
}

/* The question area. The wizard's own padding was tuned for a card that
   also held a sidebar; with the matrix above and full width below, it needs
   its own breathing room. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__body {
    padding: 28px 26px 30px;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__panel-head {
    padding: 18px 26px 0;
    border: 0;
}

/* The head row carried the product image and title; both are in the matrix
   now. The Back button is the only part still needed. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__product-image,
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__industry-badge,
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__heading {
    display: none;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__eyebrow {
    display: block;
    margin: 0 0 2px;
    font: 800 10px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--bw-blue);
}

/* Named with the element too — the theme styles content headings as
   `.entry-content h4` (0,1,1), and a question heading is an <h4>. Three
   classes plus the element clears that without !important. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__body h4.bwcfg__step-title,
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__step-title {
    margin: 0 0 18px;
    font: 800 23px/1.3 'Open Sans', Arial, sans-serif;
    letter-spacing: -.3px;
    color: var(--bw-ink);
    text-transform: none;
}

/* the line under the contact heading, naming the model number being sent */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__step-sub {
    margin: -12px 0 4px;
    font: 400 14px/1.6 'Open Sans', Arial, sans-serif;
    color: var(--bw-body);
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__step-sub strong {
    color: var(--bw-ink);
}

/* ------------------------------------------------------ option cards --- */
/* A grid of equal cards rather than the wizard's content-width pills — at
   six or eight options the pills wrapped into a ragged block that was hard
   to scan, and every card ended up a different size.
   The .bwcfg__body ancestor is named to outrank the wizard's own
   `.bwcfg .bwcfg__options` flex rule; without it the two tie on class count
   and whichever sheet loads last wins. */
/* Three columns, not auto-fit. Option labels here are full sentences —
   "1/2\" Hose Barb, Natural PVDF (Kynar) - available for ND, NEE, NGG, NKL,
   and G2G tubes only" — and auto-fit packed five of those into a row, giving
   each about 34 characters before wrapping. A fixed count keeps the measure
   readable regardless of how many options a segment has. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__body .bwcfg__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    margin: 0;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__body .bwcfg__option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    margin: 0;
    padding: 15px 16px;
    border: 1px solid var(--bw-line);
    border-radius: 12px;
    background: #fff;
    font: 600 14px/1.35 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__body .bwcfg__option:hover {
    border-color: #cfd8e3;
    box-shadow: 0 4px 14px rgba(16, 23, 32, .05);
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__body .bwcfg__option--selected {
    border-color: var(--bw-blue);
    box-shadow: inset 0 0 0 1px var(--bw-blue);
}

/* The option's code, drawn from the data-code attribute the wizard now
   carries. Generated here rather than in its markup so the standalone
   shortcode's appearance is untouched. Empty codes ("Standard", no suffix)
   produce no chip rather than an empty box. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__option[data-code]:not([data-code=""])::before {
    content: attr(data-code);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 8px;
    border-radius: 7px;
    background: var(--bw-tint);
    font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--bw-blue-dk);
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__option--selected[data-code]:not([data-code=""])::before {
    background: var(--bw-blue);
    color: #fff;
}

/* ---------------------------------------------------------- buttons --- */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__back,
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__start-over,
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__submit,
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__btn {
    border-radius: 999px;
    font: 800 11px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* Sized to its label and right-aligned, rather than a full-width bar. A
   button spanning the whole card reads as "continue" — this one sends a
   lead, so it should look like a decision. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__submit {
    display: block;
    width: auto;
    min-height: 44px;
    margin: 22px 0 0 auto;
    padding: 0 30px;
    background: var(--bw-blue);
    border: 2px solid var(--bw-blue);
    color: #fff;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__submit:hover {
    background: var(--bw-blue-dk);
    border-color: var(--bw-blue-dk);
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__fineprint {
    margin: 14px 0 0;
    font: 400 11.5px/1.6 'Open Sans', Arial, sans-serif;
    color: var(--bw-mute);
}

@media (max-width: 767px) {
    .elementor-widget-bw-model-configurator .bwcfg .bwcfg__field-row {
        grid-template-columns: 1fr;
    }

    .elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-row {
        grid-template-columns: 1fr;
    }

    .elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-label {
        padding-bottom: 0;
    }

    .elementor-widget-bw-model-configurator .bwcfg .bwcfg__submit {
        width: 100%;
        margin-left: 0;
    }
}

/* ---------------------------------------------------------- recap --- */
/* "Configuration being sent" — shown on the contact step as well as the
   confirmation, since that is when someone decides whether to hand over
   their details. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap {
    margin: 18px 0 24px;
    border: 1px solid var(--bw-line);
    border-radius: 12px;
    overflow: hidden;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-row {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 0;
    border-bottom: 1px solid var(--bw-line);
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-row:last-child {
    border-bottom: 0;
}

/* Header naming the table, with the model number opposite. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bw-soft);
    border-bottom: 1px solid var(--bw-line);
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-title {
    font: 800 10px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bw-mute);
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-sku {
    font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .5px;
    color: var(--bw-ink);
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-label {
    padding: 11px 16px;
    font: 400 13px/1.4 'Open Sans', Arial, sans-serif;
    color: var(--bw-mute);
}

/* Left-aligned, not right. A right-aligned column of values with a ragged
   left edge is hard to read down — and the values here vary from two words
   to a full sentence, so the ragged edge is severe. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 16px;
    font: 400 13px/1.4 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
    text-align: left;
}

/* the same code chip the option cards and the matrix slots use, so one
   glance ties a choice to the characters it contributes */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__recap-code {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 3px 6px;
    border-radius: 5px;
    background: var(--bw-tint);
    font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--bw-blue-dk);
}

/* ------------------------------------------------------------- form --- */
/* Two columns on desktop, matching the approved layout. The wizard's own
   field rows are already paired; this makes the single-field rows span. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__field {
    margin: 0 0 14px;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__field-row .bwcfg__field {
    margin: 0;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__field-row {
    margin: 0 0 14px;
}

/* Visible labels, not placeholder-as-label — the placeholder vanishes the
   moment someone types, which is when a half-filled form is hardest to
   check over. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__label {
    display: block;
    margin: 0 0 6px;
    font: 700 10px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bw-mute);
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__input {
    height: 46px;
    border: 1px solid var(--bw-line);
    border-radius: 10px;
    font: 400 14.5px/1 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
    background: #fff;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__textarea {
    height: auto;
    padding: 12px 14px;
    line-height: 1.5;
}

.elementor-widget-bw-model-configurator .bwcfg .bwcfg__input:focus {
    outline: none;
    border-color: var(--bw-blue);
    box-shadow: 0 0 0 3px rgba(0, 94, 184, .12);
}

/* The wizard prints its own model-number card. With the matrix above, that
   is the same number twice on one screen. */
.elementor-widget-bw-model-configurator .bwcfg .bwcfg__sku {
    display: none;
}

@media (max-width: 1024px) {
    .elementor-widget-bw-model-configurator .bwcfg .bwcfg__body .bwcfg__options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .elementor-widget-bw-model-configurator .bwcfg .bwcfg__body .bwcfg__options {
        grid-template-columns: minmax(0, 1fr);
    }

    .elementor-widget-bw-model-configurator .bw-mc-matrix {
        padding: 18px 16px 16px;
    }

    .elementor-widget-bw-model-configurator .bw-mc-matrix-row {
        gap: 12px;
    }

    .elementor-widget-bw-model-configurator .bw-mc-thumb {
        width: 54px;
        height: 54px;
        padding: 5px;
        border-radius: 10px;
    }

    .elementor-widget-bw-model-configurator .bw-mc-slot-box {
        min-width: 44px;
        height: 44px;
        font-size: 15px;
    }

    .elementor-widget-bw-model-configurator .bw-mc-slot-cap {
        max-width: 68px;
        font-size: 8px;
    }
}