/* ============================================================
   configurator.css — Walvoil configurator inside the
   «Конфигуратор» tab (#tab-converter of index.html).

   Rewritten from the standalone CRM stylesheet onto the site's own
   design language: the glass tokens theme.js publishes (--glass-bg,
   --glass-border-*, --primary-color, --body-text-color …), the 14–16px
   card radius used by .cat-tile and .calc-card, and an explicit light
   theme rather than the CRM's hardcoded dark palette.

   Two project traps are handled deliberately:
     - Every <button> sets background-color with !important. index.html
       loads the Livematrix widget stylesheet at the end of <body>, and
       its Tailwind preflight resets button backgrounds to transparent,
       beating an ordinary class rule.
     - Light-theme overrides are keyed on #configuratorContainer so they
       outrank the class rules they correct.
   ============================================================ */

/* The tab is a flex row (converter.css) whose .calc-section children are
   hidden there; the configurator takes the whole row. */
#tab-converter > #configuratorContainer {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}

/* style.css styles bare `button` as the site's 44px glass pill:
   height:44px, white-space:nowrap, a 40px radius, a four-sided glass border
   and a backdrop filter. Every control in here is a <button> that sizes to
   its own content — option cards wrap onto two lines, step headers are as
   tall as their text — so they opt out of the pill in one place rather than
   fighting it property by property in each component.

   .cat-tile is excluded alongside .cfg-btn: it is a design-system primitive
   that brings its own height (--tile-height) and shadow, and this selector
   scores (1,1,1) against the system's (0,1,2), so without the exclusion the
   `height:auto` here silently flattens every product-line tile to the height
   of its own borders. Exclude rather than restate the geometry, so
   design-system.css stays the only place a tile is described. .submit-btn
   (the sign-in dialog's «Войти») is excluded for the same reason. */
#configuratorContainer button:not(.cfg-btn):not(.cat-tile):not(.submit-btn) {
    height: auto;
    min-height: 0;
    white-space: normal;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#configuratorContainer {
    --cfg-line: var(--glass-border-side, rgba(255, 255, 255, 0.12));
    --cfg-surface: rgba(255, 255, 255, 0.05);
    --cfg-surface-hover: rgba(255, 255, 255, 0.09);
    --cfg-muted: var(--secondary-color, rgba(224, 224, 224, 0.6));
    --cfg-radius: 14px;
    color: var(--body-text-color, #E0E0E0);
    font-family: inherit;
}

/* --- Ground panel ------------------------------------------
   The configurator sits on `.glass-container`, the site's shared ground
   surface — theme.js lists that class in its glass selector group, so the
   panel takes the tint, blur, border and radius the theme configurator has
   set, the same way the catalogue and news blocks do on the neighbouring
   tabs. Only geometry is overridden here: .glass-container is authored for
   a standalone 1200px block with its own outer margins, and inside the tab
   it has to fill the content area instead. */
#configuratorContainer .cfg-ground {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 28px 28px;
}

