/* =============================================================================
   Pro Conferences – Delegate Selector  (product page)
   ============================================================================= */

/* ── Design tokens ────────────────────────────────────────────────────────── */

#pcd-delegate-selector {
	/* Darker brand green per client feedback (the brighter lime was hard to
	   read) — matches the site's actual brand green used on the sidebar CTAs. */
	--pcd-accent:        #5D9D1B;
	--pcd-accent-dark:   #4e8716;
	--pcd-accent-light:  #eef6e4;
	--pcd-accent-mid:    #a8cd85;
	--pcd-border:        #dde3ea;
	--pcd-border-focus:  #5D9D1B;
	--pcd-text:          #1a202c;
	--pcd-muted:         #64748b;
	--pcd-surface:       #ffffff;
	--pcd-surface-2:     #f7f9fc;
	--pcd-radius-sm:     6px;
	--pcd-radius:        10px;
	--pcd-radius-lg:     14px;
	--pcd-shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--pcd-shadow:        0 4px 12px rgba(0,0,0,.07);
	--pcd-ease:          cubic-bezier(.4,0,.2,1);
	--pcd-duration:      180ms;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

#pcd-delegate-selector {
	margin: 2em 0;
	padding-top: 1.75em;
	border-top: 2px solid var(--pcd-border);
}

#pcd-delegate-selector .pcd-section-title {
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--pcd-text);
	margin: 0 0 1.25em;
	text-transform: uppercase;
}

.pcd-login-notice {
	font-size: .875em;
	color: var(--pcd-muted);
	margin-bottom: 1.25em;
}

/* ── Team selector ────────────────────────────────────────────────────────── */

.pcd-team-selector {
	display: flex;
	align-items: center;
	gap: .75em;
	flex-wrap: wrap;
	background: var(--pcd-surface-2);
	border: 1px solid var(--pcd-border);
	border-radius: var(--pcd-radius);
	padding: .75em 1em;
	margin-bottom: 1.25em;
}

.pcd-team-selector label {
	font-size: .8em;
	font-weight: 600;
	color: var(--pcd-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
	margin: 0;
}

.pcd-team-selector select {
	flex: 1;
	min-width: 180px;
	/* Global select styling elsewhere applies a bottom-only margin (form
	   spacing) which, inside this flex row, throws off align-items:center —
	   flex centres the margin box, and a 0/margin-bottom asymmetry shifts the
	   element up by half the margin. Same root cause as the Reading
	   Materials button misalignment. */
	margin: 0;
}

/* ── Individual slot card ─────────────────────────────────────────────────── */

.pcd-slot {
	background: var(--pcd-surface);
	border: 1px solid var(--pcd-border);
	border-radius: var(--pcd-radius-lg);
	padding: 1.4em 1.5em;
	margin-bottom: .9em;
	box-shadow: var(--pcd-shadow-sm);
	position: relative;
	transition: box-shadow var(--pcd-duration) var(--pcd-ease),
	            border-color var(--pcd-duration) var(--pcd-ease);
}

.pcd-slot:focus-within {
	border-color: var(--pcd-accent-mid);
	box-shadow: var(--pcd-shadow), 0 0 0 3px var(--pcd-accent-light);
}

.pcd-slot-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.1em;
}

.pcd-slot-label {
	font-size: .8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pcd-accent);
}

.pcd-remove-slot {
	background: none;
	border: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
	line-height: 1;
	color: var(--pcd-muted);
	cursor: pointer;
	padding: 0;
	transition: background var(--pcd-duration) var(--pcd-ease),
	            color var(--pcd-duration) var(--pcd-ease);
}

.pcd-remove-slot:hover {
	background: #fee2e2;
	color: #dc2626;
}

/* ── Segmented radio control ──────────────────────────────────────────────── */

.pcd-slot-type-row {
	display: flex;
	background: var(--pcd-surface-2);
	border: 1px solid var(--pcd-border);
	border-radius: var(--pcd-radius);
	padding: 3px;
	gap: 2px;
	margin-bottom: 1.1em;
}

.pcd-radio {
	flex: 1;
	position: relative;
	margin: 0;
}

