/**
 * CMS Page Generator — Contact Buttons Frontend
 * Mobile-first, responsive, modern design.
 */

/* ================================================================
   BASE / VARIABLES
   ============================================================= */

.cmspg-cb {
	--_bar-h: var(--cmspg-cb-bar-h, 56px);
	--_btn-h: var(--cmspg-cb-btn-h, 48px);
	--_launcher: var(--cmspg-cb-launcher-size, 52px);
	--_font: var(--cmspg-cb-font, 14px);
	--_gap: var(--cmspg-cb-gap, 10px);
	--_radius: var(--cmspg-cb-radius, 28px);
	--_z: var(--cmspg-cb-z, 9999);
	--_bg: var(--cmspg-cb-bg, #333);
	--_text: var(--cmspg-cb-text, #fff);
	--_hover-bg: var(--cmspg-cb-hover-bg, #555);
	--_hover-text: var(--cmspg-cb-hover-text, #fff);
	--_phone-bg: var(--cmspg-cb-phone-bg, #0f7b3f);
	--_wa-bg: var(--cmspg-cb-wa-bg, #25d366);
	--_icon-size: var(--cmspg-cb-icon-size, 22px);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	line-height: 1.4;
	box-sizing: border-box;
}

.cmspg-cb *, .cmspg-cb *::before, .cmspg-cb *::after {
	box-sizing: border-box;
}

/* ================================================================
   FIXED POSITIONING (footer-rendered)
   ============================================================= */

.cmspg-cb:not(.cmspg-cb--inline):not(.cmspg-cb--preview) {
	position: fixed;
	z-index: var(--_z);
	bottom: 20px;
}

.cmspg-cb--right:not(.cmspg-cb--inline):not(.cmspg-cb--preview) {
	right: 20px;
}

.cmspg-cb--left:not(.cmspg-cb--inline):not(.cmspg-cb--preview) {
	left: 20px;
}

/* ================================================================
   BUTTONS (shared — bar / inline modes)
   ============================================================= */

.cmspg-cb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--_btn-h);
	padding: 0 20px;
	font-size: var(--_font);
	font-weight: 500;
	text-decoration: none;
	border: none;
	border-radius: var(--_radius);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	color: var(--_text);
	background: var(--_bg);
	white-space: nowrap;
}

.cmspg-cb__btn--phone {
	background: var(--_phone-bg);
}

.cmspg-cb__btn--whatsapp {
	background: var(--_wa-bg);
}

.cmspg-cb__btn:hover,
.cmspg-cb__btn:focus-visible {
	background: var(--_hover-bg);
	color: var(--_hover-text);
	transform: translateY(-1px);
}

.cmspg-cb__btn:focus-visible {
	outline: 2px solid var(--_hover-bg);
	outline-offset: 2px;
}

.cmspg-cb__btn:active {
	transform: translateY(0);
}

.cmspg-cb__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.cmspg-cb__icon svg {
	width: var(--_icon-size);
	height: var(--_icon-size);
}

.cmspg-cb__label {
	font-size: var(--_font);
}

/* ================================================================
   SHADOW
   ============================================================= */

.cmspg-cb--shadow .cmspg-cb__btn,
.cmspg-cb--shadow .cmspg-cb__launcher,
.cmspg-cb--shadow .cmspg-cb__action {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.cmspg-cb--shadow .cmspg-cb__btn:hover,
.cmspg-cb--shadow .cmspg-cb__launcher:hover,
.cmspg-cb--shadow .cmspg-cb__action:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.10);
}

/* ================================================================
   FULLBAR MODE
   ============================================================= */

.cmspg-cb--fullbar:not(.cmspg-cb--inline):not(.cmspg-cb--preview) {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
}

.cmspg-cb--fullbar .cmspg-cb__bar {
	display: flex;
	width: 100%;
	height: var(--_bar-h);
	gap: 0;
}

.cmspg-cb--fullbar .cmspg-cb__btn {
	flex: 1;
	border-radius: 0;
	height: 100%;
	padding: 0 16px;
}

/* ================================================================
   STACKED FULL WIDTH MODE
   ============================================================= */

.cmspg-cb--stacked_fullwidth:not(.cmspg-cb--inline):not(.cmspg-cb--preview) {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
}

.cmspg-cb--stacked_fullwidth .cmspg-cb__bar {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0;
}

.cmspg-cb--stacked_fullwidth .cmspg-cb__btn {
	width: 100%;
	border-radius: 0;
	height: var(--_btn-h);
}

/* ================================================================
   LAUNCHER MODE — Layout
   Explicit order: expanded actions on top, launcher at bottom.
   Uses column direction with order to guarantee:
     Phone  (top)
     WhatsApp
     Launcher (bottom)
   ============================================================= */

.cmspg-cb--launcher {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cmspg-cb--launcher .cmspg-cb__expanded {
	order: 1;
}

.cmspg-cb--launcher .cmspg-cb__launcher {
	order: 2;
}

/* ================================================================
   LAUNCHER MODE — Main FAB
   Always shows the same icon. No open/close swap.
   ============================================================= */

.cmspg-cb__launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--_launcher);
	height: var(--_launcher);
	border-radius: 50%;
	background: var(--_bg);
	color: var(--_text);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	flex-shrink: 0;
}

.cmspg-cb__launcher:hover,
.cmspg-cb__launcher:focus-visible {
	background: var(--_hover-bg);
	color: var(--_hover-text);
}

.cmspg-cb__launcher:focus-visible {
	outline: 2px solid var(--_hover-bg);
	outline-offset: 2px;
}

.cmspg-cb__launcher svg,
.cmspg-cb__launcher img {
	width: 22px;
	height: 22px;
}

/* ================================================================
   LAUNCHER MODE — Expanded container
   Top-to-bottom: Phone then WhatsApp.
   ============================================================= */

.cmspg-cb__expanded {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

.cmspg-cb--launcher.is-open .cmspg-cb__expanded {
	pointer-events: auto;
}

/* ================================================================
   LAUNCHER MODE — Action bubbles
   Same size as launcher. Subtle fade + slide.
   ============================================================= */

.cmspg-cb__action {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--_launcher);
	height: var(--_launcher);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease,
	            background-color 0.15s ease, box-shadow 0.15s ease;
}

.cmspg-cb__action:nth-child(1) { transition-delay: 0ms; }
.cmspg-cb__action:nth-child(2) { transition-delay: 40ms; }
.cmspg-cb__action:nth-child(3) { transition-delay: 80ms; }

.cmspg-cb--launcher.is-open .cmspg-cb__action {
	opacity: 1;
	transform: translateY(0);
}

.cmspg-cb__action--phone {
	background: var(--_phone-bg);
}

.cmspg-cb__action--whatsapp {
	background: var(--_wa-bg);
}

.cmspg-cb__action:hover {
	filter: brightness(1.1);
}

.cmspg-cb__action .cmspg-cb__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cmspg-cb__action .cmspg-cb__icon svg,
.cmspg-cb__action .cmspg-cb__icon img {
	width: var(--_icon-size);
	height: var(--_icon-size);
}

/* ================================================================
   LAUNCHER MODE — Optional action labels (setting enabled)
   Turns circle into a compact pill with text.
   ============================================================= */

.cmspg-cb__action-text {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: inherit;
}

.cmspg-cb__action--labeled {
	width: auto;
	border-radius: var(--_launcher);
	padding: 0 16px 0 14px;
	height: var(--_launcher);
	gap: 8px;
}

/* ================================================================
   LAUNCHER MODE — Direction: left
   ============================================================= */

.cmspg-cb--dir-left {
	flex-direction: row;
	align-items: flex-end;
}

.cmspg-cb--dir-left .cmspg-cb__expanded {
	flex-direction: row;
	order: 0;
}

.cmspg-cb--dir-left .cmspg-cb__launcher {
	order: 1;
}

.cmspg-cb--dir-left .cmspg-cb__action {
	transform: translateX(6px);
}

.cmspg-cb--dir-left.is-open .cmspg-cb__action {
	transform: translateX(0);
}

/* ================================================================
   LAUNCHER MODE — Direction: right
   ============================================================= */

.cmspg-cb--dir-right {
	flex-direction: row;
	align-items: flex-end;
}

.cmspg-cb--dir-right .cmspg-cb__expanded {
	order: 1;
}

.cmspg-cb--dir-right .cmspg-cb__launcher {
	order: 0;
}

.cmspg-cb--dir-right .cmspg-cb__action {
	transform: translateX(-6px);
}

.cmspg-cb--dir-right.is-open .cmspg-cb__action {
	transform: translateX(0);
}

/* ================================================================
   INLINE MODE (shortcode)
   ============================================================= */

.cmspg-cb--inline .cmspg-cb__bar {
	display: inline-flex;
	gap: var(--_gap);
	flex-wrap: wrap;
}

.cmspg-cb--inline .cmspg-cb__btn {
	border-radius: var(--_radius);
	padding: 0 20px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Single shortcode button wrapper */
.cmspg-cb--shortcode-single {
	vertical-align: middle;
}

.cmspg-cb--shortcode-single .cmspg-cb__btn {
	border-radius: var(--_radius);
	padding: 0 20px;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.cmspg-cb--shortcode-single .cmspg-cb__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Icon image sizing inside buttons */
.cmspg-cb__icon img {
	width: var(--_icon-size);
	height: var(--_icon-size);
	object-fit: contain;
	border-radius: 2px;
}

/* ================================================================
   RESPONSIVE
   ============================================================= */

@media screen and (max-width: 480px) {
	.cmspg-cb:not(.cmspg-cb--inline):not(.cmspg-cb--preview) {
		bottom: 16px;
	}
	.cmspg-cb--right:not(.cmspg-cb--inline):not(.cmspg-cb--preview) {
		right: 16px;
	}
	.cmspg-cb--left:not(.cmspg-cb--inline):not(.cmspg-cb--preview) {
		left: 16px;
	}
	.cmspg-cb__btn {
		padding: 0 14px;
		font-size: 13px;
	}
}