/*
 * SkillionsPro Portal - public pages: [spp_login], [spp_register] wizard, [spp_courses] grid, [spp_course] page.
 * Layout only; components come from components.css. The site theme's CSS is loaded too, so element
 * defaults (lists, headings, fieldsets) are reset under .spp-public.
 */

.spp-public {
	display: flex;
	justify-content: center;
	padding: var(--spp-space-6) var(--spp-space-4);
}
.spp-public[data-theme="dark"] {
	background: var(--spp-bg);
	border-radius: var(--spp-radius-card);
}
/* Block themes cap post content at their content width; the grid and course page use the theme's wide width. */
.spp.spp-public--wide { display: block; width: 100%; max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; }
.spp.spp-public--wide:not([data-theme="dark"]) { padding-inline: 0; } /* the theme already pads its content */

/* :where() keeps these resets at one-class weight so component rules below still win. */
.spp-public :where(ul[role="list"], ol) { margin: 0; padding: 0; list-style: none; }
.spp-public :where(h1, h2, h3) { margin: 0; font-family: var(--spp-font); color: var(--spp-text); text-transform: none; }
.spp-public :where(fieldset) { min-width: 0; margin: 0; padding: 0; border: 0; }
.spp-public :where(legend) { padding: 0; }
.spp-public :where(dl, dd) { margin: 0; }
.spp-public :where(button) { font-family: inherit; text-transform: none; letter-spacing: normal; }

/* Auth cards (login, register) */
.spp .spp-auth { width: 100%; max-width: 440px; padding: var(--spp-space-6); }
.spp .spp-auth__title {
	margin: 0 0 6px;
	font: 600 24px/1.3 var(--spp-font);
	letter-spacing: -.01em;
	color: var(--spp-text);
}
.spp .spp-auth__lead { margin: 0 0 var(--spp-space-5); font-size: 15px; color: var(--spp-muted); }
.spp .spp-auth__foot { margin: var(--spp-space-5) 0 0; font-size: 14px; line-height: 1.8; text-align: center; color: var(--spp-muted); }

/* Honeypot: off-screen for people, still in the DOM for bots. */
.spp .spp-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.spp .spp-success {
	padding: var(--spp-space-5);
	border-radius: var(--spp-radius);
	background: var(--spp-teal-tint);
	color: var(--spp-text);
	text-align: center;
}
.spp .spp-success > .spp-icon { display: block; width: 48px; height: 48px; margin: 0 auto var(--spp-space-3); color: var(--spp-teal-strong); }
.spp .spp-success p { margin: 0; }

/* ---------- Signup wizard ---------- */
.spp .spp-wizard { max-width: 580px; }

.spp .spp-steps { display: flex; align-items: center; margin: 0 0 var(--spp-space-5); }
.spp .spp-steps__item { display: flex; flex: 1; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--spp-muted); }
.spp .spp-steps__item:last-child { flex: none; }
.spp .spp-steps__label { white-space: nowrap; }
.spp .spp-steps__item:not(:last-child)::after {
	content: "";
	flex: 1;
	min-width: 12px;
	height: 2px;
	margin: 0 4px;
	border-radius: 2px;
	background: var(--spp-border);
}
.spp .spp-steps__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border: 2px solid var(--spp-border-strong);
	border-radius: var(--spp-radius-full);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.spp .spp-steps__item[aria-current="step"] { color: var(--spp-text); font-weight: 600; }
.spp .spp-steps__item[aria-current="step"] .spp-steps__num { background: var(--spp-primary); border-color: var(--spp-primary); color: var(--spp-on-primary); }
.spp .spp-steps__item.is-done .spp-steps__num { background: var(--spp-teal-tint); border-color: var(--spp-teal-strong); color: var(--spp-teal-strong); }
.spp .spp-steps__item.is-done::after { background: var(--spp-teal-strong); }

