/* ==========================================================================
   Components
   ========================================================================== */

/* --- Buttons --- */
.rs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rs-space-2);
	font-family: var(--rs-font-heading);
	font-weight: 700;
	font-size: var(--rs-fs-base);
	padding: 0.85rem 1.75rem;
	border-radius: var(--rs-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--rs-transition), box-shadow var(--rs-transition), background var(--rs-transition), color var(--rs-transition);
	line-height: 1;
}
.rs-btn:hover { transform: translateY(-2px); }
.rs-btn:active { transform: translateY(0); }

.rs-btn--primary {
	background: var(--rs-primary);
	color: #fff;
	box-shadow: var(--rs-shadow-md);
}
.rs-btn--primary:hover { background: var(--rs-primary-dark); color: #fff; }

.rs-btn--accent {
	background: var(--rs-accent);
	color: var(--rs-navy);
	box-shadow: 0 8px 24px rgba(242, 179, 61, 0.35);
}
.rs-btn--accent:hover { background: var(--rs-accent-dark); }

.rs-btn--ghost {
	background: transparent;
	border-color: var(--rs-border);
	color: var(--rs-navy);
}
.rs-btn--ghost:hover { border-color: var(--rs-primary); color: var(--rs-primary); }

.rs-btn--outline-light {
	background: transparent;
	border-color: rgba(255,255,255,0.55);
	color: #fff;
}
.rs-btn--outline-light:hover { background: rgba(255,255,255,0.15); }

.rs-btn--sm { padding: 0.55rem 1.25rem; font-size: var(--rs-fs-sm); }
.rs-btn--block { width: 100%; }
.rs-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* --- Site Header --- */
.rs-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(251, 248, 241, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rs-border);
}
.rs-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--rs-space-3);
	gap: var(--rs-space-5);
}
.rs-logo {
	display: flex;
	align-items: center;
	gap: var(--rs-space-2);
	font-family: var(--rs-font-heading);
	font-weight: 800;
	font-size: var(--rs-fs-xl);
	color: var(--rs-navy);
}
.rs-logo img { max-height: 44px; width: auto; }

.rs-nav { display: flex; align-items: center; gap: var(--rs-space-5); }
.rs-nav ul { list-style: none; display: flex; gap: var(--rs-space-5); margin: 0; padding: 0; }
.rs-nav a {
	font-weight: 600;
	color: var(--rs-text);
	position: relative;
	padding-block: var(--rs-space-2);
}
.rs-nav a::after {
	content: "";
	position: absolute;
	right: 0; bottom: 0;
	height: 2px; width: 0;
	background: var(--rs-primary);
	transition: width var(--rs-transition);
}
.rs-nav a:hover::after,
.rs-nav .current-menu-item a::after { width: 100%; }

.rs-header__actions { display: flex; align-items: center; gap: var(--rs-space-3); }

.rs-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--rs-space-2);
}
.rs-menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--rs-navy);
	margin: 5px 0;
	transition: transform var(--rs-transition), opacity var(--rs-transition);
}

@media (max-width: 900px) {
	.rs-nav { display: none; }
	.rs-menu-toggle { display: block; }
	.rs-nav.is-open {
		display: flex;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--rs-surface);
		flex-direction: column;
		padding: var(--rs-space-5);
		box-shadow: var(--rs-shadow-md);
	}
	.rs-nav.is-open ul { flex-direction: column; gap: var(--rs-space-3); }
}