/* Hide the native radio */
.pcd-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* The visible pill */
.pcd-radio-label {
	display: block;
	text-align: center;
	padding: .5em .6em;
	border-radius: calc(var(--pcd-radius) - 3px);
	cursor: pointer;
	font-size: .82em;
	font-weight: 500;
	color: var(--pcd-muted);
	transition: background var(--pcd-duration) var(--pcd-ease),
	            color var(--pcd-duration) var(--pcd-ease),
	            box-shadow var(--pcd-duration) var(--pcd-ease);
	user-select: none;
	white-space: nowrap;
}

.pcd-radio-label:hover {
	color: var(--pcd-text);
}

/* Active state — driven by JS class + :has() as progressive enhancement */
.pcd-radio--active .pcd-radio-label,
.pcd-radio:has(input:checked) .pcd-radio-label {
	background: var(--pcd-surface);
	color: var(--pcd-accent);
	font-weight: 600;
	box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 0 0 1px var(--pcd-accent-mid);
}

/* "Myself" disabled once another slot already has it selected (see
   updateSelfAvailability() in product-page.js) — only one slot can ever
   represent the purchaser. */
.pcd-radio--disabled .pcd-radio-label {
	opacity: .45;
	cursor: not-allowed;
}

/* ── Saved delegate dropdown ──────────────────────────────────────────────── */

.pcd-saved-delegate-row {
	margin-bottom: .6em;
}

.pcd-saved-delegate-row select {
	width: 100%;
}

/* ── Delegate form ────────────────────────────────────────────────────────── */
/* Tightened per client feedback — required fields took up enough height that
   "Add another delegate" needed scrolling to reach. */

.pcd-delegate-form {
	margin-top: .25em;
}

.pcd-form-row {
	margin-bottom: .55em;
}

.pcd-form-row--halved {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: .75em;
	align-items: start;
}

.pcd-form-field {
	display: flex;
	flex-direction: column;
	gap: .2em;
}

.pcd-form-field.pcd-form-field--grow {
	flex: 1;
}

/* Field labels */
.pcd-form-field label {
	font-size: .78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pcd-muted);
	margin: 0;
}

.pcd-form-field .required {
	color: #e53e3e;
}

/* ── Inputs & selects ─────────────────────────────────────────────────────── */

.pcd-form-field input[type="text"],
.pcd-form-field input[type="email"],
.pcd-form-field select,
.pcd-saved-delegate-row select,
.pcd-team-selector select {
	width: 100%;
	height: 36px;
	padding: 0 .85em;
	font-size: .9em;
	color: var(--pcd-text);
	background: var(--pcd-surface);
	border: 1px solid var(--pcd-border);
	border-radius: var(--pcd-radius-sm);
	outline: none;
	transition: border-color var(--pcd-duration) var(--pcd-ease),
	            box-shadow var(--pcd-duration) var(--pcd-ease);
	-webkit-appearance: none;
	appearance: none;
}

.pcd-form-field input[type="text"]:focus,
.pcd-form-field input[type="email"]:focus {
	border-color: var(--pcd-border-focus);
	box-shadow: 0 0 0 3px var(--pcd-accent-light);
}

/* Custom arrow for selects */
.pcd-form-field select,
.pcd-saved-delegate-row select,
.pcd-team-selector select {
	padding-right: 2.25em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .75em center;
	cursor: pointer;
}

.pcd-form-field select:focus,
.pcd-saved-delegate-row select:focus,
.pcd-team-selector select:focus {
	border-color: var(--pcd-border-focus);
	box-shadow: 0 0 0 3px var(--pcd-accent-light);
}

/* ── "Add another delegate" button ───────────────────────────────────────── */

.pcd-add-slot-wrap {
	margin-top: .7em;
}

.pcd-add-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	width: 100%;
	padding: .75em 1em;
	background: var(--pcd-surface);
	border: 1.5px solid #320067;
	border-radius: var(--pcd-radius);
	color: #320067;
	font-size: .9em;
	font-weight: 700;
	cursor: pointer;
	transition: border-color var(--pcd-duration) var(--pcd-ease),
	            color var(--pcd-duration) var(--pcd-ease),
	            background var(--pcd-duration) var(--pcd-ease);
}