.spp .spp-step__title { margin: 0 0 var(--spp-space-4); font: 600 18px/1.4 var(--spp-font); color: var(--spp-text); }
.spp .spp-step__text { margin: 0 0 var(--spp-space-3); font-size: 15px; color: var(--spp-text); }
.spp .spp-step__note { margin: var(--spp-space-2) 0 0; font-size: 13px; line-height: 1.5; color: var(--spp-muted); }
.spp .spp-step__nav { display: flex; gap: var(--spp-space-3); justify-content: flex-end; margin-top: var(--spp-space-5); }
.spp .spp-step__nav [data-spp-back] { margin-inline-end: auto; }

.spp .spp-options { display: grid; gap: 10px; }
.spp .spp-option {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--spp-space-3);
	min-height: 56px;
	padding: 12px 16px;
	border: 1px solid var(--spp-border);
	border-radius: var(--spp-radius);
	background: var(--spp-surface);
	cursor: pointer;
	transition: border-color var(--spp-dur) var(--spp-ease), background-color var(--spp-dur) var(--spp-ease);
}
.spp .spp-option:hover { border-color: var(--spp-border-strong); }
.spp .spp-option:has(:checked) { border-color: var(--spp-primary); background: var(--spp-primary-tint); box-shadow: inset 0 0 0 1px var(--spp-primary); }
.spp .spp-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--spp-primary); }
.spp .spp-option__body { display: grid; gap: 2px; }
.spp .spp-option__title { font-size: 15px; font-weight: 600; color: var(--spp-text); }
.spp .spp-option__meta { font-size: 13px; color: var(--spp-muted); }
.spp .spp-option__price { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.spp .spp-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px var(--spp-space-2);
	margin: 0 0 var(--spp-space-4);
	padding: 12px 16px;
	border-radius: var(--spp-radius);
	background: var(--spp-surface-2);
}
.spp .spp-summary__label { font-size: 13px; color: var(--spp-muted); }
.spp .spp-summary__title { flex: 1; font-size: 15px; }
.spp .spp-summary__price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.spp .spp-methods { display: grid; gap: var(--spp-space-3); margin: 0 0 var(--spp-space-5); }
.spp .spp-method { padding: 12px 16px; border: 1px solid var(--spp-border); border-radius: var(--spp-radius); }
.spp .spp-method__head { display: flex; align-items: center; gap: var(--spp-space-2); margin: 0 0 6px; font-size: 15px; }
.spp .spp-method__head .spp-icon { width: 18px; height: 18px; color: var(--spp-primary); }
.spp .spp-method__type {
	margin-inline-start: auto;
	padding: 2px 10px;
	border-radius: var(--spp-radius-full);
	background: var(--spp-surface-2);
	font-size: 12px;
	font-weight: 600;
	color: var(--spp-muted);
	white-space: nowrap;
}
.spp .spp-method__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spp-space-3); min-height: 44px; }
.spp .spp-method__row + .spp-method__row { border-top: 1px dashed var(--spp-border); }
.spp .spp-method__row dt { font-size: 13px; color: var(--spp-muted); }
.spp .spp-method__row dd { display: flex; align-items: center; gap: 2px; min-width: 0; text-align: end; }
.spp .spp-method__value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.spp .spp-copybtn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--spp-radius);
	background: transparent;
	color: var(--spp-muted);
	cursor: pointer;
	transition: background-color var(--spp-dur) var(--spp-ease), color var(--spp-dur) var(--spp-ease);
}
.spp .spp-copybtn:hover { background: var(--spp-surface-2); color: var(--spp-primary); }
.spp .spp-copybtn .spp-icon { width: 18px; height: 18px; }

.spp .spp-notice-box {
	display: flex;
	gap: var(--spp-space-3);
	margin: 0 0 var(--spp-space-4);
	padding: 12px 16px;
	border-radius: var(--spp-radius);
	background: var(--spp-yellow-tint);
	font-size: 14px;
}
.spp .spp-notice-box .spp-icon { margin-top: 1px; }
.spp .spp-notice-box p { margin: 0; }