/* --- Hero --- */
.rs-hero {
	background: linear-gradient(180deg, var(--rs-primary-lighter) 0%, var(--rs-bg) 100%);
	padding-block: var(--rs-space-9) var(--rs-space-8);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.rs-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--rs-space-2);
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	padding: var(--rs-space-2) var(--rs-space-4);
	border-radius: var(--rs-radius-pill);
	font-size: var(--rs-fs-sm);
	font-weight: 700;
	color: var(--rs-primary);
	box-shadow: var(--rs-shadow-sm);
	margin-bottom: var(--rs-space-5);
}
.rs-hero h1 { max-width: 820px; margin-inline: auto; }
.rs-hero__sub {
	max-width: 700px;
	margin: var(--rs-space-4) auto var(--rs-space-3);
	font-size: var(--rs-fs-lg);
	color: var(--rs-primary-dark);
	font-weight: 700;
}
.rs-hero__lead {
	max-width: 640px;
	margin: 0 auto var(--rs-space-6);
	color: var(--rs-text-muted);
	font-size: var(--rs-fs-lg);
}
.rs-hero__ctas {
	display: flex;
	justify-content: center;
	gap: var(--rs-space-4);
	flex-wrap: wrap;
}

/* --- Growth line decoration (signature brand element) --- */
.rs-growth-line {
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	width: 100%;
	height: 90px;
	color: var(--rs-primary);
	opacity: 0.15;
	pointer-events: none;
}

/* --- Cards: generic --- */
.rs-card {
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius-md);
	padding: var(--rs-space-5);
	box-shadow: var(--rs-shadow-sm);
	transition: transform var(--rs-transition), box-shadow var(--rs-transition);
}
.rs-card:hover { transform: translateY(-4px); box-shadow: var(--rs-shadow-md); }

/* --- Chapter cards --- */
.rs-chapter-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--rs-space-3);
}
.rs-chapter-card__num {
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--rs-primary-light);
	color: var(--rs-primary);
	font-family: var(--rs-font-heading);
	font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	font-size: var(--rs-fs-lg);
}
.rs-chapter-card__tagline {
	color: var(--rs-text-muted);
	font-size: var(--rs-fs-sm);
	font-style: normal;
}
.rs-chapter-card__status {
	position: absolute;
	top: var(--rs-space-4);
	left: var(--rs-space-4);
	font-size: var(--rs-fs-xs);
	font-weight: 700;
	padding: 0.3rem 0.7rem;
	border-radius: var(--rs-radius-pill);
}
.rs-status--open { background: var(--rs-success-light); color: var(--rs-success); }
.rs-status--locked { background: var(--rs-locked-bg); color: var(--rs-text-faint); }
.rs-status--done { background: var(--rs-accent-light); color: var(--rs-accent-dark); }

.rs-chapter-card.is-locked { opacity: 0.6; }
.rs-chapter-card.is-locked .rs-chapter-card__num { background: var(--rs-locked-bg); color: var(--rs-locked); }

.rs-chapter-card__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--rs-space-3);
}

.rs-cta-card {
	background: linear-gradient(135deg, var(--rs-primary-dark), var(--rs-primary));
	color: #fff;
	border: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--rs-space-3);
}
.rs-cta-card h4 { color: #fff; }
.rs-cta-card p { color: rgba(255,255,255,0.85); }

/* --- Progress bar --- */
.rs-progress {
	width: 100%;
	height: 12px;
	background: var(--rs-locked-bg);
	border-radius: var(--rs-radius-pill);
	overflow: hidden;
}
.rs-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--rs-primary), var(--rs-accent));
	border-radius: var(--rs-radius-pill);
	transition: width 0.4s ease;
}
.rs-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: var(--rs-fs-sm);
	color: var(--rs-text-muted);
	margin-bottom: var(--rs-space-2);
}

/* --- Badges / points pill --- */
.rs-points-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--rs-space-2);
	background: var(--rs-accent-light);
	color: var(--rs-accent-dark);
	font-weight: 800;
	padding: var(--rs-space-2) var(--rs-space-4);
	border-radius: var(--rs-radius-pill);
}

.rs-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rs-space-2);
	text-align: center;
	padding: var(--rs-space-4);
	border-radius: var(--rs-radius-md);
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
}
.rs-badge__icon {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--rs-accent-light);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.6rem;
}
.rs-badge.is-locked .rs-badge__icon { background: var(--rs-locked-bg); filter: grayscale(1); opacity: 0.6; }
.rs-badge.is-locked { opacity: 0.55; }

