/*
 * ZDL Заказ-наряд — стили по утверждённому макету (графит и шампань).
 * Всё внутри .zdl-order, классы с префиксом zdl-: тема не ломает форму, форма не ломает тему.
 * Шрифты не подключаются: Unbounded и Onest отдаёт тема Blocksy (локально), иначе — системные.
 */
.zdl-order {
	/* Высота закреплённой шапки темы и админ-панели: скрипт измеряет её сам (form.js, measureTopOffset). */
	--zdl-top-offset: var(--wp-admin--admin-bar--height, 0px);
	--zdl-font-head: 'Unbounded';
	--zdl-font-body: 'Onest';
	--zdl-font-mono: 'IBM Plex Mono';
	--zdl-graphite: #1B1F24;
	--zdl-graphite-hover: #2A2F35;
	--zdl-ink: #16191D;
	--zdl-text: #3E444B;
	--zdl-muted: #5A6068;
	--zdl-gold: #A9824D;
	--zdl-gold-hover: #B8925C;
	--zdl-gold-dark: #8A6A3C;
	--zdl-gold-light: #EFE6D6;
	--zdl-line: #E3DED5;
	--zdl-line-strong: #CBC4B8;
	--zdl-bg: #F5F4F1;
	--zdl-white: #FFFFFF;
	--zdl-row-on: #F8F4EC;
	--zdl-err-bg: #FBF7F0;
	--zdl-head: var(--zdl-font-head), var(--zdl-font-body), system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--zdl-body: var(--zdl-font-body), system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--zdl-mono: var(--zdl-font-mono), ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	color: var(--zdl-ink);
	font-family: var(--zdl-body);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
.zdl-order *, .zdl-order *::before, .zdl-order *::after { box-sizing: border-box; }
.zdl-order [hidden] { display: none !important; }
.zdl-order a { color: var(--zdl-graphite); text-decoration: underline; }
.zdl-order a:hover { color: var(--zdl-ink); }
.zdl-order :focus-visible { outline: 3px solid var(--zdl-graphite); outline-offset: 2px; }
.zdl-order ::placeholder { color: var(--zdl-muted); opacity: 1; }

/* Сброс оформления темы для наших кнопок, полей и групп */
.zdl-order button,
.zdl-order .zdl-btn {
	font-family: inherit; text-transform: none; letter-spacing: normal; text-shadow: none; box-shadow: none;
	margin: 0; -webkit-appearance: none; appearance: none; line-height: 1.2; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.zdl-order fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.zdl-order legend { padding: 0; margin: 0; border: 0; float: left; width: 100%; color: var(--zdl-ink); }
.zdl-order legend + * { clear: both; }
.zdl-order h1, .zdl-order h2 { color: var(--zdl-ink); text-transform: none; }
.zdl-order p { margin: 0; }

/* Вступление */
.zdl-intro { margin-bottom: 28px; }
.zdl-kicker { font-family: var(--zdl-mono); font-size: 13px; letter-spacing: 1px; color: var(--zdl-gold-dark); font-weight: 500; margin-bottom: 12px; }
.zdl-kicker--sm { margin-bottom: 0; }
.zdl-order .zdl-h1 { margin: 0 0 12px; font-family: var(--zdl-head); font-size: clamp(28px, 4vw, 48px); line-height: 1.12; font-weight: 700; letter-spacing: -0.5px; }
.zdl-lead { margin: 0 0 16px; font-size: clamp(16px, 2vw, 18px); line-height: 1.6; color: var(--zdl-text); max-width: 760px; }
.zdl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zdl-chips-label { font-size: 14px; color: var(--zdl-muted); margin-right: 2px; }
.zdl-chip { font-size: 14px; color: var(--zdl-text); background: var(--zdl-white); border: 1px solid var(--zdl-line); border-radius: 999px; padding: 6px 12px; }

/* Раскладка: форма + сводка справа */
.zdl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.zdl-form { min-width: 0; display: flex; flex-direction: column; gap: 20px; margin: 0; }
.zdl-trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Карточки разделов */
.zdl-order .zdl-card { border: 1px solid var(--zdl-line); border-radius: 16px; background: var(--zdl-white); padding: clamp(18px, 4vw, 28px); display: flex; flex-direction: column; min-width: 0; margin: 0; }
.zdl-card--g14 { gap: 14px; }
.zdl-card--g16 { gap: 16px; }
.zdl-card--g18 { gap: 18px; }
.zdl-card--g20 { gap: 20px; }
.zdl-order .zdl-legend { font-family: var(--zdl-head); font-size: clamp(18px, 4.6vw, 21px); line-height: 1.3; font-weight: 700; margin: 0 0 4px; letter-spacing: normal; }
.zdl-order .zdl-legend--h { margin: 0; }
.zdl-num { font-family: var(--zdl-mono); font-size: 14px; color: var(--zdl-gold-dark); margin-right: 10px; font-weight: 500; }
.zdl-req { color: var(--zdl-gold-dark); font-weight: 700; }
.zdl-optional { font-weight: 400; color: var(--zdl-muted); font-size: 14px; }
.zdl-text { font-size: 15px; line-height: 1.5; color: var(--zdl-text); }
.zdl-hint { font-size: 14px; line-height: 1.5; color: var(--zdl-muted); }
.zdl-small { font-size: 13px; line-height: 1.5; color: var(--zdl-muted); }
.zdl-muted { color: var(--zdl-muted); }
.zdl-mono { font-family: var(--zdl-mono); }
.zdl-hr { height: 1px; background: var(--zdl-line); }
.zdl-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px 16px; }

/* Поля */
.zdl-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zdl-field--g10 { gap: 10px; }
.zdl-field--flat { gap: 12px; }
.zdl-narrow { max-width: 360px; }
.zdl-label { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--zdl-ink); margin: 0; }
.zdl-order .zdl-input {
	display: block; width: 100%; min-width: 0; height: 52px; margin: 0;
	border: 1.5px solid var(--zdl-line-strong); border-radius: 10px; padding: 0 14px;
	font-family: inherit; font-size: 16px; line-height: normal; color: var(--zdl-ink); background: var(--zdl-white);
	box-shadow: none; outline-color: var(--zdl-graphite); transition: border-color .15s;
}
.zdl-order .zdl-input:hover { border-color: var(--zdl-muted); }
.zdl-order .zdl-input:focus { border-color: var(--zdl-graphite); box-shadow: none; }
.zdl-order .zdl-textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.zdl-order .zdl-input[aria-invalid="true"] { border: 2px solid var(--zdl-gold-dark); background: var(--zdl-err-bg); }
.zdl-error { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--zdl-ink); }
.zdl-ico { flex: 0 0 auto; margin-top: 1px; }
.zdl-error .zdl-ico { color: var(--zdl-gold-dark); }

