/**
 * Course booking: inline date calendar and attendee fields.
 *
 * Loaded only on course products (see hello-pw-woocommerce-courses.php).
 * Uses the theme's brand custom properties with neutral fallbacks.
 *
 * @package hello-pw
 */

/* The native variation select stays for WooCommerce's JS, but is not shown. */
.pw-course-product .variations_form table.variations {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.course-dates {
	margin: 0 0 1.5rem;
}

.course-dates__label,
.course-attendees__label {
	font-weight: 700;
	margin-bottom: 0.5rem;
}

/*
 * Flatpickr mounts on the input and opens as a popup (static: true keeps the
 * calendar inside .course-calendar). The altInput copies the input's class,
 * so these rules style the visible field.
 */
.course-calendar__input {
	display: block;
	width: 100%;
	max-width: 22rem;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 2px solid #e2e2e2;
	border-radius: 4px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.course-calendar__input:hover,
.course-calendar__input:focus,
.course-calendar__input.active {
	border-color: var(--brand-primary, #222);
	outline: none;
}

.course-calendar .flatpickr-wrapper {
	position: relative;
	display: block;
}

.course-calendar .flatpickr-calendar {
	border: 1px solid #e2e2e2;
}

.course-calendar .flatpickr-day.selected,
.course-calendar .flatpickr-day.selected:hover {
	background: var(--brand-primary, #222);
	border-color: var(--brand-primary, #222);
}

.course-calendar .flatpickr-day.today:not(.selected) {
	border-color: var(--brand-primary, #222);
}

.course-calendar .flatpickr-day.pw-day--soldout:not(.selected) {
	color: #b3261e;
	text-decoration: line-through;
	opacity: 0.7;
}

/* Passive tint for the running days of a multi-day course. */
.course-calendar .flatpickr-day.pw-day--range {
	background: rgba(117, 66, 19, 0.08);
	border-color: transparent;
}

/* Several times on the same day: one radio-style button per slot. */
.course-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.course-slots[hidden] {
	display: none;
}

.course-slot {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.6rem 0.9rem;
	text-align: left;
	background: #fff;
	border: 2px solid #e2e2e2;
	border-radius: 4px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.course-slot:hover:not(:disabled),
.course-slot:focus-visible {
	border-color: var(--brand-primary, #222);
}

.course-slot.is--active {
	border-color: var(--brand-primary, #222);
	box-shadow: inset 0 0 0 1px var(--brand-primary, #222);
}

.course-slot.is--soldout,
.course-slot:disabled {
	cursor: not-allowed;
	opacity: 0.55;
	background: #f6f6f6;
}

/* Opening hours slots (Wunschtermin) get a subtle accent to stand apart
   from fixed course dates. */
.course-slot--open {
	border-style: dashed;
}

.course-slot--open:hover:not(:disabled),
.course-slot--open:focus-visible,
.course-slot--open.is--active {
	border-style: solid;
}

.course-slot__time {
	font-weight: 700;
}

.course-slot__location {
	font-size: 0.9em;
	color: #666;
}

.course-slot__seats {
	font-size: 0.85em;
	color: #2e7d32;
}

.course-slot__seats.is--soldout {
	color: #b3261e;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Details of the selected date, rendered by course-booking.js. */
.course-date-details {
	margin-top: 0.75rem;
}

.course-date-details[hidden] {
	display: none;
}

.course-date-details__inner {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.9rem 1rem;
	background: #fff;
	border: 2px solid #e2e2e2;
	border-radius: 4px;
}

.course-date-details__day {
	font-weight: 700;
}

.course-date-details__time,
.course-date-details__location,
.course-date-details__note {
	font-size: 0.9em;
}

.course-date-details__location,
.course-date-details__note {
	color: #666;
}

.course-date-details__price {
	margin-top: 0.35rem;
	font-weight: 700;
}

.course-date-details__seats {
	font-size: 0.85em;
	color: #2e7d32;
}

.course-date-details__seats.is--soldout {
	color: #b3261e;
	font-weight: 700;
}

.course-attendees {
	margin: 0 0 1.25rem;
}

.course-attendees__hint {
	font-size: 0.9em;
	color: #666;
	margin: 0 0 0.75rem;
}

.course-attendee {
	padding: 0.75rem 0 0.25rem;
	border-top: 1px solid #e2e2e2;
}

.course-attendee:first-child {
	border-top: 0;
	padding-top: 0;
}

.course-attendee__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.course-attendee__count {
	font-weight: 700;
	font-size: 0.9em;
}

.course-attendee__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: #b3261e;
	background: transparent;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.course-attendee__remove:hover:not(:disabled),
.course-attendee__remove:focus-visible {
	border-color: #b3261e;
	background: rgba(179, 38, 30, 0.06);
}

.course-attendee__remove:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.course-attendee .form-row {
	margin: 0 0 0.5rem;
}

.course-attendee label {
	display: block;
}

.course-attendee input.input-text {
	width: 100%;
}

.course-attendees__actions {
	margin-top: 0.75rem;
}

.course-attendees__add {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	font-weight: 600;
	color: var(--brand-primary, #222);
	background: transparent;
	border: 2px dashed #cfcfcf;
	border-radius: 4px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.course-attendees__add:hover:not(:disabled),
.course-attendees__add:focus-visible {
	border-color: var(--brand-primary, #222);
}

.course-attendees__add:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.course-attendees__add-icon {
	display: inline-flex;
}

.course-attendees__limit {
	margin: 0.5rem 0 0;
	font-size: 0.85em;
	color: #b3261e;
}

/*
 * The booked quantity follows the attendee count, so the native quantity
 * input is hidden. Both the variation wrapper and the theme's .cart-form are
 * flex containers defined with high-specificity theme selectors, so these
 * course-only layout resets use !important on purpose: the add to cart button
 * drops below the attendee list and spans the full width.
 */
.pw-course-product .woocommerce-variation-add-to-cart,
.pw-course-product .cart-form {
	display: block !important;
}

.pw-course-product .cart-form .quantity {
	display: none !important;
}

.pw-course-product .single_add_to_cart_button {
	display: block !important;
	width: 100% !important;
	margin-top: 1rem;
	float: none !important;
}

/* Quantity is locked in the cart: it always matches the attendee count. */
.course-quantity {
	display: inline-block;
	font-weight: 700;
}

/*
 * Single column course layout: one centered column, no product image.
 * Vertical padding only - the horizontal 15px keeps the Bootstrap gutter,
 * so content does not touch the viewport edge on small screens.
 */
.pw-course-single {
	padding-top: 4rem;
	padding-bottom: 4rem;
}