/* ---------- Course grid ---------- */
.spp .spp-catalog__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spp-space-3); }
.spp .spp-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.spp .spp-search__icon { position: absolute; top: 50%; inset-inline-start: 14px; color: var(--spp-muted); transform: translateY(-50%); pointer-events: none; }
.spp .spp-search .spp-search__input { width: 100%; max-width: none; min-height: 44px; padding-inline-start: 44px; }
.spp .spp-chips { display: flex; flex-wrap: wrap; gap: var(--spp-space-2); }
.spp .spp-chip {
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--spp-border);
	border-radius: var(--spp-radius-full);
	background: var(--spp-surface);
	color: var(--spp-text);
	font: 500 14px/1 var(--spp-font);
	cursor: pointer;
	transition: background-color var(--spp-dur) var(--spp-ease), border-color var(--spp-dur) var(--spp-ease);
}
.spp .spp-chip:hover { border-color: var(--spp-border-strong); }
.spp .spp-chip[aria-pressed="true"] { border-color: var(--spp-primary); background: var(--spp-primary-tint); color: var(--spp-primary); }
.spp .spp-catalog__count { margin: var(--spp-space-3) 0; font-size: 14px; color: var(--spp-muted); }

.spp .spp-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--spp-space-5); }
.spp .spp-course-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--spp-border);
	border-radius: var(--spp-radius-card);
	background: var(--spp-surface);
	box-shadow: var(--spp-shadow);
	transition: transform var(--spp-dur) var(--spp-ease), box-shadow var(--spp-dur) var(--spp-ease);
}
@media (hover: hover) {
	.spp .spp-course-card:hover { transform: translateY(-2px); box-shadow: var(--spp-shadow-lg); }
}
.spp .spp-course-card__cover {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: var(--spp-primary-tint);
	color: var(--spp-primary);
}
.spp .spp-course-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.spp .spp-course-card__cover > .spp-icon { width: 40px; height: 40px; }
.spp .spp-course-card__level,
.spp .spp-course-hero__level {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--spp-radius-full);
	background: var(--spp-surface);
	color: var(--spp-text);
	font-size: 12px;
	font-weight: 600;
}
.spp .spp-course-card__level { position: absolute; top: 12px; inset-inline-start: 12px; box-shadow: var(--spp-shadow); }
.spp .spp-course-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--spp-space-2); padding: var(--spp-space-5); }
.spp .spp-course-card__title { font: 600 18px/1.35 var(--spp-font); }
.spp .spp-course-card__title a { color: var(--spp-text); text-decoration: none; }
.spp .spp-course-card__title a:hover { color: var(--spp-primary); }
.spp .spp-course-card__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.55;
	color: var(--spp-muted);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.spp .spp-course-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spp-space-3);
	padding: var(--spp-space-4) var(--spp-space-5);
	border-top: 1px solid var(--spp-border);
}
.spp .spp-price { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--spp-text); }

.spp .spp-facts { display: flex; flex-wrap: wrap; gap: 6px var(--spp-space-4); margin-top: auto; }
.spp .spp-facts li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--spp-muted); }
.spp .spp-facts .spp-icon { width: 16px; height: 16px; }
.spp .spp-facts__rating strong { color: var(--spp-text); }
.spp .spp-facts .spp-star { fill: var(--spp-yellow); stroke: var(--spp-yellow); }

/* ---------- Course page ---------- */
.spp .spp-course-hero { display: grid; justify-items: start; gap: var(--spp-space-3); }
.spp .spp-course-hero__level { background: var(--spp-primary-tint); color: var(--spp-primary); }
.spp .spp-course-hero__title { font: 700 clamp(28px, 4vw, 40px)/1.2 var(--spp-font); letter-spacing: -.02em; }
.spp .spp-course-hero__lead { max-width: 65ch; margin: 0; font-size: 18px; line-height: 1.55; color: var(--spp-muted); }
.spp .spp-course-hero .spp-facts { margin-top: 0; }
.spp .spp-course-hero .spp-facts li { font-size: 14px; }
.spp .spp-course-hero__faculty { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 500; }
.spp .spp-course-page__cover { display: block; width: 100%; height: auto; margin-top: var(--spp-space-6); aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--spp-radius-card); }