/* Рамка ошибки у групп (формула, материал, импланты, фиксация, промежуток, работы, цвет) */
.zdl-box { border: 2px solid transparent; }
.zdl-has-error > .zdl-box { border-color: var(--zdl-gold-dark); }

/* Радио-варианты */
.zdl-opts { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 12px; }
.zdl-field[data-field="fix"] .zdl-opts { padding: 4px; margin: -4px; }
.zdl-order .zdl-opt {
	display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0;
	border: 1.5px solid var(--zdl-line-strong); border-radius: 10px; padding: 10px 14px;
	font-size: 15px; font-weight: 400; line-height: 1.35; color: var(--zdl-ink); cursor: pointer; background: var(--zdl-white);
}
.zdl-order .zdl-opt:hover { border-color: var(--zdl-muted); }
.zdl-order .zdl-opt:has(input:checked) { border-color: var(--zdl-graphite); background: var(--zdl-gold-light); box-shadow: inset 0 0 0 1px var(--zdl-graphite); }
.zdl-order .zdl-opt input,
.zdl-order .zdl-consent input {
	-webkit-appearance: auto; appearance: auto; position: static; opacity: 1;
	width: 20px; height: 20px; min-width: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--zdl-graphite);
	border: 0; background: none; box-shadow: none;
}

