/* „Сглобете тръбата“: сцена вляво (3D или чертеж), панел вдясно */
.alat { padding: 0 0 var(--vazduh); }
.alat-mreja { width: var(--shir); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.alat-scena {
  position: sticky; top: calc(var(--glava-v) + 16px);
  height: calc(100vh - var(--glava-v) - 32px); height: calc(100svh - var(--glava-v) - 32px); min-height: 460px;
  border-radius: 22px; background: var(--hartiya-2); overflow: hidden;
}
.alat-platno { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s; cursor: grab; touch-action: pan-y; }
.alat-platno:active { cursor: grabbing; }
.alat-platno.gotovo { opacity: 1; }
.alat[data-izgled="chertezh"] .alat-platno { visibility: hidden; }
.alat-tabove { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--hartiya); box-shadow: 0 0 0 1px var(--liniya-2); }
.alat-tabove button { min-height: 44px; min-width: 64px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: 500 14px var(--sans); cursor: pointer; color: var(--mastilo-2); }
.alat-tabove button[aria-selected="true"] { background: var(--mastilo); color: var(--hartiya); }
.alat-dolu { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; pointer-events: none; }
.alat-dolu > * { pointer-events: auto; }
.chip-btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--mastilo); background: var(--hartiya); font: 500 14px var(--sans); cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--mastilo); color: var(--hartiya); }
.alat[data-izgled="chertezh"] .chip-btn, .alat[data-vid="prat"] .chip-btn, .alat[data-izgled="chertezh"] .alat-vlachi { display: none; }
.alat-merki { font-size: 13.5px; color: var(--mastilo-2); background: var(--hartiya); padding: 8px 12px; border-radius: 9px; }
.alat-vlachi { margin-left: auto; font-size: 13px; color: var(--mastilo-3); }
.alat-bez3d { display: none; position: absolute; inset: auto 24px 90px; color: var(--mastilo-3); font-size: 15px; }
.alat.bez-3d .alat-bez3d { display: block; }

