/* Corner Dock: внешний вид самого виджета.
   Общий файл для превью в админке и для реального сайта — здесь нет
   ничего специфичного ни для того, ни для другого контекста.

   ВАЖНО про специфичность. Виджет попадает на чужой сайт, где тема уже
   как-то оформила button/a/input, поэтому здесь есть сброс (`.cdock button`
   и т. п.). Селектор `.cdock button` — это (0,1,1), то есть СИЛЬНЕЕ, чем
   одиночный класс `.cdock-btn` (0,1,0): голый `.cdock-btn` проиграл бы сбросу
   и остался бы без фона и цвета. Поэтому каждое правило компонента пишется
   с префиксом `.cdock ` — получается (0,2,x), что бьёт и сброс, и обычные
   правила темы под `button`. Не убирайте префикс.

   ВАЖНО про !important. Специфичности достаточно только против ДРУГИХ
   правил ЭТОГО файла и обычных правил темы. Против темы, у которой на
   `button`/`a`/`input` стоит `!important` (частый приём в конструкторах
   тем — например форс border-radius и padding на все кнопки сайта),
   специфичность не спасает вообще — `!important` побеждает независимо
   от неё. Поэтому все визуальные свойства кнопок, ссылок и полей ввода
   ниже — тоже с `!important`. Это не всегда красиво, но иначе на части
   сайтов кружки виджета становятся квадратными, как только тема
   переопределяет border-radius у всех <button>. Правило: если меняете
   значение свойства у элемента, который в разметке — <button>, <a> или
   <input> (список — в конце этого комментария), меняйте его вместе
   с `!important`, а не вместо него, иначе бой со следующей темой опять
   будет непредсказуемым.

   Элементы-кнопки/ссылки/поля в разметке (см. assets/widget-render.js):
   .cdock-btn, .cdock-item (и .cdock-empty — тот же класс), .cdock-send, .cdock-back,
   .cdock-plink (ссылка на страницу согласия) — все <button> или <a>; input[type=text/tel],
   input[type=checkbox] и textarea внутри .cdock-form — поля ввода. */

.cdock {
	--cdock-ease: cubic-bezier(.2, .85, .25, 1);
	--cdock-ink: #22201f;
	--cdock-ink-soft: #585251;
	--cdock-muted: #6d655f;
	--cdock-surface: #f6f4f2;
	--cdock-line: #dcd7d3;
	--cdock-line-soft: #e9e5e1;
	--cdock-shadow-lg: 0 20px 44px -22px rgba(34, 32, 31, .4);
	--cdock-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cdock-font-mono: ui-monospace, Menlo, Consolas, monospace;
	font-family: var(--cdock-font) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	text-align: left !important;
	color: var(--cdock-ink) !important;
}

/* ── сброс чужих стилей темы (см. комментарий про специфичность и !important выше) ── */
.cdock, .cdock *, .cdock *::before, .cdock *::after { box-sizing: border-box !important; }
.cdock p, .cdock h4, .cdock ul, .cdock ol { margin: 0 !important; padding: 0 !important; }
.cdock button {
	font: inherit !important; color: inherit !important; cursor: pointer !important;
	background: none !important; border: 0 !important; border-radius: 0 !important;
	padding: 0 !important; margin: 0 !important; box-shadow: none !important;
	text-transform: none !important; letter-spacing: normal !important; text-align: left !important;
	width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important;
}
.cdock input {
	font: inherit !important; color: inherit !important; border-radius: 0 !important;
	box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important;
}
.cdock a {
	text-decoration: none !important; color: inherit !important; border: 0 !important;
	border-radius: 0 !important; box-shadow: none !important; text-transform: none !important;
}
.cdock svg { display: block !important; }
.cdock img { max-width: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* Угол и отступы задаются в настройках: frontend.js кладёт их в переменные
   --cdock-x/-y (компьютер) и --cdock-mx/-my (телефон) на сам контейнер,
   а сторону — в data-side. Значения по умолчанию совпадают с тем, что было
   жёстко прописано до 3.0.0. */
#cdock-root.cdock {
	position: fixed !important;
	right: var(--cdock-x, 24px) !important;
	bottom: var(--cdock-y, 24px) !important;
	z-index: 999999 !important;
}
#cdock-root.cdock[data-side="left"] { right: auto !important; left: var(--cdock-x, 24px) !important; }
/* На узких экранах — не ручной переключатель (это только в превью админки),
   а обычный media query: сайт сам подбирает размер под ширину экрана. */
