/**
 * Apex Racking Calculator — стилове (СВЕТЛА тема).
 *
 * Цялата палитра е в CSS променливи (--arc-*) → theming-ът е пресмапване на
 * стойностите, без да се пипа markup/логика. renderer.js рисува канваса със
 * собствени (hardcode-нати) цветове — затова палитрата тук засяга само UI chrome-а.
 *
 * @see docs/calculator-stelaji/03-layout-ui.md §5
 */

.apex-rc {
	/* ── Светла палитра (роли запазени от тъмната тема) ── */
	--arc-steel: #ffffff;       /* основен фон + фон на полета */
	--arc-steel-mid: #f5f7fa;   /* панели: sidebar, карти, BOM, форма */
	--arc-steel-light: #e3e7ee; /* линии, рамки, разделители */
	--arc-ink: #1b1d24;         /* основен тъмен текст / заглавия */
	--arc-white: #1b1d24;       /* (роля „текст" → сега тъмен ink на светъл фон) */
	--arc-orange: #cc1e1e;      /* червен акцент (бутони, числа, лого) */
	--arc-orange-dim: #a81717;
	--arc-yellow: #d99500;
	--arc-muted: #6b7480;       /* приглушени етикети/бележки */
	--arc-beam: #e8a020;
	--arc-frame: #3d9bc4;
	--arc-green: #3fae57;

	--arc-field-bg: #ffffff;    /* фон на input/select */
	--arc-canvas-bg: #eef1f5;   /* неутрален фон на канвасите (UI), не чертежа */
	--arc-zone-bg: #f7f7f7;     /* фон на работната зона (чертеж + запитване) — отделя я от бялата sidebar колона */
	--arc-angle: 16px;          /* скосен ръб на основните бутони (бранд) */

	--arc-col-input: 360px;
	--arc-col-results: 320px;

	/* Шрифтове — съгласувани с темата: Roboto (текст) + Akrobat (заглавия). */
	--arc-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--arc-font-heading: 'Akrobat', 'Roboto', system-ui, sans-serif;

	box-sizing: border-box;
	color: var(--arc-ink);
	font-family: var(--arc-font-body);
}
.apex-rc *,
.apex-rc *::before,
.apex-rc *::after { box-sizing: border-box; }

