/**
 * Organisational Event — registration form styles.
 *
 * AISG brand palette: navy #0B1F3A, coral #E8352A, white #FFFFFF, grays.
 * Coral used FOR TEXT or behind white text is darkened to #C62B21 to satisfy
 * WCAG-AA. Token names are shared with oe-events.css / oe-dashboard.css /
 * admin.css. All rules are scoped under .oe-registration to avoid conflicts.
 * Dark mode mirrors oe-events.css so the embedded form never renders as a white
 * box inside a dark event page.
 *
 * @package AISG\OrgEvent
 */

.oe-registration {
	--oe-navy: #0b1f3a;
	--oe-coral: #e8352a;        /* bright fill only (large decorative areas) */
	--oe-coral-text: #c62b21;   /* AA-safe coral for text on light surfaces */
	--oe-coral-strong: #c62b21; /* constant dark coral behind white text (buttons) */
	--oe-heading: #0b1f3a;      /* navy in light, light-blue in dark */
	--oe-ink: #1c2733;
	--oe-line: #d7dbe0;
	--oe-surface: #ffffff;
	--oe-subtle: #f4f5f7;
	--oe-radius: 12px;
	--oe-radius-sm: 8px;
	max-width: 100%;
	margin: 1.5rem 0;
	color: var(--oe-ink);
	font-size: 16px;
	line-height: 1.5;
}

.oe-registration * {
	box-sizing: border-box;
}

.oe-registration-form {
	background: var(--oe-surface);
	border: 1px solid var(--oe-line);
	border-top: 4px solid var(--oe-coral-strong);
	border-radius: var(--oe-radius);
	padding: 1.5rem 1.5rem 1.75rem;
}

.oe-registration-form__title {
	margin: 0 0 0.75rem;
	color: var(--oe-heading);
	font-size: 1.35rem;
	line-height: 1.2;
}

.oe-registration-form__notice {
	margin: 0 0 1rem;
	padding: 0.6rem 0.85rem;
	background: var(--oe-subtle);
	border-left: 3px solid var(--oe-heading);
	border-radius: var(--oe-radius-sm);
	font-size: 0.92rem;
	color: var(--oe-ink);
}

.oe-field {
	margin: 0 0 1.1rem;
}

.oe-field label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	color: var(--oe-heading);
}

.oe-field input[type="text"],
.oe-field input[type="email"],
.oe-field input[type="number"],
.oe-field input[type="tel"],
.oe-field input[type="url"],
.oe-field textarea,
.oe-field select {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--oe-line);
	border-radius: var(--oe-radius-sm);
	font-size: 1rem;
	color: var(--oe-ink);
	background: var(--oe-surface);
}

.oe-field input:focus,
.oe-field textarea:focus,
.oe-field select:focus {
	outline: none;
	border-color: var(--oe-heading);
	box-shadow: 0 0 0 3px rgba( 11, 31, 58, 0.12 );
}

/* Per-field validation feedback (M3). */
.oe-field input[aria-invalid="true"],
.oe-field textarea[aria-invalid="true"],
.oe-field select[aria-invalid="true"] {
	border-color: var(--oe-coral-text);
	box-shadow: 0 0 0 3px rgba( 198, 43, 33, 0.18 );
}

.oe-field__error {
	display: none;
	margin: 0.3rem 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--oe-coral-text);
}

.oe-field__error.is-visible {
	display: block;
}

.oe-required {
	color: var(--oe-coral-text);
	font-weight: 700;
}

.oe-field--gateways {
	border: 1px solid var(--oe-line);
	border-radius: var(--oe-radius-sm);
	padding: 0.85rem 1rem;
	margin-bottom: 1.25rem;
}

.oe-field--gateways legend {
	font-weight: 700;
	color: var(--oe-heading);
	padding: 0 0.4rem;
}

.oe-price {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.1rem 0.5rem;
	background: var(--oe-navy);
	color: #ffffff;
	border-radius: var(--oe-radius-sm);
	font-size: 0.9rem;
}

.oe-gateway {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0;
	font-weight: 500;
	color: var(--oe-ink);
	cursor: pointer;
}

.oe-button {
	display: inline-block;
	padding: 0.7rem 1.6rem;
	background: var(--oe-coral-strong);
	color: #ffffff;
	border: none;
	border-radius: var(--oe-radius-sm);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease-in-out;
}

.oe-button:hover,
.oe-button:focus {
	background: #a82419;
}

.oe-button:focus-visible {
	outline: 3px solid var(--oe-heading);
	outline-offset: 2px;
}

.oe-button[disabled],
.oe-button.is-busy {
	opacity: 0.6;
	cursor: progress;
}

.oe-button.oe-button--disabled {
	background: var(--oe-line);
	color: var(--oe-ink);
	cursor: not-allowed;
	opacity: 1;
}

/* Notices returned after submission. */
.oe-notice {
	margin: 0 0 1.25rem;
	padding: 0.8rem 1rem;
	border-radius: var(--oe-radius-sm);
	font-size: 0.95rem;
	border: 1px solid transparent;
}

.oe-notice--success,
.oe-notice--pending,
.oe-notice--waitlisted {
	background: #eef7f0;
	border-color: #b8e0c2;
	color: #1e5631;
}

.oe-notice--waitlisted {
	background: #fff6e9;
	border-color: #f2d29b;
	color: #7a4d00;
}

.oe-notice--error {
	background: #fdecea;
	border-color: #f5b5b0;
	color: #8a1c14;
}

/* Visually hidden honeypot — never shown to human users. */
.oe-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media ( max-width: 600px ) {
	.oe-registration-form {
		padding: 1.1rem 1.1rem 1.35rem;
	}
}

/* Ticket / QR block shown on the confirmation screen. */
.oe-ticket {
	margin: 0 0 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--oe-border, #d9dde3);
	border-radius: var(--oe-radius, 10px);
	background: var(--oe-surface, #fff);
	text-align: center;
}
.oe-ticket__title {
	margin: 0 0 .75rem;
	font-size: 1.05rem;
	color: var(--oe-ink, #0B1F3A);
}
.oe-ticket__qr {
	display: inline-block;
	max-width: 220px;
	width: 100%;
	margin: 0 auto;
}
.oe-ticket__qr svg {
	width: 100%;
	height: auto;
	display: block;
}
.oe-ticket__hint {
	margin: .5rem 0 0;
	font-size: .85rem;
	color: var(--oe-muted, #5a6572);
}
.oe-ticket__actions {
	margin: .9rem 0 0;
}