/* --- Panel ------------------------------------------------- */
.cfg-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cfg-state {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    min-height: 280px;
    color: var(--cfg-muted);
    font-size: 14px;
}
.cfg-state-error { color: #ff6b6b; }
.cfg-maint-icon { color: var(--primary-color, #20d21a); }
.cfg-maint-title {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--body-text-color, #E0E0E0);
}
.cfg-maint-text {
    margin: 0;
    max-width: 460px;
    line-height: 1.5;
}
.cfg-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--cfg-line);
    border-top-color: var(--primary-color, #20d21a);
    animation: cfgSpin 0.8s linear infinite;
}
@keyframes cfgSpin { to { transform: rotate(360deg); } }

/* --- Header ------------------------------------------------ */
.cfg-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cfg-head-title {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    color: var(--body-text-color, #E0E0E0);
    text-shadow: var(--panel-title-shadow, none);
}
.cfg-head-sub {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cfg-muted);
}

/* --- Product line switcher --------------------------------- */
/* The three tiles are plain .cat-tile primitives (see lineTile() in
   configurator.js). Everything visual — material, gloss, hover hop, the
   .active accent outline, the light-theme flip — comes from
   design-system.css. LAYOUT ONLY here.

   The column count has to be restated because .cat-tile-grid is 6-up in
   catalogue.css: this row has exactly three product lines and no other tile
   row beside it to line up with, so it fills the width three-across instead
   of padding itself out with blank filler tiles the way the home page does.
   catalogue.css loads before this file, so the plain class selector wins on
   source order. */
.cfg-lines {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 24px;
}

/* --- Two-column layout ------------------------------------- */
.cfg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

/* --- Vertical stepper -------------------------------------- */
.cfg-steps { display: flex; flex-direction: column; }

.cfg-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); }
.cfg-step-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 14px;
}
.cfg-step-dot {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--cfg-surface);
    border: 1px solid var(--cfg-line);
    color: var(--cfg-muted);
}
.cfg-step.active .cfg-step-dot {
    background: var(--primary-color, #20d21a);
    border-color: var(--primary-color, #20d21a);
    color: #fff;
}
.cfg-step.done .cfg-step-dot {
    border-color: var(--primary-color, #20d21a);
    color: var(--primary-color, #20d21a);
}
/* The connector: drawn on the rail, not between steps, so the last step
   has no dangling tail. */
.cfg-step:not(:last-child) .cfg-step-rail::after {
    content: '';
    flex: 1;
    width: 1px;
    background: var(--cfg-line);
}

.cfg-step-main { min-width: 0; padding-bottom: 6px; }
.cfg-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 0;
    background-color: transparent !important;
    border: none;
    border-bottom: 1px solid var(--cfg-line);
    /* style.css's bare-`button` rule also sets border-radius:40px, which
       curls the ends of that hairline into visible arcs. */
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.cfg-step.locked .cfg-step-head { cursor: default; opacity: 0.55; }
.cfg-step-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-step-title { font-size: 15px; font-weight: 600; }
.cfg-step.active .cfg-step-title { color: var(--primary-color, #20d21a); }
.cfg-step-sum {
    font-size: 12px;
    color: var(--cfg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cfg-step-edit { font-size: 12px; color: var(--primary-color, #20d21a); flex: none; }

.cfg-step-body { display: none; padding: 16px 0 20px; }
.cfg-step.active .cfg-step-body { display: block; }

.cfg-section-title {
    margin: 20px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--cfg-muted);
}
.cfg-step-body > .cfg-section-title:first-child { margin-top: 0; }

/* --- Option cards ------------------------------------------ */
.cfg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.cfg-grid-1 { grid-template-columns: minmax(0, 1fr); }
.cfg-grid-scroll { max-height: 260px; overflow-y: auto; padding-right: 4px; }

.cfg-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;   /* grid items default to min-width:auto: a long label would
                       push the button past its track instead of wrapping inside it */
    padding: 10px 12px;
    border-radius: var(--cfg-radius);
    background-color: var(--cfg-surface) !important;
    border: 1px solid transparent;
    color: var(--body-text-color, #E0E0E0);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.cfg-opt:hover:not(:disabled) { background-color: var(--cfg-surface-hover) !important; }
.cfg-opt.selected { border-color: var(--primary-color, #20d21a); }
.cfg-opt:disabled { opacity: 0.4; cursor: not-allowed; }

/* Product renders are shot on white, so they get their own light plate
   instead of floating on the dark glass. */
.cfg-opt-media,
.cfg-summary-head .cfg-opt-media {
    flex: none;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.cfg-opt-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.cfg-summary-head .cfg-opt-media { width: 64px; height: 64px; }

.cfg-opt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.cfg-opt-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.cfg-opt.selected .cfg-opt-title { color: var(--primary-color, #20d21a); }
.cfg-opt-desc { font-size: 11.5px; line-height: 1.35; color: var(--cfg-muted); }

.cfg-summary-headtext { min-width: 0; }

/* --- Pills (small mutually-exclusive choices) --------------- */
.cfg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-pills-col { flex-direction: column; align-items: stretch; }
.cfg-pill {
    padding: 9px 14px;
    border-radius: 999px;
    background-color: var(--cfg-surface) !important;
    border: 1px solid transparent;
    color: var(--body-text-color, #E0E0E0);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.cfg-pills-col .cfg-pill { border-radius: 10px; text-align: left; }
.cfg-pill:hover:not(:disabled) { background-color: var(--cfg-surface-hover) !important; }
.cfg-pill.selected {
    border-color: var(--primary-color, #20d21a);
    color: var(--primary-color, #20d21a);
}
.cfg-pill:disabled { opacity: 0.4; cursor: not-allowed; }

.cfg-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px 24px;
}

/* --- Displacement grid ------------------------------------- */
.cfg-disp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
}
.cfg-disp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border-radius: 10px;
    background-color: var(--cfg-surface) !important;
    border: 1px solid transparent;
    color: var(--body-text-color, #E0E0E0);
    font: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.cfg-disp:hover { background-color: var(--cfg-surface-hover) !important; }
.cfg-disp.selected { border-color: var(--primary-color, #20d21a); }
.cfg-disp-val { font-size: 15px; font-weight: 700; }
.cfg-disp.selected .cfg-disp-val { color: var(--primary-color, #20d21a); }
.cfg-disp-unit { font-size: 10px; color: var(--cfg-muted); }

/* --- Fields ------------------------------------------------ */
.cfg-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 20px;
}
.cfg-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cfg-field-label { font-size: 12px; font-weight: 600; color: var(--cfg-muted); }

/* Field material (including the drawn select arrow) from design-system.css. */
.cfg-input,
.cfg-select { width: 100%; }
.cfg-select option { background: #1a1a1a; color: #E0E0E0; }
.cfg-input:disabled { opacity: 0.45; }

/* --- Toggle row -------------------------------------------- */
.cfg-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-radius: var(--cfg-radius);
    background: var(--cfg-surface);
}
.cfg-toggle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfg-toggle-title { font-size: 13.5px; font-weight: 600; }
.cfg-toggle-desc { font-size: 11.5px; line-height: 1.35; color: var(--cfg-muted); }

.cfg-switch { flex: none; cursor: pointer; }
.cfg-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cfg-switch-track {
    display: block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.35);
    transition: background 0.2s ease;
}
.cfg-switch-thumb {
    display: block;
    width: 18px;
    height: 18px;
    margin: 3px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}
.cfg-switch input:checked + .cfg-switch-track { background: var(--primary-color, #20d21a); }
.cfg-switch input:checked + .cfg-switch-track .cfg-switch-thumb { transform: translateX(18px); }
.cfg-switch input:focus-visible + .cfg-switch-track { outline: 2px solid var(--primary-color, #20d21a); outline-offset: 2px; }

/* --- Stages / EX sections ---------------------------------- */
.cfg-stages,
.cfg-ex-sections { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cfg-stage,
.cfg-ex-section {
    padding: 12px 14px;
    border-radius: var(--cfg-radius);
    background: var(--cfg-surface);
}
.cfg-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.cfg-stage-title { font-size: 13px; font-weight: 700; }
.cfg-stage-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.cfg-add {
    margin-top: 10px;
    padding: 10px 16px;
    width: 100%;
    border-radius: 10px;
    background-color: transparent !important;
    border: 1px dashed var(--cfg-line);
    color: var(--primary-color, #20d21a);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.cfg-add:hover { background-color: var(--cfg-surface) !important; }

/* --- Notes ------------------------------------------------- */
.cfg-note {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--cfg-surface);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cfg-muted);
}
.cfg-note-warn {
    background: rgba(254, 199, 37, 0.08);
    color: #d9a900;
}
.cfg-empty { margin: 0; padding: 12px; font-size: 12.5px; color: var(--cfg-muted); }

/* --- Buttons ----------------------------------------------- */
/* Pill material from design-system.css. */
.cfg-btn-block { width: 100%; }

.cfg-btn-primary {
    background-color: var(--primary-color, #20d21a) !important;
    color: #fff;
}
.cfg-btn-primary:hover { opacity: 0.88; }

.cfg-btn-ghost {
    background-color: var(--cfg-surface) !important;
    border-color: var(--cfg-line);
    color: var(--body-text-color, #E0E0E0);
}
.cfg-btn-ghost:hover { background-color: var(--cfg-surface-hover) !important; }

.cfg-step-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--cfg-line);
}

/* --- Summary ----------------------------------------------- */
.cfg-summary { position: sticky; top: 88px; min-width: 0; }
/* A raised surface ON the ground panel, not a second pane of glass: nesting
   another backdrop-filter inside .glass-container doubles the blur and reads
   as a smudge over the page background. */
.cfg-summary-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 14px;
    background: var(--cfg-surface);
    border: 1px solid var(--cfg-line);
}
.cfg-summary-head { display: flex; align-items: center; gap: 14px; }
.cfg-summary-kicker {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--cfg-muted);
}
.cfg-summary-title { margin: 3px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; }

.cfg-summary-specs { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.cfg-summary-specs > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: 12.5px;
}
.cfg-summary-specs dt { color: var(--cfg-muted); flex: none; }
.cfg-summary-specs dd { margin: 0; text-align: right; font-weight: 600; min-width: 0; }

.cfg-summary-code {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 10px;
    background: var(--cfg-surface);
}
.cfg-summary-code-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--cfg-muted);
}
.cfg-summary-code-value {
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
    word-break: break-all;
    color: var(--primary-color, #20d21a);
}
.cfg-summary-code-label + .cfg-summary-code-value { margin-bottom: 4px; }

.cfg-breakdown { font-size: 12px; }
.cfg-breakdown > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--cfg-muted);
    padding: 4px 0;
}
.cfg-breakdown ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cfg-breakdown li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.cfg-breakdown-name { min-width: 0; }
.cfg-breakdown-name em { font-style: normal; color: var(--cfg-muted); font-size: 11px; }
.cfg-breakdown-price { flex: none; font-weight: 600; }

.cfg-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cfg-line);
}
.cfg-price-label { font-size: 12px; color: var(--cfg-muted); }
.cfg-price-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color, #20d21a);
    white-space: nowrap;
}
/* "по запросу" is a state, not a figure: it keeps the accent so the row still
   reads as the price line, but drops to body size — set at 20px bold it looks
   like a number that failed to load. */
.cfg-price-onrequest .cfg-price-value { font-size: 15px; font-weight: 600; }
.cfg-price-note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--cfg-muted); }

.cfg-summary-login { margin: 0; font-size: 11.5px; line-height: 1.5; text-align: center; color: var(--cfg-muted); }
.cfg-summary-login a { color: var(--primary-color, #20d21a); margin-left: 4px; }

/* --- Light theme ------------------------------------------
   Keyed on the container id so these outrank the class rules above
   (and anything else that hardcodes white-alpha glass). */
:root[data-theme="light"] #configuratorContainer {
    --cfg-line: rgba(0, 0, 0, 0.12);
    --cfg-surface: rgba(0, 0, 0, 0.04);
    --cfg-surface-hover: rgba(0, 0, 0, 0.07);
    --cfg-muted: rgba(29, 29, 31, 0.6);
}
:root[data-theme="light"] #configuratorContainer .cfg-summary-inner {
    background: rgba(255, 255, 255, 0.5);
}
:root[data-theme="light"] #configuratorContainer .cfg-select option {
    background: #fff;
    color: #1d1d1f;
}
/* Keyed on the id, so this (1,3,0) also outranks the (0,3,1) checked rule
   above and would paint an ON switch grey — the checked state has to be
   restated here at matching specificity rather than inherited. */
:root[data-theme="light"] #configuratorContainer .cfg-switch-track {
    background: rgba(0, 0, 0, 0.2);
}
:root[data-theme="light"] #configuratorContainer .cfg-switch input:checked + .cfg-switch-track {
    background: var(--primary-color, #007AFF);
}
:root[data-theme="light"] #configuratorContainer .cfg-note-warn {
    background: rgba(254, 199, 37, 0.16);
    color: #8a6d00;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 1100px) {
    .cfg-layout { grid-template-columns: minmax(0, 1fr); }
    .cfg-summary { position: static; }
    .cfg-summary-inner { max-width: 520px; }
}
@media (max-width: 760px) {
    #configuratorContainer .cfg-ground { padding: 16px 14px 20px; }
    .cfg-lines { grid-template-columns: minmax(0, 1fr); }
    .cfg-head-title { font-size: 19px; }
    .cfg-step { grid-template-columns: 28px minmax(0, 1fr); }
    .cfg-grid { grid-template-columns: minmax(0, 1fr); }
    .cfg-grid-scroll { max-height: none; overflow: visible; }
    .cfg-summary-inner { max-width: none; padding: 16px; }
    .cfg-step-nav { flex-direction: column-reverse; }
    .cfg-step-nav .cfg-btn { width: 100%; }
}

/* --- Category level: breadcrumbs, group heads, filters panel ---- */
.cfg-cats { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cfg-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; font-size: 13px; }
/* Crumbs are buttons in markup but links in the design: opt out of the
   global 44px pill (see style.css `button`). html prefix = Livematrix guard. */
html .cfg-crumbs .cfg-crumb {
    height: auto; min-height: 0; padding: 0; white-space: normal;
    background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    color: var(--primary-color, #20d21a); font: inherit; cursor: pointer;
}
html .cfg-crumbs .cfg-crumb:hover { text-decoration: underline; }
.cfg-crumbs .cfg-crumb.is-current { color: var(--cfg-muted); cursor: default; }
.cfg-crumb-sep { color: var(--cfg-muted); }
.cfg-group-head {
    margin: 22px 0 -4px; font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cfg-muted);
}
.cfg-soon { margin-top: 16px; min-height: 220px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cfg-soon-title { margin: 0; font-size: 18px; font-weight: 500; color: var(--body-text-color, #E0E0E0); }
.cfg-soon p { margin: 0; line-height: 1.5; }

/* --- Sign-in dialog for signed-out visitors ------------------------ */
.cfg-login { max-width: 420px; margin: 24px auto; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.cfg-login .cfg-head-sub { margin-bottom: 14px; }
.cfg-login-form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cfg-login-form label { font-size: 12px; color: var(--cfg-muted); margin-top: 4px; }
.cfg-login-form .submit-btn { margin-top: 10px; }
.cfg-login-form .submit-btn:disabled { opacity: .55; cursor: default; }
.cfg-login-error { margin: 4px 0 0; font-size: 13px; color: #ff6b6b; }
.cfg-login-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--cfg-muted); }
.cfg-login-links a { color: var(--primary-color, #20d21a); }

/* «Сохранить в Мои товары» under the inquiry button (signed-in viewers only) */
.cfg-save-btn { margin-top: 8px; }
.cfg-save-status { margin: 8px 0 0; font-size: 12.5px; text-align: center; color: rgba(255, 255, 255, 0.7); }
.cfg-save-status a { color: #fec725; }
.cfg-save-status.is-error { color: #ff7b72; }
:root[data-theme="light"] .cfg-save-status { color: rgba(0, 0, 0, 0.65); }
:root[data-theme="light"] .cfg-save-status a { color: #9a6d00; }