/* ==========================================================================
   NFCR buttons  [nfcr_button]
   .nfcr-btn             pill button
     --primary           orange (main CTA)        --navy    solid navy
     --outline           navy outline             --soft    white, soft blue outline
     --white             white on dark            --ghost   white outline on dark
     --sm / --md / --lg  sizes
   .nfcr-btn-combo       button + overlapping circle with arrow
     --navy / --white    circle colour
   .nfcr-link            text link with arrow (orange; --light on dark)
   ========================================================================== */

.nfcr-btn-wrap {
	display: inline-flex;
	vertical-align: middle;
	margin: 0 22px 12px 0;
}
.nfcr-btn-wrap:last-child { margin-right: 0; }

.nfcr-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11.5px 24.5px; /* md: 13px 26px minus the 1.5px border */
	border: 1.5px solid transparent;
	border-radius: var(--nfcr-r-pill);
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-ui);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nfcr-btn svg { flex-shrink: 0; }

.nfcr-btn--sm { padding: 8.5px 20.5px; font-size: var(--nfcr-fs-small); }
.nfcr-btn--lg { padding: 12.5px 26.5px; }

/* Variants (also styled when the parent combo link is hovered) */
.nfcr-btn--primary { background: var(--nfcr-orange); color: #fff !important; }
a.nfcr-btn--primary:hover, .nfcr-btn-combo:hover .nfcr-btn--primary { background: var(--nfcr-orange-hover); }

.nfcr-btn--navy { background: var(--nfcr-navy); color: #fff !important; }
a.nfcr-btn--navy:hover, .nfcr-btn-combo:hover .nfcr-btn--navy { background: var(--nfcr-navy-hover); }

.nfcr-btn--outline { background: transparent; border-color: var(--nfcr-navy); color: var(--nfcr-navy) !important; }
a.nfcr-btn--outline:hover, .nfcr-btn-combo:hover .nfcr-btn--outline { background: var(--nfcr-navy); color: #fff !important; }

.nfcr-btn--soft { background: var(--nfcr-white); border-color: var(--nfcr-line-soft); color: var(--nfcr-navy) !important; }
a.nfcr-btn--soft:hover, .nfcr-btn-combo:hover .nfcr-btn--soft { border-color: var(--nfcr-navy); }

.nfcr-btn--white { background: var(--nfcr-white); color: var(--nfcr-navy) !important; }
a.nfcr-btn--white:hover, .nfcr-btn-combo:hover .nfcr-btn--white { background: var(--nfcr-surface); }

.nfcr-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff !important; }
a.nfcr-btn--ghost:hover, .nfcr-btn-combo:hover .nfcr-btn--ghost { border-color: #fff; }

/* Button + circle arrow (one link, one click target) */
.nfcr-btn-combo {
	display: inline-flex;
	align-items: center;
	text-decoration: none !important;
}
.nfcr-btn-combo__circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	margin-left: -15px;
	border-radius: 50%;
}
.nfcr-btn-combo--sm .nfcr-btn-combo__circle { width: 42px; height: 42px; margin-left: -14px; }
.nfcr-btn-combo--navy  .nfcr-btn-combo__circle { background: var(--nfcr-navy); color: #fff; }
.nfcr-btn-combo--white .nfcr-btn-combo__circle { background: var(--nfcr-white); color: var(--nfcr-navy); }

/* Text link with arrow */
.nfcr-link {
	display: inline-block;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--nfcr-orange) !important;
	text-decoration: none !important;
}
.nfcr-link:hover { color: var(--nfcr-navy) !important; }
.nfcr-link svg { display: inline-block; margin-left: 2px; vertical-align: -1px; }
.nfcr-link--light { color: #fff !important; }
.nfcr-link--light:hover { color: var(--nfcr-on-dark-link) !important; }
.nfcr-link--soft { color: var(--nfcr-orange-soft) !important; }
.nfcr-link--soft:hover { color: #fff !important; }
.nfcr-link--navy { color: var(--nfcr-navy) !important; }
.nfcr-link--navy:hover { color: var(--nfcr-orange) !important; }

@media (max-width: 480px) {
	.nfcr-btn-wrap.nfcr-btn-wrap--stretch,
	.nfcr-btn-wrap--stretch .nfcr-btn-combo,
	.nfcr-btn-wrap--stretch > .nfcr-btn { width: 100%; }
	.nfcr-btn-wrap--stretch .nfcr-btn-combo .nfcr-btn { flex: 1; }
}

.nfcr-btn-combo--lg .nfcr-btn-combo__circle { width: 48px; height: 48px; }

.nfcr-btn-combo--accent .nfcr-btn-combo__circle { background: var(--nfcr-accent); color: #fff; width: 44px; height: 44px; margin-left: -14px; }

/* Orange circle (e.g. outline button on a white card) */
.nfcr-btn-combo--orange .nfcr-btn-combo__circle { background: var(--nfcr-orange); color: #fff; }