/* A4C cohort schedule — group picker cards ([a4c_cohorts]) + checkout group field.
   Tokens follow the theme palette (ink, coral, sea-pale, paper, line) and the page's
   a4c-card / a4c-pricing-box shapes. */

.a4c-cohorts {
	--c-ink: var(--wp--preset--color--ink, #173b5a);
	--c-ink-soft: var(--wp--preset--color--ink-soft, #275378);
	--c-coral: var(--wp--preset--color--coral, #d97f2a);
	--c-sea: var(--wp--preset--color--sea-pale, #e4eff7);
	--c-paper: var(--wp--preset--color--paper, #f5f1e8);
	--c-line: var(--wp--preset--color--line, #c7d3dc);
	--c-gold: #f2b544;
	margin-top: 36px;
}
.a4c-cohorts * { box-sizing: border-box; }
.a4c-cohorts p { margin: 0; }

.a4c-cohorts__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	max-width: 1000px;
	margin-inline: auto;
}
@media (max-width: 900px) {
	.a4c-cohorts__grid { grid-template-columns: 1fr; }
}

/* ---- card ---- */
.a4c-cohort {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 26px;
	padding: 28px 26px 22px;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.a4c-cohort:hover { border-color: var(--c-ink-soft); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(23, 59, 90, .08); }
.a4c-cohort.is-picked {
	border: 2px solid var(--c-ink);
	padding: 27px 25px 21px;
	box-shadow: 0 20px 50px rgba(37, 83, 120, .14);
}
.a4c-cohort:focus-within { outline: 3px solid rgba(23, 59, 90, .25); outline-offset: 3px; }

.a4c-cohort__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.a4c-cohort__pick {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.a4c-cohort__pick input {
	appearance: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid var(--c-line);
	border-radius: 50%;
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: border-color .15s ease;
}
.a4c-cohort__pick input::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-ink);
	transform: scale(0);
	transition: transform .15s ease;
}
.a4c-cohort__pick input:checked { border-color: var(--c-ink); }
.a4c-cohort__pick input:checked::before { transform: scale(1); }
.a4c-cohort__pick input:focus-visible { outline: 3px solid rgba(217, 127, 42, .45); outline-offset: 2px; }
.a4c-cohort__name {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--c-ink);
}

/* status pill — hidden until JS has computed it, so a cached "starts today" never shows */
.a4c-cohort__status {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: .88rem;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--c-sea);
	color: var(--c-ink);
	white-space: nowrap;
}
.a4c-cohorts.is-live .a4c-cohort__status { display: inline-flex; }
.a4c-cohort__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
.a4c-cohort__status.is-soon { background: #fdf0d6; color: #8a5a0b; }
.a4c-cohort__status.is-today { background: var(--c-coral); color: #fff; }
.a4c-cohort__status.is-today::before { animation: a4c-cohort-pulse 1.6s ease-out infinite; }
@keyframes a4c-cohort-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); }
	100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.a4c-cohort, .a4c-cohort__status.is-today::before { transition: none; animation: none; }
	.a4c-cohort:hover { transform: none; }
}

.a4c-cohorts .a4c-cohort__fit { color: var(--c-ink-soft); font-size: 1rem; line-height: 1.6; margin-top: -6px; }

/* ---- big start date ---- */
.a4c-cohort__start {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--c-paper);
	border-radius: 18px;
	padding: 16px 18px;
}
.a4c-cohort__cal {
	flex: none;
	width: 84px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--c-line);
	overflow: hidden;
	text-align: center;
	line-height: 1.1;
	box-shadow: 0 6px 16px rgba(23, 59, 90, .08);
}
.a4c-cohort__cal span { display: block; }
.a4c-cohort__cal-month { background: var(--c-coral); color: #fff; font-size: .8rem; font-weight: 700; padding: 5px 0; }
.a4c-cohort__cal-day { font-size: 2.1rem; font-weight: 800; color: var(--c-ink); padding: 6px 0 0; }
.a4c-cohort__cal-wd { font-size: .78rem; color: var(--c-ink-soft); padding: 2px 0 8px; }
.a4c-cohorts .a4c-cohort__start-label { font-size: .85rem; font-weight: 700; color: var(--c-ink-soft); }
.a4c-cohorts .a4c-cohort__start-date { font-size: 1.3rem; font-weight: 800; color: var(--c-ink); margin: 2px 0; }
.a4c-cohorts .a4c-cohort__start-time { font-size: .95rem; color: var(--c-ink-soft); }

/* ---- sessions table ---- */
.a4c-cohort__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	margin: 0;
	border: 0;
}
.a4c-cohort__table th,
.a4c-cohort__table td {
	text-align: start;
	padding: 11px 6px;
	border: 0;
	border-bottom: 1px solid #e6edf2;
	vertical-align: top;
	color: var(--c-ink);
	background: none;
}
.a4c-cohort__table thead th {
	font-size: .78rem;
	font-weight: 700;
	color: var(--c-ink-soft);
	padding-top: 0;
	border-bottom: 1px solid var(--c-line);
}
.a4c-cohort__table tbody th { font-weight: 800; white-space: nowrap; }
.a4c-cohort__table tbody tr:last-child > * { border-bottom: 0; }
.a4c-cohort__time { white-space: nowrap; }
.a4c-cohort__local {
	display: block;
	font-size: .8rem;
	color: var(--c-coral);
	font-weight: 700;
	margin-top: 3px;
}
.a4c-cohort__local[hidden] { display: none; }
.a4c-cohort__row-muted th,
.a4c-cohort__row-muted td { color: var(--c-ink-soft) !important; font-size: .88rem; font-weight: 400 !important; }

