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

   ВАЖНО про специфичность. Виджет попадает на чужой сайт, где тема уже
   как-то оформила button/a/input, поэтому здесь есть сброс (`.contact-corner button`
   и т. п.). Селектор `.contact-corner button` — это (0,1,1), то есть СИЛЬНЕЕ, чем
   одиночный класс `.ccorner-btn` (0,1,0): голый `.ccorner-btn` проиграл бы сбросу
   и остался бы без фона и цвета. Поэтому каждое правило компонента пишется
   с префиксом `.contact-corner ` — получается (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):
   .ccorner-btn, .ccorner-item (и .ccorner-empty — тот же класс), .ccorner-send, .ccorner-back,
   .ccorner-plink — все <button> или <a>; input[type=text/tel],
   input[type=checkbox] и textarea внутри .ccorner-form — поля ввода. */

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

/* ── сброс чужих стилей темы (см. комментарий про специфичность и !important выше) ── */
.contact-corner, .contact-corner *, .contact-corner *::before, .contact-corner *::after { box-sizing: border-box !important; }
.contact-corner p, .contact-corner h4, .contact-corner ul, .contact-corner ol { margin: 0 !important; padding: 0 !important; }
.contact-corner 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;
}
.contact-corner input {
	font: inherit !important; color: inherit !important; border-radius: 0 !important;
	box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important;
}
.contact-corner a {
	text-decoration: none !important; color: inherit !important; border: 0 !important;
	border-radius: 0 !important; box-shadow: none !important; text-transform: none !important;
}
.contact-corner svg { display: block !important; }
.contact-corner img { max-width: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

#contact-corner-root.contact-corner {
	position: fixed !important;
	right: 24px !important;
	bottom: 24px !important;
	z-index: 999999 !important;
}
/* На узких экранах — не ручной переключатель (это только в превью админки),
   а обычный media query: сайт сам подбирает размер под ширину экрана. */
@media (max-width: 640px) {
	#contact-corner-root.contact-corner { right: 14px !important; bottom: 14px !important; }
	#contact-corner-root .ccorner-wgt { --btn: 52px; }
	#contact-corner-root .ccorner-form { width: 262px !important; }
}

