/* ==========================================================================
   Custom Button Builder — template styles
   Each button carries its own CSS custom properties inline (--cbb-*), set
   from the admin's saved settings, so every button can look completely
   different while sharing the same template CSS below.
   ========================================================================== */

.cbb-wrap {
	display: flex;
	max-width: 100%;
}
.cbb-wrap.cbb-align-left { justify-content: flex-start; }
.cbb-wrap.cbb-align-center { justify-content: center; }
.cbb-wrap.cbb-align-right { justify-content: flex-end; }

.cbb-btn,
.cbb-btn:visited {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.2;
	position: relative;
	text-decoration: none !important;

	border-style: solid !important;
	border-width: var( --cbb-border-width, 0 ) !important;
	border-color: var( --cbb-border-color, transparent ) !important;
	border-radius: var( --cbb-radius, 8px ) !important;
	background: var( --cbb-bg, #906F2B ) !important;
	color: var( --cbb-text, #fff ) !important;
	box-shadow: none;
	font-size: var( --cbb-font-size, 16px );
	font-weight: var( --cbb-font-weight, 600 );
	font-family: var( --cbb-font-family, inherit ) !important;
	padding: var( --cbb-pad-v, 14px ) var( --cbb-pad-h, 26px );
	width: var( --cbb-width, auto );
	max-width: 100%;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
		box-shadow 0.3s ease, transform 0.25s ease, background-position 0.4s ease;
}

.cbb-btn-text {
	position: relative;
	z-index: 2;
	transition: color 0.3s ease;
}
.cbb-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	transition: transform 0.35s ease, color 0.3s ease;
	line-height: 1;
}

/* -------------------------------------------------------------------- */
/* 1. Icon Reveal Pill                                                   */
/* Icon spins 180deg and its circular background sweeps in to cover      */
/* the whole button on hover.                                            */
/* -------------------------------------------------------------------- */
.cbb-tpl-icon-reveal {
	overflow: hidden;
	isolation: isolate;
	padding-right: 6px;
}
.cbb-tpl-icon-reveal .cbb-btn-icon {
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: var( --cbb-accent ) !important;
	color: var( --cbb-hover-text, #fff ) !important;
	margin-left: 6px;
	flex-shrink: 0;
}
.cbb-tpl-icon-reveal::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.4em;
	width: 2.2em;
	height: 2.2em;
	background: var( --cbb-accent ) !important;
	border-radius: 50%;
	transform: translateY( -50% ) scale( 0 );
	transition: transform 0.55s ease;
	z-index: 1;
}
.cbb-tpl-icon-reveal:hover::before {
	transform: translateY( -50% ) scale( 18 );
}
.cbb-tpl-icon-reveal:hover .cbb-btn-text {
	color: var( --cbb-hover-text, #fff ) !important;
}
.cbb-tpl-icon-reveal:hover .cbb-btn-icon {
	transform: rotate( 180deg );
}

/* -------------------------------------------------------------------- */
/* 2. Solid Flat                                                         */
/* -------------------------------------------------------------------- */
.cbb-tpl-solid-flat:hover {
	background: var( --cbb-accent ) !important;
	border-color: var( --cbb-accent ) !important;
}
.cbb-tpl-solid-flat:hover .cbb-btn-text,
.cbb-tpl-solid-flat:hover .cbb-btn-icon {
	color: var( --cbb-hover-text, #fff ) !important;
}
.cbb-tpl-solid-flat:hover .cbb-btn-icon {
	transform: translateX( 4px );
}

/* -------------------------------------------------------------------- */
/* 3. Outline Fill                                                       */
/* -------------------------------------------------------------------- */
.cbb-tpl-outline-fill {
	background: transparent !important;
}
.cbb-tpl-outline-fill:hover {
	background: var( --cbb-accent ) !important;
	border-color: var( --cbb-accent ) !important;
}
.cbb-tpl-outline-fill:hover .cbb-btn-text,
.cbb-tpl-outline-fill:hover .cbb-btn-icon {
	color: var( --cbb-hover-text, #fff ) !important;
}

/* -------------------------------------------------------------------- */
/* 4. Gradient Shine                                                     */
/* -------------------------------------------------------------------- */
.cbb-tpl-gradient-shine {
	background: linear-gradient( 120deg, var( --cbb-bg ), var( --cbb-accent ), var( --cbb-bg ) ) !important;
	background-size: 220% 220%;
	background-position: 0% 50%;
}
.cbb-tpl-gradient-shine:hover {
	background-position: 100% 50%;
}
.cbb-tpl-gradient-shine:hover .cbb-btn-text,
.cbb-tpl-gradient-shine:hover .cbb-btn-icon {
	color: var( --cbb-hover-text, #fff ) !important;
}
.cbb-tpl-gradient-shine:hover .cbb-btn-icon {
	transform: translateX( 4px );
}

/* -------------------------------------------------------------------- */
/* 5. Neon Glow                                                          */
/* -------------------------------------------------------------------- */
.cbb-tpl-neon-glow {
	box-shadow: 0 0 0 rgba( 0, 0, 0, 0 );
}
.cbb-tpl-neon-glow:hover {
	background: var( --cbb-accent ) !important;
	border-color: var( --cbb-accent ) !important;
	box-shadow: 0 0 14px var( --cbb-accent ), 0 0 30px var( --cbb-accent );
}
.cbb-tpl-neon-glow:hover .cbb-btn-text,
.cbb-tpl-neon-glow:hover .cbb-btn-icon {
	color: var( --cbb-hover-text, #141414 ) !important;
}

/* -------------------------------------------------------------------- */
/* 6. 3D Press                                                           */
/* -------------------------------------------------------------------- */
.cbb-tpl-press-3d {
	box-shadow: 0 5px 0 var( --cbb-accent );
	transform: translateY( 0 );
}
.cbb-tpl-press-3d:hover {
	transform: translateY( 2px );
	box-shadow: 0 3px 0 var( --cbb-accent );
}
.cbb-tpl-press-3d:active {
	transform: translateY( 5px );
	box-shadow: 0 0 0 var( --cbb-accent );
}

/* -------------------------------------------------------------------- */
/* 7. Soft Shadow Card                                                   */
/* -------------------------------------------------------------------- */
.cbb-tpl-soft-card {
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.08 );
}
.cbb-tpl-soft-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.14 );
	border-color: var( --cbb-accent ) !important;
}
.cbb-tpl-soft-card:hover .cbb-btn-icon {
	transform: translateX( 4px );
	color: var( --cbb-accent ) !important;
}

/* -------------------------------------------------------------------- */
/* 8. Underline Sweep                                                    */
/* -------------------------------------------------------------------- */
.cbb-tpl-underline-sweep {
	background: transparent !important;
	border: none !important;
	padding-left: 2px;
	padding-right: 2px;
}
.cbb-tpl-underline-sweep .cbb-btn-text {
	position: relative;
}
.cbb-tpl-underline-sweep .cbb-btn-text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 0;
	height: 2px;
	background: var( --cbb-accent ) !important;
	transition: width 0.3s ease;
}
.cbb-tpl-underline-sweep:hover .cbb-btn-text::after {
	width: 100%;
}
.cbb-tpl-underline-sweep:hover .cbb-btn-text,
.cbb-tpl-underline-sweep:hover .cbb-btn-icon {
	color: var( --cbb-hover-text, var( --cbb-accent ) ) !important;
}
.cbb-tpl-underline-sweep:hover .cbb-btn-icon {
	transform: translateX( 4px );
}

/* -------------------------------------------------------------------- */
/* 9. Split Icon Box                                                     */
/* -------------------------------------------------------------------- */
.cbb-tpl-split-icon {
	padding: 0;
	gap: 0;
	overflow: hidden;
	align-items: stretch;
}
.cbb-tpl-split-icon .cbb-btn-text {
	padding: var( --cbb-pad-v ) var( --cbb-pad-h );
	display: inline-flex;
	align-items: center;
}
.cbb-tpl-split-icon .cbb-btn-icon {
	background: var( --cbb-accent ) !important;
	padding: var( --cbb-pad-v ) calc( var( --cbb-pad-h ) * 0.65 );
	color: var( --cbb-hover-text, #fff ) !important;
}
.cbb-tpl-split-icon:hover .cbb-btn-icon {
	transform: translateX( 4px );
}

/* -------------------------------------------------------------------- */
/* 10. Gradient Pulse                                                    */
/* -------------------------------------------------------------------- */
.cbb-tpl-gradient-pulse {
	background: linear-gradient( 135deg, var( --cbb-bg ), var( --cbb-accent ) ) !important;
}
@keyframes cbbPulse {
	0% { box-shadow: 0 0 0 0 rgba( 0, 0, 0, 0.18 ); }
	100% { box-shadow: 0 0 0 16px rgba( 0, 0, 0, 0 ); }
}
.cbb-tpl-gradient-pulse:hover {
	animation: cbbPulse 1.1s ease-out infinite;
}
.cbb-tpl-gradient-pulse:hover .cbb-btn-icon {
	transform: translateX( 4px );
}

/* -------------------------------------------------------------------- */
/* 11. Border Fill                                                       */
/* -------------------------------------------------------------------- */
.cbb-tpl-border-fill {
	background: transparent !important;
	overflow: hidden;
	isolation: isolate;
}
.cbb-tpl-border-fill::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var( --cbb-accent ) !important;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.35s ease;
	z-index: 1;
}
.cbb-tpl-border-fill:hover::before {
	transform: scaleX( 1 );
}
.cbb-tpl-border-fill:hover .cbb-btn-text,
.cbb-tpl-border-fill:hover .cbb-btn-icon {
	color: var( --cbb-hover-text, #fff ) !important;
}

/* -------------------------------------------------------------------- */
/* 12. Liquid Morph                                                      */
/* Corners wobble asymmetrically like a liquid blob while hovered.       */
/* -------------------------------------------------------------------- */
@keyframes cbbLiquidMorph {
	0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
	25%      { border-radius: 58% 42% 39% 61% / 55% 48% 52% 45%; }
	50%      { border-radius: 63% 37% 54% 46% / 38% 60% 40% 62%; }
	75%      { border-radius: 48% 52% 41% 59% / 62% 39% 61% 38%; }
}
.cbb-tpl-liquid-morph {
	transition: background 0.3s ease, color 0.3s ease, border-radius 0.4s ease;
}
.cbb-tpl-liquid-morph:hover {
	background: var( --cbb-accent ) !important;
	animation: cbbLiquidMorph 2.6s ease-in-out infinite;
}
.cbb-tpl-liquid-morph:hover .cbb-btn-text,
.cbb-tpl-liquid-morph:hover .cbb-btn-icon {
	color: var( --cbb-hover-text, #fff ) !important;
}
.cbb-tpl-liquid-morph:hover .cbb-btn-icon {
	transform: translateX( 3px ) rotate( -8deg );
}

/* -------------------------------------------------------------------- */
/* 13. Magnetic Pull                                                     */
/* JS (cbb-frontend.js) moves the button slightly toward the cursor when */
/* it's nearby, then snaps back. This just provides the smooth motion.   */
/* -------------------------------------------------------------------- */
.cbb-tpl-magnetic-pull {
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
		transform 0.25s cubic-bezier( 0.33, 1, 0.68, 1 );
	will-change: transform;
}
.cbb-tpl-magnetic-pull:hover {
	background: var( --cbb-accent ) !important;
}
.cbb-tpl-magnetic-pull:hover .cbb-btn-text,
.cbb-tpl-magnetic-pull:hover .cbb-btn-icon {
	color: var( --cbb-hover-text, #fff ) !important;
}
.cbb-tpl-magnetic-pull .cbb-btn-icon {
	transition: transform 0.25s cubic-bezier( 0.33, 1, 0.68, 1 );
}