.spp .spp-course-section { margin-top: 40px; }
.spp .spp-course-section__title { margin-bottom: var(--spp-space-3); font: 600 22px/1.3 var(--spp-font); }
.spp .spp-course-section__note { margin: 0 0 var(--spp-space-4); font-size: 14px; color: var(--spp-muted); }
.spp .spp-prose { max-width: 70ch; font-size: 16px; line-height: 1.7; }
.spp .spp-prose > * { margin: 0 0 1em; }
.spp .spp-prose a { color: var(--spp-primary); }

.spp .spp-outline { overflow: hidden; border: 1px solid var(--spp-border); border-radius: var(--spp-radius-card); background: var(--spp-surface); }
.spp .spp-outline__module + .spp-outline__module { border-top: 1px solid var(--spp-border); }
.spp .spp-outline__head {
	display: flex;
	align-items: center;
	gap: var(--spp-space-3);
	min-height: 56px;
	padding: 12px 20px;
	background: var(--spp-surface-2);
	cursor: pointer;
	list-style: none;
}
.spp .spp-outline__head::-webkit-details-marker { display: none; }
.spp .spp-outline__title { font-size: 15px; font-weight: 600; }
.spp .spp-outline__count { margin-inline-start: auto; font-size: 13px; color: var(--spp-muted); white-space: nowrap; }
.spp .spp-outline__chevron { color: var(--spp-muted); transition: transform var(--spp-dur) var(--spp-ease); }
.spp .spp-outline__module[open] .spp-outline__chevron { transform: rotate(180deg); }
.spp .spp-outline__lessons li { display: flex; align-items: center; gap: var(--spp-space-3); padding: 12px 20px; font-size: 15px; }
.spp .spp-outline__lessons li + li,
.spp .spp-outline__lessons { border-top: 1px solid var(--spp-border); }
.spp .spp-outline__lessons .spp-icon { width: 16px; height: 16px; color: var(--spp-muted); }
.spp .spp-outline__lesson { min-width: 0; }
.spp .spp-outline__min { margin-inline-start: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--spp-muted); white-space: nowrap; }

.spp .spp-buy { display: grid; gap: var(--spp-space-3); padding: var(--spp-space-5); }
.spp .spp-buy__price { margin: 0 0 var(--spp-space-1); font-size: 32px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.spp .spp-btn--whatsapp .spp-icon { color: var(--spp-success); }
.spp .spp-buy__list { display: grid; gap: var(--spp-space-3); margin-top: var(--spp-space-3); padding-top: var(--spp-space-4); border-top: 1px solid var(--spp-border); }
.spp .spp-buy__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--spp-muted); }
.spp .spp-buy__list .spp-icon { width: 18px; height: 18px; color: var(--spp-teal-strong); }

.spp .spp-buybar { display: none; }

@media (min-width: 1024px) {
	.spp.spp-course-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 48px; }
	.spp .spp-course-page__side { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px); }
}

@media (max-width: 1023px) {
	.spp .spp-course-page__side { margin-top: 40px; }
	.spp-course-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
	.spp .spp-buybar {
		position: fixed;
		z-index: 50;
		inset-inline-end: 0;
		bottom: 0;
		inset-inline-start: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spp-space-3);
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--spp-border);
		background: var(--spp-surface);
		box-shadow: 0 -4px 16px rgba(16, 24, 40, .08);
	}
	.spp .spp-buybar__price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
}

@media (max-width: 767px) {
	.spp-public { padding: var(--spp-space-4); }
	.spp .spp-auth { padding: var(--spp-space-5); }
	.spp .spp-steps__item:not([aria-current="step"]) .spp-steps__label { display: none; }
	.spp .spp-step__nav .spp-btn { flex: 1; }
	.spp .spp-copybtn { width: 44px; height: 44px; }
	.spp .spp-method__row { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0; }
	.spp .spp-method__row dd { justify-content: space-between; text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.spp .spp-course-card:hover { transform: none; }
}