/* =========================================================
   Rus Button Messenger — frontend.css
   ========================================================= */

.rbm-widget,
.rbm-widget * { box-sizing: border-box; }

/* ---------- Виджет ---------- */
.rbm-widget {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rbm-gap, 12px);
}
.rbm-widget.rbm-layout-vertical { flex-direction: column; align-items: flex-start; }

.rbm-widget .rbm-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: var(--rbm-icon-size, 48px);
	height: var(--rbm-icon-size, 48px);
	color: var(--rbm-item-color, #333);
	text-decoration: none;
	transition: transform .2s ease, opacity .2s ease;
	flex-shrink: 0;
}
.rbm-widget .rbm-item:hover { transform: translateY(-2px); opacity: .9; }

.rbm-widget.rbm-show-labels .rbm-item { width: auto; }
.rbm-widget.rbm-label-bottom.rbm-show-labels .rbm-item { flex-direction: column; text-align: center; gap: 4px; }

.rbm-item-icon,
.rbm-sticky-icon,
.rbm-popup-item-icon {
	width: var(--rbm-icon-size, 48px);
	height: var(--rbm-icon-size, 48px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rbm-item-color, currentColor);
	flex-shrink: 0;
}
.rbm-item-icon svg, .rbm-sticky-icon svg, .rbm-popup-item-icon svg { width: 100%; height: 100%; display:block; }
.rbm-icon-img { width: 100%; height: 100%; object-fit: contain; display:block; }

.rbm-shape-circle .rbm-item-icon,
.rbm-shape-circle.rbm-widget .rbm-item-icon { border-radius: 50%; overflow: hidden; background: rgba(0,0,0,.04); }
.rbm-shape-rounded .rbm-item-icon { border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.04); }
.rbm-shape-square .rbm-item-icon { border-radius: 0; overflow: hidden; background: rgba(0,0,0,.04); }

.rbm-item-label { font-size: 14px; line-height: 1.3; color: inherit; white-space: nowrap; }

/* ---------- Именованные виджеты (несколько кастомных вариаций) ---------- */
.rbm-named-widget .rbm-item {
	width: auto;
	height: auto;
	gap: 8px;
}
.rbm-named-widget.rbm-layout-vertical .rbm-item { width: 100%; }

