/* ExamSpace Exam Booking — front-end styles.
   Kept deliberately light so the fields inherit your theme. */

.eseb-booking-fields {
	margin: 0 0 1.5em;
}

.eseb-booking-fields .eseb-row {
	margin: 0 0 1.1em;
}

.eseb-booking-fields label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.eseb-booking-fields .eseb-exam-select,
.eseb-booking-fields .eseb-date-input {
	width: 100%;
	max-width: 420px;
	padding: 0.6em 0.75em;
	box-sizing: border-box;
}

.eseb-booking-fields .eseb-date-input {
	cursor: pointer;
	background-color: #fff;
}

.eseb-booking-fields .eseb-duration {
	display: none;
	margin-top: 0.5em;
	font-size: 0.9em;
	color: #555;
	font-style: italic;
}

.eseb-booking-fields abbr.required {
	color: #d63638;
	border: 0;
	text-decoration: none;
}

.eseb-notice {
	padding: 0.9em 1.1em;
	background: #fff8e5;
	border: 1px solid #f0e0a0;
	border-radius: 4px;
}

/* Slightly tighten the bundled flatpickr to sit nicely in most themes. */
.flatpickr-calendar {
	font-size: 14px;
}

/* Session mode: sitting dropdown ------------------------------------- */

.eseb-row-sitting .eseb-sitting-select {
	width: 100%;
	max-width: 480px;
	padding: 0.55em 0.6em;
}

.eseb-row-sitting .eseb-sitting-select[disabled] {
	background: #f6f7f7;
	color: #888;
}

.eseb-row-sitting .eseb-sitting-note {
	display: block;
	margin-top: 0.35em;
	color: #b91c1c;
	font-size: 0.9em;
}

/* Private-mode inline note ------------------------------------------- */

.eseb-booking-fields .eseb-note {
	display: block;
	margin-top: 0.35em;
	color: #50575e;
	font-style: italic;
	font-size: 0.9em;
}

.eseb-booking-fields.eseb-mode-private .eseb-row-date label::after {
	content: " (private)";
	color: #db2777;
	font-weight: 600;
}

/* Checkout: "Who is paying?" section ---------------------------------- */

.eseb-payer-section {
	margin: 28px 0 8px;
	padding: 18px 20px;
	border: 1px solid #e2e4e7;
	border-radius: 6px;
	background: #fafbfc;
}

.eseb-payer-section h3 {
	margin: 0 0 6px;
	font-size: 1.05em;
}

.eseb-payer-intro {
	color: #50575e;
	font-size: 0.92em;
	margin: 0 0 16px;
}

.eseb-payer-choice {
	margin: 0 0 12px;
}

.eseb-payer-radio {
	display: inline-block;
	margin-right: 22px;
	font-weight: 500;
	cursor: pointer;
}

.eseb-payer-radio input[type=radio] {
	margin-right: 6px;
}

.eseb-employer-fields {
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px dashed #d4d6d8;
}

/* -------------------------------------------------------------------
   "Number of students" row + Student details section, rendered around
   WC's quantity input on exam product pages.
   ------------------------------------------------------------------- */
.eseb-quantity-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 12px;
	clear: both;
}

.eseb-quantity-row .eseb-quantity-label {
	font-weight: 600;
	font-size: 1em;
}

/* WC by default floats / inline-blocks the .quantity wrapper next to the
   Add to Cart button. Inside our row we force a normal inline-block so
   the label and input sit side-by-side on their own line. */
.eseb-quantity-row .quantity {
	margin: 0;
	float: none;
	display: inline-block;
}

/* The Kowoka theme sizes the number input tightly, so two- and three-digit
   values (10, 100...) get clipped by the box and partly hidden behind the
   spinner arrows. Give it a comfortable minimum width and a touch of inner
   padding, and ensure box-sizing so the padding doesn't re-clip the digits.
   width:auto lets it grow with the content beyond the minimum if a theme
   sets a fixed width elsewhere. */
.eseb-quantity-row .quantity input.qty {
	min-width: 4.5em;
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
	text-align: center;
}

.eseb-students-section {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: #f7f9fb;
	border: 1px solid #d4d6d8;
	border-radius: 4px;
}

.eseb-students-section .eseb-students-help {
	margin: 0 0 12px;
	font-size: 0.875em;
	color: #555;
}

.eseb-students-rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.eseb-student-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e5e7eb;
}

.eseb-student-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.eseb-student-row .eseb-student-label {
	font-weight: 600;
	font-size: 0.9em;
}

/* 3 rows × 2 columns of inputs underneath the student label.
   align-items: end so the DOB input (which sits below its visible label)
   lines up at the same baseline as the email input next to it - the row
   gets a touch taller to make room for the DOB label, with empty space
   above the email input matching the label height. */
.eseb-student-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: end;
}