/* чертежът */
.chertezh { position: absolute; inset: 64px 16px 76px; width: calc(100% - 32px); height: calc(100% - 140px); --ch-fon: var(--hartiya-2); }
.chertezh[hidden] { display: none; }
.chertezh .ch-kontur { fill: none; stroke: var(--mastilo); stroke-width: 2.2; stroke-linejoin: round; }
.chertezh .ch-kontur-t { fill: none; stroke: var(--mastilo); stroke-width: 1.4; }
.chertezh .ch-tanka { stroke: var(--mastilo); stroke-width: 1.2; }
.chertezh .ch-skrita { stroke: var(--mastilo-2); stroke-width: 1.2; stroke-dasharray: 9 6; }
.chertezh .ch-os { stroke: var(--mastilo-3); stroke-width: 1; stroke-dasharray: 26 6 3 6; }
.chertezh .ch-sech { fill: var(--oranzh); }
.chertezh .ch-lainer { fill: #C7C9C4; }
.chertezh .ch-shev { stroke: #fff; stroke-width: 1.4; stroke-dasharray: 5 4; }
.chertezh .ch-rezba { fill: none; stroke: var(--mastilo); stroke-width: 1.3; }
.chertezh .ch-otvor { fill: var(--hartiya-2); stroke: var(--mastilo); stroke-width: 1.6; }
.chertezh .ch-vlozhka { fill: #B9BEC2; stroke: var(--mastilo); stroke-width: 1.4; }
.chertezh .ch-dim, .chertezh .ch-ext { stroke: var(--mastilo-2); stroke-width: 1; }
.chertezh .ch-ext { stroke-width: .8; }
.chertezh .ch-str { fill: var(--mastilo-2); }
.chertezh .ch-t { font: 500 19px var(--mono); fill: var(--mastilo); }
.chertezh .ch-mal { font-size: 16px; fill: var(--mastilo-2); }

/* панелът */
.alat-panel { display: grid; gap: 0; padding-top: 4px; }
.alat-panel .red { border: 0; margin: 0; padding: 18px 0 20px; border-top: 1px solid var(--liniya); min-width: 0; }
.alat-panel .red:first-child { border-top: 0; padding-top: 0; }
.alat-panel legend, .red-et { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 0; margin-bottom: 12px; font-size: 14px; color: var(--mastilo-3); }
.red-et output { font-size: 17px; color: var(--mastilo); font-weight: 500; }
.chipove { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--liniya); font-size: 15px; transition: background .2s, color .2s, border-color .2s; }
.chip:hover span { border-color: var(--mastilo); }
.chip input:checked + span { background: var(--mastilo); color: var(--hartiya); border-color: var(--mastilo); }
.chip input:focus-visible + span { outline: 2px solid var(--oranzh); outline-offset: 2px; }
.chipove-mono .chip span { font-size: 13.5px; }
.stapka { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; height: 64px; border: 1.5px solid var(--mastilo); border-radius: var(--r); align-items: center; }
.stapka button { height: 100%; border: 0; background: transparent; font-size: 24px; cursor: pointer; border-radius: 8px; }
.stapka button:hover { color: var(--oranzh-tekst); }
.stapka input { border: 0; background: transparent; text-align: center; font: 500 30px/1 var(--mono); min-width: 0; width: 100%; height: 100%; }
.stapka input:focus { outline: none; }
.stapka:focus-within { box-shadow: 0 0 0 3px rgba(232, 105, 28, .25); }
.plaz { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.plaz::-webkit-slider-runnable-track { height: 2px; background: var(--liniya); }
.plaz::-moz-range-track { height: 2px; background: var(--liniya); }
.plaz::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--hartiya); border: 2px solid var(--mastilo); margin-top: -10px; }
.plaz::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--hartiya); border: 2px solid var(--mastilo); }
.plaz:focus-visible { outline: none; }
.plaz:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(232, 105, 28, .3); }
.belezhka { font-size: 14px; color: var(--mastilo-3); min-height: 1.4em; }
.belezhka b { color: var(--mastilo); font-weight: 500; }
.red-d .belezhka { margin-top: 2px; }
.kvadratche { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 15.5px; }
.kvadratche input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 1.5px solid var(--mastilo); border-radius: 6px; margin: 0; flex: none; display: grid; place-items: center; cursor: pointer; background: var(--hartiya); }
.kvadratche input:checked { background: var(--mastilo); }
.kvadratche input:checked::after { content: ''; width: 10px; height: 6px; border: 2px solid var(--hartiya); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.rezultat dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.rezultat dt { font-size: 13px; color: var(--mastilo-3); }
.rezultat dd { font-size: 19px; margin-top: 4px; letter-spacing: -0.01em; }
.rezultat .glavno dd { color: var(--seladon-tamen); }
.rezultat .sr dd { font-size: 15px; color: var(--mastilo-2); }
.broi-red { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--mastilo-3); flex-wrap: wrap; }
.broi-red input { width: 88px; height: 44px; border: 1.5px solid var(--liniya); border-radius: 9px; background: var(--hartiya); padding: 0 10px; font: 500 16px var(--mono); }
.broi-red span { margin-left: auto; }
.broi-red b { color: var(--mastilo); font-weight: 500; }
.alat-zapitvane { margin-top: 8px; justify-content: center; }
.alat-panel > .belezhka { margin-top: 12px; }

/* какво се вижда според избора */
.alat[data-vid="prat"] .samo-traba, .alat[data-vid="prat"] .samo-krag, .alat[data-vid="prat"] .samo-drugo { display: none; }
.alat[data-vid="traba"] .samo-prat { display: none; }
.alat[data-forma="krag"] .samo-drugo { display: none; }
.alat:not([data-forma="krag"]) .samo-krag { display: none; }

@media (max-width: 960px) {
  .alat-mreja { grid-template-columns: minmax(0, 1fr); }
  .alat-scena { position: relative; top: 0; height: min(72vw, 520px); min-height: 320px; }
  .alat-vlachi { display: none; }
}
@media (max-width: 420px) {
  .rezultat dl { grid-template-columns: 1fr; }
  .alat-tabove button { min-width: 56px; }
}

/* Външният диаметър (1.11.2026): поле при кръгла и конусна тръба, при правоъгълна и пирамидална само плъзгач с размера */
.alat[data-forma="pravo"] .samo-kragal, .alat[data-forma="piramida"] .samo-kragal { display: none; }
.alat[data-forma="krag"] #alat-van-izh, .alat[data-forma="konus"] #alat-van-izh { display: none; }
.red-van .belezhka { margin-top: 2px; }