.pcd-add-slot:hover {
	border-color: #320067;
	color: #320067;
	background: #f2ecf7;
}

/* ── Error messages ───────────────────────────────────────────────────────── */

.pcd-slot-error {
	display: flex;
	align-items: center;
	gap: .4em;
	margin: .75em 0 0;
	padding: .6em .85em;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--pcd-radius-sm);
	color: #dc2626;
	font-size: .83em;
	font-weight: 500;
}

/* ── Hidden qty input ─────────────────────────────────────────────────────── */

.pcd-qty-hidden {
	display: none !important;
}

/* ── Purpose selector ("for myself" vs "my delegates") ───────────────────── */

.pcd-purpose-select {
	margin-bottom: 1.4em;
}

.pcd-purpose-heading {
	font-size: .78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--pcd-muted);
	margin: 0 0 .65em;
}

.pcd-purpose-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6em;
}

.pcd-purpose-card {
	display: flex;
	align-items: center;
	gap: .8em;
	padding: .85em 1em;
	border: 2px solid var(--pcd-border);
	border-radius: var(--pcd-radius);
	cursor: pointer;
	background: var(--pcd-surface);
	position: relative;
	transition: border-color var(--pcd-duration) var(--pcd-ease),
	            background  var(--pcd-duration) var(--pcd-ease);
}

.pcd-purpose-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.pcd-purpose-card--active,
.pcd-purpose-card:has(input:checked) {
	border-color: var(--pcd-accent);
	background: var(--pcd-accent-light);
}

.pcd-purpose-card__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: var(--pcd-surface-2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pcd-muted);
	transition: background var(--pcd-duration) var(--pcd-ease),
	            color var(--pcd-duration) var(--pcd-ease);
}

.pcd-purpose-card--active .pcd-purpose-card__icon,
.pcd-purpose-card:has(input:checked) .pcd-purpose-card__icon {
	background: var(--pcd-accent);
	color: #fff;
}

.pcd-purpose-card__icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

.pcd-purpose-card__text {
	line-height: 1.3;
}

.pcd-purpose-card__text strong {
	display: block;
	font-size: .875em;
	font-weight: 700;
	color: var(--pcd-text);
}

.pcd-purpose-card__text span {
	font-size: .75em;
	color: var(--pcd-muted);
}

/* ── Keyframes ────────────────────────────────────────────────────────────── */

@keyframes pcdSlotIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pcdFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.pcd-slot--entering {
	animation: pcdSlotIn 220ms var(--pcd-ease) forwards;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media ( max-width: 640px ) {
	.pcd-form-row--halved {
		grid-template-columns: 1fr;
	}

	.pcd-slot-type-row {
		flex-wrap: wrap;
	}

	.pcd-radio {
		flex: 1 1 auto;
	}

	.pcd-slot {
		padding: 1.1em 1.1em;
	}
}

/* ── Multi-venue: per-delegate venue picker ──────────────────────────────── */
.pcd-slot-venue-row {
	margin: 0 0 .85rem;
}
.pcd-slot-venue-row .pcd-field-label {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	margin-bottom: .3rem;
}
.pcd-venue-select {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #fff;
	font-size: .9rem;
}

/* ── Booking modal — client feedback amends ──────────────────────────────── */

/* Remove the large gap under the modal header — this spacing was designed
   for #pcd-delegate-selector rendering inline on the page, not inside a
   already-separated modal header. */
#prc-booking-modal #pcd-delegate-selector {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Bigger, more prominent intro sentence (shown to logged-out / guest users,
   and above the "myself / my delegates" picker for logged-in users). */
#prc-booking-modal .pcd-login-notice,
#prc-booking-modal .pcd-purpose-heading {
	font-size: 1em;
	font-weight: 600;
	color: var(--pcd-text);
}

/* Hide Flatsome's default quantity stepper inside the modal — quantity is
   entirely driven by the number of delegate slots, the stepper was never
   meant to be independently editable here. */
