/* Stractive Core — components printed by shortcodes and Tutor additions.
   Colors come from the theme (theme.json presets) with brand fallbacks. */

.sj-price { white-space: nowrap; }

.sj-btn {
	box-sizing: border-box;
	--sj-btn-bg: var(--wp--preset--color--ruby, #B0041A);
	--sj-btn-fg: #fff;
	--sj-btn-border: var(--sj-btn-bg);
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: .75em 1.5em; border-radius: 999px;
	border: 2px solid var(--sj-btn-border); background: var(--sj-btn-bg); color: var(--sj-btn-fg);
	font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: 600; font-size: 1rem; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.sj-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(80, 7, 17, .18); color: var(--sj-btn-fg); }
.sj-btn:active { transform: translateY(0); box-shadow: none; }
.sj-btn:focus-visible { outline: 3px solid var(--wp--preset--color--gold, #FFC95F); outline-offset: 3px; }
.sj-btn--primary:hover { --sj-btn-bg: var(--wp--preset--color--merlot, #500711); }
.sj-btn--outline { --sj-btn-bg: transparent; --sj-btn-fg: var(--wp--preset--color--merlot, #500711); --sj-btn-border: var(--wp--preset--color--merlot, #500711); }
.sj-btn--outline:hover { --sj-btn-bg: var(--wp--preset--color--merlot, #500711); --sj-btn-fg: #fff; }
.sj-btn[disabled], .sj-btn.is-loading { opacity: .75; cursor: progress; transform: none; }
.sj-btn.is-loading::before {
	content: ""; width: 1em; height: 1em; border-radius: 50%;
	border: 2px solid currentColor; border-right-color: transparent; animation: sj-spin .7s linear infinite;
}
@keyframes sj-spin { to { transform: rotate(360deg); } }

.sj-notice, .sj-entry-notice, .sj-status, .sj-live-box {
	border-radius: 18px; padding: 1rem 1.25rem; margin: 0 0 1rem;
	background: var(--wp--preset--color--gold-soft, #fff4dc); border: 1px solid #f6dfa8; color: var(--wp--preset--color--merlot, #500711);
}
.sj-notice p, .sj-entry-notice p, .sj-status p { margin: 0 0 .75rem; }
.sj-notice p:last-child, .sj-status p:last-child { margin-bottom: 0; }
.sj-status { background: #fff; border-color: var(--wp--preset--color--line, #eadfd0); }
.sj-status__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sj-status__small { font-size: .9rem; opacity: .85; }
.sj-live-box { background: #fff; border-color: var(--wp--preset--color--line, #eadfd0); margin-top: 1rem; }
.sj-live-box__title { margin: 0 0 .5rem; font-size: 1.1rem; }
.sj-live-box__muted { opacity: .8; }

/* Schedule */
.sj-schedule { display: grid; gap: 1rem; }
.sj-schedule__tz { display: grid; gap: .4rem; max-width: 420px; }
.sj-schedule__tz label { font-weight: 600; }
.sj-schedule__select { min-height: 48px; padding: .6rem .9rem; border-radius: 12px; border: 2px solid var(--wp--preset--color--merlot, #500711); background: #fff; font: inherit; }
.sj-schedule__diff { margin: 0; font-size: .95rem; }
.sj-table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--wp--preset--color--line, #eadfd0); background: #fff; }
.sj-schedule__table { width: 100%; border-collapse: collapse; min-width: 420px; }
.sj-schedule__table th, .sj-schedule__table td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--wp--preset--color--line, #eadfd0); }
.sj-schedule__table thead th { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ruby, #B0041A); }
.sj-schedule__table tbody tr:last-child > * { border-bottom: 0; }
.sj-schedule__you { background: var(--wp--preset--color--gold-soft, #fff4dc); font-weight: 600; }
.sj-schedule__row--exam th, .sj-schedule__row--exam td:first-of-type { color: var(--wp--preset--color--ruby, #B0041A); }
.sj-schedule__note { margin: 0; }

/* Level cards */
.sj-levels { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sj-level-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid var(--wp--preset--color--line, #eadfd0); transition: transform .2s ease, box-shadow .2s ease; }
.sj-level-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(80, 7, 17, .10); }
.sj-level-card--special { border: 2px solid var(--wp--preset--color--pink, #ED9BBD); }
.sj-level-card__badge { align-self: flex-start; padding: .35rem .75rem; border-radius: 999px; background: var(--wp--preset--color--ruby, #B0041A); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sj-level-card--special .sj-level-card__badge { background: var(--wp--preset--color--pink, #ED9BBD); color: var(--wp--preset--color--merlot, #500711); }
.sj-level-card__title { margin: 0; font-size: 1.25rem; }
.sj-level-card__text, .sj-level-card__meta { margin: 0; }
.sj-level-card__meta { font-size: .92rem; color: var(--wp--preset--color--muted, #5b3a3f); }
.sj-level-card__req { color: var(--wp--preset--color--ruby, #B0041A); font-weight: 600; }
.sj-level-card__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }

/* Contact form */
.sj-anchor { display: block; position: relative; top: -100px; visibility: hidden; }
.sj-form { display: grid; gap: 1rem; }
.sj-form__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.sj-form__field { display: grid; gap: .35rem; }
.sj-form__field label { font-weight: 600; color: var(--wp--preset--color--merlot, #500711); }
.sj-form__field input, .sj-form__field select, .sj-form__field textarea {
	box-sizing: border-box;
	width: 100%; min-height: 48px; padding: .75rem .9rem; border-radius: 12px; border: 1.5px solid #cdb9a1; background: #fff; color: inherit; font: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sj-form__field textarea { min-height: 140px; resize: vertical; }
.sj-form__field input:focus, .sj-form__field select:focus, .sj-form__field textarea:focus { outline: none; border-color: var(--wp--preset--color--ruby, #B0041A); box-shadow: 0 0 0 3px rgba(255, 201, 95, .6); }
.sj-form__field [aria-invalid="true"] { border-color: #B0041A; }
.sj-form__field--check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
.sj-form__field--check input { width: 22px; min-height: 22px; height: 22px; margin-top: .15rem; accent-color: var(--wp--preset--color--ruby, #B0041A); }
.sj-form__field--check .sj-form__error { grid-column: 1 / -1; }
.sj-form__error { margin: 0; min-height: 0; color: #B0041A; font-size: .9rem; font-weight: 600; }
.sj-form__error:empty { display: none; }
.sj-form__req { color: #B0041A; }
.sj-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sj-form__alert { padding: 1rem 1.25rem; border-radius: 14px; font-weight: 600; }
.sj-form__alert:focus { outline: 3px solid var(--wp--preset--color--gold, #FFC95F); outline-offset: 2px; }
.sj-form__alert--success { background: #e8f6ec; color: #145c2c; border: 1px solid #b7e1c3; }
.sj-form__alert--error { background: #fde9ec; color: #7a0a1c; border: 1px solid #f3b9c3; }
.sj-form__submit { justify-self: start; }

/* Language switcher */
.sj-lang ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.sj-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .6rem; border-radius: 999px; border: 1px solid currentColor; font-weight: 600; font-size: .85rem; text-decoration: none; }
.sj-lang a[aria-current="true"] { background: var(--wp--preset--color--merlot, #500711); color: #fff; border-color: var(--wp--preset--color--merlot, #500711); }

/* Dashboard page */
.sj-dashboard { display: grid; gap: 1.25rem; }
.sj-dashboard__title { margin: 0; }
.sj-dashboard__card { padding: 1.25rem; border-radius: 18px; border: 1px solid var(--wp--preset--color--line, #eadfd0); background: #fff; }
.sj-dashboard__card h3 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.sj-btn, .sj-level-card, .sj-form__field input { transition: none; }
	.sj-btn:hover, .sj-level-card:hover { transform: none; }
	.sj-btn.is-loading::before { animation-duration: 2s; }
}

/* Compact buttons inside cards */
.sj-level-card .sj-btn { min-height: 44px; padding: .55em 1.1em; font-size: .92rem; }
.sj-level-card__actions { align-items: center; align-content: flex-start; gap: .5rem; }
.sj-level-card__actions .sj-btn { display: inline-flex; flex: 0 0 auto; }
.sj-schedule-list { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .4rem; }
.sj-schedule-list__item--exam strong { color: var(--wp--preset--color--ruby, #B0041A); }
.sj-dashboard h2.sj-dashboard__title { font-size: 1.75rem; margin: 0; }
.sj-dashboard h3 { font-size: 1.2rem; }
.sj-dashboard .sj-live-box__title { font-size: 1.05rem; }

/* ------------------------------------------------------------------
 * Schedule picker (product page, course page) — v1.1
 * ---------------------------------------------------------------- */
.sj-pick {
	border: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	min-width: 0;
	width: 100%;
}
.sj-pick__title {
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 0.6rem;
	padding: 0;
	color: var(--wp--preset--color--merlot, #6b0f1a);
}
.sj-pick__req { color: var(--wp--preset--color--ruby, #b0041a); }
.sj-pick__option {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
	padding: 0.85rem 1rem;
	margin: 0 0 0.6rem;
	border: 1.5px solid var(--wp--preset--color--line, #e6dccf);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.sj-pick__option:hover { border-color: var(--wp--preset--color--ruby, #b0041a); }
.sj-pick__option:has(input:checked) {
	border-color: var(--wp--preset--color--ruby, #b0041a);
	background: var(--wp--preset--color--pink-soft, #fdeef0);
	box-shadow: 0 0 0 1px var(--wp--preset--color--ruby, #b0041a);
}
.sj-pick__option input {
	margin: 0.2rem 0 0;
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--ruby, #b0041a);
}
.sj-pick__option input:focus-visible { outline: 3px solid var(--wp--preset--color--gold, #f5b82e); outline-offset: 2px; }
.sj-pick__body { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.35; }
.sj-pick__name { color: var(--wp--preset--color--merlot, #6b0f1a); }
.sj-pick__days { font-weight: 600; }
.sj-pick__time { font-size: 0.95em; }
.sj-pick__local { font-size: 0.85em; color: var(--wp--preset--color--muted, #6b5f5f); }
.sj-pick__local:empty { display: none; }
.sj-pick__hint, .sj-pick__empty { font-size: 0.85rem; color: var(--wp--preset--color--muted, #6b5f5f); margin: 0.25rem 0 0; }
.sj-course-enroll { margin: 0; }
.sj-course-enroll .sj-pick { margin-top: 0.75rem; }
form.cart .sj-pick { flex-basis: 100%; }
.sj-contact-cta { margin: 1rem 0 0; }
.sj-contact-cta .sj-btn { width: 100%; justify-content: center; text-align: center; }
.entry-content .sj-contact-cta .sj-btn, .wp-block-post-content .sj-contact-cta .sj-btn { width: auto; }
.sj-channels__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sj-groups__level { margin: 0 0 1.75rem; }
.sj-groups__title { margin: 0 0 0.5rem; }
.sj-groups__list { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.sj-groups__item { margin: 0 0 0.35rem; }
.sj-groups__item .sj-pick__local { display: block; }
.sj-live-box__group .sj-pick__local { display: block; }
.sj-level-card__img {
	display: block;
	width: calc(100% + 2 * var(--sj-card-pad, 1.5rem));
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: calc(-1 * var(--sj-card-pad, 1.5rem)) calc(-1 * var(--sj-card-pad, 1.5rem)) 1rem;
	border-radius: inherit;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.sj-level-card { overflow: hidden; }
/* Contact page without form: the remaining column uses the full width (inline flex-basis comes from the editor, so !important is needed). */
.sj-contact-solo { justify-content: center; }
.sj-contact-solo > .wp-block-column { flex-basis: 100% !important; max-width: 720px; }