/* Кнопки */
.zdl-order .zdl-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
	border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; text-align: center;
}
.zdl-order .zdl-btn--dark { background: var(--zdl-graphite); color: var(--zdl-white); border: 0; }
.zdl-order .zdl-btn--dark:hover { background: var(--zdl-graphite-hover); color: var(--zdl-white); }
.zdl-order .zdl-btn--out { background: var(--zdl-white); color: var(--zdl-ink); border: 1.5px solid var(--zdl-line-strong); }
.zdl-order .zdl-btn--out:hover { border-color: var(--zdl-graphite); color: var(--zdl-ink); }
.zdl-order .zdl-btn--gold { background: var(--zdl-gold); color: var(--zdl-ink); border: 0; min-height: 48px; padding: 0 18px; border-radius: 10px; font-size: 15px; flex: 0 0 auto; }
.zdl-order .zdl-btn--gold:hover { background: var(--zdl-gold-hover); color: var(--zdl-ink); }
.zdl-order .zdl-btn--sm { min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 15px; }
.zdl-order .zdl-btn--out.zdl-btn--sm { font-size: 14px; font-weight: 600; padding: 0 14px; }
.zdl-order .zdl-btn--block { display: flex; width: 100%; min-height: 48px; font-size: 15px; }
.zdl-order .zdl-submit { align-self: flex-start; min-height: 58px; font-size: 18px; font-weight: 800; padding: 0 32px; }
.zdl-order .zdl-submit:disabled { opacity: .6; cursor: wait; }

/* Режимы формулы */
.zdl-stick { position: static; background: var(--zdl-white); padding: 6px 0; }
.zdl-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zdl-order .zdl-mode {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	min-height: 64px; padding: 8px 6px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center;
	color: var(--zdl-ink); background: var(--zdl-white); border: 2px solid var(--zdl-line-strong);
}
.zdl-order .zdl-mode:hover { border-color: var(--zdl-graphite); }
.zdl-order .zdl-mode[aria-pressed="true"] { background: var(--zdl-gold-light); border-color: var(--zdl-graphite); }
.zdl-sw { display: inline-block; width: 20px; height: 20px; border-radius: 5px; flex: 0 0 auto; border: 1.5px solid transparent; }
.zdl-k-crown { background: var(--zdl-gold); border: 1.5px solid var(--zdl-gold); }
.zdl-k-implant { background: var(--zdl-graphite); border: 1.5px solid var(--zdl-graphite); }
.zdl-k-pontic { background: var(--zdl-gold-light); border: 1.5px dashed var(--zdl-gold-dark); }

/*
 * Зубная формула: обе челюсти в одной сетке, порядок как на бланке (18…11 | 21…28, 48…41 | 31…38).
 * Колонки: 16 зубов (не уже 40 px) и 15 узких промежутков, средний — шире, с линией 11|21.
 * Если места меньше — ряд прокручивается целиком (оба ряда вместе), порядок не ломается.
 */
