/* ALP Live Chat — frontend styles */

.alp-lc {
	position: fixed;
	bottom: var(--alp-lc-bottom, 24px);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.alp-lc--right { right: var(--alp-lc-side, 24px); }
.alp-lc--left  { left: var(--alp-lc-side, 24px); align-items: flex-start; }

.alp-lc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: inherit;
}

.alp-lc__item { margin: 0; }

/* ------- Buttons ------- */

.alp-lc__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #fff;
	border-radius: 999px;
	height: 52px;
	min-width: 52px;
	padding: 0;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.alp-lc__btn:hover {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
	color: #fff;
}

.alp-lc__icon {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
}

.alp-lc__icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

.alp-lc__btn--messenger { background: linear-gradient(135deg, #00b2ff, #006aff); color: #0084ff; }
.alp-lc__btn--zalo      { background: #0068ff; color: #0068ff; }
.alp-lc__btn--phone     { background: #e53935; }

.alp-lc__btn--messenger .alp-lc__icon svg path[fill="currentColor"] { fill: #fff; }
.alp-lc__btn--messenger .alp-lc__icon svg path[fill="#fff"] { fill: #006aff; }
.alp-lc__btn--zalo .alp-lc__icon svg rect { fill: #fff; }
.alp-lc__btn--zalo .alp-lc__icon svg text { fill: #0068ff; }

/* Labels */
.alp-lc__label {
	display: none;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	padding-right: 20px;
}

.alp-lc--labels .alp-lc__label { display: inline-block; }
.alp-lc--labels .alp-lc__btn   { justify-content: flex-start; }

.alp-lc--left .alp-lc__btn { flex-direction: row; }

/* ------- Hotline pulse ------- */

.alp-lc--pulse .alp-lc__btn--phone::before,
.alp-lc--pulse .alp-lc__btn--phone::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(229, 57, 53, 0.45);
	z-index: -1;
	animation: alp-lc-pulse 1.8s ease-out infinite;
}

.alp-lc--pulse .alp-lc__btn--phone::after { animation-delay: 0.6s; }

.alp-lc--pulse .alp-lc__btn--phone .alp-lc__icon svg {
	animation: alp-lc-ring 1.8s ease-in-out infinite;
	transform-origin: 50% 50%;
}

@keyframes alp-lc-pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(1.7); opacity: 0; }
}

@keyframes alp-lc-ring {
	0%, 100% { transform: rotate(0); }
	10% { transform: rotate(-14deg); }
	20% { transform: rotate(12deg); }
	30% { transform: rotate(-10deg); }
	40% { transform: rotate(8deg); }
	50% { transform: rotate(0); }
}

/* ------- Toggle (expand mode) ------- */

.alp-lc__toggle {
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 50%;
	background: var(--alp-lc-main, #d4a017);
	color: var(--alp-lc-main, #d4a017);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.2s ease;
	padding: 0;
}

.alp-lc__toggle:hover { transform: scale(1.06); }

.alp-lc__toggle-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, transform 0.25s ease;
}

.alp-lc__toggle-icon svg { width: 28px; height: 28px; }

.alp-lc__toggle-icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }

.alp-lc.is-open .alp-lc__toggle-icon--open  { opacity: 0; transform: rotate(90deg) scale(0.6); }
.alp-lc.is-open .alp-lc__toggle-icon--close { opacity: 1; transform: rotate(0) scale(1); }

/* Pulse on main toggle */
.alp-lc--pulse .alp-lc__toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--alp-lc-main, #d4a017);
	opacity: 0.5;
	z-index: -1;
	animation: alp-lc-pulse 2s ease-out infinite;
}

.alp-lc.is-open .alp-lc__toggle::before { animation: none; opacity: 0; }

/* Expand mode: hide list until open */
.alp-lc--expand .alp-lc__item {
	opacity: 0;
	transform: translateY(14px) scale(0.85);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: calc(var(--i, 0) * 0.04s);
}

.alp-lc--expand.is-open .alp-lc__item {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition-delay: calc(var(--i, 0) * 0.06s);
}

/* Stack mode: always visible */
.alp-lc--stack .alp-lc__item { opacity: 1; }

/* ------- Mobile ------- */

@media (max-width: 480px) {
	.alp-lc__btn { height: 48px; min-width: 48px; }
	.alp-lc__icon { width: 48px; height: 48px; flex-basis: 48px; }
	.alp-lc__icon svg { width: 25px; height: 25px; }
	.alp-lc__toggle { width: 52px; height: 52px; }
	.alp-lc__label { font-size: 13px; padding-right: 16px; }
}

/* Accessibility */
.alp-lc__btn:focus-visible,
.alp-lc__toggle:focus-visible {
	outline: 3px solid rgba(0, 104, 255, 0.5);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.alp-lc *,
	.alp-lc *::before,
	.alp-lc *::after {
		animation: none !important;
		transition: none !important;
	}
}