/*
 * Калькулятор меблировки. Префикс стилей: dwl-
 * Цвета текста и фона берутся от темы сайта (светлой или ночной).
 * Жёлтые элементы всегда с тёмным текстом.
 */
.dwl, .dwl-modal {
	--dwl-accent: #ffd000;
	--dlw-dgray: #333;
	--dwl-on-accent: #1a1a1a;
	--dwl-border: #ffd000;
	--dwl-line: rgba(128, 128, 128, .35);
	--dwl-hover: rgba(128, 128, 128, .14);
	--dwl-err: #b3261e;
	/* фоны ячеек: светлая тема */
	--dwl-head-bg: #eee;     /* заголовок неактивной колонки */
	--dwl-col-bg: #fdfdfd;   /* ячейки цен неактивной колонки */
	--dwl-act-bg: #fff;      /* ячейки активной колонки */
	--dlw-dgray: #000;
}
/*
 * НОЧНАЯ СХЕМА. Включается, если выполняется любое из условий:
 *   — у <html> стоит data-theme="dark" (или data-bs-theme="dark");
 *   — скрипт плагина увидел светлый текст темы и поставил класс .dwl-dark
 *     (работает и при системной тёмной теме, и при переключателе на сайте).
 * ВАЖНО: переменные переопределяются именно на .dwl / .dwl-modal. Если задать их на :root,
 * они не сработают: значение, объявленное на самом элементе, всегда сильнее унаследованного.
 */
.dwl.dwl-dark, .dwl-modal.dwl-dark,
:root[data-theme="dark"] .dwl, :root[data-theme="dark"] .dwl-modal,
:root[data-bs-theme="dark"] .dwl, :root[data-bs-theme="dark"] .dwl-modal {
	/* фоны ячеек */
	--dwl-head-bg: rgba(255, 255, 255, .10);
	--dwl-col-bg: rgba(255, 255, 255, .025);
	--dwl-act-bg: rgba(255, 255, 255, .075);
	/* при желании меняются и остальные цвета, например: */
	--dwl-accent: #333;   (если сделать тёмным — поменяйте и --dwl-on-accent на светлый)
	--dwl-line: rgba(255, 255, 255, .25);
	--dwl-border: #2a2a2a;
	--dwl-on-accent: #fff;
	--dlw-dgray: #fff;
	
}
.dwl {
	width: 100%;
	max-width: none;
	margin: 2em 0 2em 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1.4;
}
.dwl *, .dwl *::before, .dwl *::after,
.dwl-modal *, .dwl-modal *::before, .dwl-modal *::after {
	box-sizing: border-box;
	border-radius: 0;
}

/* [furniture_calc width="full"] — на всю ширину экрана, вырываясь из колонки темы */
.dwl.dwl-full {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	padding: 0 24px;
}

.dwl-card { width: 100%; border: 1px solid var(--dwl-border); padding:20px;}

/* Кнопки класса (только мобильные) */
.dwl-ctl { display: none; padding: 0; }
.dwl-cls { display: flex; gap: 8px; }
.dwl .dwl-cb {
	flex: 1;
	height: 44px;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--dwl-line) !important;
	border-top: 1px solid var(--dwl-line) !important;
	border-right: 1px solid var(--dwl-line) !important;
	border-bottom: none !important;
	border-radius: 0;
	background: transparent !important;
	color: inherit !important;
	font: inherit;
	cursor: pointer;
}
.dwl .dwl-cb:hover:not(.is-active) { border-color: var(--dwl-accent) !important; }
.dwl .dwl-cb.is-active { background: var(--dwl-accent) !important; border-color: var(--dwl-accent) !important; color: var(--dwl-on-accent) !important; font-weight: 600; }

