/* Конфигуратор лабораторной мебели — стили */
* { box-sizing: border-box; }
[v-cloak] { display: none; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1c2b2b;
    background: #f4f6f7;
}

.cfg { max-width: 1200px; margin: 0 auto; padding: 20px; }

.cfg__header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 20px;
}
.cfg__title { font-size: 24px; margin: 0; }
.cfg__series { display: flex; flex-direction: column; gap: 4px; }
.cfg__series label { font-size: 12px; color: #6b7c7c; }
.cfg__series select {
    padding: 10px 12px; border: 1px solid #cdd7d7; border-radius: 8px;
    font-size: 15px; min-width: 320px; background: #fff;
}

.cfg__loading, .cfg__error {
    padding: 40px; text-align: center; font-size: 16px;
    background: #fff; border-radius: 12px;
}
.cfg__error { color: #c0392b; }

.cfg__body {
    display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: start;
}
@media (max-width: 900px) { .cfg__body { grid-template-columns: 1fr; } }

/* Визуализация */
.cfg__viewer {
    background: #fff; border-radius: 12px; padding: 16px;
    position: sticky; top: 20px;
}
.viewer__stage {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    background: #fbfcfc; border-radius: 8px; overflow: hidden;
}
.viewer__layer {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain;
}
.viewer__price {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 10px;
    margin-top: 14px; font-size: 16px;
}
.viewer__price b { font-size: 24px; color: #14b0b2; }

/* Панель */
.cfg__panel { background: #fff; border-radius: 12px; padding: 20px; }
.panel__related { margin-bottom: 16px; }
.panel__related a { color: #14b0b2; text-decoration: none; }
.panel__related a:hover { text-decoration: underline; }

.panel__label {
    font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7c7c; margin: 18px 0 8px;
}
.panel__group, .panel__block { border-top: 1px solid #eef1f1; padding-top: 4px; }
.panel__group:first-of-type, .panel__block:first-of-type { border-top: none; }

.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
    display: inline-flex; align-items: center; padding: 8px 14px;
    border: 1px solid #cdd7d7; border-radius: 8px; cursor: pointer;
    font-size: 14px; user-select: none; transition: .15s;
}
.btn input { display: none; }
.btn:hover { border-color: #14b0b2; }
.btn.active { border-color: #14b0b2; background: #e7f7f7; color: #0c7a7c; }

.option__row {
    display: flex; align-items: center; gap: 8px; padding: 5px 0;
}
.opt-radio, .opt-check {
    display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1;
}
.opt-radio input, .opt-check input { display: none; }
.mark {
    width: 18px; height: 18px; border: 2px solid #cdd7d7; flex: 0 0 auto;
    display: inline-block;
}
.opt-radio .mark { border-radius: 50%; }
.opt-check .mark { border-radius: 4px; }
.opt-radio input:checked + .mark,
.opt-check input:checked + .mark {
    border-color: #14b0b2; background: #14b0b2;
    box-shadow: inset 0 0 0 3px #fff;
}
.opt-radio input:disabled + .mark,
.opt-check input:disabled + .mark { opacity: .4; }
.opt-name { font-size: 14px; }
.opt-price { color: #14b0b2; font-size: 13px; margin-left: auto; white-space: nowrap; }
.opt-count { width: 56px; padding: 4px 6px; border: 1px solid #cdd7d7; border-radius: 6px; }
.opt-remove { color: #c0392b; font-size: 12px; cursor: pointer; }
.opt-remove:hover { text-decoration: underline; }
.opt-hint {
    width: 18px; height: 18px; border-radius: 50%; background: #e7f7f7; color: #0c7a7c;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
    cursor: help; flex: 0 0 auto;
}

/* Вкладки внутри блока */
.b-tabs { margin-top: 8px; }
.tabs-title { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tab-link {
    padding: 6px 12px; border: 1px solid #cdd7d7; border-radius: 8px 8px 0 0;
    border-bottom: none; cursor: pointer; font-size: 13px; color: #6b7c7c;
}
.tab-link.active { color: #0c7a7c; background: #e7f7f7; border-color: #14b0b2; }
.tab_content { border-top: 1px solid #eef1f1; padding-top: 4px; }

/* Превью по наведению (POPUP_IMAGE) */
.preview { position: relative; display: inline-flex; }
.preview img {
    display: none; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    max-width: 160px; max-height: 160px; margin-left: 8px; border: 1px solid #cdd7d7;
    border-radius: 8px; background: #fff; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.preview:hover img { display: block; }

.panel__actions { display: flex; gap: 10px; margin-top: 24px; }
.button {
    flex: 1; padding: 12px; border-radius: 8px; font-size: 15px; cursor: pointer;
    border: 1px solid transparent; transition: .15s;
}
.button--primary { background: #14b0b2; color: #fff; }
.button--primary:hover { background: #0f9799; }
.button--ghost { background: #fff; border-color: #14b0b2; color: #0c7a7c; }
.button--ghost:hover { background: #e7f7f7; }