/**
 * Button Widget — Picklemall Widgets
 *
 * Reusable branded button. Other widgets that render a .custom-btn should add
 * 'picklemall-button-widget' to their get_style_depends() array.
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */

.custom-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: #A23100;
	text-decoration: none;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%),
	            var(--Colours-Brand-Primary-secondary---60, #FFC6AD);
	border: 4.5px solid var(--Colours-Brand-Primary-secondary---20, #FF6D2E);
	border-radius: 999px;
	transition: background 0.25s ease, color 0.25s ease;
	cursor: pointer;
	white-space: nowrap;
}

/* ── Arrow icon ───────────────────────────────────────────────────────────── */

.custom-btn__arrow {
	width: 24px;
	height: auto;
	flex-shrink: 0;
	transition: filter 0.25s ease;
}

/* ── Hover ────────────────────────────────────────────────────────────────── */

.custom-btn:hover {
	color: #ffffff;
	background: var(--Colours-Brand-Primary-secondary---20, #FF6D2E);
}

.custom-btn:hover .custom-btn__arrow {
	filter: brightness(0) invert(1);
}

/* ── Elementor widget wrapper ─────────────────────────────────────────────── */

.elementor-widget-picklemall-button .elementor-widget-container {
	display: flex;
}