/*
  Online Course Booking – front-end styles
  ----------------------------------------
  Deliberately mirrors the Conference Booking styles (cb-frontend.css) so
  course pages look like the conference booking pages, but every class is
  prefixed "ocb-" so the two stylesheets never interfere.

  Palette (same as the conference plugin):
    Dark navy   #0E3C60  primary
    Mid blue    #1a5c8e  hover / active
    Light blue  #e8f2fa  tints / backgrounds
    Pale blue   #d0e6f5  borders / accents
    Gold        #c8962a  highlight
    Light gold  #fdf6e8  highlight background
*/

.ocb-wrap,
.ocb-wrap *,
.ocb-wrap *::before,
.ocb-wrap *::after {
	box-sizing: border-box;
}

.ocb-wrap {
	margin: 0 auto;
}

.ocb-wrap [hidden] {
	display: none !important;
}

/* The page's own bottom margin sets the gap above the footer. */
.ocb-wrap > :last-child,
.ocb-course-list > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------
   Header banner
--------------------------------------- */
.ocb-course-header {
	background: #0E3C60;
	border-radius: 14px;
	padding: 32px 28px 30px;
	margin: 0 0 20px;
	text-align: center;
}

.ocb-course-header__title {
	margin: 0 0 14px;
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0.2px;
	line-height: 1.2;
}