.rbm-named-widget .rbm-widget-link {
	font-size: var(--rbm-font-size, 15px);
	font-weight: var(--rbm-font-weight, 400);
	color: var(--rbm-link-color, #222);
	transition: color .15s ease, transform .15s ease;
}
.rbm-named-widget .rbm-widget-link:hover {
	color: var(--rbm-link-hover-color, #2563eb);
}
.rbm-named-widget .rbm-widget-link:hover .rbm-widget-text { color: inherit; }

.rbm-named-widget.rbm-icon-hidden .rbm-item-icon { display: none; }
.rbm-named-widget.rbm-text-hidden .rbm-item-label { display: none; }
.rbm-named-widget .rbm-widget-text { color: inherit; }

/* ---------- Липкая кнопка ---------- */
.rbm-sticky {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.rbm-sticky.rbm-pos-left-bottom,
.rbm-sticky.rbm-pos-left-top { align-items: flex-start; }

.rbm-sticky-toggle {
	width: var(--rbm-btn-size, 60px);
	height: var(--rbm-btn-size, 60px);
	border-radius: 50%;
	border: none;
	background: var(--rbm-btn-bg, #25D366);
	color: var(--rbm-icon-color, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	position: relative;
	padding: 0;
}
.rbm-sticky-toggle-icon { width: 50%; height: 50%; display: flex; align-items:center; justify-content:center; position:absolute; transition: opacity .2s ease, transform .2s ease; }
.rbm-sticky-toggle-icon svg { width: 100%; height: 100%; }
.rbm-icon-close { opacity: 0; transform: scale(.6) rotate(-45deg); }
.rbm-sticky.rbm-open .rbm-icon-open { opacity: 0; transform: scale(.6) rotate(45deg); }
.rbm-sticky.rbm-open .rbm-icon-close { opacity: 1; transform: scale(1) rotate(0); }

.rbm-anim-pulse .rbm-sticky-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--rbm-btn-bg, #25D366);
	opacity: .55;
	animation: rbm-pulse var(--rbm-anim-speed, 2000ms) infinite;
	z-index: -1;
}
@keyframes rbm-pulse {
	0% { transform: scale(1); opacity: .55; }
	100% { transform: scale(1.9); opacity: 0; }
}
.rbm-anim-bounce .rbm-sticky-toggle { animation: rbm-bounce var(--rbm-anim-speed, 2000ms) infinite; }
@keyframes rbm-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.rbm-sticky-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.rbm-pos-left-bottom .rbm-sticky-list,
.rbm-pos-left-top .rbm-sticky-list { align-items: flex-start; }
.rbm-sticky.rbm-open .rbm-sticky-list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.rbm-sticky-item {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-decoration: none;
	color: var(--rbm-item-color, #333);
}
.rbm-sticky-icon { width: 60%; height: 60%; color: var(--rbm-item-color, #333); }

.rbm-sticky-tooltip {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: #1f2937;
	color: #fff;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.rbm-pos-left-bottom .rbm-sticky-tooltip,
.rbm-pos-left-top .rbm-sticky-tooltip { right: auto; left: calc(100% + 10px); }
.rbm-sticky-item:hover .rbm-sticky-tooltip { opacity: 1; }

.rbm-hide-desktop { display: none; }
.rbm-hide-mobile { display: none; }
@media (min-width: 783px) {
	.rbm-hide-desktop.rbm-sticky { display: none !important; }
	.rbm-hide-mobile.rbm-sticky { display: flex !important; }
}
@media (max-width: 782px) {
	.rbm-hide-mobile.rbm-sticky { display: none !important; }
	.rbm-hide-desktop.rbm-sticky { display: flex !important; }
}

/* ---------- Приветственный бабл ---------- */
.rbm-greeting {
	position: relative;
	max-width: 260px;
	background: #fff;
	color: #222;
	padding: 14px 30px 14px 16px;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	font-size: 14px;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(6px);
	visibility: hidden;
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.rbm-greeting.rbm-visible { opacity: 1; transform: translateY(0); visibility: visible; }
.rbm-greeting p { margin: 0; }
.rbm-greeting-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	background: transparent;
	color: #999;
	cursor: pointer;
}
.rbm-greeting-close svg { width: 100%; height: 100%; }

/* ---------- Попап ---------- */
.rbm-popup {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, visibility .25s;
}
.rbm-popup.rbm-open { visibility: visible; opacity: 1; pointer-events: auto; }

.rbm-popup-overlay {
	position: absolute;
	inset: 0;
	background: var(--rbm-overlay-color, #000);
	opacity: var(--rbm-overlay-opacity, .6);
}

.rbm-popup-box {
	position: relative;
	background: var(--rbm-box-bg, #fff);
	border-radius: var(--rbm-box-radius, 16px);
	border: var(--rbm-box-border, none);
	padding: var(--rbm-box-padding, 28px);
	max-width: var(--rbm-box-max-width, 380px);
	width: calc(100% - 32px);
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
	text-align: var(--rbm-box-align, left);
	transform: scale(.9);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
}
.rbm-popup.rbm-open .rbm-popup-box { transform: scale(1); opacity: 1; }

.rbm-popup-anim-fade .rbm-popup-box { transform: none; }
.rbm-popup-anim-slide-up .rbm-popup-box { transform: translateY(40px); }
.rbm-popup-anim-slide-up.rbm-open .rbm-popup-box { transform: translateY(0); }

.rbm-popup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 22px;
	height: 22px;
	padding: 0;
	background: transparent;
	border: none;
	color: #888;
	cursor: pointer;
}
.rbm-popup-close svg { width: 100%; height: 100%; }

.rbm-popup-title { margin: 0 0 4px; font-size: 20px; }
.rbm-popup-subtitle { margin: 0 0 18px; color: #666; font-size: 14px; }
.rbm-popup-custom-text { font-size: 13px; }
.rbm-popup-custom-text p { margin: 0 0 8px; }
.rbm-popup-custom-text p:last-child { margin-bottom: 0; }

.rbm-popup-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--rbm-icons-align, flex-start);
	gap: 14px;
}
.rbm-popup-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 76px;
	text-decoration: none;
	color: #222;
}
.rbm-popup-item-icon {
	width: 52px;
	height: 52px;
	color: var(--rbm-item-color, #333);
	border-radius: 50%;
	background: rgba(0,0,0,.04);
	overflow: hidden;
}
.rbm-popup-item-label { font-size: 12px; text-align: center; line-height: 1.2; }

@media (prefers-reduced-motion: reduce) {
	.rbm-sticky-toggle, .rbm-anim-pulse .rbm-sticky-toggle::after, .rbm-anim-bounce .rbm-sticky-toggle {
		animation: none !important;
	}
}