@media (max-width: 640px) {
	#cdock-root.cdock { right: var(--cdock-mx, 14px) !important; bottom: var(--cdock-my, 14px) !important; }
	#cdock-root.cdock[data-side="left"] { right: auto !important; left: var(--cdock-mx, 14px) !important; }
	#cdock-root .cdock-wgt { --btn: calc(52px * var(--cdock-size, 1)); }
	#cdock-root .cdock-form { width: 262px !important; }
}

.cdock.cdock-wgt {
	position: relative !important;
	pointer-events: auto !important;
	/* --cdock-size — «Размер кнопок» из настроек, ставит widget-render.js */
	--btn: calc(56px * var(--cdock-size, 1));
	--cdock-accent: #0e7c56;
	--cdock-on: #ffffff;
	--cdock-deep: color-mix(in srgb, var(--cdock-accent) 84%, #000);
	--cdock-soft: color-mix(in srgb, var(--cdock-on) 17%, transparent);
	--cdock-edge: color-mix(in srgb, var(--cdock-on) 22%, transparent);
}
.cdock-mobile .cdock.cdock-wgt { --btn: calc(52px * var(--cdock-size, 1)); }

.cdock .cdock-stack { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 10px !important; }
.cdock[data-labels="on"] .cdock-stack { gap: 14px !important; }
.cdock .cdock-slot { display: flex !important; align-items: center !important; gap: 9px !important; flex-direction: row-reverse !important; }
.cdock[data-labels="on"] .cdock-slot { position: relative !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; }
.cdock .cdock-btn {
	position: relative !important; width: var(--btn) !important; height: var(--btn) !important;
	border-radius: 50% !important; border: 0 !important;
	background: var(--cdock-accent) !important; color: var(--cdock-on) !important; cursor: pointer !important;
	display: grid !important; place-items: center !important; padding: 0 !important; margin: 0 !important;
	box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--cdock-accent) 80%, #000) !important;
	transition: background .2s;
}
.cdock .cdock-btn svg { width: calc(24px * var(--cdock-size, 1)) !important; height: calc(24px * var(--cdock-size, 1)) !important; }
.cdock .cdock-btn img { width: calc(25px * var(--cdock-size, 1)) !important; height: calc(25px * var(--cdock-size, 1)) !important; object-fit: contain !important; }
.cdock .cdock-face, .cdock .cdock-cross {
	position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important;
	transition: opacity .2s, transform .3s var(--cdock-ease);
}
.cdock .cdock-cross { opacity: 0 !important; transform: rotate(-45deg) scale(.6) !important; }
.cdock .cdock-slot.is-on .cdock-btn { background: var(--cdock-deep) !important; }
.cdock .cdock-slot.is-on .cdock-face { opacity: 0 !important; transform: rotate(45deg) scale(.6) !important; }
.cdock .cdock-slot.is-on .cdock-cross { opacity: 1 !important; transform: none !important; }
.cdock .cdock-btn::after {
	content: ""; position: absolute !important; inset: 0 !important; border-radius: 50% !important;
	border: 2px solid var(--cdock-accent) !important; pointer-events: none !important;
	/* opacity — БЕЗ !important нарочно: её же меняет анимация cdockPulse ниже
	   через @keyframes, а !important-правило всегда побеждает анимацию по
	   спецификации CSS — с ним кольцо навсегда оставалось бы невидимым,
	   пульс не был бы виден совсем. Этого свойства тема коснуться и не
	   может: селектор ::after у чужого CSS не совпадёт с этим псевдо-
	   элементом ни при каких обстоятельствах, конфликта с темой здесь
	   в принципе быть не может — терять !important не страшно. */
	opacity: 0;
}
.cdock .cdock-label {
	background: var(--cdock-accent) !important; color: var(--cdock-on) !important; border-radius: 999px !important;
	padding: 5px 12px !important; font-size: 12.5px !important; font-weight: 500 !important; white-space: nowrap !important;
	box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--cdock-accent) 80%, #000) !important;
}
.cdock[data-labels="on"] .cdock-label {
	position: absolute !important; left: 50% !important; bottom: -4px !important; transform: translateX(-50%) !important; z-index: 2 !important;
	font-size: 10px !important; font-weight: 700 !important; letter-spacing: .01em !important; padding: 3px 10px !important;
	border: 1.5px solid var(--cdock-on) !important;
	box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .55) !important;
}
.cdock[data-labels="on"][data-shift="on"] .cdock-btn .cdock-face,
.cdock[data-labels="on"][data-shift="on"] .cdock-btn .cdock-cross { padding-bottom: 15px !important; }
.cdock[data-labels="off"] .cdock-label { display: none !important; }

