/* Event page ticket form.
 *
 * Everything visual is driven by the custom properties below, so a theme can
 * restyle the form without overriding rules. Redefine any of them in your
 * theme's stylesheet, scoped to :root or .wcet-tickets.
 *
 * Values fall back to WooCommerce / theme.json presets where those exist, so
 * out of the box the form picks up the store's own colours and spacing.
 */
.wcet-tickets {
	/* Spacing */
	--wcet-gap: 1rem;
	--wcet-section-gap: 1.5rem;
	--wcet-field-padding: 0.75rem 0.9rem;
	--wcet-button-padding: 0.75rem 1.5rem;

	/* Shape */
	--wcet-radius: var(--wp--custom--radius, 4px);
	--wcet-border: 1px solid var(--wcet-border-color);
	--wcet-border-color: var(--wp--preset--color--contrast-3, rgba(0, 0, 0, 0.18));

	/* Colour */
	--wcet-text: var(--wp--preset--color--contrast, inherit);
	--wcet-muted: var(--wp--preset--color--contrast-2, #646970);
	--wcet-field-bg: var(--wp--preset--color--base, #fff);
	--wcet-panel-bg: var(--wp--preset--color--base-2, rgba(0, 0, 0, 0.02));
	--wcet-accent: var(--wp--preset--color--primary, #7f54b3);
	--wcet-button-bg: var(--wcet-accent);
	--wcet-button-text: var(--wp--preset--color--base, #fff);
	--wcet-ok: #1a7f37;
	--wcet-error: #b32d2e;

	margin: var(--wcet-section-gap) 0;
	color: var(--wcet-text);
}

.wcet-event-meta p {
	margin: 0 0 0.35rem;
	color: var(--wcet-muted);
}

.wcet-heading {
	margin: var(--wcet-section-gap) 0 var(--wcet-gap);
}

/* ---- Fields ---- */

.wcet-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.wcet-field label {
	font-weight: 600;
	font-size: 0.95em;
}

.wcet-tickets select,
.wcet-tickets input[type="text"],
.wcet-tickets input[type="number"] {
	padding: var(--wcet-field-padding);
	border: var(--wcet-border);
	border-radius: var(--wcet-radius);
	background: var(--wcet-field-bg);
	color: inherit;
	font: inherit;
	line-height: 1.4;
	max-width: 100%;
	box-sizing: border-box;
}

.wcet-tickets select:focus-visible,
.wcet-tickets input:focus-visible {
	outline: 2px solid var(--wcet-accent);
	outline-offset: 1px;
}

.wcet-picker {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcet-gap);
	align-items: flex-end;
}

.wcet-picker .wcet-field:first-child {
	flex: 1 1 18rem;
}

/* ---- Quantity stepper ---- */

.wcet-stepper {
	display: inline-flex;
	align-items: stretch;
	border: var(--wcet-border);
	border-radius: var(--wcet-radius);
	overflow: hidden;
	background: var(--wcet-field-bg);
	width: max-content;
}

.wcet-stepper .wcet-qty {
	width: 3.5rem;
	border: 0;
	border-radius: 0;
	text-align: center;
	background: transparent;
	-moz-appearance: textfield;
}

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

.wcet-step {
	border: 0;
	background: var(--wcet-panel-bg);
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 0.9rem;
	cursor: pointer;
}

.wcet-step:hover {
	background: var(--wcet-border-color);
}

/* ---- Attendee names ---- */

.wcet-attendees {
	margin: var(--wcet-section-gap) 0;
	padding: var(--wcet-gap);
	background: var(--wcet-panel-bg);
	border-radius: var(--wcet-radius);
}

.wcet-attendees h4 {
	margin: 0 0 0.25rem;
}

.wcet-optional,
.wcet-attendees-note {
	font-weight: 400;
	color: var(--wcet-muted);
	font-size: 0.9em;
}

.wcet-attendees-note {
	margin: 0 0 var(--wcet-gap);
}

.wcet-attendee-field {
	display: grid;
	grid-template-columns: minmax(6rem, 10rem) 1fr;
	align-items: center;
	gap: var(--wcet-gap);
	margin-bottom: 0.5rem;
}

/* ---- Actions ---- */

.wcet-form-actions {
	margin: var(--wcet-section-gap) 0 0;
}

/* Themes and WooCommerce both style .button; only fill the gaps so the store's
 * own button styling wins wherever it is defined. */
.wcet-tickets .wcet-add-tickets,
.wcet-tickets .wcet-apply-code {
	padding: var(--wcet-button-padding);
	border-radius: var(--wcet-radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border: 0;
}

.wcet-tickets .wcet-add-tickets {
	background: var(--wcet-button-bg);
	color: var(--wcet-button-text);
}

.wcet-tickets .wcet-add-tickets[disabled] {
	opacity: 0.6;
	cursor: default;
}

.wcet-form-feedback,

.wcet-form-feedback.is-ok,

.wcet-form-feedback.is-error,

.wcet-view-basket {
	font-weight: 600;
	white-space: nowrap;
}

.wcet-sold-out {
	color: var(--wcet-muted);
}

/* ---- Access code accordion ---- */










@media (max-width: 600px) {
	.wcet-picker .wcet-field:first-child {
		flex-basis: 100%;
	}

	.wcet-attendee-field {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}