@media (max-width: 520px) {
	.a4c-cohort { padding: 22px 18px 18px; }
	.a4c-cohort.is-picked { padding: 21px 17px 17px; }
	.a4c-cohort__table thead { display: none; }
	.a4c-cohort__table tr { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 10px 0; border-bottom: 1px solid #e6edf2; }
	.a4c-cohort__table tbody tr:last-child { border-bottom: 0; }
	.a4c-cohort__table th, .a4c-cohort__table td { border: 0; padding: 0; }
	.a4c-cohort__table tbody th { grid-row: span 2; }
	.a4c-cohort__table td + td { color: var(--c-ink-soft); }
	.a4c-cohort__row-muted td { grid-row: span 2; }
	.a4c-cohort__cal { width: 72px; }
	.a4c-cohort__cal-day { font-size: 1.8rem; }
}

/* ---- CTA + next round ---- */
.a4c-cohorts .a4c-cohort__cta {
	display: block;
	text-align: center;
	background: var(--c-ink);
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
	padding: 15px 20px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease;
	margin-top: auto;
}
.a4c-cohorts .a4c-cohort__cta:hover,
.a4c-cohorts .a4c-cohort__cta:focus-visible { background: var(--c-coral); color: #fff; }
.a4c-cohort.is-first .a4c-cohort__cta { background: var(--c-coral); }
.a4c-cohort.is-first .a4c-cohort__cta:hover { background: var(--c-ink); }
.a4c-cohorts .a4c-cohort__next { text-align: center; font-size: .85rem; color: var(--c-ink-soft); }
/* secondary "pay in instalments" link under the CTA (programs with a deposit plan) */
.a4c-cohorts .a4c-cohort__plan { text-align: center; font-size: .9rem; margin: -4px 0 0; }
.a4c-cohorts .a4c-cohort__plan a { color: var(--c-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.a4c-cohorts .a4c-cohort__plan a:hover,
.a4c-cohorts .a4c-cohort__plan a:focus-visible { color: var(--c-coral); }

/* ---- note injected above the pricing box's own button ---- */
.a4c-pricing-box p.a4c-cohorts-chosen,
p.a4c-cohorts-chosen {
	line-height: 1.6;
	background: var(--wp--preset--color--sea-pale, #e4eff7);
	color: var(--wp--preset--color--ink, #173b5a) !important;
	border-radius: 12px;
	padding: 10px 14px;
	font-size: .92rem;
	font-weight: 700;
}
.a4c-cohorts-chosen[hidden] { display: none; }
.a4c-cohorts-chosen a { color: var(--wp--preset--color--coral, #d97f2a); margin-inline-start: 6px; }

/* ---- footnote paragraph under the cards (a native block in the page) ---- */
.a4c-section-pad p.a4c-cohorts-footnote {
	max-width: 760px;
	margin: 28px auto 0;
	font-size: .95rem;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft, #275378);
}
.a4c-section-pad p.a4c-cohorts-footnote a { color: var(--wp--preset--color--coral, #d97f2a); font-weight: 700; }

/* ---- checkout field ---- */
.a4c-cohort-checkout {
	border: 1px solid var(--wp--preset--color--line, #c7d3dc);
	border-radius: 18px;
	padding: 18px 20px;
	margin: 0 0 24px;
	display: grid;
	gap: 10px;
}
.a4c-cohort-checkout legend { font-weight: 800; font-size: 1.1rem; padding: 0 6px; }
.a4c-cohort-checkout__opt {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid #e6edf2;
	border-radius: 12px;
	padding: 12px 14px;
	cursor: pointer;
}
.a4c-cohort-checkout__opt:has(input:checked) { border-color: var(--wp--preset--color--ink, #173b5a); background: var(--wp--preset--color--sea-pale, #e4eff7); }
.a4c-cohort-checkout__opt input { margin-top: 5px; }
.a4c-cohort-checkout__opt > span { display: grid; gap: 2px; font-size: .92rem; }
.a4c-cohort-checkout__note { font-size: .85rem; opacity: .8; margin: 0; }

/* ---- top-bar countdown ([a4c_cohort_countdown] inside .a4c-announcement) ----
   The shortcode wrapper is display:contents so its label / timer / CTA become items
   of the bar's own flex row, interleaved with the bar's native price paragraph:
   label · timer | price · CTA (RTL). */
.a4c-announcement:has(.a4c-cohort-countdown) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 20px;
	padding: 10px 20px;
}
.a4c-announcement:has(.a4c-cohort-countdown) > p:empty { display: none; }
.a4c-announcement .a4c-cohort-countdown { display: contents; }
.a4c-announcement p.a4c-cohort-countdown__label {
	order: 1;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}
.a4c-cohort-countdown__label strong { color: #f2b544; font-weight: 800; }
.a4c-cohort-countdown__live {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #f2b544;
	flex: none;
	animation: a4c-cd-live 1.8s ease-out infinite;
}
@keyframes a4c-cd-live {
	0% { box-shadow: 0 0 0 0 rgba(242, 181, 68, .7); }
	100% { box-shadow: 0 0 0 9px rgba(242, 181, 68, 0); }
}

.a4c-cohort-countdown__timer {
	order: 2;
	display: inline-flex;
	gap: 5px;
}
.a4c-cohort-countdown:not(.is-live) .a4c-cohort-countdown__timer { visibility: hidden; }
.a4c-cohort-countdown__unit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	padding: 4px 6px 3px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .13);
	line-height: 1.1;
}
.a4c-cohort-countdown__unit[hidden] { display: none; }
.a4c-cohort-countdown__unit b {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.a4c-cohort-countdown__unit small { color: rgba(255, 255, 255, .78); font-size: .66rem; }
/* The bar stays under the sticky site header while the page scrolls (JS sets --a4c-header-h).
   .ibt-kit-4's overflow-x:hidden makes it a scroll container, which traps sticky children, so
   these pages use overflow-x:clip instead (same clipping, no scroll container). Browsers without
   `clip` keep the bar static rather than mis-positioned. */
@supports (overflow: clip) {
	.ibt-kit-4:has(.a4c-cohort-countdown) { overflow-x: clip; }
	.a4c-announcement:has(.a4c-cohort-countdown) {
		position: sticky;
		top: var(--a4c-header-h, 0px);
		z-index: 90;
	}
	/* in-page jumps (#adhd-schedule etc.) land below the header + this bar, not under them */
	.ibt-kit-4:has(.a4c-cohort-countdown) [id] { scroll-margin-top: calc(var(--a4c-header-h, 0px) + var(--a4c-bar-h, 0px)); }
}

/* days/hours/minutes are enough; a ticking seconds box only adds motion */
.a4c-cohort-countdown.has-days [data-unit="s"] { display: none; }
.a4c-cohort-countdown.is-today .a4c-cohort-countdown__unit { background: var(--wp--preset--color--coral, #d97f2a); }

/* the bar's own price paragraph, between timer and CTA */
.ibt-kit-4 .a4c-announcement:has(.a4c-cohort-countdown) > p:not(.a4c-cohort-countdown__label) {
	order: 3;
	margin: 0;
	padding-inline-start: 20px;
	border-inline-start: 1px solid rgba(255, 255, 255, .25);
	font-size: 1rem;
	line-height: 1.4;
}
.ibt-kit-4 .a4c-announcement:has(.a4c-cohort-countdown) > p strong { color: #f2b544; font-size: 1.15rem; font-weight: 800; }
.a4c-announcement:has(.a4c-cohort-countdown) > p s { opacity: .7; }

.a4c-announcement .a4c-cohort-countdown__cta {
	order: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f2b544;
	color: #2a2013;
	font-weight: 800;
	font-size: .92rem;
	padding: 7px 16px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease, transform .2s ease;
}
.a4c-announcement .a4c-cohort-countdown__cta::after { content: "←"; }
.a4c-announcement .a4c-cohort-countdown__cta:hover,
.a4c-announcement .a4c-cohort-countdown__cta:focus-visible { background: #fff; color: #173b5a; transform: translateX(-2px); }

@media (prefers-reduced-motion: reduce) {
	.a4c-cohort-countdown__live { animation: none; }
}
@media (max-width: 640px) {
	/* one compact row on phones (it is sticky): start date + CTA. The price sits in the hero CTA. */
	.a4c-announcement:has(.a4c-cohort-countdown) { flex-wrap: nowrap; justify-content: space-between; gap: 10px; padding: 8px 12px; }
	.a4c-announcement p.a4c-cohort-countdown__label { font-size: .85rem; gap: 7px; }
	.a4c-announcement .a4c-cohort-countdown__timer,
	.ibt-kit-4 .a4c-announcement:has(.a4c-cohort-countdown) > p:not(.a4c-cohort-countdown__label) { display: none; }
	.a4c-announcement .a4c-cohort-countdown__cta { font-size: .82rem; padding: 6px 12px; }
}

/* refund reassurance line right under the pricing box's pay button */
.a4c-pricing-box p.a4c-pay-reassure {
	margin: -6px 0 0;
	font-size: .88rem;
	line-height: 1.6;
	text-align: start;
	color: var(--wp--preset--color--ink-soft, #275378);
}
@media (max-width: 380px) {
	.a4c-announcement:has(.a4c-cohort-countdown) { gap: 8px 7px; padding-inline: 8px; }
	.a4c-cohort-countdown__timer { gap: 3px; }
	.a4c-cohort-countdown__unit { min-width: 30px; }
	.ibt-kit-4 .a4c-announcement:has(.a4c-cohort-countdown) > p:not(.a4c-cohort-countdown__label) { padding-inline-start: 0; border: 0; font-size: .82rem; }
	.a4c-announcement .a4c-cohort-countdown__cta { padding: 6px 10px; }
	.a4c-announcement .a4c-cohort-countdown__cta::after { content: none; }
}

/* ---- a group with no upcoming dates in the calendar ---- */
.a4c-cohorts .a4c-cohort__empty { display: none; }
.a4c-cohort.is-empty { cursor: default; opacity: .75; }
.a4c-cohort.is-empty:hover { transform: none; box-shadow: none; border-color: var(--c-line); }
.a4c-cohort.is-empty .a4c-cohort__start,
.a4c-cohort.is-empty .a4c-cohort__table,
.a4c-cohort.is-empty .a4c-cohort__cta,
.a4c-cohort.is-empty .a4c-cohort__next,
.a4c-cohort.is-empty .a4c-cohort__status { display: none !important; }
.a4c-cohorts .a4c-cohort.is-empty .a4c-cohort__empty { display: block; color: var(--c-ink-soft); font-size: 1rem; line-height: 1.7; background: var(--c-paper); border-radius: 14px; padding: 14px 16px; }
.a4c-cohort__next[hidden] { display: none; }
/* top bar with nothing upcoming: hide the timer, keep the CTA */
.a4c-cohort-countdown.is-empty .a4c-cohort-countdown__timer { display: none; }
.a4c-cohort-checkout__opt.is-disabled { opacity: .55; cursor: not-allowed; }

/* ---- automatic groups: one card per calendar group ----
   1 group → one centred card; 2 → side by side (the base rule); 3+ → as many columns as fit. */
.a4c-cohorts__grid:has(> .a4c-cohort:only-child) { grid-template-columns: minmax(0, 520px); justify-content: center; }
.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: 1100px; }
@media (max-width: 900px) {
	.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) { grid-template-columns: 1fr; }
}
/* no upcoming dates at all */
.a4c-cohorts .a4c-cohorts__none { display: none; }
.a4c-cohorts.is-none .a4c-cohorts__grid { display: none; }
.a4c-cohorts.is-none .a4c-cohorts__none { display: block; max-width: 640px; margin: 0 auto; text-align: center; color: var(--c-ink-soft); font-size: 1.05rem; line-height: 1.7; background: var(--c-paper); border-radius: 18px; padding: 18px 22px; }
.a4c-cohort[hidden] { display: none; }
/* English (left-to-right) pages: the bar's arrow points the reading direction */
html:not([dir="rtl"]) .a4c-announcement .a4c-cohort-countdown__cta::after { content: "→"; }
html:not([dir="rtl"]) .a4c-announcement .a4c-cohort-countdown__cta:hover { transform: translateX(2px); }
/* 3+ groups side by side: narrow cards get the compact stacked table (same as phones) */
@media (min-width: 901px) {
	.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) .a4c-cohort__table thead { display: none; }
	.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) .a4c-cohort__table tr { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 10px 0; border-bottom: 1px solid #e6edf2; }
	.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) .a4c-cohort__table tbody tr:last-child { border-bottom: 0; }
	.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) .a4c-cohort__table th,
	.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) .a4c-cohort__table td { border: 0; padding: 0; }
	.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) .a4c-cohort__table tbody th { grid-row: span 2; }
	.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) .a4c-cohort__table td + td { color: var(--c-ink-soft); }
	.a4c-cohorts__grid:has(> .a4c-cohort:nth-child(3)) .a4c-cohort__row-muted td { grid-row: span 2; }
}
