/* Contact dock (html/softway_dock.php) + share sheet (js/softway-dock.js). Stays under the site chat (.swc, z 99990). */
.sw-dock {
	position: fixed;
	left: 18px;
	bottom: 20px;
	z-index: 99980;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	font: 14px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	transition: opacity .2s, transform .2s, visibility .2s;
}
.sw-dock-right .sw-dock { left: auto; right: 18px; align-items: flex-end; }

.sw-dock__btn {
	position: relative;
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 26px;
	background: #fff;
	color: #0f1b2d;
	box-shadow: 0 6px 20px rgba(15, 27, 45, .18), 0 1px 3px rgba(15, 27, 45, .12);
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}
.sw-dock-right .sw-dock__btn { flex-direction: row-reverse; }
.sw-dock__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 27, 45, .22), 0 1px 3px rgba(15, 27, 45, .12); color: #0f1b2d; }
.sw-dock__btn:focus-visible { outline: 3px solid #f14833; outline-offset: 2px; }

.sw-dock__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
}
.sw-dock__btn--zalo .sw-dock__icon { background: #0068ff; }
.sw-dock__btn--zalo img { width: 34px; height: 34px; }
.sw-dock__btn--call .sw-dock__icon { background: #f14833; color: #fff; }
.sw-dock__btn--share .sw-dock__icon { background: #0f1b2d; color: #fff; }

/* Soft pulse on the call button only, instead of the old ringing animation on both */
.sw-dock__btn--call .sw-dock__icon::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(241, 72, 51, .5);
	animation: sw-dock-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
.sw-dock-right .sw-dock__btn--call .sw-dock__icon::after { left: auto; right: 0; }
.sw-dock__btn--call .sw-dock__icon svg { animation: sw-dock-ring 2.4s ease-in-out infinite; }

/* Labels open on hover (desktop) */
.sw-dock__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width .25s, opacity .2s, padding .25s;
}
.sw-dock__label b { font-weight: 700; }
.sw-dock__btn:hover .sw-dock__label,
.sw-dock__btn:focus-visible .sw-dock__label { max-width: 220px; opacity: 1; padding: 0 18px 0 10px; }
.sw-dock-right .sw-dock__btn:hover .sw-dock__label,
.sw-dock-right .sw-dock__btn:focus-visible .sw-dock__label { padding: 0 10px 0 18px; }

@keyframes sw-dock-pulse {
	0% { box-shadow: 0 0 0 0 rgba(241, 72, 51, .5); }
	70%, 100% { box-shadow: 0 0 0 16px rgba(241, 72, 51, 0); }
}
@keyframes sw-dock-ring {
	0%, 50%, 100% { transform: rotate(0); }
	5%, 15%, 25% { transform: rotate(-14deg); }
	10%, 20% { transform: rotate(14deg); }
}

@media (max-width: 768px) {
	.sw-dock { left: 12px; bottom: 14px; gap: 8px; }
	.sw-dock-right .sw-dock { right: 12px; }
	.sw-dock__btn, .sw-dock__icon { height: 46px; }
	.sw-dock__icon, .sw-dock__btn--call .sw-dock__icon::after { width: 46px; height: 46px; }
	.sw-dock__btn--zalo img { width: 30px; height: 30px; }
	.sw-dock__label { display: none; }

	/* The chat is full screen on phones: nothing of ours may sit on top of it */
	.sw-chat-open .sw-dock,
	html:has(.swc-panel) .sw-dock { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sw-dock__btn--call .sw-dock__icon::after,
	.sw-dock__btn--call .sw-dock__icon svg { animation: none; }
}

@media print {
	.sw-dock, .sw-share { display: none !important; }
}

/* ---- share sheet: a popover next to the dock on desktop, a bottom sheet on phones ---- */
.sw-share {
	position: fixed;
	inset: 0;
	z-index: 100000;
	font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: #0f1b2d;
}
.sw-share *, .sw-share *::before, .sw-share *::after { box-sizing: border-box; }
.sw-share__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 27, 45, .28);
	opacity: 0;
	transition: opacity .2s;
}
.sw-share__panel {
	position: absolute;
	left: 84px;
	bottom: 20px;
	width: 380px;
	max-width: calc(100vw - 100px);
	padding: 16px 18px 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 50px rgba(15, 27, 45, .28);
	opacity: 0;
	transform: translateY(10px) scale(.98);
	transform-origin: bottom left;
	transition: opacity .2s, transform .2s;
}
.sw-dock-right .sw-share__panel { left: auto; right: 84px; transform-origin: bottom right; }
.sw-share.is-open .sw-share__backdrop { opacity: 1; }
.sw-share.is-open .sw-share__panel { opacity: 1; transform: none; }

.sw-share__grab { display: none; }
.sw-share__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sw-share__head strong { font-size: 16px; }
.sw-share__close {
	display: flex;
	padding: 6px;
	margin: -6px -8px -6px 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #6b7788;
	cursor: pointer;
}
.sw-share__close:hover { background: #f5f7fa; color: #0f1b2d; }
.sw-share__page {
	margin: 2px 0 14px;
	color: #6b7788;
	font-size: 13px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sw-share__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
.sw-share__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 6px 2px;
	border: 0;
	border-radius: 12px;
	background: none;
	color: #0f1b2d !important;
	font: inherit;
	font-size: 12px;
	text-decoration: none !important;
	cursor: pointer;
}
.sw-share__item:hover { background: #f5f7fa; }
.sw-share__item:focus-visible { outline: 2px solid #f14833; outline-offset: 1px; }
.sw-share__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #fff;
	transition: transform .15s;
}
.sw-share__item:hover .sw-share__ico { transform: scale(1.08); }
.sw-share__ico--img { background: #0068ff; overflow: hidden; }
.sw-share__ico--img img { width: 32px; height: 32px; }
.sw-share__ico--more { background: #e9edf2; color: #0f1b2d; }

.sw-share__link {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	padding: 5px 5px 5px 12px;
	border: 1px solid #e4e8ee;
	border-radius: 10px;
	background: #f5f7fa;
}
.sw-share__link input {
	flex: 1;
	min-width: 0;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none !important;
	box-shadow: none !important;
	color: #3a4656;
	font: inherit;
	font-size: 13px;
	outline: 0;
}
.sw-share__link button {
	flex: none;
	height: 34px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: #f14833;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.sw-share__link button:hover { background: #d93a26; }

.sw-share__toast {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	max-width: calc(100% - 16px);
	padding: 8px 14px;
	border-radius: 8px;
	background: #0f1b2d;
	color: #fff;
	font-size: 13px;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.sw-share__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 768px) {
	.sw-share__panel,
	.sw-dock-right .sw-share__panel {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-width: none;
		padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
		border-radius: 18px 18px 0 0;
		transform: translateY(100%);
	}
	.sw-share__grab { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: #d5dbe3; }
	.sw-share__toast { bottom: calc(100% + 12px); }
}