.zdl-teeth { display: flex; flex-direction: column; gap: 10px; background: var(--zdl-bg); border-radius: 14px; padding: clamp(12px, 3vw, 18px); min-width: 0; }
.zdl-jaw { font-size: 12px; letter-spacing: 1px; color: var(--zdl-muted); }
.zdl-arch-wrap { position: relative; min-width: 0; }
.zdl-arch-wrap::before,
.zdl-arch-wrap::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 3; pointer-events: none;
	opacity: 0; transition: opacity .2s;
}
.zdl-arch-wrap::before { left: 0; background: linear-gradient(to right, rgba(27, 31, 36, 0.12), rgba(27, 31, 36, 0)); border-radius: 8px 0 0 8px; }
.zdl-arch-wrap::after { right: 0; background: linear-gradient(to left, rgba(27, 31, 36, 0.12), rgba(27, 31, 36, 0)); border-radius: 0 8px 8px 0; }
.zdl-arch-wrap.zdl-shadow-l::before,
.zdl-arch-wrap.zdl-shadow-r::after { opacity: 1; }
.zdl-arch-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 2px 0 6px; scrollbar-width: thin; scrollbar-color: var(--zdl-line-strong) transparent; }
.zdl-arch {
	--zdl-gap: 6px;
	position: relative; display: grid; min-width: max-content;
	grid-template-columns: repeat(7, minmax(40px, 1fr) var(--zdl-gap)) minmax(40px, 1fr) 14px minmax(40px, 1fr) repeat(7, var(--zdl-gap) minmax(40px, 1fr));
	grid-template-rows: 52px 32px 8px 32px 52px;
}
.zdl-arch-mid { grid-area: 1 / 16 / 6 / 17; justify-self: center; width: 2px; background: var(--zdl-graphite); border-radius: 1px; }
.zdl-arch-occl { grid-area: 3 / 1 / 4 / -1; align-self: center; height: 1px; background: var(--zdl-line-strong); }
.zdl-order .zdl-tooth {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	width: 100%; min-width: 40px; height: 52px; min-height: 48px; padding: 0; border-radius: 10px 10px 16px 16px;
	background: var(--zdl-white); color: var(--zdl-ink); border: 1.5px solid var(--zdl-line-strong);
}
.zdl-order .zdl-tooth--lower { border-radius: 16px 16px 10px 10px; }

/* Точки-связки между соседними отмеченными зубами: клик — мост, ещё клик — раздельно */
.zdl-link-cell { position: relative; z-index: 2; }
.zdl-link-cell::before {
	content: ''; position: absolute; top: 50%; left: 24%; right: 24%; height: 3px; margin-top: -1.5px;
	border-radius: 2px; background: var(--zdl-gold); opacity: 0; transition: opacity .15s;
}
.zdl-link-cell[data-on="true"]::before { opacity: 1; }
.zdl-order .zdl-link {
	position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; min-height: 32px; margin: -16px 0 0 -16px; padding: 0;
	display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: inherit;
}
.zdl-link-dot {
	display: block; width: 12px; height: 12px; border-radius: 50%;
	border: 2px solid var(--zdl-gold-dark); background: var(--zdl-white); transition: background-color .15s, border-color .15s, transform .15s;
}
.zdl-order .zdl-link:hover .zdl-link-dot { transform: scale(1.2); }
.zdl-order .zdl-link[aria-pressed="true"] .zdl-link-dot { background: var(--zdl-gold); border-color: var(--zdl-gold); }
.zdl-order .zdl-link[aria-disabled="true"] { cursor: default; }
.zdl-order .zdl-link[aria-disabled="true"]:hover .zdl-link-dot { transform: none; }
.zdl-order .zdl-link[aria-disabled="true"] .zdl-link-dot { box-shadow: 0 0 0 2px var(--zdl-bg), 0 0 0 3px var(--zdl-gold); }
/* Материал без мостов (e.max): точка видна, но не нажимается */
.zdl-order .zdl-link[data-blocked="true"] { cursor: not-allowed; }
.zdl-order .zdl-link[data-blocked="true"] .zdl-link-dot { box-shadow: none; border-color: var(--zdl-line-strong); background: var(--zdl-bg); border-style: dashed; }
.zdl-order .zdl-link:focus-visible { outline: 3px solid var(--zdl-graphite); outline-offset: -2px; }