.cdock .cdock-btn.cdock-att-pulse::after { animation: cdockPulse .9s ease-out; }
@keyframes cdockPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
.cdock .cdock-btn.cdock-att-shake { animation: cdockShake .75s ease-in-out; }
@keyframes cdockShake {
	0%, 100% { transform: rotate(0); } 14% { transform: rotate(-10deg); } 30% { transform: rotate(9deg); }
	46% { transform: rotate(-6deg); } 62% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); }
}
.cdock .cdock-btn.cdock-att-bounce { animation: cdockBounce .85s var(--cdock-ease); }
@keyframes cdockBounce {
	0%, 100% { transform: translateY(0); } 28% { transform: translateY(-13px); }
	52% { transform: translateY(0); } 72% { transform: translateY(-5px); }
}

.cdock .cdock-list {
	position: absolute !important; right: 0 !important; bottom: calc(100% + 12px) !important;
	display: flex !important; flex-direction: column !important; gap: 9px !important; align-items: flex-end !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.cdock .cdock-item {
	display: flex !important; align-items: center !important; gap: 10px !important; height: 46px !important; padding: 0 7px 0 15px !important;
	border-radius: 999px !important; background: var(--cdock-accent) !important;
	border: 1px solid var(--cdock-edge) !important;
	box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--cdock-accent) 80%, #000) !important;
	color: var(--cdock-on) !important; font-size: 14px !important; font-weight: 500 !important; white-space: nowrap !important;
	text-decoration: none !important; cursor: pointer !important;
	transition: background .16s; animation-delay: calc(var(--i, 0) * 45ms);
}
.cdock .cdock-item:hover, .cdock .cdock-item:focus { background: var(--cdock-deep) !important; color: var(--cdock-on) !important; }
.cdock[data-appear="rise"] .cdock-item { animation: cdockRise .34s var(--cdock-ease) both; }
@keyframes cdockRise { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
.cdock[data-appear="curtain"] .cdock-item { animation: cdockCurtain .44s cubic-bezier(.3, 1.35, .4, 1) both; transform-origin: top center !important; }
@keyframes cdockCurtain { from { opacity: 0; transform: translateY(-26px) scaleY(.6); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
.cdock[data-appear="flip"] .cdock-item { animation: cdockFlip .42s var(--cdock-ease) both; transform-origin: bottom right !important; }
@keyframes cdockFlip { from { opacity: 0; transform: perspective(500px) rotateX(-75deg); } to { opacity: 1; transform: none; } }
.cdock[data-appear="fade"] .cdock-item { animation: cdockFade .34s var(--cdock-ease) both; }
@keyframes cdockFade { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.cdock .cdock-mini {
	width: 32px !important; height: 32px !important; border-radius: 50% !important; display: grid !important; place-items: center !important;
	flex: none !important; color: var(--cdock-on) !important; background: var(--cdock-soft) !important;
}
.cdock .cdock-mini svg { width: 18px !important; height: 18px !important; }
.cdock .cdock-mini img { width: 19px !important; height: 19px !important; object-fit: contain !important; }
/* Виджет в левом углу: всё то же зеркально. Правила с [data-labels="on"]
   повторены с [data-side] — иначе при равной специфичности победило бы
   правило, стоящее в файле ниже, и подписи «на кнопке» разъехались. */
.cdock[data-side="left"] .cdock-stack { align-items: flex-start !important; }
.cdock[data-side="left"] .cdock-slot { flex-direction: row !important; }
.cdock[data-side="left"][data-labels="on"] .cdock-slot { flex-direction: column !important; }
.cdock[data-side="left"] .cdock-list { right: auto !important; left: 0 !important; align-items: flex-start !important; }
.cdock[data-side="left"] .cdock-item { flex-direction: row-reverse !important; padding: 0 15px 0 7px !important; }
.cdock[data-side="left"][data-appear="flip"] .cdock-item { transform-origin: bottom left !important; }
.cdock .cdock-item.cdock-empty {
	display: flex !important; align-items: center !important; justify-content: center !important; height: 46px !important; padding: 0 15px !important;
	border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
	border: 1px dashed var(--cdock-edge) !important; color: var(--cdock-on) !important; opacity: .75 !important; cursor: default !important;
}

.cdock .cdock-form {
	/* Потолок подобран так, чтобы форма целиком помещалась без прокрутки:
	   поле «Что вы ищете?» больше не растягивается, поэтому высота формы
	   детерминирована — заголовок, два поля, три строки запроса, согласие,
	   кнопка и строка ошибки дают ≈440px. Прокрутка остаётся только
	   страховкой для низких экранов, за это отвечает слагаемое в vh. */
	width: 290px !important; max-height: min(76vh, 470px) !important; overflow-y: auto !important; background: #fff !important;
	border: 1px solid var(--cdock-line) !important; border-radius: 16px !important; box-shadow: var(--cdock-shadow-lg) !important;
	padding: 15px 16px 16px !important; display: flex !important; flex-direction: column !important; gap: 9px !important; text-align: left !important;
	color: var(--cdock-ink) !important; animation: cdockRise .34s var(--cdock-ease) both;
}
.cdock-mobile .cdock .cdock-form { width: 262px !important; }
/* Форма — колонка с max-height, а во flex-колонке дети по умолчанию
   СЖИМАЮТСЯ, когда содержимое выше контейнера: кнопка «Жду звонка»
   оставалась с рамкой и фоном, но с обрезанным текстом. Правило нужно
   и сейчас, когда высота формы фиксирована, — на низком экране потолок
   в vh всё ещё может оказаться ниже содержимого, и тогда форма должна
   прокрутиться, а не расплющить кнопку. */
.cdock .cdock-form > * { flex: none !important; }
.cdock .cdock-form h4 { margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; color: var(--cdock-ink) !important; }
.cdock .cdock-sub2 { margin: -5px 0 3px !important; font-size: 11.5px !important; color: var(--cdock-muted) !important; line-height: 1.35 !important; }
.cdock .cdock-form label {
	display: flex !important; flex-direction: column !important; gap: 4px !important; font-family: var(--cdock-font-mono) !important;
	font-size: 9.5px !important; letter-spacing: .11em !important; text-transform: uppercase !important; color: var(--cdock-muted) !important;
	font-weight: 400 !important; margin: 0 !important;
}
.cdock .cdock-form input[type=text], .cdock .cdock-form input[type=tel] {
	width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
	font-family: var(--cdock-font) !important; font-size: 14px !important; color: var(--cdock-ink) !important; background: var(--cdock-surface) !important;
	border: 1px solid var(--cdock-line) !important; border-radius: 9px !important; padding: 9px 11px !important;
	text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
}
.cdock .cdock-form input[type=text]:focus, .cdock .cdock-form input[type=tel]:focus {
	outline: none !important; border-color: var(--cdock-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdock-accent) 26%, transparent) !important;
}
.cdock .cdock-form input.cdock-bad { border-color: #a3231b !important; background: #fdf3f2 !important; }
/* Необязательное «Что вы ищете?» — те же поля, что и у input, плюс своё
   появление: поле возникает после того, как набран телефон, и без анимации
   выглядело бы как скачок формы. display у label задан !important выше,
   поэтому и [hidden] нужен с !important — иначе скрытое поле осталось бы
   видимым (те же грабли специфичности, что описаны в шапке файла). */
.cdock .cdock-form label[hidden] { display: none !important; }
.cdock .cdock-form textarea {
	/* Ровно три строки и ни пикселем больше. Поле не тянется ни мышью
	   (resize: none), ни от длинного текста — он прокручивается внутри
	   самого поля. Раньше здесь было resize: vertical с потолком 200px,
	   и растянутое поле выдавливало кнопку «Жду звонка» за нижний край
	   формы: до неё приходилось скроллить. Высота считается от своих же
	   font-size и line-height: 3 строки × 1.4em + padding 9+9 + рамки 1+1
	   (box-sizing здесь border-box, см. сброс в шапке файла). Меняете
	   line-height или padding — пересчитайте и это значение. */
	width: 100% !important; margin: 0 !important; resize: none !important; overflow-y: auto !important;
	height: calc(4.2em + 20px) !important; min-height: calc(4.2em + 20px) !important; max-height: calc(4.2em + 20px) !important;
	font-family: var(--cdock-font) !important; font-size: 14px !important; line-height: 1.4 !important; color: var(--cdock-ink) !important;
	background: var(--cdock-surface) !important; border: 1px solid var(--cdock-line) !important; border-radius: 9px !important;
	padding: 9px 11px !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
}
.cdock .cdock-form textarea:focus {
	outline: none !important; border-color: var(--cdock-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdock-accent) 26%, transparent) !important;
}
.cdock .cdock-form .cdock-need { animation: cdockNeedIn .26s var(--cdock-ease) both; }
@keyframes cdockNeedIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cdock .cdock-err { margin: -4px 0 0 !important; font-size: 11.5px !important; color: #a3231b !important; }
.cdock .cdock-consent {
	flex-direction: row !important; align-items: flex-start !important; gap: 8px !important; font-family: var(--cdock-font) !important;
	font-size: 11px !important; text-transform: none !important; letter-spacing: 0 !important;
	color: var(--cdock-muted) !important; line-height: 1.4 !important; cursor: pointer !important;
}
/* Текст согласия лежит в <span> внутри <label>. Типографику label он
   получает только по наследству, а наследование проигрывает ЛЮБОМУ прямому
   правилу темы сайта (`form span`, `label span` и подобным) — и тогда
   согласие вылезает капсом и чужим цветом поверх нашего. Поэтому те же
   свойства задаются и самому span (см. про специфичность в шапке файла). */
.cdock .cdock-consent, .cdock .cdock-consent span {
	font-family: var(--cdock-font) !important; font-size: 11px !important; font-weight: 400 !important;
	text-transform: none !important; letter-spacing: 0 !important; color: var(--cdock-muted) !important;
	line-height: 1.4 !important;
}
.cdock .cdock-consent input[type=checkbox] {
	accent-color: var(--cdock-accent) !important; margin: 1px 0 0 !important; width: 14px !important; height: 14px !important; flex: none !important;
	appearance: auto !important; -webkit-appearance: checkbox !important; position: static !important; opacity: 1 !important;
}
.cdock .cdock-form .cdock-plink {
	border: 0 !important; background: transparent !important; padding: 0 !important; font: inherit !important; color: var(--cdock-accent) !important;
	text-decoration: underline !important; text-underline-offset: 2px !important; cursor: pointer !important;
}
.cdock .cdock-send {
	margin: 4px 0 0 !important; border: 0 !important; background: var(--cdock-accent) !important; color: var(--cdock-on) !important; border-radius: 10px !important;
	padding: 11px !important; font-size: 14px !important; font-weight: 500 !important; width: 100% !important; cursor: pointer !important;
	text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; transition: background .16s;
	/* Своя подпись задаётся в настройках и может быть длиннее «Жду звонка»:
	   высота считается по тексту, перенос разрешён, обрезать нечего. */
	font-family: var(--cdock-font) !important; line-height: 1.3 !important; height: auto !important; min-height: 0 !important;
	white-space: normal !important;
}
.cdock .cdock-send:hover { background: var(--cdock-deep) !important; color: var(--cdock-on) !important; }
.cdock .cdock-send[disabled] { opacity: .6 !important; cursor: default !important; }
.cdock .cdock-back {
	border: 0 !important; background: transparent !important; color: var(--cdock-muted) !important; font-size: 12.5px !important;
	cursor: pointer !important; padding: 0 !important; text-align: center !important; width: auto !important;
}
.cdock .cdock-done { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
.cdock .cdock-done .cdock-tick {
	width: 36px !important; height: 36px !important; border-radius: 50% !important;
	background: color-mix(in srgb, var(--cdock-accent) 13%, transparent) !important; color: var(--cdock-accent) !important;
	display: grid !important; place-items: center !important;
}
.cdock .cdock-done .cdock-tick svg { width: 20px !important; height: 20px !important; }
.cdock .cdock-done b { font-size: 17px !important; font-weight: 700 !important; color: var(--cdock-ink) !important; }
/* Предложения идут каждое со своей строки, но это один смысловой абзац —
   расстояние между ними меньше, чем зазор между блоками карточки. */
.cdock .cdock-done .cdock-donetext {
	display: flex !important; flex-direction: column !important; gap: 3px !important; align-items: flex-start !important;
}
.cdock .cdock-done p { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: var(--cdock-ink-soft) !important; }

@media (prefers-reduced-motion: reduce) {
	.cdock *, .cdock *::before, .cdock *::after {
		transition-duration: .01ms !important; animation-duration: .01ms !important;
	}
}