/* --- Comparison table --- */
.rs-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rs-space-5);
}
.rs-compare__col {
	border-radius: var(--rs-radius-md);
	padding: var(--rs-space-6);
}
.rs-compare__col--us {
	background: var(--rs-primary-lighter);
	border: 2px solid var(--rs-primary);
}
.rs-compare__col--them {
	background: var(--rs-surface-alt);
	border: 2px solid var(--rs-border);
}
.rs-compare__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rs-space-3); }
.rs-compare__col li { display: flex; align-items: flex-start; gap: var(--rs-space-2); }
@media (max-width: 720px) { .rs-compare { grid-template-columns: 1fr; } }

/* --- Quiz component --- */
.rs-quiz {
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius-lg);
	padding: var(--rs-space-6);
	box-shadow: var(--rs-shadow-md);
}
.rs-quiz__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--rs-space-4);
	font-size: var(--rs-fs-sm);
	color: var(--rs-text-muted);
}
.rs-quiz__question { font-size: var(--rs-fs-xl); margin-bottom: var(--rs-space-5); }
.rs-quiz__options { display: flex; flex-direction: column; gap: var(--rs-space-3); }
.rs-quiz-option {
	display: flex;
	align-items: center;
	gap: var(--rs-space-3);
	padding: var(--rs-space-4);
	border: 2px solid var(--rs-border);
	border-radius: var(--rs-radius-md);
	background: var(--rs-surface);
	cursor: pointer;
	text-align: right;
	font-family: var(--rs-font-body);
	font-size: var(--rs-fs-base);
	transition: border-color var(--rs-transition), background var(--rs-transition);
}
.rs-quiz-option:hover { border-color: var(--rs-primary); }
.rs-quiz-option.is-correct { border-color: var(--rs-success); background: var(--rs-success-light); }
.rs-quiz-option.is-wrong { border-color: var(--rs-coral); background: var(--rs-coral-light); }
.rs-quiz-option[disabled] { cursor: default; }

.rs-quiz__feedback {
	margin-top: var(--rs-space-4);
	padding: var(--rs-space-4);
	border-radius: var(--rs-radius-md);
	font-weight: 600;
	display: none;
}
.rs-quiz__feedback.is-visible { display: block; }
.rs-quiz__feedback--correct { background: var(--rs-success-light); color: var(--rs-success); }
.rs-quiz__feedback--wrong { background: var(--rs-coral-light); color: #b3392c; }

.rs-quiz__actions { display: flex; justify-content: flex-end; gap: var(--rs-space-3); margin-top: var(--rs-space-5); }

.rs-chapter-complete {
	text-align: center;
	padding: var(--rs-space-7) var(--rs-space-5);
}
.rs-chapter-complete__icon { font-size: 3rem; margin-bottom: var(--rs-space-3); }

/* --- Dictionary flip cards --- */
.rs-dict-search {
	max-width: 480px;
	margin: 0 auto var(--rs-space-6);
	position: relative;
}
.rs-dict-search input {
	width: 100%;
	padding: var(--rs-space-3) var(--rs-space-5);
	border: 2px solid var(--rs-border);
	border-radius: var(--rs-radius-pill);
	font-family: var(--rs-font-body);
	font-size: var(--rs-fs-base);
}
.rs-dict-search input:focus { border-color: var(--rs-primary); outline: none; }

.rs-flip-card { perspective: 1200px; height: 180px; }
.rs-flip-card__inner {
	position: relative;
	width: 100%; height: 100%;
	transition: transform 0.5s;
	transform-style: preserve-3d;
	cursor: pointer;
}
.rs-flip-card.is-flipped .rs-flip-card__inner { transform: rotateY(180deg); }
.rs-flip-card__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	border-radius: var(--rs-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--rs-space-4);
	border: 1px solid var(--rs-border);
}
.rs-flip-card__face--front {
	background: var(--rs-primary-light);
	font-family: var(--rs-font-heading);
	font-weight: 700;
	font-size: var(--rs-fs-lg);
	color: var(--rs-primary-dark);
}
.rs-flip-card__face--back {
	background: var(--rs-navy);
	color: #fff;
	transform: rotateY(180deg);
	font-size: var(--rs-fs-sm);
	overflow-y: auto;
}
.rs-dict-empty { text-align: center; color: var(--rs-text-muted); padding: var(--rs-space-6) 0; display: none; }