.contact-corner.ccorner-wgt {
	position: relative !important;
	pointer-events: auto !important;
	--btn: 56px;
	--ccorner-accent: #0e7c56;
	--ccorner-on: #ffffff;
	--ccorner-deep: color-mix(in srgb, var(--ccorner-accent) 84%, #000);
	--ccorner-soft: color-mix(in srgb, var(--ccorner-on) 17%, transparent);
	--ccorner-edge: color-mix(in srgb, var(--ccorner-on) 22%, transparent);
}
.ccorner-mobile .contact-corner.ccorner-wgt { --btn: 52px; }

.contact-corner .ccorner-stack { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 10px !important; }
.contact-corner[data-labels="on"] .ccorner-stack { gap: 14px !important; }
.contact-corner .ccorner-slot { display: flex !important; align-items: center !important; gap: 9px !important; flex-direction: row-reverse !important; }
.contact-corner[data-labels="on"] .ccorner-slot { position: relative !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; }
.contact-corner .ccorner-btn {
	position: relative !important; width: var(--btn) !important; height: var(--btn) !important;
	border-radius: 50% !important; border: 0 !important;
	background: var(--ccorner-accent) !important; color: var(--ccorner-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(--ccorner-accent) 80%, #000) !important;
	transition: background .2s;
}
.contact-corner .ccorner-btn svg { width: 24px !important; height: 24px !important; }
.contact-corner .ccorner-btn img { width: 25px !important; height: 25px !important; object-fit: contain !important; }
.contact-corner .ccorner-face, .contact-corner .ccorner-cross {
	position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important;
	transition: opacity .2s, transform .3s var(--ccorner-ease);
}
.contact-corner .ccorner-cross { opacity: 0 !important; transform: rotate(-45deg) scale(.6) !important; }
.contact-corner .ccorner-slot.is-on .ccorner-btn { background: var(--ccorner-deep) !important; }
.contact-corner .ccorner-slot.is-on .ccorner-face { opacity: 0 !important; transform: rotate(45deg) scale(.6) !important; }
.contact-corner .ccorner-slot.is-on .ccorner-cross { opacity: 1 !important; transform: none !important; }
.contact-corner .ccorner-btn::after {
	content: ""; position: absolute !important; inset: 0 !important; border-radius: 50% !important;
	border: 2px solid var(--ccorner-accent) !important; pointer-events: none !important;
	/* opacity — БЕЗ !important нарочно: её же меняет анимация ccornerPulse ниже
	   через @keyframes, а !important-правило всегда побеждает анимацию по
	   спецификации CSS — с ним кольцо навсегда оставалось бы невидимым,
	   пульс не был бы виден совсем. Этого свойства тема коснуться и не
	   может: селектор ::after у чужого CSS не совпадёт с этим псевдо-
	   элементом ни при каких обстоятельствах, конфликта с темой здесь
	   в принципе быть не может — терять !important не страшно. */
	opacity: 0;
}
.contact-corner .ccorner-label {
	background: var(--ccorner-accent) !important; color: var(--ccorner-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(--ccorner-accent) 80%, #000) !important;
}
.contact-corner[data-labels="on"] .ccorner-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(--ccorner-on) !important;
	box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .55) !important;
}
.contact-corner[data-labels="on"][data-shift="on"] .ccorner-btn .ccorner-face,
.contact-corner[data-labels="on"][data-shift="on"] .ccorner-btn .ccorner-cross { padding-bottom: 15px !important; }
.contact-corner[data-labels="off"] .ccorner-label { display: none !important; }

.contact-corner .ccorner-btn.ccorner-att-pulse::after { animation: ccornerPulse .9s ease-out; }
@keyframes ccornerPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
.contact-corner .ccorner-btn.ccorner-att-shake { animation: ccornerShake .75s ease-in-out; }
@keyframes ccornerShake {
	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); }
}
.contact-corner .ccorner-btn.ccorner-att-bounce { animation: ccornerBounce .85s var(--ccorner-ease); }
@keyframes ccornerBounce {
	0%, 100% { transform: translateY(0); } 28% { transform: translateY(-13px); }
	52% { transform: translateY(0); } 72% { transform: translateY(-5px); }
}

.contact-corner .ccorner-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;
}
.contact-corner .ccorner-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(--ccorner-accent) !important;
	border: 1px solid var(--ccorner-edge) !important;
	box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--ccorner-accent) 80%, #000) !important;
	color: var(--ccorner-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);
}
.contact-corner .ccorner-item:hover, .contact-corner .ccorner-item:focus { background: var(--ccorner-deep) !important; color: var(--ccorner-on) !important; }
.contact-corner[data-appear="rise"] .ccorner-item { animation: ccornerRise .34s var(--ccorner-ease) both; }
@keyframes ccornerRise { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
.contact-corner[data-appear="curtain"] .ccorner-item { animation: ccornerCurtain .44s cubic-bezier(.3, 1.35, .4, 1) both; transform-origin: top center !important; }
@keyframes ccornerCurtain { from { opacity: 0; transform: translateY(-26px) scaleY(.6); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
.contact-corner[data-appear="flip"] .ccorner-item { animation: ccornerFlip .42s var(--ccorner-ease) both; transform-origin: bottom right !important; }
@keyframes ccornerFlip { from { opacity: 0; transform: perspective(500px) rotateX(-75deg); } to { opacity: 1; transform: none; } }
.contact-corner[data-appear="fade"] .ccorner-item { animation: ccornerFade .34s var(--ccorner-ease) both; }
@keyframes ccornerFade { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.contact-corner .ccorner-mini {
	width: 32px !important; height: 32px !important; border-radius: 50% !important; display: grid !important; place-items: center !important;
	flex: none !important; color: var(--ccorner-on) !important; background: var(--ccorner-soft) !important;
}
.contact-corner .ccorner-mini svg { width: 18px !important; height: 18px !important; }
.contact-corner .ccorner-mini img { width: 19px !important; height: 19px !important; object-fit: contain !important; }
.contact-corner .ccorner-item.ccorner-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(--ccorner-edge) !important; color: var(--ccorner-on) !important; opacity: .75 !important; cursor: default !important;
}

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

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