/* Материал — одна строка, кнопки в стиле режимов */
.zdl-materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-radius: 14px; padding: 4px; margin: -4px; }
.zdl-order .zdl-matopt {
	position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0; padding: 8px 6px;
	border: 2px solid var(--zdl-line-strong); border-radius: 12px; background: var(--zdl-white);
	font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--zdl-ink); cursor: pointer;
}
.zdl-order .zdl-matopt:hover { border-color: var(--zdl-graphite); }
.zdl-order .zdl-matopt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.zdl-order .zdl-matopt:has(input:checked) { background: var(--zdl-gold-light); border-color: var(--zdl-graphite); }
.zdl-order .zdl-matopt:has(input:focus-visible) { outline: 3px solid var(--zdl-graphite); outline-offset: 2px; }
.zdl-matnote { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--zdl-ink); background: var(--zdl-gold-light); border-radius: 10px; padding: 10px 12px; }
.zdl-matnote .zdl-ico { color: var(--zdl-graphite); }
.zdl-order .zdl-tooth:hover { border-color: var(--zdl-graphite); }
.zdl-tooth-num { font-size: 15px; font-weight: 700; line-height: 1; }
.zdl-tooth-tag { font-family: var(--zdl-mono); font-size: 11px; line-height: 1; min-height: 11px; }
.zdl-order .zdl-tooth[data-kind="crown"] { background: var(--zdl-gold); color: var(--zdl-ink); border: 1.5px solid var(--zdl-gold); }
.zdl-order .zdl-tooth[data-kind="implant"] { background: var(--zdl-graphite); color: var(--zdl-white); border: 1.5px solid var(--zdl-graphite); }
.zdl-order .zdl-tooth[data-kind="pontic"] { background: var(--zdl-gold-light); color: var(--zdl-ink); border: 1.5px dashed var(--zdl-gold-dark); }
.zdl-teeth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.zdl-marked { flex: 1 1 260px; font-size: 15px; line-height: 1.5; color: var(--zdl-ink); }