#prc-booking-modal .quantity,
#prc-booking-modal .ux-quantity {
	display: none !important;
}

/* Bundle products skip the modal wrapper entirely (see booking_anchor() in
   functions.php), so the rule above never reaches them — same reasoning,
   just scoped to the bundle form itself instead. */
.bundle_form .quantity,
.bundle_form .ux-quantity {
	display: none !important;
}

/* Visible "Booking as: Name <email>" confirmation shown when "Myself" is
   selected — the actual input fields are hidden in that state, so without
   this the box looked like nothing happened. */
.pcd-self-summary {
	margin: .5em 0 0;
	padding: .6em .85em;
	background: var(--pcd-accent-light);
	border-radius: var(--pcd-radius-sm);
	font-size: .875em;
	font-weight: 600;
	color: var(--pcd-text);
}

/* Single-delegate access reminder (virtual/recorded products, qty 1 only). */
.pcd-single-delegate-reminder {
	margin: 1em 0 0;
	padding: .65em .9em;
	background: #fff7e6;
	border: 1px solid #f5d78e;
	border-radius: var(--pcd-radius-sm);
	color: #8a5a00;
	font-size: .85em;
	font-weight: 600;
}

/* Legal-only single-delegate confirmation gate — blocks Add to Cart until
   the checkbox is ticked (client requirement: SRA/RICS CPD record-keeping
   needs one booking per delegate). */
.pcd-legal-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pcd-legal-modal[hidden] {
	display: none;
}
.pcd-legal-modal__overlay {
	position: absolute;
	inset: 0;
	/* Darker than a typical modal backdrop — this overlay sits on top of the
	   booking modal's own solid purple header, and at .55 opacity that
	   purple still read through clearly next to this popup's white box
	   (client feedback: "too much purple"). This opacity mutes it to a
	   near-black tint instead. */
	background: rgba(0, 0, 0, .82);
}
.pcd-legal-modal__box {
	position: relative;
	z-index: 1;
	/* Hardcoded rather than var(--pcd-surface) etc. — those tokens are scoped
	   to #pcd-delegate-selector, and this modal is a fixed-position sibling
	   of it (deliberately, so it isn't affected by that container's own
	   layout/stacking), so the custom properties don't resolve here. */
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(0,0,0,.07);
	padding: 1.75em;
	width: 92%;
	max-width: 480px;
}
/* Header row: heading + close button share a flex row so the × always sits
   level with the heading's first line, rather than being pinned to the
   box's own top-right corner (previously fell out of line whenever the
   heading text wrapped to two lines — client feedback). */
.pcd-legal-modal__heading-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75em;
}
.pcd-legal-modal__close {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: .3em;
	cursor: pointer;
	color: #888;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	transition: color 200ms ease, background 200ms ease;
}
.pcd-legal-modal__close:hover {
	color: #333;
	background: rgba(0, 0, 0, .06);
}
.pcd-legal-modal__heading {
	font-size: 1.1em;
	margin: 0 0 .75em 0;
}
.pcd-legal-modal__checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	margin: 1em 0;
	font-weight: 600;
	cursor: pointer;
}
.pcd-legal-modal__checkbox-row input {
	margin-top: .2em;
}
.pcd-legal-modal__add-more {
	background: #f7f9fc;
	border: 1px solid #dde3ea;
	border-radius: 6px;
	padding: .75em .9em;
	font-size: .9em;
}
.pcd-legal-modal__add-more a {
	color: #5D9D1B;
	font-weight: 700;
	text-decoration: none;
}
.pcd-legal-modal__add-more a:hover {
	text-decoration: underline;
}
#pcd-legal-confirm-continue {
	margin-top: 1.25em;
	width: 100%;
}

/* Default .button green (--fs-color-primary) just dims to a muted green
   while [disabled] — client wants an actual grey "can't click this yet"
   look until the checkbox is ticked, matching how disabled buttons read
   everywhere else on the site. */
#pcd-legal-confirm-continue:disabled {
	background: #cbd5e1 !important;
	border-color: #cbd5e1 !important;
	color: #64748b !important;
	opacity: 1;
	cursor: not-allowed;
}