/* Refer a Friend page: the "Get Started" area ([s247_refer], inc/refer-a-friend.php) and the pack's button size. Loaded on that page only.
   Pack values (2026-11-13 design): brand #075BFA, orange #FF510B (hover #E74500), outline text #034BDB, ink #0A0B0F, tint #F0F5FD. */

.s247-refer-cta { margin: 0; font-family: inherit; color: #0A0B0F; }
.s247-refer-cta *, .s247-refer-cta *::before, .s247-refer-cta *::after { box-sizing: border-box; }

/* The pack's .btn on the page's own Elementor buttons (hero Get Started / Sign In): min-width 155 */
.s247-refer-btn-w .elementor-button { min-width: 155px; }
.s247-refer-btn-w .elementor-button .elementor-button-content-wrapper { justify-content: center; }

/* Guest: Get Started + Sign In side by side, like the hero */
.s247-refer-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Orange call-to-action (the pack's .btn-orange); --outline is .btn-outline-brand */
body.s247-refer .s247-refer-cta .s247-refer-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 155px;
	padding: 14px 30px; border: 2px solid #FF510B; border-radius: 7px;
	background: #FF510B; color: #fff; cursor: pointer;
	font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: none; text-align: center;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.s247-refer .s247-refer-cta .s247-refer-btn:hover, body.s247-refer .s247-refer-cta .s247-refer-btn:focus-visible { background: #E74500; border-color: #E74500; color: #fff; }
body.s247-refer .s247-refer-cta .s247-refer-btn--outline { background: #fff; border-color: #075BFA; color: #034BDB; }
body.s247-refer .s247-refer-cta .s247-refer-btn--outline:hover, body.s247-refer .s247-refer-cta .s247-refer-btn--outline:focus-visible { background: #075BFA; border-color: #075BFA; color: #fff; }
.s247-refer-btn:focus-visible, .s247-refer-copy__btn:focus-visible, .s247-refer-dash:focus-visible { outline: 3px solid rgba(7, 91, 250, .35); outline-offset: 2px; }
.s247-refer-btn__ico { flex: none; }

.s247-refer-hint { margin: 12px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: #0A0B0F; }
body.s247-refer .s247-refer-cta .s247-refer-hint a { color: #075BFA; font-weight: 800; text-decoration: underline; }
.s247-refer-hint--tight { margin-top: 10px; max-width: none; }

/* Messages after joining / on a problem */
.s247-refer-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 9px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.s247-refer-note--ok { background: #E3F7EF; color: #0B5A41; }
.s247-refer-note--err { background: #FDE9E4; color: #8A2A12; }
body.s247-refer .s247-refer-cta .s247-refer-note a { color: inherit; text-decoration: underline; }

/* Member card: link, copy, numbers, dashboard link */
.s247-refer-cta--member {
	padding: 19px; border: 1px solid #D8E6FB; border-radius: 19px; background: #fff;
	box-shadow: 0 6px 12px 0 rgba(16, 75, 155, .09);
}
.s247-refer-title { margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.045em; color: #0A0B0F; }
.s247-refer-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.s247-refer-copy { display: flex; gap: 8px; }
.s247-refer-copy__input {
	flex: 1 1 auto; min-width: 0; height: 45px; padding: 0 14px;
	border: 1px solid #b7bfcb; border-radius: 9px; background: #F6F9FF; color: #0A0B0F;
	font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.2; text-overflow: ellipsis;
}
.s247-refer-copy__input:focus { outline: 0; border-color: #075BFA; box-shadow: 0 0 0 .15rem rgba(7, 91, 250, .13); background: #fff; }
body.s247-refer .s247-refer-cta .s247-refer-copy__btn {
	flex: none; min-width: 116px; height: 45px; padding: 0 18px; border: 0; border-radius: 9px;
	background: #075BFA; color: #fff; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1;
	transition: background-color .15s ease;
}
body.s247-refer .s247-refer-cta .s247-refer-copy__btn:hover, body.s247-refer .s247-refer-cta .s247-refer-copy__btn:focus-visible { background: #0649C4; color: #fff; }
body.s247-refer .s247-refer-cta .s247-refer-copy__btn.is-copied { background: #00A877; }

.s247-refer-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.s247-refer-stats li {
	display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 12px 14px;
	border-radius: 12px; background: #E6F0FF;
}
.s247-refer-stats strong { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: #075BFA; }
.s247-refer-stats span { font-size: 13px; font-weight: 700; line-height: 1.25; color: #0A0B0F; }

body.s247-refer .s247-refer-cta .s247-refer-dash {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
	font-size: 15px; font-weight: 800; color: #075BFA; text-decoration: none;
}
body.s247-refer .s247-refer-cta .s247-refer-dash:hover, body.s247-refer .s247-refer-cta .s247-refer-dash:focus-visible { color: #0649C4; text-decoration: underline; }

@media (max-width: 575px) {
	body.s247-refer .s247-refer-cta .s247-refer-btn { padding: 12px 20px; min-width: 140px; }
	.s247-refer-btn-w .elementor-button { min-width: 140px; }
}
@media (max-width: 767px) {
	.s247-refer-cta--member { padding: 17px; }
	.s247-refer-copy { flex-direction: column; }
	body.s247-refer .s247-refer-cta .s247-refer-copy__btn { width: 100%; }
	.s247-refer-stats { gap: 8px; }
	.s247-refer-stats li { padding: 10px 12px; }
	.s247-refer-stats strong { font-size: 20px; }
	.s247-refer-stats span { font-size: 12px; }
}
@media (max-width: 380px) {
	.s247-refer-stats { grid-template-columns: 1fr; }
}