/* Таблица */
.dwl-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0 !important;
	max-width: none !important;
	border: 0;
	background: transparent;
	color: inherit;
	font-variant-numeric: tabular-nums;
}
.dwl-table th,
.dwl-table td {
	border: 0;
	background: transparent;
	color: inherit;
	vertical-align: middle;
}
.dwl-table .dwl-th-name {
	width: 50%;
	height: 56px;
	padding: 0 6px 0 14px;
	border-bottom: 1px solid var(--dwl-border);
	font-size: 16px;
	font-weight: 400;
	text-align: left;
    opacity: 1;
    font-family: var(--font-mono) !important;
    text-transform: uppercase;
}
.dwl-table .dwl-th-c {
	width: 25%;
	padding: 0;
	border-bottom: 1px solid var(--dwl-border);
}
.dwl-table .dwl-th-cost { display: none; }

/* Заголовки колонок — обычные ячейки, по клику переключают класс */
.dwl .dwl-hc {
	display: block;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none;
	color: inherit !important;
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	cursor: pointer;
	opacity: .45;
	transition: opacity .15s;
	background: var(--dwl-head-bg) !important;
	font-family: var(--font-body) !important;
}
.dwl .dwl-hc:hover { opacity: .8; }
.dwl .dwl-hc:focus-visible { outline: 2px solid var(--dwl-accent); outline-offset: -4px; }
.dwl .dwl-th-c.is-act .dwl-hc { opacity: 1; font-weight: 400; font-size: 16px; background: var(--dwl-accent) !important; color: var(--dwl-on-accent) !important;font-family: var(--font-body) !important; }

/* Строки */
.dwl-table tbody td {
	height: 68px;
	padding: 8px 6px;
	border-bottom: 1px solid var(--dwl-border);
	font-size: 16px;
    color: var(--dlw-dgray);
    opacity: 1;
}
.dwl-table tbody td.dwl-name { padding: 8px 12px 8px 12px; }
.dwl-table tbody td.dwl-p { text-align: right; padding-right: 22px; background: var(--dwl-col-bg); }
.dwl-table tbody tr:last-child td { border-bottom: 0; }
.dwl-empty td { padding: 22px 24px !important; height: auto !important; opacity: .7; }
.dwl-empty[hidden] { display: none; }

/* Обводка 3px вокруг колонки активного класса */
.dwl-table .dwl-th-c.is-act,
.dwl-table td.dwl-c.is-act { border-left: 3px solid var(--dwl-border); border-right: 3px solid var(--dwl-border); background: var(--dwl-act-bg); }
.dwl-table .dwl-th-c.is-act.dwl-last,
.dwl-table td.dwl-c.is-act.dwl-last { border-right-width: 2px;}
.dwl-table .dwl-th-c.is-act { border-top: 2px solid var(--dwl-border); }
.dwl-table tbody tr:last-child td.dwl-c.is-act { border-bottom: 2px solid var(--dwl-border); }

/* Цены: по правому краю; неактивная колонка — бледная */
.dwl-pc { font-size: 16px; font-weight: 800; white-space: nowrap; }
.dwl-table td.dwl-c:not(.is-act) .dwl-pc { font-weight: 400; opacity: .45; }
.dwl-svc-name { font-weight: 400; opacity: .85; }

@keyframes dwl-rowin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dwl-in td { animation: dwl-rowin .3s ease; }

/* Выпадающий список и кнопка удаления */
.dwl-c1 { display: flex; align-items: center; gap: 8px; }
.dwl .dwl-sel {
	flex: 1;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 38px 0 12px;
	border: 1px solid var(--dwl-line);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center / 15px;
	color: var(--dlw-dgray);
	font: inherit;
	font-size: 16px;
	cursor: pointer;
}
.dwl .dwl-sel:hover { border-color: var(--dwl-accent); }
.dwl .dwl-sel:focus { outline: 2px solid var(--dwl-accent); outline-offset: 1px; }
.dwl .dwl-sel option,
.dwl .dwl-sel optgroup { color: #1a1a1a; background: #fff; }

.dwl .dwl-rm {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--dwl-line) !important;
	border-radius: 0;
	background: transparent !important;
	color: inherit !important;
	opacity: .65;
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s, opacity .15s;
}
.dwl .dwl-rm svg { width: 26px; height: 26px; display: block; }
.dwl .dwl-rm:hover {
	color: #d93025 !important;
	border-color: #d93025 !important;
	background: rgba(217, 48, 37, .08) !important;
	opacity: 1;
}

