/**
 * OptiView reusable GenerateBlocks button variants.
 *
 * Add a modifier class to a GenerateBlocks button, for example:
 *   <a class="gb-button btn-gradient">...</a>
 *   <a class="gb-button btn-outline-white">...</a>
 *
 * These classes own appearance only. Width, margin, and alignment
 * stay with GenerateBlocks.
 *
 * Values match existing OptiView CTA treatments (Hero / .gb-button-42b8c9f8 /
 * .but-grad2 hover, and the white-outline GB / .dbio-outlined-button look).
 */

/* Filled blue/purple gradient CTA */
.gb-button.btn-gradient {
	background-color: transparent;
	background-image: linear-gradient(
		99deg,
		var(--global-color-9),
		var(--global-color-8)
	);
	color: #ffffff;
	border: 1.5px solid var(--base-3);
	border-radius: 26px;
	padding: 13.5px 26px;
	font-size: 15px;
	font-weight: 700;
	line-height: 150%;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.gb-button.btn-gradient:hover,
.gb-button.btn-gradient:focus {
	background: linear-gradient(
		0deg,
		rgba(62, 68, 254, 0.6),
		rgba(62, 68, 254, 0.6)
	);
	border-color: #3e49f4;
	box-shadow: 0px 8px 14px rgb(62 68 254 / 26%);
	color: #ffffff;
	text-decoration: none;
}

/* Transparent / dark fill with white outline and white text */
.gb-button.btn-outline-white {
	background: transparent;
	background-color: transparent;
	background-image: none;
	color: #ffffff;
	border: 1.5px solid var(--global-color-10, #ffffff);
	border-radius: 26px;
	padding: 13.5px 26px;
	font-size: 15px;
	font-weight: 700;
	line-height: 150%;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.gb-button.btn-outline-white:hover,
.gb-button.btn-outline-white:focus {
	background-color: rgba(177, 133, 255, 0.2);
	background-image: none;
	border-color: var(--global-color-10, #ffffff);
	color: #ffffff;
	box-shadow: 0px 2px 4px rgba(97, 97, 97, 0.18),
		0px 4px 8px rgba(97, 97, 97, 0.18);
	text-decoration: none;
}