/* --- Goals --- */
.rs-goal-card { display: flex; flex-direction: column; gap: var(--rs-space-3); }
.rs-goal-card__numbers { display: flex; justify-content: space-between; font-size: var(--rs-fs-sm); }
.rs-goal-form { display: grid; gap: var(--rs-space-4); max-width: 560px; }
.rs-goal-add-row { display: flex; gap: var(--rs-space-3); align-items: center; }
.rs-goal-add-row input { flex: 1; }
.rs-goal-card.is-complete { border-color: var(--rs-success); }
.rs-goal-card.is-complete .rs-progress__fill { background: var(--rs-success); }

/* --- Forms (generic + WPForms harmonizing) --- */
.rs-field { display: flex; flex-direction: column; gap: var(--rs-space-2); margin-bottom: var(--rs-space-4); }
.rs-field label { font-weight: 700; font-size: var(--rs-fs-sm); }
.rs-field input,
.rs-field select,
.rs-field textarea,
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container textarea {
	padding: var(--rs-space-3) var(--rs-space-4);
	border: 2px solid var(--rs-border);
	border-radius: var(--rs-radius-sm);
	font-family: var(--rs-font-body);
	font-size: var(--rs-fs-base);
	background: var(--rs-surface);
}
.rs-field input:focus, .rs-field select:focus, .rs-field textarea:focus { border-color: var(--rs-primary); outline: none; }
.rs-field-error { color: #b3392c; font-size: var(--rs-fs-xs); }
.wpforms-container button[type=submit],
.wpforms-container .wpforms-submit {
	font-family: var(--rs-font-heading) !important;
	background: var(--rs-primary) !important;
	border-radius: var(--rs-radius-pill) !important;
	padding: 0.85rem 1.75rem !important;
	border: none !important;
}

/* --- Activation modal --- */
.rs-modal-overlay {
	position: fixed; inset: 0;
	background: rgba(23, 45, 58, 0.55);
	display: none;
	align-items: center; justify-content: center;
	z-index: 999;
	padding: var(--rs-space-4);
}
.rs-modal-overlay.is-open { display: flex; }
.rs-modal {
	background: var(--rs-surface);
	border-radius: var(--rs-radius-lg);
	padding: var(--rs-space-6);
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	box-shadow: var(--rs-shadow-lg);
}
.rs-modal__close {
	position: absolute;
	top: var(--rs-space-4);
	left: var(--rs-space-4);
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--rs-text-muted);
}
.rs-modal__choice {
	display: flex;
	flex-direction: column;
	gap: var(--rs-space-3);
}
.rs-modal__choice-btn {
	display: flex;
	flex-direction: column;
	gap: var(--rs-space-1);
	text-align: right;
	padding: var(--rs-space-4);
	border: 2px solid var(--rs-border);
	border-radius: var(--rs-radius-md);
	background: var(--rs-surface);
	cursor: pointer;
}
.rs-modal__choice-btn:hover { border-color: var(--rs-primary); }
.rs-modal__choice-btn strong { font-family: var(--rs-font-heading); color: var(--rs-navy); }
.rs-modal__choice-btn span { color: var(--rs-text-muted); font-size: var(--rs-fs-sm); }
.rs-modal-step { display: none; }
.rs-modal-step.is-active { display: block; }
.rs-modal-message { padding: var(--rs-space-3); border-radius: var(--rs-radius-sm); font-size: var(--rs-fs-sm); margin-top: var(--rs-space-2); display:none; }
.rs-modal-message.is-visible { display: block; }
.rs-modal-message--error { background: var(--rs-coral-light); color: #b3392c; }
.rs-modal-message--success { background: var(--rs-success-light); color: var(--rs-success); }

/* --- Steps ("how it works") --- */
.rs-steps { counter-reset: rs-step; }
.rs-step {
	position: relative;
	text-align: center;
	padding-top: var(--rs-space-5);
}
.rs-step__num {
	counter-increment: rs-step;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--rs-primary);
	color: #fff;
	font-family: var(--rs-font-heading);
	font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto var(--rs-space-4);
}
.rs-step__num::before { content: counter(rs-step); }

