/**
 * Dual Button Widget — Style 3: Gradient Shadow
 * Modern gradient buttons with bold colored shadow & floating circular badge.
 * Inspired by: codepen.io/easymac/pen/YypBbw
 *
 * @package captain-widgets-kit
 * @since   1.0.0
 */

/* ─── Wrapper ─────────────────────────────────────────────── */
.captwiki-style-3.captwiki-dual-btn {
	gap: 20px;
	padding: 16px 0;
	align-items: center;
}

/* ─── Shared button base overrides ───────────────────────── */
.captwiki-style-3 .captwiki-dual-btn-left,
.captwiki-style-3 .captwiki-dual-btn-right {
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 8px;
	border: none;
	letter-spacing: 0.4px;
	position: relative;
	overflow: visible;
}

/* ─── Left Button — Blue Gradient ────────────────────────── */
.captwiki-style-3 .captwiki-dual-btn-left {
	background: linear-gradient(135deg, #6c63ff 0%, #3b82f6 100%);
	color: #ffffff;
	box-shadow: 0 6px 0 #3730a3,
		0 8px 20px rgba(108, 99, 255, 0.40);
}

.captwiki-style-3 .captwiki-dual-btn-left:hover {
	transform: translateY(-3px);
	box-shadow: 0 9px 0 #3730a3,
		0 12px 28px rgba(108, 99, 255, 0.50);
	color: #ffffff;
}

.captwiki-style-3 .captwiki-dual-btn-left:active {
	transform: translateY(3px);
	box-shadow: 0 3px 0 #3730a3,
		0 4px 12px rgba(108, 99, 255, 0.30);
}

/* ─── Right Button — Pink Gradient ───────────────────────── */
.captwiki-style-3 .captwiki-dual-btn-right {
	background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
	color: #ffffff;
	box-shadow: 0 6px 0 #be185d,
		0 8px 20px rgba(248, 87, 166, 0.40);
}

.captwiki-style-3 .captwiki-dual-btn-right:hover {
	transform: translateY(-3px);
	box-shadow: 0 9px 0 #be185d,
		0 12px 28px rgba(248, 87, 166, 0.50);
	color: #ffffff;
}

.captwiki-style-3 .captwiki-dual-btn-right:active {
	transform: translateY(3px);
	box-shadow: 0 3px 0 #be185d,
		0 4px 12px rgba(248, 87, 166, 0.30);
}

/* ─── Badge — floating circle ────────────────────────────── */
.captwiki-style-3 .captwiki-dual-btn-badge {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.10);
	border: 2px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}