/**
 * Buttons — reusable component (master prompt §29). Values confirmed
 * from Figma's Dental hero "Book Appointment" / "Find a doctor"
 * buttons (node 209:219). Other homepages get diffed against this
 * once pulled — if identical, reused as-is; if not, a variant gets
 * added here rather than a one-off.
 */

.eliteclinic-btn {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	height: 56px;
	padding: 0 24px;
	border-radius: 100px;
	font-family: 'Inter', var(--eliteclinic-font-body);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.eliteclinic-btn--primary {
	background: var(--eliteclinic-color-primary);
	color: var(--eliteclinic-color-white);
	padding-right: 8px;
}

.eliteclinic-btn--primary:hover,
.eliteclinic-btn--primary:focus-visible {
	background: color-mix(in srgb, var(--eliteclinic-color-primary) 85%, black);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--eliteclinic-color-primary) 60%, transparent);
}

.eliteclinic-btn__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--eliteclinic-color-white);
	color: var(--eliteclinic-color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.eliteclinic-btn:hover .eliteclinic-btn__icon {
	transform: translateX(3px);
}

.eliteclinic-btn__icon svg {
	width: 16px;
	height: 16px;
}

.eliteclinic-btn--ghost {
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(15px);
	border-color: rgba(64, 64, 64, 0.5);
	color: var(--eliteclinic-color-neutral);
	font-weight: 500;
}

.eliteclinic-btn--ghost:hover,
.eliteclinic-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.55);
	transform: translateY(-2px);
}

.eliteclinic-btn--white {
	background: var(--eliteclinic-color-white);
	color: var(--eliteclinic-color-neutral);
	font-weight: 500;
	height: 50px;
	padding-right: 5px;
}

.eliteclinic-btn--white:hover,
.eliteclinic-btn--white:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(17, 17, 17, 0.35);
}

.eliteclinic-btn--white .eliteclinic-btn__icon {
	width: 40px;
	height: 40px;
	background: var(--eliteclinic-color-primary-light, #4bb1fa);
	color: var(--eliteclinic-color-white);
}

.eliteclinic-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/**
 * Eyebrow label (small icon + uppercase text above a section heading)
 * — shared across every homepage, not tied to one section. Moved here
 * from a Dental-specific file after a real render on Pediatric showed
 * the icon with no size constraint (drew at native SVG size — a
 * cautionary case for keeping shared components out of per-homepage
 * files going forward).
 */
.eliteclinic-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--eliteclinic-font-body);
	font-weight: 500;
	font-size: 16px;
	text-transform: uppercase;
	color: var(--eliteclinic-color-neutral);
	margin: 0 0 16px;
}

.eliteclinic-eyebrow svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--eliteclinic-color-primary-light);
}