/* ── HEADER ── */
.arc-header {
	background: var(--arc-steel);
	border-bottom: 3px solid var(--arc-orange);
	padding: 16px 28px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.arc-logo {
	width: 32px; height: 32px;
	background: var(--arc-orange);
	clip-path: polygon(0 100%, 20% 100%, 20% 20%, 40% 20%, 40% 60%, 60% 60%, 60% 0%, 80% 0%, 80% 80%, 100% 80%, 100% 100%);
}
/* H1 на калкулатора — H2 от скалата на дизайна (48px). В колона от 360px се
   пречупва на два реда от само себе си, затова няма форсиран breakpoint.
   „Стелажи“ е в <span>, но в дизайна не е акцентирано в червено — целият ред е
   в тъмния цвят, затова span-ът няма собствено правило. */
.arc-title {
	font-family: var(--arc-font-heading);
	font-size: 48px; font-weight: 700; letter-spacing: 0; line-height: 1;
	text-transform: uppercase; color: var(--arc-ink); margin: 0;
}
.arc-tagline {
	margin-left: auto; font-size: 12px; color: var(--arc-muted);
	text-transform: uppercase; letter-spacing: 1px;
}

/* ── GRID (триколонен) ── */
.arc-grid {
	display: grid;
	grid-template-columns: var(--arc-col-input) minmax(0, 1fr) var(--arc-col-results);
	align-items: start;

	/* Работната зона (чертеж + запитване) стои на светъл сив фон, а колоната с
	   входните данни остава бяла — така двете се четат като отделни зони.
	   Фонът е на грида, а не на всяка колона поотделно: колоните са с различна
	   височина (align-items: start) и иначе сивото щеше да свършва на различно
	   място под всяка от тях. Sidebar-ът се покрива с белия си фон отгоре. */
	background: var(--arc-zone-bg);
}

/* ── COL 1 · SIDEBAR ── */
.arc-sidebar {
	background: #fff;
	border-right: 1px solid var(--arc-steel-light);
	padding: 24px 20px;

	/* Гридът е `align-items: start`, тоест колоната е висока колкото полетата в
	   нея. Когато работната зона отдясно е по-дълга, под колоната се показваше
	   сивият фон на грида. `stretch` разтяга само фона и разделителната линия до
	   долния ръб на реда — полетата остават горе. */
	align-self: stretch;
}
/* Заглавията са две нива от типографската скала на дизайна:
   H5 (26px) за секциите в работната зона — „Технически чертеж“, „Спецификация“,
   „Запитване за конфигурацията“ — и H6 (20px) за групите полета в sidebar-а.
   Базата тук е H5; sidebar-ът я сваля на H6 малко по-долу. */
.arc-section-title {
	font-family: var(--arc-font-heading);
	font-size: 26px; font-weight: 700; letter-spacing: 0.26px; line-height: 1.1;
	text-transform: uppercase; color: var(--arc-ink);
	margin-bottom: 14px; padding-bottom: 8px;
	border-bottom: 1px solid var(--arc-steel-light);
}
/* Групите полета в лявата колона са H6 — едно ниво под секционните заглавия. */
.arc-sidebar .arc-section-title {
	font-size: 20px; letter-spacing: 1px; line-height: 1;
}
.arc-section-title em { font-style: normal; color: var(--arc-orange); font-size: 11px; letter-spacing: 0; text-transform: none; }
.arc-input-group { margin-bottom: 16px; }
.arc-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apex-rc label {
	display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: 1px; color: var(--arc-muted); margin-bottom: 6px;
}
.apex-rc label em { font-style: normal; color: var(--arc-muted); font-weight: 400; font-size: 10px; }
.arc-muted { font-size: 10px; color: var(--arc-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.apex-rc input[type="number"],
.apex-rc select {
	width: 100%; background: var(--arc-field-bg); border: 1px solid var(--arc-steel-light);
	border-radius: 6px; color: var(--arc-ink); padding: 10px 12px;
	font-family: inherit; font-size: 15px; outline: none;
	transition: border-color 0.2s; -moz-appearance: textfield;
}
.apex-rc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.apex-rc input:focus, .apex-rc select:focus { border-color: var(--arc-orange); }
.apex-rc select option { background: var(--arc-steel); color: var(--arc-ink); }
.arc-note { font-size: 10px; color: var(--arc-muted); margin-top: 4px; }
.arc-inline { display: flex; align-items: center; gap: 8px; }
.arc-inline input { flex: 1; }
.arc-divider { border: none; border-top: 1px solid var(--arc-steel-light); margin: 18px 0; }
.arc-pallet-canvas {
	width: 100%; border-radius: 6px; background: var(--arc-canvas-bg); margin-top: 4px; display: block;
}
.arc-btn-ghost {
	background: var(--arc-steel-light); border: none; color: var(--arc-ink);
	border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 11px; font-family: inherit;
}
.arc-calc-btn {
	width: 100%; background: var(--arc-orange); color: #fff; border: none;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--arc-angle)) 100%, 0 100%);
	padding: 15px 18px; font-family: var(--arc-font-heading); font-size: 17px; font-weight: 800; letter-spacing: 2px;
	text-transform: uppercase; cursor: pointer; transition: background 0.2s, transform 0.1s;
}
.arc-calc-btn:hover { background: var(--arc-orange-dim); }
.arc-calc-btn:active { transform: scale(0.98); }

/* ── COL 2 · DRAWING ── */
.arc-drawing-area {
	padding: 24px 28px;
	display: flex; flex-direction: column;
}
.arc-drawing-header {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
/* „Технически чертеж“ — същото ниво като „Спецификация“ и заглавието на формата (H5). */
.arc-drawing-header h2 {
	font-family: var(--arc-font-heading);
	font-size: 26px; font-weight: 700; letter-spacing: 0.26px; line-height: 1.1;
	text-transform: uppercase; color: var(--arc-ink); margin: 0;
}
.arc-drawing-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arc-view-tabs { display: flex; gap: 4px; background: var(--arc-steel-mid); border: 1px solid var(--arc-steel-light); border-radius: 6px; padding: 3px; }
.arc-view-tab {
	background: none; border: none; color: var(--arc-muted); padding: 5px 12px;
	border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 1px;
	text-transform: uppercase; cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.arc-view-tab:hover { color: var(--arc-ink); }
.arc-view-tab.is-active { background: #fff; color: var(--arc-ink); box-shadow: 0 1px 4px rgba(27, 29, 36, 0.12); }
/* Текстово действие с икона, не бутон с рамка: стои под лентата с изгледите,
   подравнено вляво, в основния тъмен цвят. */
.arc-download-btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: none; border: none; padding: 0;
	/* -1px отляво е оптическа корекция: заглавието и лентата с табове опират в
	   колоната с прав вертикален ръб, а иконата е кръг и докосва линията само в
	   една точка — без изместването изглежда вкарана навътре. */
	margin: 0 0 16px -1px;
	color: var(--arc-ink);
	font-family: var(--arc-font-body);
	font-size: 14px; font-weight: 500; line-height: 1.43;
	white-space: nowrap; cursor: pointer;
}
.arc-download-btn__icon { width: 20px; height: 20px; flex-shrink: 0; }
.arc-download-btn:hover { color: var(--arc-orange); }
.arc-rack-canvas {
	width: 100%; border-radius: 6px; background: var(--arc-canvas-bg); min-height: 300px;
	border: 1px solid var(--arc-steel-light);
}
.arc-legend { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.arc-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--arc-muted); }
.arc-dot { width: 12px; height: 12px; border-radius: 2px; }
.arc-dot-frame { background: var(--arc-frame); }
.arc-dot-beam { background: var(--arc-beam); }
.arc-dot-pallet { background: #9ecaed; opacity: 0.7; }
.arc-dot-brace { background: var(--arc-muted); }

/* ── COL 3 · RESULTS + BOM + CTA ── */
.arc-results-col {
	padding: 24px 24px 24px 0;
	display: flex; flex-direction: column; gap: 16px;
}
.arc-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.arc-result-card {
	background: #fff; border: 1px solid var(--arc-steel-light);
	border-radius: 10px; padding: 14px 16px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.arc-result-card.arc-empty {
	grid-column: 1 / -1; justify-content: center; text-align: center;
	color: var(--arc-muted); font-size: 13px; padding: 24px 16px;
}
.arc-card-text { min-width: 0; }
.arc-card-label {
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
	color: var(--arc-ink); display: flex; align-items: center; gap: 7px;
}
.arc-card-sub { font-size: 11px; color: var(--arc-muted); margin-top: 3px; line-height: 1.35; }
.arc-card-num {
	font-family: var(--arc-font-heading); font-size: 30px; font-weight: 800;
	color: var(--arc-orange); line-height: 1; white-space: nowrap;
}
.arc-card-unit { font-size: 12px; font-weight: 600; color: var(--arc-muted); margin-left: 3px; }
.arc-card-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.arc-inquiry-btn {
	width: 100%; background: var(--arc-orange); color: #fff; border: none;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--arc-angle)) 100%, 0 100%);
	padding: 14px 18px; font-family: var(--arc-font-heading); font-size: 16px; font-weight: 800; letter-spacing: 1px;
	text-transform: uppercase; cursor: pointer; transition: background 0.2s;
}
.arc-inquiry-btn:hover:not(:disabled) { background: var(--arc-orange-dim); }
.arc-inquiry-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.arc-inquiry-form {
	/* Плосък бял правоъгълник — без рамка, заобляне и сянка. Открояването идва
	   изцяло от контраста със сивия фон на работната зона. */
	background: #fff;
	padding: 18px;
}
.arc-inquiry-form .arc-section-title { margin-bottom: 12px; }
.arc-inquiry-form input[type="text"],
.arc-inquiry-form input[type="email"],
.arc-inquiry-form input[type="tel"],
.arc-inquiry-form textarea,
.arc-inquiry-form select {
	width: 100%; background: var(--arc-field-bg); border: 1px solid var(--arc-steel-light);
	border-radius: 6px; color: var(--arc-ink); padding: 9px 12px; font-family: inherit;
	font-size: 14px; margin-bottom: 8px;
}
.arc-inquiry-form input:focus, .arc-inquiry-form textarea:focus { border-color: var(--arc-orange); outline: none; }
.arc-inquiry-form .wpcf7-submit {
	background: var(--arc-orange); color: #fff; border: none;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--arc-angle)) 100%, 0 100%);
	padding: 12px 22px; font-family: var(--arc-font-heading); font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
	cursor: pointer; font-size: 15px;
}
.arc-inquiry-form .wpcf7-submit:hover { background: var(--arc-orange-dim); }
.arc-inquiry-form .wpcf7-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.arc-inquiry-hint { margin: -4px 0 14px; }

/* Форма (5706 markup) в тясната дясна колона — едноколонно, компактно. */
.arc-inquiry-form .apex-form-grid { display: block; }
.arc-inquiry-form .apex-field { margin: 0 0 10px; }
.arc-inquiry-form .apex-field label {
	display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: 1px; color: var(--arc-muted); margin-bottom: 6px;
}
.arc-inquiry-form .apex-field .req { color: var(--arc-orange); }
.arc-inquiry-form .apex-company-toggle {
	background: none; border: none; color: var(--arc-orange); cursor: pointer; padding: 2px 0;
	font-family: var(--arc-font-body); font-size: 13px; font-weight: 700;
	display: inline-flex; align-items: center; gap: 6px;
}
.arc-inquiry-form .apex-company-toggle::before { content: '+'; font-size: 16px; line-height: 1; }
.arc-inquiry-form .apex-company-toggle[aria-expanded="true"]::before { content: '−'; }
/* Чекбокс/consent текст — 12px, нормален регистър (не caps). */
.arc-inquiry-form .apex-consent,
.arc-inquiry-form .apex-consent label,
.arc-inquiry-form .apex-consent .wpcf7-list-item-label,
.arc-inquiry-form .apex-consent a {
	font-size: 12px; line-height: 1.45; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.arc-inquiry-form .apex-consent { display: block; color: var(--arc-ink); margin-bottom: 12px; }
.arc-inquiry-form .apex-consent .wpcf7-list-item { margin: 0; }
.arc-inquiry-form .apex-consent a { color: var(--arc-orange); }
.arc-inquiry-form__submit { margin-top: 4px; }

/* ── Заглавен блок в лявата колона ── */
.arc-sidebar__head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 2px solid var(--arc-orange); }
.arc-sidebar__head .arc-logo { display: none; }
/* .apex-breadcrumb идва от темата (@see куката apex_rc_before_title по-горе) —
   размерът и цветовете са нейни и вече съвпадат с макета (12px/1.2px разредка,
   проверено по ширината на изписаните нива). Тук се задава само отстоянието:
   базовите 40px на компонента са премерени за hero-тата, а в макета на
   калкулатора разстоянието от основата на реда до горния ръб на главните букви
   на заглавието е 41px, което при тези кегели отговаря на 32px margin. */
.arc-sidebar__head .apex-breadcrumb { margin-bottom: 32px; }
/* Размерът идва от .arc-title (48px) — тук се задава само отстоянието. */
.arc-sidebar__head .arc-title { margin: 0 0 5px; }
.arc-sidebar__head .arc-tagline {
	display: block; margin: 0; text-transform: none; letter-spacing: 0;
	font-size: 12px; color: var(--arc-muted);
}

/* ── Спецификация (под чертежа, в центъра) ── */
.arc-spec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--arc-steel-light); }
.arc-spec .arc-results-grid { grid-template-columns: 1fr 1fr; } /* 2 на ред (както в дизайна) */

/* ── Колона 3 · запитване ── */
.arc-inquiry-col { padding: 24px 28px 24px 4px; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
	.arc-grid { grid-template-columns: var(--arc-col-input) 1fr; }
	/* Колоната със запитването пада на цял ред под чертежа. На десктоп тя е
	   трета колона и горният ѝ ръб се изравнява с останалите — тук обаче стои
	   ПОД тях, а padding-top: 0 я лепеше право за резултатите отгоре.
	   Отстъп + косъмна линия, за да се чете като отделна зона. */
	.arc-inquiry-col {
		grid-column: 1 / -1;
		padding: 28px 0;
		border-top: 1px solid var(--arc-steel-light);
	}

	/* Калкулаторът си носи собствените отстъпи по колони — страничният отстъп
	   на темата само стеснява чертежа, без да добавя нищо. Затваря се само за
	   контейнера, в който стои калкулаторът, не за всички.
	   `!important` е задължително: @mixin container в темата слага отстъпите
	   с !important (sass/abstracts/mixins/_mixins.scss).
	   При браузър без :has() правилото просто не важи и отстъпите остават —
	   безобиден fallback. */
	.container:has(.apex-rc) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
@media (max-width: 768px) {
	.arc-grid { grid-template-columns: 1fr; }
	.arc-sidebar { border-right: none; border-bottom: 1px solid var(--arc-steel-light); }
	.arc-drawing-area { padding: 20px; }
	.arc-inquiry-col { padding: 0 20px 24px; }
	.arc-spec .arc-results-grid { grid-template-columns: 1fr 1fr; }

	/* Ширина склад / Дължина склад — двете колони не се събират на тесен
	   екран (второто поле излизаше извън контейнера), падат едно под друго. */
	.arc-input-row { grid-template-columns: 1fr; }

	/* Табовете на чертежа (План склад / Изглед отпред / ...) не се събират
	   на един ред на мобилно — хоризонтален скрол вместо да излизат извън
	   контейнера, същия идиом като .apex-shop-chips в темата. */
	.arc-view-tabs {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.arc-view-tab { white-space: nowrap; }
}

/* ── Под таблетска ширина: калкулаторът отстъпва на съобщение ──
   Конфигураторът чертае план на склада и разрези с размери в милиметри —
   под 768px линиите и етикетите се сливат и резултатът не може да се
   провери. Затова цялата мрежа се скрива, а на нейно място застава
   .arc-too-narrow (@see templates/calculator.php).

   Границата е 767px: от 768 до 1023px мрежата също се крие, но с другото
   съобщение (@see .arc-rotate в края на файла). Заради това двете блокът
   @media (max-width: 768px) по-горе, който правеше мрежата едноколонна,
   вече не достига до екран — оставен е, за да не се губи при евентуално
   вдигане на границите. */
.arc-too-narrow { display: none; }

@media (max-width: 767px) {

	.apex-rc .arc-grid { display: none; }

	/* Шорткодът стои в обикновена страница (page.php), без hero — иначе
	   блокът опира право в долния ръб на фиксирания хедър.
	   Отстоянието е padding НА .apex-rc, не margin на самото съобщение:
	   вертикалните margin-и се сгъват през родители без padding/border
	   (.entry-content, #content) и излизаха извън контейнера, тоест над
	   хедъра — невидими. */
	.apex-rc { padding: 40px 0; }

	.apex-rc .arc-too-narrow {
		display: block;
		padding: 56px 24px;
		text-align: center;
		background: var(--arc-steel-mid);
		border: 1px solid var(--arc-steel-light);
	}

	/* Иконката е самостоятелен ред над заглавието и се центрира сама, а не
	   чрез text-align на родителя — така не зависи от inline подравняването
	   на <svg>. */
	.arc-too-narrow__icon {
		display: block;
		color: var(--arc-orange);
	}

	.arc-too-narrow__icon svg {
		display: block;
		margin: 0 auto;
	}

	.arc-too-narrow__title {
		margin: 16px 0 0;
		font-family: var(--arc-font-heading);
		font-size: 24px;
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--arc-ink);
	}

	.arc-too-narrow__text {
		max-width: 420px;
		margin: 12px auto 0;
		font-size: 15px;
		line-height: 1.5;
		color: var(--arc-muted);
	}
}

/* ── 768–1023px: подкана за завъртане ──
   Същото поведение като .arc-too-narrow — мрежата се скрива и остава само
   съобщението. Разликата е само в повода: там екранът е твърде тесен изобщо,
   тук има място, но чак в хоризонтално положение.

   Границите се допират до тези на .arc-too-narrow (767/768), така че двете
   съобщения никога не се показват заедно. От 1024px нагоре калкулаторът се
   показва — там мрежата вече е достатъчно широка.

   Без проверка за `orientation`: решаващото е ширината, а не как е завъртяно
   устройството. Тесен прозорец на компютър също попада тук и подканата е
   безобидна — уголемяването на прозореца върши същата работа. */
.arc-rotate { display: none; }

@media (min-width: 768px) and (max-width: 1023px) {

	.apex-rc .arc-grid { display: none; }

	/* Padding, не margin — @see бележката при .arc-too-narrow по-горе. */
	.apex-rc { padding: 40px 0; }

	.apex-rc .arc-rotate {
		display: block;
		padding: 56px 24px;
		text-align: center;
		background: var(--arc-steel-mid);
		border: 1px solid var(--arc-steel-light);
	}

	.arc-rotate__icon {
		display: block;
		color: var(--arc-orange);
	}

	.arc-rotate__icon svg {
		display: block;
		width: 48px;
		height: 48px;
		margin: 0 auto;
	}

	.arc-rotate__text {
		display: block;
		max-width: 420px;
		margin: 16px auto 0;
		font-size: 15px;
		line-height: 1.5;
		color: var(--arc-muted);
	}

	.arc-rotate__title {
		display: block;
		margin: 16px 0 0;
		font-family: var(--arc-font-heading);
		font-size: 24px;
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--arc-ink);
	}
}