.eseb-student-row .eseb-student-input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #c8ccd0;
	border-radius: 3px;
	font-size: 0.95em;
	box-sizing: border-box;
}

/* Self-declaration checkbox rows below the field grid. Stacked
   vertically so each declaration reads cleanly, with the checkbox
   aligned to the start of its label text. The block has a small
   top margin so it visually separates from the input grid above
   without needing a divider. */
.eseb-student-row .eseb-student-flags {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
}
.eseb-student-row .eseb-student-flag {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 0.9em;
	line-height: 1.4;
	color: #374151;
}
.eseb-student-row .eseb-student-flag input[type="checkbox"] {
	margin: 2px 0 0;
	cursor: pointer;
	flex-shrink: 0;
}
.eseb-student-row .eseb-student-flag span {
	flex: 1;
}

/* DOB has a visible label above the input so customers don't have to guess
   what "00/00/0000" is asking for. The wrapper stacks the label and input
   in a single grid cell. */
.eseb-student-dob-wrapper {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.eseb-student-dob-label {
	font-size: 0.78em;
	font-weight: 500;
	color: #6b7280;
	line-height: 1.2;
}

/* CRITICAL VISIBILITY FIX. flatpickr's bundled CSS sets
       .flatpickr-month { overflow: hidden }
   to clip month-change slide animations. That clip also hides the year
   dropdown we inject - which sits inside .flatpickr-current-month (a
   75%-wide centred band). The combined width of month + year exceeds
   the 75% band and overflows; that overflow then gets clipped by
   .flatpickr-month and is rendered invisible.

   Scoping the override to .eseb-fp-active means we only affect calendars
   where we've injected a year select. The on-demand exam date picker
   elsewhere on the page is not tagged with this class and keeps its
   default behaviour. */
.flatpickr-calendar.eseb-fp-active .flatpickr-month {
	overflow: visible !important;
}

/* Force the month and year selects onto a single, vertically-centred
   row using flexbox. Inline-flow positioning was unreliable - despite
   both selects being inline-block with width to spare and white-space:
   nowrap on the parent, the year was being pushed onto a new line
   below the month (landing on top of the weekday header row).

   Flexbox sidesteps all the inline-flow uncertainty: flex-wrap: nowrap
   guarantees children stay in one row regardless of width pressure,
   and align-items: center handles vertical centring without depending
   on baseline alignment or padding gymnastics.

   height: 34px and padding: 0 reset in case theme CSS has overridden
   either - we control the vertical box entirely. */
.flatpickr-calendar.eseb-fp-active .flatpickr-current-month {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	width: 90% !important;
	left: 5% !important;
	height: 34px !important;
	padding: 0 !important;
}

/* Match the year select's vertical alignment to flatpickr's month
   dropdown. Belt-and-braces - flex align-items handles centring,
   but this also ensures consistency if a downstream parent reverts
   to inline-flow for any reason. */
.flatpickr-calendar.eseb-fp-active .eseb-fp-year-select {
	vertical-align: initial !important;
}

/* Year dropdown injected into flatpickr's header by initDobPicker(). Sits
   right after flatpickr's own month dropdown. Visibility-critical
   properties carry !important so a theme CSS rule (some Kowoka selectors
   target generic <select> inside flatpickr) can't render it invisible. */
.flatpickr-calendar .eseb-fp-year-select {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: transparent;
	border: none;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	font-size: inherit;
	font-family: inherit;
	font-weight: 300;
	line-height: inherit;
	margin: -1px 0 0 6px;
	padding: 0 2px;
	vertical-align: initial;
	width: auto;
	height: auto;
	outline: none;
	box-shadow: none;
	appearance: menulist;
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
}

.flatpickr-calendar .eseb-fp-year-select:hover {
	background: rgba(0, 0, 0, 0.04);
	border-radius: 3px;
}


/* Stack the field pairs into a single column on narrow viewports - the 2-col
   grid would otherwise crush the date and email inputs into unusable widths. */
@media (max-width: 540px) {
	.eseb-student-fields {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------
   Exam price colour. The price shown on exam product pages (the
   per-exam override revealed once an examination is selected) uses the
   ExamSpace brand blue. Scoped to the product summary so it does not
   recolour prices elsewhere (cart, mini-cart, related products). The
   selector targets the amount and its currency symbol/bdi children so
   the whole figure - "£85.00" - takes the colour.
   ------------------------------------------------------------------- */
.summary .price .woocommerce-Price-amount.amount,
.summary .price .woocommerce-Price-amount.amount bdi,
.summary .price .woocommerce-Price-currencySymbol {
	color: #052F9B;
	font-weight: 700;
}

/* The price display suffix ("+VAT") in brand blue too, so it matches the
   amount. Left at the theme's default weight - the amount stays the bold
   emphasis and the suffix reads as a lighter companion. */
.summary .price .woocommerce-price-suffix {
	color: #052F9B;
}