/* Подразделы: импланты, форма промежутка */
.zdl-order .zdl-sub { margin: 4px 0 0; border-top: 1px solid var(--zdl-line); padding: 20px 0 0; display: flex; flex-direction: column; min-width: 0; }
.zdl-sub--g14 { gap: 14px; }
.zdl-sub--g18 { gap: 18px; }
.zdl-order .zdl-sublegend { font-family: var(--zdl-head); font-size: 17px; line-height: 1.35; font-weight: 600; margin: 0 0 2px; }
.zdl-sublegend-note { font-family: var(--zdl-body); font-size: 15px; font-weight: 500; color: var(--zdl-muted); }
/* Импланты: строка на каждый имплант — номер, система, абатмент */
.zdl-implants { display: flex; flex-direction: column; gap: 10px; border-radius: 14px; padding: 4px; margin: -4px; }
.zdl-implant { display: grid; grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 8px 12px; background: var(--zdl-bg); border-radius: 12px; padding: 12px; }
.zdl-implant-tooth { align-self: center; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: var(--zdl-graphite); color: var(--zdl-white); font-size: 16px; font-weight: 800; }
.zdl-implant-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zdl-order .zdl-label--sm { font-size: 14px; }
.zdl-order .zdl-select { padding: 0 36px 0 12px; -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
	background: var(--zdl-white) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2316191D%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") no-repeat right 12px center; }
.zdl-order .zdl-select:disabled { cursor: default; color: var(--zdl-ink); opacity: 1; background-color: var(--zdl-gold-light); background-image: none; padding-right: 12px; border-style: dashed; }
.zdl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.zdl-pontics { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; border-radius: 16px; padding: 4px; margin: -4px; }
.zdl-order .zdl-pontic {
	display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; min-height: 44px;
	border-radius: 14px; color: var(--zdl-ink); background: var(--zdl-white); border: 2px solid var(--zdl-line);
}
.zdl-order .zdl-pontic:hover { border-color: var(--zdl-graphite); }
.zdl-order .zdl-pontic[aria-checked="true"] { background: var(--zdl-gold-light); border-color: var(--zdl-graphite); }
.zdl-pontic-label { font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; }

/* Работы */
.zdl-autofill { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--zdl-bg); border-radius: 12px; padding: 12px 14px; }
.zdl-autofill-text { flex: 1 1 240px; font-size: 15px; line-height: 1.45; color: var(--zdl-ink); }
.zdl-hintbox { display: flex; gap: 10px; align-items: flex-start; background: var(--zdl-gold-light); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--zdl-ink); }
.zdl-hintbox .zdl-ico { color: var(--zdl-graphite); }
.zdl-works { display: flex; flex-direction: column; border-radius: 14px; padding: 4px; margin: -4px; }
.zdl-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px 140px 104px; align-items: center; gap: 8px 16px; padding: 10px 12px; border-radius: 10px; border-bottom: 1px solid #EEEAE3; }
.zdl-row[data-on="false"]:hover { background: #FAF8F4; }
.zdl-row[data-on="true"] { background: var(--zdl-row-on); }
.zdl-row--head { padding: 0 12px 4px; border-bottom: 0; font-family: var(--zdl-mono); font-size: 12px; letter-spacing: 1px; color: var(--zdl-muted); }
.zdl-row--head:hover { background: transparent !important; }
.zdl-r { text-align: right; }
.zdl-c { text-align: center; }
.zdl-name { min-width: 0; font-size: 15px; line-height: 1.45; }
.zdl-price { text-align: right; font-size: 15px; color: var(--zdl-muted); white-space: nowrap; }
.zdl-step { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.zdl-order .zdl-stepbtn {
	width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px; font-size: 20px; font-weight: 700; line-height: 1;
	border: 1.5px solid var(--zdl-line-strong); background: var(--zdl-white); color: var(--zdl-ink);
}
.zdl-order .zdl-stepbtn:hover { border-color: var(--zdl-graphite); }
.zdl-order .zdl-stepbtn[aria-disabled="true"] { border-color: var(--zdl-line); color: var(--zdl-line-strong); cursor: default; }
.zdl-qty { width: 30px; text-align: center; font-size: 16px; font-weight: 800; }
.zdl-sum { text-align: right; font-size: 15px; font-weight: 800; white-space: nowrap; }
.zdl-group { display: flex; flex-direction: column; }
.zdl-order .zdl-group-head {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin-top: 8px; padding: 10px 12px;
	border: 1px solid var(--zdl-line); border-radius: 10px; background: var(--zdl-white); color: var(--zdl-ink); text-align: left;
}
.zdl-order .zdl-group-head:hover { border-color: var(--zdl-graphite); }
.zdl-group-title { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 16px; font-weight: 800; line-height: 1.35; }
.zdl-group-count { flex: 0 0 auto; font-size: 14px; font-weight: 500; color: var(--zdl-muted); white-space: nowrap; }
.zdl-chev { flex: 0 0 auto; transition: transform .2s; color: var(--zdl-ink); }
.zdl-group-head[aria-expanded="true"] .zdl-chev { transform: rotate(180deg); }
.zdl-group-body { display: flex; flex-direction: column; padding-top: 4px; }
.zdl-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 2px solid var(--zdl-ink); padding-top: 16px; margin-top: 6px; }
.zdl-total-k { font-size: 18px; font-weight: 800; }
.zdl-total-v { font-size: clamp(22px, 5vw, 26px); font-weight: 800; color: var(--zdl-graphite); }
.zdl-agreed { font-size: 14px; color: var(--zdl-muted); text-align: right; }
.zdl-order .zdl-opt--miyo { align-items: flex-start; padding: 12px 14px; }
.zdl-order .zdl-opt--miyo input { margin-top: 2px; }
.zdl-miyo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zdl-miyo-text strong { font-weight: 700; }
.zdl-miyo-line { font-size: 14px; font-weight: 600; color: var(--zdl-ink); }

/* Цвет */
.zdl-shades { display: flex; flex-direction: column; gap: 8px; border-radius: 14px; padding: 4px; margin: -4px; }
.zdl-shade-row { display: grid; grid-template-columns: 26px repeat(5, minmax(0, 64px)); align-items: center; gap: 6px; }
.zdl-shade-group { font-size: 14px; font-weight: 700; color: var(--zdl-gold-dark); text-align: center; }
.zdl-order .zdl-shade {
	display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; min-height: 44px; min-width: 0; border-radius: 12px;
	font-size: 13px; font-weight: 700; color: var(--zdl-ink); background: var(--zdl-white); border: 2px solid var(--zdl-line);
}
.zdl-order .zdl-shade:hover { border-color: var(--zdl-graphite); }
.zdl-order .zdl-shade[aria-checked="true"] { background: var(--zdl-gold-light); border-color: var(--zdl-graphite); }
.zdl-chipcolor { display: block; width: 100%; height: 34px; border-radius: 8px 8px 12px 12px; border: 1px solid rgba(22, 25, 29, 0.18); }

/* Файлы */
.zdl-order .zdl-pill {
	display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border-radius: 10px;
	font-size: 15px; font-weight: 700; color: var(--zdl-ink); background: var(--zdl-white); border: 2px solid var(--zdl-line-strong);
}
.zdl-order .zdl-pill:hover { border-color: var(--zdl-graphite); }
.zdl-order .zdl-pill[aria-checked="true"] { background: var(--zdl-gold-light); border-color: var(--zdl-graphite); }
.zdl-softbox { background: var(--zdl-gold-light); border-radius: 12px; padding: 16px 18px; font-size: 15px; line-height: 1.55; color: var(--zdl-ink); }
.zdl-softbox--grey { background: var(--zdl-bg); padding: 14px 16px; line-height: 1.5; color: var(--zdl-text); }

/* Сводка */
.zdl-kv { display: flex; justify-content: space-between; gap: 12px; }
.zdl-kv-k { color: var(--zdl-muted); }
.zdl-kv-v { font-weight: 700; text-align: right; }
.zdl-kv--total { align-items: baseline; }
.zdl-kv--total .zdl-kv-k { color: var(--zdl-ink); font-weight: 800; }
.zdl-kv--total .zdl-kv-v { font-size: 20px; font-weight: 800; color: var(--zdl-graphite); }
.zdl-kv--line { border-top: 1px solid var(--zdl-line); padding-top: 8px; }
.zdl-kvs { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
/* Переходы к полям и разделам (список ошибок, «К отправке») не прячут цель под закреплённой шапкой. */
.zdl-order [id], .zdl-order fieldset, .zdl-order section { scroll-margin-top: calc(var(--zdl-top-offset) + 16px); }
.zdl-aside {
	position: sticky; top: calc(20px + var(--zdl-top-offset));
	transition: top 0.2s ease;
	min-width: 0; display: flex; flex-direction: column; gap: 14px;
	background: var(--zdl-white); border: 1px solid var(--zdl-line); border-radius: 16px; padding: 24px;
}
.zdl-aside-title { font-family: var(--zdl-head); font-size: 17px; font-weight: 700; }
.zdl-aside .zdl-kv--line { padding-top: 14px; }
.zdl-aside .zdl-kv--total .zdl-kv-v { font-size: 22px; }
.zdl-mob { display: none; flex-direction: column; gap: 8px; background: var(--zdl-bg); border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.45; }
.zdl-bar {
	display: none; position: sticky; bottom: 8px; z-index: 5; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--zdl-graphite); color: var(--zdl-white); border-radius: 14px; padding: 10px 10px 10px 16px; box-shadow: 0 8px 24px rgba(22, 25, 29, 0.18);
}
.zdl-bar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.zdl-bar-sub { font-size: 13px; color: var(--zdl-gold-light); }
.zdl-bar-total { font-size: 18px; font-weight: 800; white-space: nowrap; }

/* Ошибки при отправке */
.zdl-errors { border: 2px solid var(--zdl-gold-dark); background: var(--zdl-err-bg); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.zdl-errors-title { display: flex; gap: 10px; align-items: center; font-size: 16px; font-weight: 800; color: var(--zdl-ink); }
.zdl-errors-title .zdl-ico { color: var(--zdl-gold-dark); margin-top: 0; }
.zdl-order .zdl-errors-list { margin: 0; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.zdl-order .zdl-errors-list li { margin: 0; padding: 0; font-size: 15px; line-height: 1.45; color: var(--zdl-text); list-style: none; }
.zdl-order .zdl-errors-list a { display: inline-block; padding: 6px 0; color: var(--zdl-ink); font-weight: 700; }
.zdl-order .zdl-consent {
	display: flex; gap: 12px; align-items: flex-start; min-height: 44px; margin: 0;
	font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--zdl-ink); cursor: pointer;
	border-radius: 12px; padding: 10px 12px; border: 2px solid transparent; background: var(--zdl-white);
}
.zdl-order .zdl-consent input { width: 22px; height: 22px; min-width: 22px; margin: 1px 0 0; }
.zdl-has-error > .zdl-consent { border-color: var(--zdl-gold-dark); background: var(--zdl-err-bg); }
.zdl-consent-note { display: block; font-size: 14px; color: var(--zdl-muted); }

/* Наряд отправлен */
.zdl-order .zdl-sent { max-width: 760px; border: 1px solid var(--zdl-line); border-radius: 16px; background: var(--zdl-white); padding: clamp(22px, 5vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.zdl-sent:focus { outline: none; }
.zdl-sent-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--zdl-gold-light); color: var(--zdl-graphite); display: flex; align-items: center; justify-content: center; }
.zdl-sent-head { display: flex; flex-direction: column; gap: 10px; }
.zdl-order .zdl-h2 { margin: 0; font-family: var(--zdl-head); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -0.5px; }
.zdl-sent-text { font-size: 17px; line-height: 1.6; color: var(--zdl-text); }
.zdl-sent-list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--zdl-line); border-bottom: 1px solid var(--zdl-line); padding: 16px 0; }
.zdl-note { display: flex; gap: 12px; align-items: flex-start; background: var(--zdl-gold-light); border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.55; color: var(--zdl-ink); }
.zdl-note .zdl-ico { color: var(--zdl-graphite); margin-top: 2px; }
.zdl-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Планшет и телефон: сводка — внизу и в разделе 06 */
@media (max-width: 1023px) {
	.zdl-layout { grid-template-columns: minmax(0, 1fr); }
	.zdl-aside { display: none; }
	.zdl-bar { display: flex; }
	.zdl-mob { display: flex; }
}