/* --- Certificate --- */
.rs-certificate {
	background: var(--rs-surface);
	border: 3px solid var(--rs-accent);
	border-radius: var(--rs-radius-lg);
	padding: var(--rs-space-8);
	text-align: center;
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}
.rs-certificate::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid var(--rs-accent);
	border-radius: calc(var(--rs-radius-lg) - 8px);
	pointer-events: none;
}
.rs-certificate__title { font-size: var(--rs-fs-3xl); color: var(--rs-primary-dark); }
.rs-certificate__name {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-fs-3xl);
	color: var(--rs-navy);
	margin: var(--rs-space-4) 0;
	border-bottom: 2px solid var(--rs-accent);
	display: inline-block;
	padding-bottom: var(--rs-space-2);
}
.rs-certificate__body { max-width: 560px; margin: 0 auto var(--rs-space-5); color: var(--rs-text); }
.rs-certificate__signature { margin-top: var(--rs-space-6); font-weight: 700; color: var(--rs-primary); }
.rs-certificate.is-locked { filter: grayscale(0.5); opacity: 0.7; }
.rs-certificate-lock-note { text-align: center; color: var(--rs-text-muted); margin-top: var(--rs-space-4); font-size: var(--rs-fs-sm); }

@media print {
	body * { visibility: hidden; }
	.rs-certificate, .rs-certificate * { visibility: visible; }
	.rs-certificate {
		position: absolute; inset: 0; margin: 0; border-width: 4px;
		box-shadow: none;
	}
}

/* --- Footer --- */
.rs-footer {
	background: var(--rs-navy);
	color: rgba(255,255,255,0.85);
	padding-block: var(--rs-space-8) var(--rs-space-5);
	margin-top: var(--rs-space-8);
}
.rs-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.2fr;
	gap: var(--rs-space-6);
	margin-bottom: var(--rs-space-6);
}
@media (max-width: 800px) { .rs-footer__grid { grid-template-columns: 1fr; } }
.rs-footer h4 { color: #fff; }
.rs-footer a { color: rgba(255,255,255,0.75); }
.rs-footer a:hover { color: var(--rs-accent); }
.rs-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rs-space-2); }
.rs-footer__social { display: flex; gap: var(--rs-space-3); margin-top: var(--rs-space-3); }
.rs-footer__social a {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	display: flex; align-items: center; justify-content: center;
}
.rs-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: var(--rs-space-5);
	text-align: center;
	font-size: var(--rs-fs-sm);
	color: rgba(255,255,255,0.6);
}

/* --- Empty / locked states --- */
.rs-locked-notice {
	background: var(--rs-surface-alt);
	border: 1px dashed var(--rs-border);
	border-radius: var(--rs-radius-md);
	padding: var(--rs-space-6);
	text-align: center;
	color: var(--rs-text-muted);
}

/* --- Toast (motivational messages) --- */
.rs-toast {
	position: fixed;
	bottom: var(--rs-space-5);
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
	max-width: 90vw;
	background: var(--rs-navy);
	color: #fff;
	padding: var(--rs-space-3) var(--rs-space-5);
	border-radius: var(--rs-radius-pill);
	box-shadow: var(--rs-shadow-lg);
	z-index: 1000;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}
.rs-toast.is-visible { opacity: 1; transform: translateY(0); }