.ocb-course-header__details {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.ocb-course-header__details li {
	color: #e1eef8;
	font-size: 17px;
	font-weight: 600;
	padding: 0 14px;
	margin: 0;
}

.ocb-course-header__details li + li {
	border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---------------------------------------
   Cards and layout
--------------------------------------- */
.ocb-card {
	border: 1px solid #d0e6f5;
	border-radius: 14px;
	padding: 24px;
	margin: 0 0 18px;
	background: #fff;
	min-width: 0;
}

.ocb-step-title {
	margin: 0 0 16px;
	color: #0E3C60;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
}

.ocb-step-title:focus {
	outline: none;
}

.ocb-facts {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 18px;
	margin-bottom: 18px;
}

/* Cards share the row height; content sits vertically centred in each. */
.ocb-facts .ocb-card {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
 * Theme reset: Astra's ".entry-content p" (margin-bottom: 1.6em), bare
 * p / ol margins and ".entry-content ol" leak into these cards. The
 * .ocb-wrap .ocb-facts prefix outranks them; spacing is then set below.
 */
.ocb-wrap .ocb-facts h3,
.ocb-wrap .ocb-facts p,
.ocb-wrap .ocb-facts ol,
.ocb-wrap .ocb-facts li {
	margin: 0;
}

.ocb-wrap .ocb-facts .ocb-card {
	padding: 28px;
}

.ocb-wrap .ocb-facts .ocb-step-title {
	margin-bottom: 14px;
}

.ocb-wrap .ocb-facts .ocb-note {
	margin-top: 12px;
}

.ocb-wrap .ocb-facts .ocb-badge {
	margin-top: 14px;
}

.ocb-facts .ocb-day:first-child {
	padding-top: 0;
}

.ocb-facts .ocb-day:last-child {
	padding-bottom: 0;
}

.ocb-note,
.ocb-help {
	font-size: 13px;
	color: #4a6178;
	margin: 6px 0 0;
	line-height: 1.45;
}

.ocb-help {
	margin-top: 6px;
}

.ocb-step > .ocb-note {
	margin: -8px 0 16px;
}

/* Dates list */
.ocb-days {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.ocb-day {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 4px 14px;
	align-items: baseline;
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid #e8f2fa;
}

.ocb-day:last-child {
	border-bottom: 0;
}

.ocb-day__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #c8962a;
}

.ocb-day__date {
	font-weight: 700;
	color: #0E3C60;
}

.ocb-day__time {
	color: #1a3a5c;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Price card */
.ocb-price-card__amount {
	margin: 0;
	font-size: 30px;
	font-weight: 900;
	color: #0E3C60;
	line-height: 1.1;
}

.ocb-price-card__suffix {
	font-size: 14px;
	font-weight: 700;
	color: #4a7fa5;
	margin-left: 4px;
}

/* Badges */
.ocb-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	line-height: 1.2;
}

.ocb-badge--soldout {
	background: #b91c1c;
	color: #fff;
}

.ocb-badge--low {
	background: #fdf6e8;
	color: #7a5a10;
	border: 1px solid #c8962a;
}

/* ---------------------------------------
   Zoom notice
   Brand rules: unmodified logo on white, clear space on every side at
   least equal to the logo's height (36px), minimum 18px high / 80px wide,
   not locked up with other text, never placed over an image.
--------------------------------------- */
.ocb-zoom-notice {
	display: flex;
	align-items: center;
	gap: 18px;
	border: 2px solid #d0e6f5;
	border-radius: 14px;
	background: #fff;
	padding: 16px;
	margin: 0 0 18px;
}

.ocb-zoom-notice__logo {
	flex: 0 0 auto;
	background: #fff;
	padding: 36px; /* = logo height: Zoom clear-space rule */
	line-height: 0;
}

/* .ocb-wrap prefix outranks Astra's ".ast-article-single img" shadow. */
.ocb-wrap .ocb-zoom-notice__logo img {
	display: block;
	box-shadow: none;
	height: 36px;
	width: auto;
	min-width: 80px;
	max-width: none;
}

.ocb-zoom-notice__text {
	flex: 1 1 auto;
	min-width: 0;
	border-left: 1px solid #e8f2fa;
	padding-left: 18px;
}

.ocb-zoom-notice__text p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.5;
	color: #1a3a5c;
}

.ocb-zoom-notice__title {
	font-size: 17px !important;
	font-weight: 800;
	color: #0E3C60 !important;
}

.ocb-zoom-notice__notes {
	padding: 10px 12px;
	background: #e8f2fa;
	border-radius: 8px;
	color: #0E3C60 !important;
}

.ocb-zoom-notice__tm {
	font-size: 11px !important;
	color: #6b7f93 !important;
	margin: 0 !important;
}

/* No logo installed: text spans the full width. */
.ocb-zoom-notice__text:only-child {
	border-left: 0;
	padding-left: 0;
}

/* ---------------------------------------
   Description
--------------------------------------- */
.ocb-description {
	margin: 0 0 18px;
}

/* ---------------------------------------
   Grid and fields (as conference form)
--------------------------------------- */
.ocb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ocb-grid > * {
	min-width: 0;
}

.ocb-span-2 {
	grid-column: 1 / -1;
}

.ocb-field label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: #0E3C60;
	margin-bottom: 6px;
	letter-spacing: 0.1px;
}

.ocb-required {
	color: #b91c1c;
	margin-left: 2px;
}

.ocb-optional {
	font-weight: 400;
	color: #6b7f93;
	margin-left: 4px;
}

.ocb-field input,
.ocb-field textarea {
	display: block;
	width: 100%;
	height: 46px;
	padding: 0 16px;
	border: 1.5px solid #c5ddf0;
	border-radius: 10px;
	background: #fff;
	font-size: 16px; /* 16px stops iOS zooming into fields */
	font-family: inherit;
	color: #111;
	line-height: 46px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ocb-field textarea {
	height: auto;
	min-height: 70px;
	line-height: 1.5;
	padding: 12px 16px;
	resize: vertical;
}

.ocb-field input:focus,
.ocb-field textarea:focus {
	border-color: #0E3C60;
	box-shadow: 0 0 0 3px rgba(14, 60, 96, 0.12);
	outline: none;
}

.ocb-form.ocb-js .ocb-field input:user-invalid,
.ocb-form.ocb-js .ocb-field textarea:user-invalid {
	border-color: #b91c1c;
}

/* Delegate cards */
.ocb-delegate {
	margin: 0 0 16px;
	padding: 20px 24px 24px;
}

.ocb-delegate__title {
	float: left; /* lets the legend sit inside the padded card */
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	font-size: 16px;
	font-weight: 800;
	color: #0E3C60;
}

.ocb-delegate__title + * {
	clear: both;
}

/* Quantity stepper */
.ocb-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid #c5ddf0;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}

.ocb-qty__btn {
	appearance: none;
	border: 0;
	background: #e8f2fa;
	color: #0E3C60;
	width: 48px;
	min-height: 46px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

/* The stepper's outer edge is rounded; the +/- buttons inside stay square
   (overrides the site-wide button radius in the child theme). */
.ocb-qty .ocb-qty__btn {
	border-radius: 0 !important;
}

.ocb-qty__btn:hover,
.ocb-qty__btn:focus-visible {
	background: #d0e6f5;
}

.ocb-field .ocb-qty input {
	width: 80px;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-weight: 800;
	font-size: 18px;
	-moz-appearance: textfield;
}

.ocb-qty input::-webkit-outer-spin-button,
.ocb-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------------------------------------
   Price block
--------------------------------------- */
.ocb-price-wrap {
	margin-top: 16px;
	padding: 18px 20px;
	border-radius: 12px;
	background: #0E3C60;
	color: #fff;
	box-shadow: 0 8px 24px rgba(14, 60, 96, 0.22);
}

.ocb-price-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	opacity: 0.8;
	margin-bottom: 6px;
}

.ocb-price {
	font-size: 30px;
	font-weight: 900;
	letter-spacing: 0.3px;
	line-height: 1.1;
}

.ocb-price .woocommerce-Price-amount {
	color: inherit;
}

.ocb-price__suffix {
	font-size: 14px;
	font-weight: 700;
	opacity: 0.75;
	margin-left: 6px;
}

.ocb-summary {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 10px;
	border: 2px solid #d0e6f5;
	background: #e8f2fa;
	color: #0E3C60;
	font-weight: 700;
}

/* ---------------------------------------
   Warnings / errors / notices
--------------------------------------- */
.ocb-warning {
	margin: 14px 0 12px;
	padding: 13px 16px;
	border-radius: 10px;
	border: 2px solid #d0e6f5;
	background: #e8f2fa;
	color: #0E3C60;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.ocb-warning.is-error,
.ocb-error {
	border-color: #fca5a5;
	background: #fff1f2;
	color: #7f1d1d;
}

.ocb-error {
	border: 1.5px solid #fca5a5;
	padding: 12px 14px;
	border-radius: 10px;
	margin: 12px 0;
	font-size: 14px;
}

.ocb-notices {
	margin: 0 0 18px;
}

/* ---------------------------------------
   Steps and buttons (as conference form)
--------------------------------------- */
.ocb-step + .ocb-step {
	margin-top: 24px;
}

.ocb-form.ocb-js .ocb-step + .ocb-step {
	margin-top: 0;
}

.ocb-step-actions {
	margin-top: 16px;
	display: flex;
}

.ocb-step-actions--two {
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ocb-wrap .button,
.ocb-wrap button.button,
.ocb-wrap .button.alt {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #0E3C60;
	background: #0E3C60;
	color: #fff;
	padding: 13px 26px;
	border-radius: 14px; /* = page title banners */
	font-weight: 700;
	font-size: 15px;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

.ocb-wrap .button:hover,
.ocb-wrap .button.alt:hover {
	background: #1a5c8e;
	border-color: #1a5c8e;
	color: #fff;
	box-shadow: 0 4px 14px rgba(14, 60, 96, 0.25);
}

.ocb-wrap .button:focus-visible {
	outline: 3px solid #c8962a;
	outline-offset: 2px;
}

.ocb-wrap .button:active {
	transform: translateY(1px);
}

.ocb-wrap .ocb-next.button {
	width: 100%;
	background: #e8f2fa;
	color: #0E3C60;
	border-color: #c5ddf0;
}

.ocb-wrap .ocb-next.button:not([disabled]):hover {
	background: #d0e6f5;
	border-color: #0E3C60;
	box-shadow: none;
}

.ocb-wrap .ocb-back.button {
	background: #fff;
	color: #0E3C60;
	border-color: #c5ddf0;
}

.ocb-wrap .ocb-back.button:hover {
	background: #e8f2fa;
	border-color: #0E3C60;
	box-shadow: none;
	color: #0E3C60;
}

.ocb-wrap button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---------------------------------------
   Sold out / closed
--------------------------------------- */
.ocb-unavailable {
	text-align: center;
	padding: 12px 0;
}

.ocb-unavailable p {
	margin: 0;
	color: #1a3a5c;
}

.ocb-sold-out-label {
	display: inline-block;
	margin: 0 0 12px !important;
	padding: 10px 28px;
	border-radius: 999px;
	background: #b91c1c;
	color: #fff !important;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ---------------------------------------
   Course list + archive
--------------------------------------- */
/*
 * The list can sit inside theme content (via [ocb_courses]), so element
 * rules are prefixed with .ocb-wrap to outrank Astra's ".entry-content p /
 * h2 / h3 / ol" margins and colours.
 */
.ocb-wrap .ocb-course-list__empty p {
	margin: 0;
	color: #1a3a5c;
	font-size: 16px;
}

.ocb-course-card {
	display: grid;
	grid-template-columns: 3fr 2fr;
	border: 1px solid #d0e6f5;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	margin: 0 0 20px;
}

/* Both columns centre their content vertically within the card. */
.ocb-course-card__main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px;
	min-width: 0;
}

.ocb-wrap .ocb-course-card__title {
	margin: 0 0 6px;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.25;
}

.ocb-wrap .ocb-course-card__title a {
	color: #0E3C60;
	text-decoration: none;
}

.ocb-wrap .ocb-course-card__title a:hover {
	color: #1a5c8e;
}

.ocb-wrap .ocb-course-card__meta {
	margin: 0 0 16px;
	color: #4a7fa5;
	font-size: 14px;
	font-weight: 700;
}

.ocb-wrap .ocb-course-card__excerpt {
	margin: 0 0 16px;
	color: #1a3a5c;
	font-size: 16px;
	line-height: 1.6;
}

.ocb-wrap .ocb-course-card__more {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.ocb-wrap .ocb-course-card__more a {
	color: #0E3C60;
	text-decoration: none;
}

.ocb-wrap .ocb-course-card__more a:hover {
	text-decoration: underline;
}

/* Facts panel: dates, price and the booking button. */
.ocb-course-card__facts {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
	background: #f4f9fd;
	border-left: 1px solid #e8f2fa;
	min-width: 0;
}

.ocb-wrap .ocb-course-card__label {
	margin: 0 0 10px;
	color: #0E3C60;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.ocb-wrap .ocb-course-card__days {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.ocb-wrap .ocb-course-card__days li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid #dbeaf6;
}

.ocb-wrap .ocb-course-card__days li:first-child {
	padding-top: 0;
}

.ocb-wrap .ocb-course-card__days li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ocb-course-card__days .ocb-day__label {
	flex: 0 0 100%;
}

.ocb-course-card__date {
	font-weight: 700;
	color: #0E3C60;
}

.ocb-course-card__time {
	color: #1a3a5c;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ocb-wrap .ocb-course-card__note {
	margin: 8px 0 0;
	color: #4a6178;
	font-size: 13px;
}

.ocb-course-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid #dbeaf6;
}

.ocb-course-card__amount {
	font-size: 28px;
	font-weight: 900;
	color: #0E3C60;
	line-height: 1.1;
}

.ocb-course-card__suffix {
	font-size: 14px;
	font-weight: 700;
	color: #4a7fa5;
}

.ocb-wrap .ocb-course-card__price .ocb-course-card__note {
	flex: 0 0 100%;
	margin-top: 4px;
}

.ocb-wrap .ocb-course-card__badge {
	margin: 14px 0 0;
}

.ocb-wrap .ocb-course-card__btn {
	width: 100%;
	justify-content: center;
	text-align: center;
}

/* Gap above the button, kept even when the panel is short. */
.ocb-course-card__facts > :nth-last-child(2) {
	margin-bottom: 20px;
}

/* ---------------------------------------
   Mobile
--------------------------------------- */
@media (max-width: 700px) {
	.ocb-facts,
	.ocb-grid {
		grid-template-columns: 1fr;
	}

	.ocb-span-2 {
		grid-column: auto;
	}

	.ocb-zoom-notice {
		flex-direction: column;
		align-items: stretch;
	}

	.ocb-zoom-notice__logo {
		align-self: center;
	}

	.ocb-zoom-notice__text {
		border-left: 0;
		border-top: 1px solid #e8f2fa;
		padding: 16px 0 0;
	}

	.ocb-course-card {
		grid-template-columns: 1fr;
	}

	.ocb-course-card__facts {
		border-left: 0;
		border-top: 1px solid #e8f2fa;
	}
}

@media (max-width: 560px) {
	.ocb-course-header {
		padding: 20px 18px;
	}

	.ocb-course-header__title {
		font-size: 23px;
	}

	.ocb-course-header__details li {
		font-size: 15px;
	}

	.ocb-course-header__details {
		flex-direction: column;
		gap: 3px;
	}

	.ocb-course-header__details li {
		padding: 0;
		border: none !important;
	}

	.ocb-card,
	.ocb-delegate,
	.ocb-wrap .ocb-facts .ocb-card {
		padding: 18px 16px;
	}

	.ocb-day {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.ocb-step-actions--two .button {
		flex: 1 1 100%;
	}

	.ocb-course-card__main,
	.ocb-course-card__facts {
		padding: 20px 18px;
	}

	.ocb-wrap .ocb-course-card__title {
		font-size: 20px;
	}
}