/* Телефон: переключатель режимов закреплён и сжат в одну строку */
@media (max-width: 639px) {
	.zdl-stick { position: -webkit-sticky; position: sticky; top: var(--zdl-top-offset); z-index: 2; box-shadow: 0 1px 0 var(--zdl-line); transition: top 0.2s ease; }
	/* Метка над подписью (как на компьютере): «На импланте» и «Промежуток» в строку с меткой не влезают в 390 px */
	.zdl-modes { gap: 6px; }
	.zdl-order .zdl-mode { min-height: 48px; gap: 3px; padding: 5px 4px; font-size: 12px; border-radius: 10px; white-space: nowrap; }
	.zdl-sw { width: 14px; height: 14px; border-radius: 4px; }
	.zdl-row { grid-template-columns: minmax(0, 1fr) auto; }
	.zdl-row .zdl-name { grid-column: 1 / -1; }
	.zdl-sum, .zdl-row--head { display: none !important; }
	.zdl-price { text-align: left; }
	.zdl-order .zdl-submit { width: 100%; }
	.zdl-order .zdl-matopt { min-height: 48px; font-size: 14px; }
	.zdl-order .zdl-shade { font-size: 12px; padding: 5px 3px; }
	.zdl-shade-row { gap: 5px; grid-template-columns: 22px repeat(5, minmax(0, 1fr)); }
	.zdl-shade-group { font-size: 12px; }
	.zdl-implant { grid-template-columns: 44px minmax(0, 1fr); padding: 10px; }
	.zdl-implant-tooth { width: 44px; height: 44px; align-self: start; margin-top: 26px; font-size: 15px; }
	.zdl-implant-ab { grid-column: 2; }
	.zdl-chipcolor { height: 28px; }
}
@media (max-width: 359px) {
	.zdl-order .zdl-mode { font-size: 11px; padding: 4px 2px; }
}