/*
 * Oasis — кнопка підтримки
 *
 * Свідомі рішення:
 * - z-index: 9 — той самий рівень, що й у .back-top теми. Оверлеї теми
 *   (.search-overlay 99999, .bwp-offcanvas-menu 10, .content-cart-popup 9999) перекривають віджет.
 * - Жоден селектор теми не переозначається. Кнопка «нагору» лишається недоторканою.
 * - Нижній відступ рахується через calc() з двох змінних: базовий зазор + висота
 *   мобільного тулбару теми (її вимірює JS у рантаймі, а не хардкодить).
 */

.oasis-support {
	--osb-size: 52px;
	--osb-channel-size: 46px;
	--osb-gap: 12px;
	--osb-edge: 30px;
	--osb-bottom: 50px;
	--osb-toolbar: 0px;
	--osb-safe: env(safe-area-inset-bottom, 0px);
	--osb-bg: var(--theme-color, #000);
	--osb-fg: #fff;
	--osb-surface: #fff;
	--osb-ease: cubic-bezier(.34, 1.4, .64, 1);

	position: fixed;
	z-index: 9;
	bottom: calc(var(--osb-bottom) + var(--osb-toolbar) + var(--osb-safe));
	width: var(--osb-size);
	height: var(--osb-size);
	/* Затримка visibility стоїть тільки в правилах приховування — інакше поява віджета
	   спізнювалася б на 250 мс. */
	transition: opacity .25s ease, visibility 0s;
}

.oasis-support--left {
	left: var(--osb-edge);
}

.oasis-support--right {
	right: var(--osb-edge);
}

/* --- Розгортання каналів ------------------------------------------------ */

.oasis-support__channels {
	position: absolute;
	left: 50%;
	bottom: calc(100% + var(--osb-gap));
	transform: translateX(-50%);
	display: flex;
	flex-direction: column-reverse; /* перший канал — найближче до кнопки */
	align-items: center;
	gap: var(--osb-gap);
}

/*
 * Вторинна дія: світлий кружок у контурі, як кружки кольорів на картках товару.
 * Головна кнопка лишається суцільно чорною — ієрархія зчитується з першого погляду.
 */
.oasis-support__channel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--osb-channel-size);
	height: var(--osb-channel-size);
	border: 1px solid var(--osb-bg);
	border-radius: 50%;
	background-color: var(--osb-surface);
	color: var(--osb-bg);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);

	opacity: 0;
	transform: translateY(14px) scale(.4);
	pointer-events: none;
	transition:
		opacity .26s ease,
		transform .38s var(--osb-ease),
		background-color .2s ease,
		color .2s ease,
		box-shadow .25s ease;
	transition-delay: var(--osb-out-delay, 0ms);
}

.oasis-support.is-open .oasis-support__channel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition-delay: var(--osb-in-delay, 0ms);
}

.oasis-support__channel:hover,
.oasis-support__channel:focus-visible {
	background-color: var(--osb-bg);
	color: var(--osb-surface);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.oasis-support__channel:focus-visible {
	outline: 2px solid var(--osb-bg);
	outline-offset: 3px;
}

.oasis-support__channel svg {
	display: block;
	/* оптична компенсація: у «літачка» Telegram центр маси зміщений */
	pointer-events: none;
}

.oasis-support__channel--telegram svg {
	margin-left: -2px;
}

/* --- Підказка ----------------------------------------------------------- */

.oasis-support__tip {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .02em;
	padding: 8px 11px;
	border-radius: 3px;
	background-color: var(--osb-bg);
	color: var(--osb-fg);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.oasis-support--left .oasis-support__tip {
	left: calc(100% + 10px);
}

.oasis-support--right .oasis-support__tip {
	right: calc(100% + 10px);
}

@media (hover: hover) {
	.oasis-support__channel:hover .oasis-support__tip {
		opacity: 1;
	}
}

.oasis-support__channel:focus-visible .oasis-support__tip {
	opacity: 1;
}

/* --- Головна кнопка ----------------------------------------------------- */

.oasis-support__toggle {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	/* Світлий кант — як у кнопки «нагору» в темі: помітний лише поверх темних фото. */
	border: 1px solid var(--osb-fg);
	border-radius: 50%;
	background-color: var(--osb-bg);
	color: var(--osb-fg);
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
	-webkit-appearance: none;
	appearance: none;
	transition: transform .3s var(--osb-ease), box-shadow .25s ease;
}

.oasis-support__toggle:hover {
	transform: scale(1.06);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}

.oasis-support__toggle:active {
	transform: scale(.96);
}

.oasis-support__toggle:focus-visible {
	outline: 2px solid var(--osb-bg);
	outline-offset: 3px;
}

.oasis-support__icon {
	grid-area: 1 / 1;
	display: flex;
	transition: opacity .22s ease, transform .32s var(--osb-ease);
}

.oasis-support__icon svg {
	display: block;
}

.oasis-support__icon--close {
	opacity: 0;
	transform: rotate(-90deg) scale(.5);
}

.oasis-support.is-open .oasis-support__icon--open {
	opacity: 0;
	transform: rotate(90deg) scale(.5);
}

.oasis-support.is-open .oasis-support__icon--close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* --- Мобільні ----------------------------------------------------------- */

@media (max-width: 1199px) {
	.oasis-support {
		--osb-size: 48px;
		--osb-channel-size: 44px;
		--osb-edge: 15px;
		--osb-bottom: 20px;
	}
}

/* --- Не заважати оверлеям теми й головним кнопкам магазину --------------- */

/*
 * .is-shy вішає JS, коли віджет геометрично перетинається з кнопкою
 * «Перейти до оформлення замовлення» / «Підтвердити замовлення» / «Додати в кошик».
 */
.oasis-support.is-shy,
body.mobile-menu-visible .oasis-support,
body.not-scroll .oasis-support {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility 0s linear .2s;
}

/* --- Доступність і друк -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.oasis-support,
	.oasis-support * {
		transition-duration: .01ms !important;
		transition-delay: 0ms !important;
	}
}

@media print {
	.oasis-support {
		display: none !important;
	}
}