/* Button components. See AUDIT.md §5-6.
   Real visual components: .btn-default (+ .btn-highlighted modifier), .readmore-btn.
   .btn-wrap is the single spacing utility that replaces 5 old single-use wrapper
   classes (hero-btn-royal, about-us-btn-royal, core-feature-btn-royal,
   why-choose-btn-royal, testimonials-content-btn-royal) that all wrapped the exact
   same "single CTA below section body text" pattern — 4 of the 5 had never had a
   matching CSS rule at all (AUDIT.md §6). */

.btn-default {
	position: relative;
	display: inline-block;
	font-size: 0.975rem;
	font-weight: 600;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--brand-blue-dark);
	background: var(--accent-color);
	border-radius: 99px;
	padding: 1.0625em 3.125em 1.0625em 1.25em;
	border: none;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default:hover {
	color: var(--white-color);
}

.btn-default::before {
	content: '\f061';
	/* fa-solid fa-arrow-right */
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	position: absolute;
	top: 50%;
	right: 1.25rem;
	font-size: 1rem;
	line-height: 1;
	color: currentColor;
	/* always matches the button's own text color */
	transform: translateY(-50%);
	transition: all 0.4s ease-in-out;
}

.btn-default:hover::before {
	transform: translateY(-50%) rotate(45deg);
}

.btn-default::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	background: var(--brand-blue);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default:hover::after {
	right: auto;
	left: 0;
	width: 100%;
}

.btn-default.btn-highlighted:hover {
	color: var(--primary-color);
}

.btn-default.btn-highlighted::after {
	background: var(--white-color);
}

/* white background + outline variant — for a secondary CTA sitting on a light
   background where the yellow .btn-default would be too heavy. Reuses the
   same icon/fill hover animation as the base button, just with inverted
   resting colors (customers-link-button). */
.btn-default--outline {
	background: #fff;
	border: 1px solid rgba(0, 91, 187, .16);
	color: #000;
}

.btn-default--outline:hover {
	border-color: var(--brand-blue);
}

.readmore-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--primary-color);
	padding: 0.3125rem 0;
}

.readmore-btn i {
	font-size: 0.85em;
	transition: transform 0.3s ease-in-out;
}

.readmore-btn:hover i {
	transform: translateX(0.25rem);
}

/* Spacing utility — single CTA link/button sitting below a block of section text. */
.btn-wrap {
	margin-top: 2.5rem;
	/* 40px */
}

/* Two-column "section header" CTA pattern: title in one column, body copy +
   button in the other (index.html "Актуальні події" block). */
.section-btn {
	text-align: right;
}

.section-content-btn .section-btn {
	margin-top: 1.875rem;
	/* 30px */
	text-align: left;
}

/* Header primary CTA — hidden once the mobile nav takes over. */
@media (max-width: 64rem) {

	/* tablet: 1024px */
	.header-btn {
		display: none;
	}

	.btn-wrap {
		margin-top: 1.875rem;
		/* 30px */
	}

	.btn-default {
		padding: 0.9375rem 2.625rem 0.9375rem 0.9375rem;
	}

	.btn-default::before {
		right: 0.9375rem;
		font-size: 1.125rem;
	}

	.readmore-btn {
		padding: 0.1875rem 0;
	}
}