/* Новая строка без выбранного назначения: подсветка, требующая внимания */
@keyframes dwl-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 208, 0, .75); }
	100% { box-shadow: 0 0 0 12px rgba(255, 208, 0, 0); }
}
.dwl .dwl-row.is-pending .dwl-sel {
	border: 2px solid var(--dwl-accent);
	background-color: rgba(255, 208, 0, .16);
	font-weight: 600;
	animation: dwl-pulse 1.1s ease-out 3;
}
.dwl .dwl-row.is-pending td.dwl-name { /* box-shadow: inset 4px 0 0 var(--dwl-accent); */ }
.dwl .dwl-row.is-pending .dwl-pc { opacity: .35; }

.dwl-warn {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-left: 4px solid var(--dwl-accent);
	background: rgba(255, 208, 0, .16);
	font-size: .92em;
	color: inherit;
}
.dwl-warn[hidden] { display: none; }

/* Кнопка «Добавить помещение» */
.dwl .dwl-add {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 16px 12px;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	color: inherit !important;
	font: inherit;
	font-size: .95em;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background .15s;
}
.dwl .dwl-add:hover:not(:disabled) { background: var(--dwl-hover) !important; }
.dwl .dwl-pl {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--dwl-accent);
	color: var(--dwl-on-accent);
}
.dwl .dwl-pl svg { width: 24px; height: 24px; transition: transform .28s ease; }
.dwl .dwl-add:hover:not(:disabled) .dwl-pl svg { transform: rotate(90deg); }
.dwl .dwl-hint { margin-left: auto; font-size: .8em; font-weight: 400; opacity: .6; }
.dwl .dwl-add:disabled { cursor: not-allowed; opacity: .6; }
.dwl .dwl-add:disabled .dwl-pl { background: rgba(128, 128, 128, .3); color: inherit; }

/* Количество выбранного и итог — без заливки */
.dwl-sm { padding: 16px 12px 16px 12px; /* border-top: 1px solid var(--dwl-border); */ }
.dwl-tl {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 14px;
}
.dwl-total { font-size: 1.6em; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Кнопки: жёлтые, тёмный текст; тема сайта их не перекрашивает */
.dwl .dwl-btn,
.dwl-modal .dwl-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 28px;
	border: 0 !important;
	border-radius: 0;
	background: var(--dwl-accent) !important;
	color: var(--dwl-on-accent) !important;
	font: inherit;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: opacity .15s;
}
.dwl .dwl-btn:hover:not(:disabled),
.dwl-modal .dwl-btn:hover:not(:disabled) { opacity: .85; }
.dwl .dwl-btn:disabled,
.dwl-modal .dwl-btn:disabled { opacity: .5; cursor: default; }
.dwl .dwl-btn.dwl-open:disabled {
	background: rgba(128, 128, 128, .3) !important;
	color: inherit !important;
	opacity: .55;
	cursor: not-allowed;
}

/* Форма в окне */
.dwl-form { margin: 0; color: inherit; }
.dwl-form-title { margin: 0 0 6px; padding-right: 32px; font-size: 1.3em; color: inherit; }
.dwl-form-sub { margin: 0 0 16px; opacity: .7; font-size: .95em; color: inherit; }
.dwl-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 10px;
}
.dwl-form input[type="text"],
.dwl-form input[type="email"],
.dwl-form input[type="tel"],
.dwl-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--dwl-border);
	border-radius: 0;
	font: inherit;
	background: transparent;
	color: inherit;
}
.dwl-form input::placeholder,
.dwl-form textarea::placeholder { color: inherit; opacity: .55; }
.dwl-form input:focus,
.dwl-form textarea:focus { outline: 2px solid var(--dwl-accent); outline-offset: 0; }
.dwl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
}
.dwl-copy {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 10px 0 14px;
	font-size: .95em;
	color: inherit;
	cursor: pointer;
}
.dwl input[type="checkbox"],
.dwl-modal input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--dwl-accent);
	cursor: pointer;
}

