:root {
	--btn-bg: var(--color-black);
	--btn-color: var(--color-black);
	--btn-filled-bg: var(--color-black);
	--btn-filled-color: var(--color-white);
}

button {
	overflow: hidden;
	text-overflow: ellipsis;
}
.btn {
	display: inline-flex;
	padding: 0.5rem 1.5rem;
	align-items: center;
	justify-content: center;
	font-size: var(--text-lg);
	color: var(--btn-color);
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--rounded);
	font-family: var(--font-mono);
	white-space: nowrap;
	background: none;
}
.btn svg {
	margin-right: 0.75rem;
	min-width: 1rem;
}
.btn--outlined {
	border-color: var(--color-gray-400);
}
.btn--outlined.btn--white {
	border-color: var(--color-white);
	color: var(--color-white);
}
/* WhatsApp's own brand green, matching the mobile floating CTA bar
   (assets/css/site/mobile-cta-bar.css) so the colour reads as WhatsApp
   wherever it appears, not just the site's generic CTA yellow. */
.btn--call,
li.menu-item a.call-cta,
.btn--box-call {
	border-radius: 999px !important;
}
/* Hero/boxed WhatsApp button: same plain solid green as the mobile
   floating bar (no pill shape, no icon) — same corner radius as every
   other .btn (matches Apply Online sitting next to it). */
.btn--whatsapp {
	border-color: var(--whatsapp-green);
	background: var(--whatsapp-green);
	color: var(--color-white) !important;
}
.btn--whatsapp:hover {
	background: var(--whatsapp-green-hover);
}
.wa-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	min-width: 1.6em;
	border-radius: 50%;
	background: var(--color-white);
	margin-right: var(--spacing-2);
}
.wa-icon svg {
	width: 60%;
	height: 60%;
}
.btn--filled {
	border-color: var(--btn-filled-bg);
	background: var(--btn-filled-bg);
	color: var(--btn-filled-color) !important;
}
.btn--filled svg {
	color: var(--btn-cta-bg);
}


.btn--cta {
	text-decoration: none;
	font-size: var(--text-2xl);
	font-weight: var(--font-semibold);
	border-color: var(--btn-cta-bg);
	background: var(--btn-cta-bg);
	color: var(--btn-cta-color) !important;
}
.btn--cta:hover {
	background: var(--btn-cta-bg-hover);
}
.btn--cta:after {
	content: "→";
	margin-left: var(--spacing-4);
}
.btn--cta svg {
	color: var(--color-green-600);
}



.btn--offer {
	text-decoration: none;
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	font-family: var(--font-sans);
	border-color: var(--btn-offer-bg);
	background: var(--btn-offer-bg);
	color: var(--btn-offer-color) !important;
}
.btn--offer:hover {
	background: var(--btn-offer-bg-hover);
}
.btn--offer:after {
	content: "→";
	margin-left: var(--spacing-4);
}
.btn--offer svg {
	color: var(--btn-offer-bg-hover);
}



.btn--menu {
	text-decoration: none;
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	font-family: var(--font-sans);
	border-color: var(--btn-menu-bg);
	background: var(--btn-menu-bg);
	color: var(--btn-menu-color) !important;
}
.btn--menu:hover {
	background: var(--btn-menu-bg-hover);
}
/*.btn--menu:after {
	content: "→";
	margin-left: var(--spacing-4);
}*/
.btn--menu svg {
	color: var(--color-green-600);
}


.btn--call {
	text-decoration: none;
	font-size: var(--text-2xl);
/*	text-transform: uppercase;*/
	font-weight: var(--font-heavy);
	border-color: var(--whatsapp-green);
	background: var(--whatsapp-green);
	color: var(--color-white) !important;
}
.btn--call:hover {
	background: var(--whatsapp-green-hover);
}
.btn--call:after {
/*	content: "→";
	margin-left: var(--spacing-4);*/
}
.btn--call svg {
	color: var(--color-green-600);
}



.btn--box {
	text-decoration: none;
	font-size: var(--text-2xl);
	font-weight: var(--font-semibold);
	border-color: var(--btn-box-bg);
	background: var(--btn-box-bg);
	color: var(--btn-box-color) !important;
	box-shadow: 0 -2px 0 0 rgba(0,0,0,.1) inset;
}
.btn--box:hover {
	background: var(--btn-box-bg-hover);
}
.btn--box:after {
	content: "→";
	margin-left: var(--spacing-4);
}
.btn--box svg {
	color: var(--color-green-600);
}


.btn--apply {
	text-decoration: none;
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	border-color: var(--btn-apply-bg);
	background: var(--btn-apply-bg);
	color: var(--btn-apply-color) !important;
}
.btn--apply:hover {
	filter: brightness(1.15);
}
.btn--apply:after {
	content: "→";
	margin-left: var(--spacing-2);
}


.btn--box-call {
	text-decoration: none;
	font-size: var(--text-2xl);
	font-weight: var(--font-semibold);
	background: var(--color-call-btn-bg);
	color: var(--color-call-btn-text) !important;
	border-bottom: 0px solid var(--color-call-btn-border);
	box-shadow: 0 -2px 0 0 rgba(0,0,0,.1) inset;
}
.btn--box-call:hover {
	background: var(--color-call-btn-bg);
}
.btn--box-call:after {
	content: "→";
	margin-left: var(--spacing-4);
}
.btn--box-call svg {
	color: var(--color-call-btn-bg);
}