.dwl-form[hidden], .dwl-success[hidden], .dwl-success-copy[hidden] { display: none !important; }

.dwl-msg:empty { display: none; }
.dwl-msg {
	margin-top: 14px;
	padding: 12px 16px;
	font-size: 1.05em;
	font-weight: 600;
}
.dwl-msg.is-wait { background: rgba(255, 208, 0, .14); color: inherit; }
.dwl-msg.is-err  { background: #fdecea; color: var(--dwl-err); border-left: 4px solid var(--dwl-err); }

.dwl-success { margin: 0; padding: 24px 0 8px; text-align: center; color: inherit; }
.dwl-success-title { margin: 0 0 10px; font-size: 1.9em; font-weight: 700; line-height: 1.2; color: inherit; }
.dwl-success-text { margin: 0 0 6px; font-size: 1.2em; color: inherit; }
.dwl-success-copy { margin: 0 0 6px; opacity: .7; color: inherit; }
.dwl-success .dwl-done-close { margin-top: 20px; }

/* Окно */
html.dwl-modal-open { overflow: hidden; }
.dwl-modal {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-size: 16px;
	line-height: 1.4;
}
.dwl-modal[hidden] { display: none !important; }
.dwl-modal-backdrop {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0, 0, 0, .6);
}
.dwl-modal-box {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 100%;
	overflow-y: auto;
	padding: 32px 24px 24px;
	border: 1px solid var(--dwl-border);
	background: var(--dwl-bg, #fff);
	color: inherit;
}
.dwl-modal-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.dwl-modal-close { display: flex; align-items: center; justify-content: center; }
.dwl-modal-close svg { width: 24px; height: 24px; display: block; }
.dwl-modal-close:hover { color: var(--dwl-accent); }

/* Мобильная версия: две колонки (58% / 42%), класс — кнопками сверху */
@media (max-width: 640px) {
	.dwl.dwl-full { padding: 0 12px; }
	.dwl-ctl { display: block; }
	.dwl-table { border-top: 3px solid var(--dwl-border); }

	.dwl-table .dwl-th-c { display: none; }
	.dwl-table .dwl-th-name { width: 65%; padding-left: 0;font-size: 12px; opacity: .8;}
	.dwl-table .dwl-th-cost {
		display: table-cell;
		width: 35%;
		height: 56px;
		padding: 0 0 0 6px;
		border-bottom: 1px solid var(--dwl-border);
		font-weight: 400;
		text-align: right;
		opacity: .8;
		font-size: 12px;
	}

	.dwl-table tbody td.dwl-name { padding: 8px 6px 8px 0; }
	.dwl-table td.dwl-c { display: none; }
	.dwl-table tbody td.dwl-c.is-act {
		display: table-cell;
		padding: 8px 0 8px 6px;
		text-align: right;
		border-left: 0;
		border-right: 0;
	}
	.dwl-table tbody tr:last-child td.dwl-c.is-act { border-bottom: 0; }

	.dwl-c1 { gap: 6px; }
	.dwl .dwl-sel { height: 42px; padding-left: 10px; font-size: .9em; }
	.dwl .dwl-rm { width: 42px; height: 42px; }
	.dwl .dwl-rm svg { width: 24px; height: 24px; }

	.dwl .dwl-add { padding: 14px 0; gap: 12px; }
	.dwl .dwl-hint { display: none; }
	.dwl-sm { padding: 14px 0 16px 0; }
}