/* SRAtix Client — Public Styles (Dark Navy Theme) */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
	--sratix-navy:       #0a1628;
	--sratix-navy-light: #111d33;
	--sratix-navy-mid:   #1a2a44;
	--sratix-border:     rgba(var(--sratix-fg-rgb), 0.08);
	--sratix-border-h:   rgba(var(--sratix-fg-rgb), 0.14);
	--sratix-text:       #e8edf4;
	/* Was #8a96a8: 5.6:1 on the cards, which passes AA and was still called
	   out as hard to read. #9dabbc is 7.2:1 on --sratix-navy-light and 7.8:1
	   on --sratix-navy, i.e. AAA, which is the bar that matters when the
	   complaint came from someone thinking about low vision. */
	--sratix-text-muted: #9dabbc;
	--sratix-red:        #e02020;
	--sratix-red-hover:  #c61a1a;
	--sratix-primary:    #e02020;
	--sratix-primary-hover: #c61a1a;
	/* Logo plate. Light on purpose, even though the portal is dark: the public
	   exhibitor index shows logos on #f2f5f7, so previewing them on navy here
	   told exhibitors a white wordmark looked fine when on site it vanishes. */
	--sratix-logo-plate: #f2f5f7;

	/* -- Theming --
	   Everything above is the SRAtix default. The tokens below exist so an
	   event can be re-skinned without forking this file: a theme stylesheet
	   redefines them under [data-sratix-theme="<name>"], and the widget stamps
	   that attribute on <html> from the event's configured theme.

	   Every default here is the value this file already used, so adding the
	   token changed nothing for an unthemed page.

	   The two *-rgb tokens carry bare triplets because the alpha steps in this
	   file run to sixteen distinct values, and a token per step would be
	   unusable. Written as rgba(var(--token), .12) they stay one knob each. */
	--sratix-fg-rgb: 255, 255, 255;   /* foreground, for alpha borders and washes */
	--sratix-primary-rgb: 224, 32, 32;
	--sratix-text-strong: #fff;       /* brightest text: headings, active states */
	--sratix-on-accent: #fff;         /* text sitting on a filled accent colour */
	--sratix-radius-sm: 6px;          /* buttons, chips, small chrome */
	--sratix-radius-md: 8px;          /* inputs, tiles */
	--sratix-radius-lg: 10px;         /* cards */
	--sratix-radius-xl: 12px;         /* panels, modals */
	--sratix-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Theme-override umbrella reset ──
   WordPress themes aggressively style button / [type=button] / [type=submit].
   This blanket reset neutralises those defaults inside any SRAtix container
   so that our own .sratix-btn / .sratix-qty-btn classes take effect cleanly.
   :where() gives zero specificity so any component class overrides this. */
:where(.sratix-page-wrap) button,
:where(.sratix-page-wrap) [type="button"],
:where(.sratix-page-wrap) [type="submit"],
:where(.sratix-modal) button,
:where(.sratix-modal) [type="button"],
:where(.sratix-modal) [type="submit"] {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-family: var(--sratix-font);
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	line-height: normal;
	white-space: normal;
	-webkit-appearance: none;
	appearance: none;
	user-select: none;
	transition: none;
}

:where(.sratix-page-wrap) button:hover,
:where(.sratix-page-wrap) button:focus,
:where(.sratix-page-wrap) button:active,
:where(.sratix-page-wrap) [type="button"]:hover,
:where(.sratix-page-wrap) [type="button"]:focus,
:where(.sratix-page-wrap) [type="button"]:active,
:where(.sratix-page-wrap) [type="submit"]:hover,
:where(.sratix-page-wrap) [type="submit"]:focus,
:where(.sratix-page-wrap) [type="submit"]:active,
:where(.sratix-modal) button:hover,
:where(.sratix-modal) button:focus,
:where(.sratix-modal) button:active,
:where(.sratix-modal) [type="button"]:hover,
:where(.sratix-modal) [type="button"]:focus,
:where(.sratix-modal) [type="button"]:active,
:where(.sratix-modal) [type="submit"]:hover,
:where(.sratix-modal) [type="submit"]:focus,
:where(.sratix-modal) [type="submit"]:active {
	outline: none;
	box-shadow: none;
	text-decoration: none;
}

/* ── Full-bleed page wrapper ── */
.sratix-page-wrap {
	position: relative;
	z-index: 999;
	background: var(--sratix-navy);
	color: var(--sratix-text);
	font-family: var(--sratix-font);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: calc(100vh - 100px);
	box-sizing: border-box;
	padding: 40px 24px 60px;
	overflow-x: hidden;
}

.sratix-page-inner {
	max-width: 1100px;
	margin: 0 auto;
}

/* Wider container for ticket grid (3 columns need more room) */
.sratix-page-inner:has(.sratix-cards--visitor),
.sratix-page-inner:has(.sratix-cards--exhibitor) {
	max-width: 1280px;
}

/* Exhibitor portal: no max-width constraint — panels use full available width */
.sratix-page-inner:has(#sratix-exhibitor-portal-widget) {
	max-width: none;
}

/* Override parent #content background when sratix page is present */
#content:has(.sratix-page-wrap),
.page-content:has(.sratix-page-wrap),
.entry-content:has(.sratix-page-wrap) {
	background-color: var(--sratix-navy) !important;
	overflow-x: hidden;
}

/* Override theme max-width so full-page SRAtix portals aren't clipped.
   The overflow-x above + the theme's .site-main max-width together cut off content;
   unset the width constraint here so the portal fills the page. */
body:not([class*=elementor-page-]) .site-main:has(.sratix-page-wrap) {
	max-width: none;
}

/* ── Legal document modal overlay ── */
.sratix-legal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.72);
	align-items: center;
	justify-content: center;
}
.sratix-legal-overlay.sratix-legal-open {
	display: flex;
}
.sratix-legal-body-lock {
	overflow: hidden;
}
.sratix-legal-close {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 100001;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0f172a;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	flex-shrink: 0;
}
.sratix-legal-close:hover {
	background: #f1f5f9;
}
.sratix-legal-dialog {
	width: min(820px, 96vw);
	height: 88vh;
	border-radius: var(--sratix-radius-xl);
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}
.sratix-legal-iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
	background: #f8f9fc;
}
@media (max-width: 600px) {
	.sratix-legal-overlay {
		align-items: flex-end;
	}
	.sratix-legal-dialog {
		width: 100vw;
		height: 94vh;
		border-radius: 16px 16px 0 0;
	}
	.sratix-legal-close {
		top: 10px;
		right: 10px;
	}
}

/* ── [sratix_legal] shortcode — legal prose rendered in WP pages ── */
.sratix-legal-prose {
	max-width: 1140px;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--sratix-text-strong);
}
.sratix-legal-prose .sratix-legal-title {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
}
.sratix-legal-prose h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 1.25rem; }
.sratix-legal-prose h2 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 0.6rem; }
.sratix-legal-prose h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.sratix-legal-prose p  { margin: 0 0 0.9rem; font-weight: 400; }
.sratix-legal-prose strong, .sratix-legal-prose b { font-weight: 700; }
.sratix-legal-prose em, .sratix-legal-prose i    { font-style: italic; }
.sratix-legal-prose ul, .sratix-legal-prose ol   { margin: 0 0 0.9rem; padding-left: 1.5rem; }
.sratix-legal-prose li { margin-bottom: 0.4rem; }
.sratix-legal-prose a  { color: #93c5fd; text-decoration: underline; }

/* ── Ticket Display Header ── */
.sratix-ticket-header {
	margin-bottom: 24px;
	text-align: center;
}

.sratix-ticket-title {
	font-weight: 700;
	color: var(--sratix-text);
	margin: 0 0 8px;
	line-height: 1.3;
}

.sratix-ticket-intro {
	color: var(--sratix-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 720px;
	margin: 0 auto;
}

.sratix-ticket-intro a {
	color: var(--sratix-primary);
	text-decoration: underline;
}

.sratix-ticket-intro ul,
.sratix-ticket-intro ol {
	text-align: left;
	padding-left: 1.5em;
	margin: 8px auto;
	max-width: 600px;
}

/* ── Pre-purchase logistics summary, under the booth grid ── */
/* Full width of the exhibitor wrapper, in the same panel treatment as the
   ticket cards above it. Title and text on the left, the portal link aside on
   the right across both rows, stacking under 760px. */
.sratix-prepurchase {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title link"
		"body  link";
	column-gap: 40px;
	align-items: start;
	margin: 36px 0 8px;
	padding: 26px 28px 28px;
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-lg);
	text-align: left;
}

.sratix-prepurchase__title {
	grid-area: title;
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.sratix-prepurchase__body {
	grid-area: body;
	color: var(--sratix-text-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

.sratix-prepurchase__body p {
	margin: 0 0 12px;
}

.sratix-prepurchase__body p:last-child {
	margin-bottom: 0;
}

.sratix-prepurchase__body a {
	color: var(--sratix-primary);
	text-decoration: underline;
}

.sratix-prepurchase__body ul,
.sratix-prepurchase__body ol {
	padding-left: 1.5em;
	margin: 8px 0 12px;
}

.sratix-prepurchase__link {
	grid-area: link;
	align-self: center;
	justify-self: end;
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-sm);
	color: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s, color 0.15s;
}

.sratix-prepurchase__link:hover,
.sratix-prepurchase__link:focus-visible {
	border-color: var(--sratix-primary);
	color: var(--sratix-primary);
}

@media (max-width: 760px) {
	.sratix-prepurchase {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"body"
			"link";
		padding: 22px 20px 24px;
	}

	.sratix-prepurchase__link {
		align-self: start;
		justify-self: start;
		margin-top: 20px;
	}
}

/* Booth sales closed: the pre-purchase panel with a primary edge and the
   mailto as the one action on the page. */
.sratix-exhibitor-closed {
	margin-top: 20px;
	border-left: 4px solid var(--sratix-primary);
}

.sratix-exhibitor-closed .sratix-prepurchase__title {
	color: var(--sratix-text);
}

.sratix-exhibitor-closed__address {
	color: var(--sratix-text);
	font-weight: 600;
	word-break: break-all;
}

.sratix-exhibitor-closed__email {
	background: var(--sratix-primary);
	border-color: var(--sratix-primary);
	color: #fff;
}

.sratix-exhibitor-closed__email:hover,
.sratix-exhibitor-closed__email:focus-visible {
	background: var(--sratix-primary-hover);
	border-color: var(--sratix-primary-hover);
	color: #fff;
}

/* Invite link accepted: a quiet note above the booth cards. */
.sratix-invite-banner {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 16px 0 4px;
	padding: 14px 18px;
	border-left: 4px solid var(--sratix-primary);
	border-radius: var(--sratix-radius-sm);
	background: var(--sratix-navy-light);
	color: var(--sratix-text-muted);
	font-size: 0.92rem;
	line-height: 1.5;
	text-align: left;
}

.sratix-invite-banner strong {
	color: var(--sratix-text);
}

.sratix-exhibitor-closed__invite {
	color: var(--sratix-primary);
	font-weight: 600;
}

/* ── Layout ── */
.sratix-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 20px 0;
}

/* Visitor & exhibitor tickets: 3 per row in a wider container */
.sratix-cards--visitor,
.sratix-cards--exhibitor {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.sratix-cards--visitor,
	.sratix-cards--exhibitor {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.sratix-cards--visitor,
	.sratix-cards--exhibitor {
		grid-template-columns: 1fr;
	}
}

.sratix-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0;
}

/* ── Ticket Card ── */
.sratix-ticket-card {
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-md);
	padding: 18px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sratix-ticket-card:hover {
	border-color: var(--sratix-border-h);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ── Card flex zones (ensures consistent alignment across cards) ── */
.sratix-card-top {
	position: relative;
}

.sratix-card-mid {
	margin-top: auto;
	padding-top: 12px;
}

.sratix-card-bot {
	padding-top: 4px;
}

/* ── Bundle badge (SRA Membership) ── */
.sratix-bundle-badge {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 4px 8px;
	border-radius: var(--sratix-radius-lg);
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.25;
	margin: 10px 0;
	background: rgba(var(--sratix-primary-rgb), 0.18);
	color: var(--sratix-red);
	letter-spacing: 0;
	white-space: normal;
}

.sratix-card-badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

/* ── Membership value line ── */
.sratix-membership-value {
	display: block;
	font-size: 0.78em;
	color: var(--sratix-text-muted);
	margin-top: 2px;
	line-height: 1.4;
}

.sratix-ticket-icon {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 26px;
	height: 26px;
	opacity: 0.18;
	color: var(--sratix-text);
	pointer-events: none;
}

.sratix-ticket-card:hover .sratix-ticket-icon {
	opacity: 0.3;
}

.sratix-ticket-card h3 {
	margin: 0 0 6px;
	font-size: 1.05em;
	color: var(--sratix-text);
	padding-right: 28px;
}

/* The dates a ticket name carries in brackets, on a row of their own. */
.sratix-ticket-card .sratix-ticket-name,
.sratix-ticket-card .sratix-ticket-dates {
	display: block;
}
.sratix-ticket-card .sratix-ticket-dates {
	margin-top: 4px;
	font-size: 0.8em;
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.85;
}

.sratix-desc {
	color: var(--sratix-text-muted);
	margin: 0 0 12px;
	font-size: 0.85em;
	line-height: 1.4;
}

.sratix-price {
	font-size: 1.25em;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--sratix-text);
}

.sratix-price {
	font-size: 1.25em;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--sratix-text);
}

/* ── Login Form Logo ── */
.sratix-login-form__header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 20px;
}

.sratix-login-form__header .sratix-login-form__title {
	margin-bottom: 4px;
}

.sratix-login-form__header .sratix-login-form__hint {
	margin: 0;
}

.sratix-login-form__logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	flex-shrink: 0;
	margin-top: 2px;
}

/* ── Buttons ── */
.sratix-btn {
	display: inline-block !important;
	padding: 8px 20px !important;
	border: none !important;
	border-radius: var(--sratix-radius-sm) !important;
	font-size: 0.9em !important;
	font-weight: 600 !important;
	font-family: var(--sratix-font) !important;
	cursor: pointer !important;
	text-decoration: none !important;
	color: inherit !important;
	background: transparent !important;
	transition: background 0.2s ease, border-color 0.2s ease !important;
}

.sratix-btn--primary {
	background: var(--sratix-red) !important;
	color: #fff !important;
}

.sratix-btn--primary:hover,
.sratix-btn--primary:focus {
	background: var(--sratix-red-hover) !important;
	color: #fff !important;
}

.sratix-btn--ghost:hover,
.sratix-btn--ghost:focus {
	background: var(--sratix-navy-mid) !important;
	color: var(--sratix-text) !important;
}

/* ── Badges ── */
.sratix-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--sratix-radius-xl);
	font-size: 0.85em;
	font-weight: 600;
}

.sratix-badge--sold-out {
	background: rgba(220, 38, 38, 0.15);
	color: #f87171;
}

/* ── Messages ── */
.sratix-error {
	color: #f87171;
	background: rgba(220, 38, 38, 0.1);
	padding: 12px 16px;
	border-radius: var(--sratix-radius-sm);
	border: 1px solid rgba(220, 38, 38, 0.2);
}

.sratix-info {
	color: #93c5fd;
	background: rgba(59, 130, 246, 0.1);
	padding: 12px 16px;
	border-radius: var(--sratix-radius-sm);
	border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ── Additional ticket card details ── */
.sratix-price-free {
	font-size: 1.2em;
	font-weight: 700;
	color: #4ade80;
	display: block;
	margin-bottom: 4px;
}

.sratix-avail {
	display: block;
	font-size: 0.8em;
	color: var(--sratix-text-muted);
	margin-bottom: 10px;
}

/* ── Modal overlay ── */
.sratix-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	transition: background 0.2s ease;
}

.sratix-modal--visible {
	background: rgba(0, 0, 0, 0.7);
}

/* Tooltip mini-modal stacks ABOVE the active registration/wizard modal (99999). */
.sratix-tooltip-modal {
	z-index: 100002;
}
.sratix-tooltip-modal .sratix-modal-box {
	max-width: 420px;
}

.sratix-modal-box {
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-xl);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	max-width: 800px;
	width: 100%;
	max-height: 90vh;
	/* The box is a fixed frame; only .sratix-modal-body scrolls so the title,
	   subtitle and wizard steps stay pinned (otherwise tall content like 3 staff
	   forms scrolls the header out of view / overlaps it). */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	animation: sratix-modal-in 0.2s ease;
	color: var(--sratix-text);
}

@keyframes sratix-modal-in {
	from { transform: translateY(12px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.sratix-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	color: var(--sratix-text-muted);
	padding: 4px 8px;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
}

.sratix-modal-close:hover {
	color: var(--sratix-text);
	background: var(--sratix-navy-mid);
}

.sratix-modal-title {
	margin: 0;
	padding: 24px 48px 0 24px;
	font-size: 1.3em;
	font-weight: 700;
	color: var(--sratix-text);
}

.sratix-modal-subtitle {
	margin: 6px 24px 0;
	color: var(--sratix-text-muted);
	font-size: 0.95em;
}

.sratix-modal-body {
	padding: 16px 24px;
	flex: 1 1 auto;
	/* min-height:0 lets this flex child shrink below its content so it can
	   scroll inside the fixed-height box instead of pushing the header. */
	min-height: 0;
	overflow-y: auto;
}

.sratix-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--sratix-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

/* ── Quantity stepper ── */
.sratix-qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.sratix-qty-stepper {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sratix-qty-btn {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	border: 1px solid var(--sratix-border-h) !important;
	border-radius: 50% !important;
	background: var(--sratix-navy-mid) !important;
	color: var(--sratix-text) !important;
	font-size: 1.3em !important;
	line-height: 1 !important;
	padding: 0 !important;
	transition: background 0.15s !important;
}

.sratix-qty-btn:hover:not(:disabled) { background: rgba(var(--sratix-fg-rgb), 0.1) !important; }
.sratix-qty-btn:disabled { opacity: 0.35; cursor: default; }

.sratix-qty-val {
	font-size: 1.4em;
	font-weight: 700;
	min-width: 30px;
	text-align: center;
	color: var(--sratix-text);
}

/* ── Field help / hint text ── */
.sratix-field-help {
	display: block;
	font-size: 0.82em;
	color: var(--sratix-text-muted);
	margin-top: 4px;
	line-height: 1.4;
}

.sratix-price-row {
	font-size: 1.1em;
	font-weight: 600;
	color: var(--sratix-text);
	margin-bottom: 20px;
}

/* ── Promo code row ── */
.sratix-promo-row {
	margin-top: 4px;
}

/* ── Include-ticket-for-myself toggle ── */
.sratix-self-ticket-row {
	margin: 12px 0 8px;
	padding: 10px 14px;
	border: 1px solid var(--sratix-primary);
	border-radius: var(--sratix-radius-md);
	background: rgba(var(--sratix-primary-rgb), 0.08);
}

.sratix-toggle-label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: 0.92em;
	font-weight: 500;
	color: var(--sratix-text);
	user-select: none;
}

.sratix-toggle-switch {
	position: relative;
	flex-shrink: 0;
}

.sratix-toggle-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.sratix-toggle-track {
	display: block;
	width: 40px;
	height: 22px;
	border-radius: 11px;
	background: var(--sratix-navy-mid);
	border: 1px solid var(--sratix-border-h);
	transition: background 0.2s, border-color 0.2s;
	position: relative;
}

.sratix-toggle-thumb {
	display: block;
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sratix-text-muted);
	transition: transform 0.2s, background 0.2s;
}

.sratix-toggle-switch input:checked + .sratix-toggle-track {
	background: #22c55e;
	border-color: #22c55e;
}

.sratix-toggle-switch input:checked + .sratix-toggle-track .sratix-toggle-thumb {
	transform: translateX(18px);
	background: #fff;
}

.sratix-toggle-text {
	line-height: 1.3;
}

.sratix-toggle-link {
	color: var(--sratix-accent, #60a5fa);
	text-decoration: underline;
	text-decoration-color: rgba(96, 165, 250, 0.4);
	text-underline-offset: 2px;
	transition: color 0.15s, text-decoration-color 0.15s;
}

.sratix-toggle-link:hover {
	color: #93c5fd;
	text-decoration-color: #93c5fd;
}

.sratix-promo-field {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

.sratix-promo-msg {
	margin: 6px 0 0;
	font-size: 0.88em;
}

.sratix-promo-msg--ok  { color: #4ade80; }
.sratix-promo-msg--err { color: #f87171; }

/* ── Membership Opt-out Box ── */
.sratix-optout-box {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-md);
	background: rgba(var(--sratix-fg-rgb), 0.03);
}

.sratix-optout-heading {
	margin: 0 0 10px 0;
	font-size: 0.88em;
	line-height: 1.4;
	color: var(--sratix-text);
}

.sratix-optout-label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 0.82em;
	font-weight: 400;
	color: var(--sratix-text-muted);
}

.sratix-optout-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.sratix-optout-desc {
	margin: 8px 0 0 26px;
	font-size: 0.8em;
	line-height: 1.5;
	color: var(--sratix-text-muted);
	opacity: 0.85;
}

/* ── Form fields ── */
.sratix-label {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	margin-bottom: 5px;
	color: var(--sratix-text-muted);
}

.sratix-req { color: var(--sratix-red); }

.sratix-field { margin-bottom: 14px; flex: 1; }

/* ── Separator — muted line with optional inline section title ── */
.sratix-separator {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 6px 0 2px;
}
.sratix-separator::before,
.sratix-separator::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--sratix-border);
}
.sratix-separator::before {
	flex: 0 0 0;
}
.sratix-separator-title {
	padding: 0 10px 0 0;
	font-size: 0.75em;
	font-weight: 500;
	color: var(--sratix-text-muted);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* When no title, render a plain full-width line */
.sratix-separator:not(:has(.sratix-separator-title))::before {
	flex: 1;
}

/* ── Radio / checkbox / yes-no groups ── */
.sratix-yesno-group,
.sratix-radio-group,
.sratix-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}
.sratix-toggle-group {
	flex-direction: column;
	gap: 8px;
}
label.sratix-checkbox-label {
	font-size: 0.9rem;
}

/* ── Sector picker (attendee_sector) — prominent button-style radio ── */
.sratix-sector-field {
	text-align: center;
	margin-bottom: 20px;
}
.sratix-sector-field > .sratix-label {
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--sratix-text);
	margin-bottom: 10px;
}
.sratix-sector-picker {
	justify-content: center;
	gap: 10px;
}
.sratix-sector-picker input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.sratix-sector-picker .sratix-radio-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 12px 28px;
	border: 2px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-lg);
	background: var(--sratix-navy-light);
	color: var(--sratix-text-muted);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
	user-select: none;
}
.sratix-sector-picker .sratix-radio-label:hover {
	border-color: rgba(var(--sratix-fg-rgb), 0.25);
	background: var(--sratix-navy-mid);
	color: var(--sratix-text);
}
.sratix-sector-picker .sratix-radio-label:has(input:checked) {
	border-color: var(--sratix-primary);
	background: rgba(var(--sratix-primary-rgb), 0.12);
	color: #fff;
	box-shadow: 0 0 0 1px var(--sratix-primary), 0 2px 10px rgba(var(--sratix-primary-rgb), 0.22);
}
@media (max-width: 480px) {
	.sratix-sector-picker {
		flex-direction: column;
		align-items: center;
	}
	.sratix-sector-picker .sratix-radio-label {
		width: 100%;
		max-width: 280px;
	}
}

/* ── Consent document link ── */
.sratix-consent-link {
	color: var(--sratix-accent, #6366f1);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: color 0.15s;
}
.sratix-consent-link:hover {
	color: var(--sratix-accent-hover, #818cf8);
	text-decoration-style: solid;
}

/* ── Custom form field grid (flex-wrap) ── */
.sratix-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
}
.sratix-form-fields > .sratix-field {
	flex: 1 1 100%;
}
@media (max-width: 480px) {
	.sratix-form-fields > .sratix-field { flex: 1 1 100% !important; min-width: 100% !important; }
}

.sratix-field-row {
	display: flex;
	gap: 14px;
}

.sratix-map-listing-callout {
	margin-top: 12px;
	padding: 14px 16px;
	border: 1px solid rgba(var(--sratix-fg-rgb), 0.12);
	border-radius: var(--sratix-radius-xl);
	background: rgba(var(--sratix-fg-rgb), 0.04);
	color: var(--sratix-text-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

.sratix-map-listing-callout strong {
	display: block;
	margin-bottom: 6px;
	color: var(--sratix-text);
	font-weight: 700;
}

.sratix-map-listing-callout a {
	color: var(--sratix-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sratix-map-geocode-action {
	margin-top: 8px;
}

.sratix-map-geocode-action .sratix-btn {
	width: 100%;
	white-space: nowrap;
}

.sratix-map-geocode-hint {
	margin-top: 8px;
}

.sratix-map-geocode-status {
	margin: 8px 0 0;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--sratix-text-muted);
	display: none;
}

.sratix-map-geocode-status.is-visible {
	display: block;
}

.sratix-map-geocode-status.is-success {
	color: #86efac;
}

.sratix-map-geocode-status.is-error {
	color: #fda4af;
}

@media (max-width: 480px) {
	.sratix-field-row { flex-direction: column; gap: 0; }
	.sratix-map-geocode-action .sratix-btn {
		width: 100%;
	}
}

.sratix-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-lg);
	font-size: 1em;
	font-family: var(--sratix-font);
	box-sizing: border-box;
	background: var(--sratix-navy);
	color: var(--sratix-text);
	transition: border-color 0.18s, box-shadow 0.18s;
}

.sratix-input::placeholder {
	color: var(--sratix-text-muted);
}
select.sratix-input.sratix-select-empty {
	color: var(--sratix-text-muted);
}

.sratix-input:focus {
	outline: none;
	border-color: var(--sratix-red);
	box-shadow: 0 0 0 3px rgba(var(--sratix-primary-rgb), 0.15);
}

/* ── File / image-upload inputs ── */
.sratix-file-input {
	color: var(--sratix-text-muted);
}
.sratix-file-input::file-selector-button {
	background: var(--sratix-navy-mid);
	color: var(--sratix-text-muted);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-md);
	padding: 6px 14px;
	margin-right: 12px;
	font-family: var(--sratix-font);
	font-size: 0.9em;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.sratix-file-input::file-selector-button:hover {
	background: var(--sratix-navy-light);
	color: var(--sratix-text);
}
.sratix-image-upload-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.sratix-image-upload-row .sratix-file-input {
	flex: 1;
	min-width: 0;
}
.sratix-image-preview {
	position: relative;
	flex-shrink: 0;
}
.sratix-image-preview img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--sratix-radius-sm);
	border: 1px solid var(--sratix-border-h);
	display: block;
}
.sratix-image-remove {
	position: absolute !important;
	top: -6px !important;
	right: -6px !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: var(--sratix-red) !important;
	color: #fff !important;
	font-size: 14px !important;
	line-height: 1 !important;
	padding: 0 !important;
	border: 2px solid var(--sratix-navy) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background 0.15s !important;
}
.sratix-image-remove:hover {
	background: var(--sratix-red-hover) !important;
}

.sratix-error-msg {
	color: #f87171;
	background: rgba(220, 38, 38, 0.1);
	border: 1px solid rgba(220, 38, 38, 0.2);
	border-radius: var(--sratix-radius-sm);
	padding: 10px 14px;
	font-size: 0.9em;
	margin-top: 4px;
}

/* ── Recipient details rows ── */
.sratix-recipient-row {
	margin-bottom: 12px;
	padding: 14px;
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-md);
	background: var(--sratix-navy);
}
.sratix-recipient-row .sratix-label {
	display: block;
	margin-bottom: 8px;
}
.sratix-rcpt-name-row {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
@media (max-width: 480px) {
	.sratix-rcpt-name-row { flex-direction: column; gap: 8px; }
}

/* ── Button variants ── */
.sratix-btn--outline {
	background: transparent !important;
	border: 1px solid var(--sratix-border-h) !important;
	color: var(--sratix-text) !important;
	white-space: nowrap !important;
}

.sratix-btn--outline:hover {
	background: var(--sratix-navy-mid) !important;
	border-color: rgba(var(--sratix-fg-rgb), 0.2) !important;
	color: #fff !important;
}

.sratix-btn--ghost {
	background: transparent !important;
	border: 1px solid var(--sratix-border) !important;
	color: var(--sratix-text-muted) !important;
}

.sratix-btn--ghost:hover {
	background: var(--sratix-navy-mid) !important;
	color: var(--sratix-text) !important;
}

/* ── Success banner ── */
.sratix-success-banner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: rgba(22, 163, 74, 0.1);
	border: 1px solid rgba(22, 163, 74, 0.25);
	border-radius: var(--sratix-radius-md);
	padding: 16px 18px;
	margin: 0 0 20px;
	position: relative;
}

.sratix-success-icon {
	background: #16a34a;
	color: #fff;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9em;
	font-weight: 700;
	flex-shrink: 0;
}

.sratix-success-text { flex: 1; color: #86efac; font-size: 0.95em; }

.sratix-success-close {
	background: none;
	border: none;
	font-size: 1.3em;
	cursor: pointer;
	color: #4ade80;
	padding: 0 4px;
	line-height: 1;
}

/* ── Test-mode success banner ── */
.sratix-success-banner--test {
	background: rgba(234, 179, 8, 0.1);
	border-color: rgba(234, 179, 8, 0.3);
}

.sratix-success-icon--test {
	background: #ca8a04;
}

.sratix-success-banner--test .sratix-success-text { color: #fde68a; }
.sratix-success-banner--test .sratix-success-close { color: #facc15; }

.sratix-test-actions {
	margin-top: 12px;
	padding: 10px 14px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: var(--sratix-radius-sm);
	font-size: 0.88em;
	max-height: 320px;
	overflow-y: auto;
}

.sratix-test-actions-heading {
	margin: 0 0 8px;
	font-weight: 600;
	color: #fbbf24;
}

.sratix-test-actions-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sratix-test-actions-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
	padding: 4px 0;
	border-bottom: 1px solid rgba(var(--sratix-fg-rgb), 0.06);
}

.sratix-test-actions-list li:last-child { border-bottom: none; }

.sratix-test-actions-list strong {
	color: #fbbf24;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.sratix-test-actions-list span { flex: 1; }

.sratix-test-actions-list code {
	display: block;
	width: 100%;
	font-size: 0.85em;
	color: #d4d4d8;
	background: rgba(0, 0, 0, 0.2);
	padding: 2px 6px;
	border-radius: 3px;
	word-break: break-all;
}

/* ── QR image (Booth QR) and the green badge (media rows) ── */
.sratix-qr {
	border-radius: var(--sratix-radius-sm);
	flex-shrink: 0;
}

.sratix-badge--valid  { background: rgba(22, 163, 74, 0.15); color: #4ade80; }

/* ── Schedule widget ── */
.sratix-schedule-day    { margin-bottom: 28px; }
.sratix-schedule-date   { font-size: 1.1em; font-weight: 700; margin: 0 0 12px; color: var(--sratix-text); }
.sratix-schedule-sessions { display: flex; flex-direction: column; gap: 10px; }

.sratix-session {
	display: flex;
	gap: 14px;
	border-left: 3px solid var(--sratix-red);
	padding: 8px 0 8px 14px;
}

.sratix-session-time    { font-weight: 700; min-width: 60px; color: var(--sratix-text-muted); font-size: 0.9em; flex-shrink: 0; }
.sratix-session-speaker { font-size: 0.88em; color: var(--sratix-text-muted); margin-top: 2px; }
.sratix-session-room    { font-size: 0.85em; color: rgba(138,150,168,0.7); margin-top: 2px; }

/* ── Auth prompt (shown when user is not logged in on My Tickets) ── */
.sratix-auth-prompt {
	text-align: center;
	padding: 48px 24px;
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-md);
	margin: 20px 0;
}

.sratix-auth-prompt__text {
	font-size: 1.1em;
	color: var(--sratix-text-muted);
	margin: 0 0 24px;
}

.sratix-auth-prompt__buttons {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.sratix-auth-prompt__buttons .sratix-btn {
	min-width: 160px;
	text-align: center;
	text-decoration: none;
}

/* ── Member Gate ── */
.sratix-member-gate {
	text-align: center;
	padding: 40px 0 20px;
}

.sratix-member-gate__title {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--sratix-text);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.sratix-member-gate__title-logo {
	max-height: 40px;
	width: auto;
	object-fit: contain;
}

.sratix-member-gate__subtitle {
	color: var(--sratix-text-muted);
	margin: 0 0 32px;
	font-size: 0.95em;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.sratix-member-gate__buttons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* When only 2 cards (SRA + no-membership), cap at 50/50 */
.sratix-member-gate--no-partners .sratix-member-gate__buttons {
	grid-template-columns: 1fr 1fr;
	max-width: 860px;
}

@media (max-width: 600px) {
	.sratix-member-gate__buttons {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
	.sratix-member-gate--no-partners .sratix-member-gate__buttons {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
	.sratix-member-btn--regular {
		max-width: 100%;
	}
}

.sratix-member-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	min-height: 150px;
	padding: 24px 20px;
	border: 2px solid rgba(var(--sratix-fg-rgb), 0.35);
	border-radius: var(--sratix-radius-xl);
	background: rgba(var(--sratix-fg-rgb), 0.06);
	color: var(--sratix-text);
	font-family: var(--sratix-font);
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	text-align: center;
	min-width: 0;
	overflow: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.sratix-member-btn:hover {
	border-color: var(--sratix-red);
	background: rgba(var(--sratix-fg-rgb), 0.05);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	transform: translateY(-2px);
}

.sratix-member-btn:active {
	background: rgba(var(--sratix-primary-rgb), 0.15) !important;
}

.sratix-member-btn--sra:hover {
	border-color: var(--sratix-red);
}

.sratix-member-btn--partner:hover {
	border-color: var(--sratix-red);
}

/* "Continue without membership" — full-width row below the grid */
.sratix-member-btn--regular {
	width: 100%;
	max-width: 860px;
	min-height: auto;
	flex-direction: column;
	justify-content: flex-start;
	padding: 24px 20px;
	margin: 4px auto 0;
	border-style: solid;
	font-weight: 500;
	opacity: 1;
	font-size: 0.95em;
	color: #fff;
}

.sratix-member-btn--regular:hover {
	opacity: 1;
}

/* When no partners: "no membership" becomes a card inside the grid */
.sratix-member-gate--no-partners .sratix-member-btn--regular {
	width: auto;
	max-width: none;
	min-height: 150px;
	flex-direction: column;
	padding: 24px 20px;
	margin: 0;
	font-size: 0.95em;
	font-weight: 600;
}

.sratix-member-btn__card-label {
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff;
	white-space: normal;
	min-width: 0;
}

.sratix-member-btn__sep {
	width: 40px;
	border: none;
	border-top: 2px solid rgba(var(--sratix-fg-rgb), 0.15);
	margin: 0;
}

.sratix-member-btn__card-desc {
	display: block;
	width: 100%;
	min-width: 0;
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.5;
	color: var(--sratix-text-muted);
	text-align: center;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	padding: 0 4px;
	box-sizing: border-box;
}

.sratix-member-btn__logo {
	max-width: 100px;
	max-height: 56px;
	object-fit: contain;
}

.sratix-member-btn__icon {
	font-size: 2em;
}

.sratix-member-btn__label {
	line-height: 1.3;
}

.sratix-member-btn__website {
	font-size: 0.8em;
	font-weight: 400;
	color: var(--sratix-text-muted);
	text-decoration: underline;
	opacity: 0.85;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.sratix-member-btn__website:hover {
	opacity: 1;
	color: var(--sratix-text);
	text-decoration: underline;
}

/* Membership disclaimer */
.sratix-member-gate__disclaimer {
	max-width: 860px;
	margin: 16px auto 0;
	padding: 12px 16px;
	font-size: 0.82em;
	line-height: 1.5;
	color: var(--sratix-text-muted);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-md);
	background: rgba(var(--sratix-fg-rgb), 0.03);
	text-align: left;
}

/* Why join the SRA? — expandable section */
.sratix-why-join {
	max-width: 860px;
	margin: 12px auto 0;
}

.sratix-why-join__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	font-size: 0.88em;
	font-weight: 600;
	color: #fff;
	padding: 10px 16px;
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-md);
	background: rgba(var(--sratix-fg-rgb), 0.03);
	transition: color 0.15s ease, border-color 0.15s ease;
	list-style: none;
}

.sratix-why-join__toggle::-webkit-details-marker {
	display: none;
}

.sratix-why-join__toggle::after {
	content: '\25BC';
	font-size: 0.65em;
	transition: transform 0.2s ease;
}

.sratix-why-join[open] .sratix-why-join__toggle::after {
	transform: rotate(180deg);
}

.sratix-why-join__toggle:hover {
	color: var(--sratix-text);
	border-color: rgba(var(--sratix-fg-rgb), 0.25);
}

.sratix-why-join__content {
	margin-top: 12px;
	padding: 24px;
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-xl);
	background: rgba(var(--sratix-fg-rgb), 0.04);
	text-align: left;
}

.sratix-why-join__logo {
	text-align: center;
	margin-bottom: 20px;
}

.sratix-why-join__logo-img {
	max-height: 48px;
	width: auto;
	object-fit: contain;
}

.sratix-why-join__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 20px;
}

@media (max-width: 560px) {
	.sratix-why-join__cols {
		grid-template-columns: 1fr;
	}
}

.sratix-why-join__col h4 {
	font-size: 0.95em;
	font-weight: 700;
	color: var(--sratix-text);
	margin: 0 0 6px;
}

.sratix-why-join__desc {
	font-size: 0.82em;
	color: var(--sratix-text-muted);
	margin: 0 0 10px;
	line-height: 1.45;
}

.sratix-why-join__col ul {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 0.82em;
	color: var(--sratix-text-muted);
	line-height: 1.7;
}

.sratix-why-join__cta {
	display: inline-block;
	padding: 8px 20px;
	font-size: 0.9em;
	font-weight: 600;
	color: #fff;
	background: var(--sratix-red, #e53e3e);
	border-radius: var(--sratix-radius-sm);
	text-decoration: none;
	transition: background 0.15s ease;
}

.sratix-why-join__cta-wrap {
	text-align: center;
	margin-top: 4px;
}

.sratix-why-join__cta:hover {
	background: var(--sratix-red-hover, #c53030);
}

/* ── Discrete "Details about SRA" link (when why-join is hidden) ── */
.sratix-why-join-link {
	text-align: center;
	margin-top: 18px;
}

.sratix-member-gate__bottom-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

.sratix-member-gate__bottom-logo-img {
	max-height: 40px;
	width: auto;
	object-fit: contain;
}

.sratix-why-join-link a {
	color: var(--sratix-text-muted, #94a3b8);
	font-size: 0.85rem;
	text-decoration: none;
	transition: color 0.2s;
}

.sratix-why-join-link a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ── SRA / RobotX Login Form ── */
.sratix-login-form {
	max-width: 400px;
	margin: 40px auto 20px;
}

.sratix-login-form__back {
	display: inline-block;
	color: var(--sratix-text-muted);
	text-decoration: none;
	margin-bottom: 16px;
	font-size: 0.9em;
}

.sratix-login-form__back:hover {
	color: var(--sratix-text);
}

.sratix-login-form__title {
	font-size: 1.3em;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--sratix-text);
}

.sratix-login-form__hint {
	color: var(--sratix-text-muted);
	font-size: 0.88em;
	margin: 0 0 20px;
	line-height: 1.4;
}

.sratix-login-form__submit {
	width: 100%;
	margin-top: 8px;
	padding: 10px 20px;
}

.sratix-login-form__links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 0.85em;
}

.sratix-login-form__links a {
	color: var(--sratix-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sratix-login-form__links a:hover {
	color: var(--sratix-text);
}

.sratix-login-form__links-sep {
	color: var(--sratix-text-muted);
	opacity: 0.6;
}

/* ── Navigation Links Row ── */
.sratix-nav-links {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

/* ── Back to Gate Link ── */
.sratix-back-to-gate {
	display: inline-block;
	color: var(--sratix-text-muted);
	text-decoration: none;
	font-size: 0.84em;
	padding: 5px 14px;
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-sm);
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sratix-back-to-gate:hover {
	color: var(--sratix-text);
	border-color: var(--sratix-border-h);
	background: rgba(var(--sratix-fg-rgb), 0.04);
}

/* ── Welcome Banner ── */
.sratix-welcome-banner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	background: rgba(59, 130, 246, 0.1);
	border: 1px solid rgba(59, 130, 246, 0.25);
	border-radius: var(--sratix-radius-md);
	padding: 14px 16px;
	margin-bottom: 20px;
	color: var(--sratix-text);
	font-size: 0.9em;
}

.sratix-welcome-left {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

.sratix-welcome-logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	flex-shrink: 0;
	margin-top: 1px;
	opacity: 0.85;
}

.sratix-welcome-info {
	flex: 1;
	min-width: 0;
}

.sratix-welcome-text {
	display: block;
	line-height: 1.4;
}

/* ── Role Choice Screen ── */
.sratix-role-choice {
	text-align: center;
	padding: 40px 0 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 260px);
}

.sratix-role-choice__title {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--sratix-text);
}

.sratix-role-choice__subtitle {
	color: var(--sratix-text-muted);
	margin: 0 0 32px;
	font-size: 0.95em;
}

.sratix-role-choice__buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.sratix-role-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 260px;
	min-height: 180px;
	padding: 28px 20px;
	border: 2px solid var(--sratix-border);
	border-radius: var(--sratix-radius-xl);
	background: var(--sratix-navy-light);
	color: var(--sratix-text);
	font-family: var(--sratix-font);
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	text-align: center;
}

.sratix-role-btn:hover {
	border-color: var(--sratix-text-strong);
	background: rgba(var(--sratix-fg-rgb), 0.05);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	transform: translateY(-2px);
}

.sratix-role-btn--visitor:hover {
	border-color: #3b82f6;
}

.sratix-role-btn--exhibitor:hover {
	border-color: #f59e0b;
}

.sratix-role-btn__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sratix-text-muted);
}

.sratix-role-btn:hover .sratix-role-btn__icon {
	color: var(--sratix-text);
}

.sratix-role-btn--visitor:hover .sratix-role-btn__icon {
	color: #3b82f6;
}

.sratix-role-btn--exhibitor:hover .sratix-role-btn__icon {
	color: #f59e0b;
}

.sratix-role-btn__label {
	font-weight: 700;
	font-size: 1.1em;
}

.sratix-role-btn__desc {
	font-weight: 400;
	font-size: 0.8em;
	color: var(--sratix-text-muted);
	line-height: 1.35;
	align-self: stretch;
	word-wrap: break-word;
	overflow-wrap: break-word;
	padding: 0;
}

/* ── Wizard Step Indicator ── */
.sratix-wizard-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 16px 24px 8px;
	gap: 0;
	overflow: hidden;
}

.sratix-wizard-step {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	gap: 6px;
	opacity: 0.45;
	transition: opacity 0.2s;
}

.sratix-wizard-step--active {
	opacity: 1;
}

.sratix-wizard-step--done {
	opacity: 0.7;
}

.sratix-wizard-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sratix-navy-mid);
	border: 2px solid var(--sratix-border-h);
	font-weight: 700;
	font-size: 0.85em;
	flex-shrink: 0;
}

.sratix-wizard-step--active .sratix-wizard-step__num {
	border-color: var(--sratix-primary);
	background: rgba(var(--sratix-primary-rgb), 0.15);
	color: var(--sratix-primary);
}

.sratix-wizard-step--done .sratix-wizard-step__num {
	border-color: #22c55e;
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.sratix-wizard-step__label {
	font-size: 0.82em;
	font-weight: 500;
	line-height: 1.15;
	min-width: 0;
	max-width: 100%;
	text-align: center;
	white-space: normal;
}

.sratix-wizard-step__line {
	width: auto;
	min-width: 8px;
	max-width: 18px;
	height: 2px;
	background: var(--sratix-border-h);
	margin: 0 4px;
	flex: 0 1 18px;
}

/* ── Wizard Body ── */
.sratix-wizard-body {
	padding: 0;
}

.sratix-wizard-subtitle {
	color: var(--sratix-text-muted);
	font-size: 0.9em;
	margin: 0 0 16px;
}

.sratix-modal-box--wide {
	max-width: 640px;
	overflow-x: hidden;
}

/* ── Info Callout ── */
.sratix-info-callout {
	background: rgba(59, 130, 246, 0.08);
	border: 1px solid rgba(59, 130, 246, 0.2);
	border-radius: var(--sratix-radius-md);
	padding: 12px 16px;
	font-size: 0.85em;
	color: var(--sratix-text-muted);
	margin-top: 16px;
	line-height: 1.4;
}

/* Temporary mail-outage notice (2026-11-09): above each widget, amber so it
   reads as a warning rather than the blue tips around it. */
.sratix-info-callout.sratix-mail-notice {
	background: rgba(245, 158, 11, 0.10);
	border-color: rgba(217, 119, 6, 0.45);
	color: inherit;
	font-size: 0.92em;
	margin: 0 0 16px;
}

/* ── Recipient / Staff Block ── */
.sratix-recipient-block {
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-md);
	padding: 12px 16px;
	margin-bottom: 12px;
	background: rgba(var(--sratix-fg-rgb), 0.02);
}

/* ── Richtext Editor ── */
.sratix-richtext-wrap {
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-md);
	overflow: hidden;
	background: var(--sratix-navy-mid);
}

.sratix-richtext-toolbar {
	display: flex;
	gap: 2px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--sratix-border);
	background: rgba(var(--sratix-fg-rgb), 0.03);
	flex-wrap: wrap;
}

.sratix-richtext-btn {
	background: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--sratix-text-muted);
	font-size: 0.85em;
	padding: 4px 8px;
	cursor: pointer;
	font-family: var(--sratix-font);
	transition: background 0.15s, color 0.15s;
}

.sratix-richtext-btn:hover {
	background: rgba(var(--sratix-fg-rgb), 0.08);
	color: var(--sratix-text);
}

.sratix-richtext-editor {
	min-height: 120px;
	padding: 12px 14px;
	color: var(--sratix-text);
	font-family: var(--sratix-font);
	font-size: 0.9em;
	line-height: 1.5;
	outline: none;
	overflow-y: auto;
	max-height: 250px;
}

.sratix-richtext-editor:focus {
	box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.sratix-richtext-editor ul,
.sratix-richtext-editor ol {
	margin: 4px 0;
	padding-left: 20px;
}

.sratix-richtext-editor a {
	color: #60a5fa;
	text-decoration: underline;
}

/* ── The row above the tickets: the way back left, the code field right; the
   code field alone sits in the middle (IHF round 3) ── */
.sratix-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 16px;
}
.sratix-toolbar > .sratix-nav-links,
.sratix-toolbar > .sratix-code-row {
	margin: 0;
}
.sratix-toolbar > .sratix-code-row {
	margin-left: auto;
	flex: 0 1 440px;
}
.sratix-toolbar--code-only {
	justify-content: center;
}
.sratix-toolbar--code-only > .sratix-code-row {
	margin: 0 auto;
	align-items: center;
}

/* ── The ticket at the top of the form when the quantity step was passed over ── */
.sratix-your-ticket {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-sm);
	background: var(--sratix-navy-mid);
}
.sratix-your-ticket__label {
	flex-basis: 100%;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sratix-text-muted);
}
.sratix-your-ticket__name {
	font-weight: 600;
	color: var(--sratix-text-strong);
}
.sratix-your-ticket__name .sratix-ticket-dates {
	display: block;
	font-weight: 400;
	font-style: italic;
	font-size: 0.85em;
	color: var(--sratix-text-muted);
}
.sratix-your-ticket__price {
	margin-left: auto;
	font-weight: 700;
	color: var(--sratix-primary);
}
.sratix-your-ticket__save {
	flex-basis: 100%;
	text-align: right;
	font-size: 0.85em;
	color: var(--sratix-text-muted);
}

/* ── Ticket groups: the "which ticket" step (IHF round 3) ── */
.sratix-role-choice--groups {
	min-height: 0;
	padding: 16px 0 8px;
}
.sratix-role-btn--group {
	width: 220px;
	min-height: 140px;
}
.sratix-group-note {
	max-width: 760px;
	margin: 4px auto 0;
	color: var(--sratix-text-muted);
	font-size: 0.9em;
	text-align: center;
}

/* ── Responsive: Wizard / Role ── */
@media (max-width: 600px) {
	.sratix-role-choice__buttons {
		flex-direction: column;
		align-items: center;
	}

	.sratix-role-btn {
		width: 100%;
		max-width: 280px;
	}

	.sratix-toolbar > .sratix-code-row {
		flex-basis: 100%;
		margin-left: 0;
	}

	.sratix-wizard-steps {
		gap: 0;
		padding: 12px 16px 8px;
	}

	.sratix-wizard-step__label {
		display: none;
	}

	.sratix-wizard-step__line {
		width: 24px;
	}

	.sratix-modal-box--wide {
		max-width: 100%;
	}
}

.sratix-welcome-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.sratix-welcome-tier {
	font-size: 0.85em;
	color: var(--sratix-text-muted);
	text-transform: capitalize;
}

.sratix-welcome-discount {
	display: inline-block;
	padding: 1px 8px;
	border-radius: var(--sratix-radius-lg);
	font-size: 0.78em;
	font-weight: 600;
	background: rgba(59, 130, 246, 0.15);
	color: #60a5fa;
	white-space: nowrap;
}

.sratix-welcome-disclaimer {
	font-size: 0.78em;
	color: var(--sratix-text-muted);
	margin: 4px 0 0;
	opacity: 0.8;
	line-height: 1.3;
}

.sratix-welcome-change {
	color: var(--sratix-text-muted);
	text-decoration: none;
	font-size: 0.8em;
	white-space: nowrap;
	padding: 4px 10px;
	border: 1px solid var(--sratix-border);
	border-radius: 4px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sratix-welcome-change:hover {
	color: var(--sratix-text);
	border-color: var(--sratix-border-h);
}

/* ── Member Pricing Display ── */
.sratix-price-wrap {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 4px;
}

.sratix-price-original {
	font-size: 1em;
	text-decoration: line-through;
	color: var(--sratix-text-muted);
}

.sratix-price-member {
	font-size: 1.25em;
	font-weight: 700;
	color: var(--sratix-red);
}

.sratix-price-early {
	font-size: 1.25em;
	font-weight: 700;
	color: #34d399;
}

.sratix-early-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--sratix-radius-lg);
	font-size: 0.75em;
	font-weight: 600;
	background: rgba(52, 211, 153, 0.15);
	color: #34d399;
	white-space: nowrap;
}

.sratix-savings-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--sratix-radius-lg);
	font-size: 0.75em;
	font-weight: 600;
	background: rgba(var(--sratix-primary-rgb), 0.15);
	color: var(--sratix-red);
	white-space: nowrap;
}

/* "Save CHF 110.00" under a struck-through price: off unless a theme shows it
   (sratix-theme-ihf.css does), so existing sites keep their cards as they were. */
.sratix-price-save {
	display: none;
}

/* ── "Have a code?": a code that opens hidden ticket types (IHF plan 3.2).
   A quiet link above the ticket list that opens a one-line form; once a code
   is in force, the code and a way to remove it. Shown only where public-info
   says the event has such tickets, or a code came in the address. ── */
.sratix-code-row {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	margin: 12px 0 4px;
}
.sratix-code-row--active {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px 16px;
}
.sratix-code-toggle,
.sratix-code-remove {
	all: unset;
	cursor: pointer;
	font-size: 0.9em;
	color: var(--sratix-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sratix-code-toggle:focus-visible,
.sratix-code-remove:focus-visible {
	outline: 2px solid var(--sratix-primary);
	outline-offset: 2px;
}
.sratix-code-form {
	width: 100%;
	max-width: 440px;
}
.sratix-code-form[hidden],
.sratix-code-toggle[hidden],
.sratix-promo-row[hidden] {
	display: none;
}
.sratix-code-form .sratix-input {
	flex: 1 1 auto;
	min-width: 0;
}
.sratix-code-msg {
	margin: 6px 0 0;
	min-height: 1.2em;
	font-size: 0.88em;
	color: var(--sratix-text-muted);
}
.sratix-code-msg--err { color: #f87171; }
.sratix-code-chip {
	font-size: 0.9em;
	color: var(--sratix-text);
	padding: 4px 10px;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-lg);
}
.sratix-unlocked {
	margin: 8px 0 28px;
}
.sratix-unlocked__title {
	margin: 16px 0 0;
	font-size: 1.1em;
	color: var(--sratix-text);
}

/* ── Maintenance Screen ── */
.sratix-maintenance {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 50vh;
	padding: 60px 24px;
}

.sratix-maintenance__icon {
	color: var(--sratix-text-muted);
	margin-bottom: 24px;
	opacity: 0.6;
	animation: sratix-maint-pulse 3s ease-in-out infinite;
}

@keyframes sratix-maint-pulse {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50%      { opacity: 0.7; transform: scale(1.05); }
}

.sratix-maintenance__title {
	font-size: 1.8em;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--sratix-text);
}

.sratix-maintenance__text {
	font-size: 1.1em;
	line-height: 1.6;
	color: var(--sratix-text-muted);
	max-width: 520px;
	margin: 0;
}

/* ── Button size modifier ── */
.sratix-btn--sm {
	padding: 8px 16px;
	font-size: 0.88em;
}

/* ── Exhibitor Portal ── */
.sratix-exhibitor-portal {
	margin: 20px 0;
}

/* Portal header with title and welcome */
.sratix-portal-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sratix-border);
}

.sratix-portal-header__logo {
	flex-shrink: 0;
}

.sratix-portal-header__logo-wrap {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--sratix-radius-xl);
	overflow: hidden;
	cursor: pointer;
	position: relative;
	transition: box-shadow 0.18s;
}

.sratix-portal-header__logo-wrap--has-img {
	background: var(--sratix-logo-plate);
	border: 1px solid var(--sratix-border-h);
	padding: 4px;
}

.sratix-portal-header__logo-wrap--has-img:hover,
.sratix-portal-header__logo-wrap--has-img:focus-within {
	box-shadow: 0 0 0 2px var(--sratix-red);
}

.sratix-portal-header__logo-wrap--empty {
	background: var(--sratix-navy-light);
	border: 2px dashed var(--sratix-border-h);
}

.sratix-portal-header__logo-wrap--empty:hover,
.sratix-portal-header__logo-wrap--empty:focus-within {
	border-color: var(--sratix-red);
}

/* contain, never cover. Company logos are mostly wide wordmarks, and cover
   crops both ends off the mark. width/height auto keeps the box at the logo's
   own aspect, so the plate padding is the only padding around it. */
.sratix-portal-header__logo-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.sratix-portal-header__logo-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 22, 40, 0.75);
	color: #fff;
	font-size: 0.65em;
	font-weight: 600;
	text-align: center;
	padding: 4px;
	opacity: 0;
	transition: opacity 0.18s;
	pointer-events: none;
}

.sratix-portal-header__logo-wrap--has-img:hover .sratix-portal-header__logo-overlay,
.sratix-portal-header__logo-wrap--has-img:focus-within .sratix-portal-header__logo-overlay {
	opacity: 1;
}

.sratix-portal-header__logo-ph {
	font-size: 0.6em;
	color: var(--sratix-text-muted);
	text-align: center;
	line-height: 1.3;
	padding: 4px;
}

.sratix-portal-header__text {
	flex: 1;
	min-width: 0;
}

.sratix-portal-header__brand {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	line-height: 1;
}

.sratix-portal-header__brand > svg {
	opacity: 0.6;
}

.sratix-portal-logout {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 0.75em;
	font-weight: 500;
	color: var(--sratix-text-muted);
	background: transparent;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-sm);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	white-space: nowrap;
}

.sratix-portal-logout:hover {
	color: var(--sratix-text);
	border-color: var(--sratix-red);
	background: rgba(var(--sratix-primary-rgb), 0.08);
}

.sratix-portal-logout svg {
	width: 14px;
	height: 14px;
}

.sratix-portal-title {
	font-size: 1.6em;
	font-weight: 700;
	color: var(--sratix-text);
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}

.sratix-portal-welcome {
	font-size: 1em;
	color: var(--sratix-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* ── Tabs — pill-style, scrollable on mobile ── */
.sratix-portal-tabs {
	display: flex;
	gap: 6px;
	padding: 6px;
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-xl);
	margin-bottom: 28px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.sratix-portal-tab {
	display: flex;
	align-items: center;
	gap: 6px;
	/* 18px here fitted the eight tabs this strip was designed around. The ninth
	   pushed the row past a 1400px window, so the padding comes back rather than
	   the strip starting life already scrolled. */
	padding: 10px 14px;
	font-size: 0.9em;
	font-weight: 500;
	color: var(--sratix-text-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--sratix-radius-md);
	transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.sratix-portal-tab:hover {
	color: var(--sratix-text);
	background: var(--sratix-navy-mid);
}

.sratix-portal-tab--active {
	color: #fff;
	background: var(--sratix-red);
	border-color: var(--sratix-red);
	box-shadow: 0 2px 8px rgba(var(--sratix-primary-rgb), 0.25);
}

.sratix-portal-tab--active:hover {
	background: var(--sratix-red-hover);
	border-color: var(--sratix-red-hover);
}

.sratix-portal-tab__icon {
	display: flex;
	align-items: center;
	line-height: 1;
}

.sratix-portal-tab__icon svg {
	width: 16px;
	height: 16px;
}

.sratix-portal-tab__label {
	line-height: 1;
}

@media (max-width: 700px) {
	.sratix-portal-header {
		gap: 12px;
	}
	.sratix-portal-header__logo-wrap {
		width: 48px;
		height: 48px;
		border-radius: var(--sratix-radius-lg);
	}
	.sratix-portal-header__brand > svg {
		display: none;
	}
}

/* ── The tab strip on narrow screens ───────────────────────────────────
   Nine tabs, and a horizontal scroll hides navigation behind a gesture nobody
   is told about. Three steps down, every width below measured rather than
   guessed:

     <=1400px  tighter padding and type. Nine tabs need 1318px at base size and
               1149px here, so this is what keeps a single row on a laptop
     <=1000px  wrapping instead of scrolling. At 900px a scrolling row hides
               about three tabs; wrapped it is two rows and 74px tall, which
               beats hiding three pages of the portal
     <=430px   tighter again: takes a 360px phone from 176px of tabs to 155px.
               It stays five rows there. Two labels fill a 278px row and no
               amount of padding changes that

   The tabs keep `white-space: nowrap` and `flex-shrink: 0` throughout, so they
   shorten by losing padding, never by breaking a label across two lines. */
@media (max-width: 1400px) {
	.sratix-portal-tabs {
		gap: 4px;
		padding: 4px;
	}
	.sratix-portal-tab {
		gap: 5px;
		padding: 8px 12px;
		font-size: 0.82em;
	}
	.sratix-portal-tab__icon svg {
		width: 14px;
		height: 14px;
	}
}

@media (max-width: 1000px) {
	.sratix-portal-tabs {
		flex-wrap: wrap;
		overflow-x: visible;
	}
	.sratix-portal-tab {
		gap: 4px;
		padding: 7px 10px;
		font-size: 0.8em;
	}
}

@media (max-width: 430px) {
	.sratix-portal-tabs {
		gap: 3px;
		padding: 3px;
	}
	.sratix-portal-tab {
		padding: 6px 8px;
		font-size: 0.76em;
	}
	.sratix-portal-tab__icon svg {
		width: 13px;
		height: 13px;
	}
}

.sratix-portal-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sratix-portal-logo-section {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px;
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-xl);
}

/* Full-width third row under the preview and the buttons.
   flex-shrink must be 0, or the hint squeezes onto the first row whenever the
   buttons are narrow (the empty state has no Remove button). No max-width
   either: flex line-breaking measures the basis *after* clamping it, so a
   max-width small enough to fit the leftover space cancels the wrap. */
.sratix-portal-logo-hint {
	flex: 0 0 100%;
	margin: 0;
}

.sratix-portal-logo-preview {
	box-sizing: border-box;
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	border-radius: var(--sratix-radius-lg);
	overflow: hidden;
	background: var(--sratix-logo-plate);
	border: 1px solid var(--sratix-border-h);
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sratix-portal-logo-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.sratix-portal-logo-placeholder {
	font-size: 0.75em;
	/* On the light plate, not the navy card. */
	color: #5a6b7d;
	text-align: center;
	padding: 8px;
}

.sratix-portal-logo-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sratix-portal-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 600px) {
	.sratix-portal-fields { grid-template-columns: 1fr; }
}

.sratix-field-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sratix-field-group--full {
	grid-column: 1 / -1;
}

.sratix-field-group .sratix-label {
	margin: 0;
}

.sratix-field-group .sratix-input {
	margin: 0;
}

.sratix-field-group textarea.sratix-input {
	resize: vertical;
	min-height: 80px;
}

.sratix-required {
	color: var(--sratix-red);
}

.sratix-portal-fieldset {
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-xl);
	padding: 20px;
	margin: 0;
}

.sratix-portal-legend {
	font-weight: 600;
	font-size: 0.95em;
	color: var(--sratix-text);
	padding: 0 8px;
}

.sratix-portal-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sratix-portal-status {
	font-size: 0.9em;
	transition: opacity 0.2s;
}

.sratix-portal-status--success {
	color: #4ade80;
}

.sratix-portal-status--error {
	color: #f87171;
}

/* Demo text typed but not stored yet (media tab). */
.sratix-portal-unsaved {
	font-size: 0.9em;
	color: #fbbf24;
}

.sratix-portal-unsaved[hidden] {
	display: none;
}

.sratix-portal-hint {
	font-size: 0.85em;
	color: var(--sratix-text-muted);
	margin: 2px 0 8px;
	line-height: 1.4;
}

/* Event detail cards */
.sratix-event-card {
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-xl);
	padding: 24px;
	margin-bottom: 16px;
}

.sratix-event-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.sratix-event-card__title {
	font-size: 1.1em;
	font-weight: 600;
	color: var(--sratix-text);
	margin: 0;
}

.sratix-badge--pending {
	background: rgba(234, 179, 8, 0.15);
	color: #facc15;
}

/* ── Staff Panel ─────────────────────────────────────────────────── */

.sratix-staff-panel__title {
	font-size: 1.1em;
	font-weight: 600;
	color: var(--sratix-text);
	margin: 0 0 16px;
}

.sratix-staff-header {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

/* Staff beyond the included seats, on their own tickets. */
.sratix-badge--extra {
	background: rgba(220, 38, 38, 0.15);
	color: #f87171;
	margin-left: 4px;
}

.sratix-staff-extra-count {
	color: #f87171;
}

.sratix-staff-form__intro {
	font-size: 0.9em;
	color: var(--sratix-text-muted);
	margin: -8px 0 16px;
}

.sratix-staff-count {
	font-size: 0.9em;
	color: var(--sratix-text-muted);
}

.sratix-staff-table-wrap {
	overflow-x: auto;
	margin-bottom: 16px;
}

.sratix-staff-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

.sratix-staff-table th,
.sratix-staff-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--sratix-border);
	color: var(--sratix-text);
}

.sratix-staff-table th {
	font-weight: 600;
	color: var(--sratix-text-muted);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.sratix-staff-actions {
	display: flex;
	gap: 6px;
	white-space: nowrap;
}

.sratix-staff-form {
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-xl);
	padding: 24px;
	margin-top: 16px;
}

.sratix-staff-form__title {
	font-size: 1em;
	font-weight: 600;
	color: var(--sratix-text);
	margin: 0 0 16px;
}

.sratix-btn--xs {
	padding: 4px 8px;
	font-size: 0.75em;
}

.sratix-btn--danger {
	color: #f87171;
}

.sratix-btn--danger:hover {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.1);
}

.sratix-badge--default {
	background: rgba(156, 163, 175, 0.15);
	color: #9ca3af;
}

/* ── Media Panel ─────────────────────────────────────────────────── */

.sratix-media-panel {
	padding: 4px 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.sratix-media-section {
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-xl);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sratix-media-section__header {
	margin-bottom: 4px;
}

.sratix-media-section__title {
	font-size: 1.15em;
	font-weight: 600;
	color: var(--sratix-text);
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sratix-media-section__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.sratix-media-section__icon svg {
	width: 18px;
	height: 18px;
}

.sratix-media-section__desc {
	font-size: 0.9em;
	color: var(--sratix-text-muted);
	margin: 0;
	line-height: 1.5;
}

.sratix-media-tip {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 10px;
	margin-bottom: 16px;
	padding: 10px 14px;
	background: rgba(var(--sratix-fg-rgb), 0.035);
	border: 1px solid var(--sratix-border);
	/*
	 * Amber, matching .sratix-portal-info-box--provisional.
	 *
	 * This was brand red, and the design review asked what the difference
	 * between the red and the yellow boxes was. There was not one worth a
	 * second colour. Two signals now, and no ambiguity:
	 *   colour  amber = pay attention, plain = neutral information
	 *   icon    lightbulb = a hint you can close, i-in-a-circle = it stays
	 */
	border-left: 2px solid rgba(234, 179, 8, 0.55);
	border-radius: var(--sratix-radius-md);
	font-size: 0.85em;
	color: var(--sratix-text-muted);
	line-height: 1.5;
}

.sratix-media-tip__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.sratix-media-tip__icon svg {
	width: 16px;
	height: 16px;
}

.sratix-media-sub-title {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--sratix-text);
	margin: 8px 0 4px;
}

.sratix-media-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.sratix-media-item {
	position: relative;
	width: 120px;
	height: 90px;
	border-radius: var(--sratix-radius-md);
	overflow: hidden;
	border: 1px solid var(--sratix-border-h);
}

.sratix-media-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sratix-media-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sratix-media-remove:hover {
	background: rgba(239, 68, 68, 0.8);
}

.sratix-media-add {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.sratix-media-add .sratix-field-group {
	flex: 1;
	min-width: 180px;
}

.sratix-field-group--grow {
	flex: 2 !important;
}

.sratix-video-link-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 12px;
	padding: 8px;
	background: var(--sratix-navy-mid);
	border-radius: var(--sratix-radius-md);
}

.sratix-video-link-content {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 1;
	min-width: 0;
}

.sratix-video-link-input {
	flex: 1;
}

.sratix-video-embed-preview {
	width: 100%;
	margin-top: 6px;
	border-radius: var(--sratix-radius-sm);
	overflow: hidden;
	line-height: 0;
}

.sratix-video-embed-preview iframe {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: var(--sratix-radius-sm);
}

.sratix-badge--xs {
	font-size: 0.7em;
	padding: 2px 6px;
}

/* ── Analytics Panel (Phase 1d) ──────────────────────────────────────── */

.sratix-analytics-panel {
	padding: 8px 0;
}

.sratix-kpi-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin: 20px 0;
}

.sratix-kpi-card {
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-xl);
	padding: 20px 16px;
	text-align: center;
}

.sratix-kpi-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--sratix-primary, #4f8cff);
	line-height: 1.1;
}

.sratix-kpi-label {
	font-size: 0.85rem;
	color: var(--sratix-text-muted);
	margin-top: 6px;
}

.sratix-booth-qr-section {
	margin: 24px 0;
	padding: 16px;
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-md);
}

.sratix-booth-qr-section h4 {
	margin: 0 0 8px;
}

.sratix-qr-payload {
	margin-top: 12px;
}

.sratix-qr-payload code {
	display: block;
	background: #1e293b;
	color: var(--sratix-text);
	padding: 12px 16px;
	border-radius: var(--sratix-radius-sm);
	font-size: 0.9rem;
	word-break: break-all;
	margin-bottom: 8px;
}

.sratix-chart-section {
	margin: 24px 0;
}

.sratix-chart-section h4 {
	margin: 0 0 12px;
}

.sratix-chart-section canvas {
	max-width: 100%;
	height: auto;
}

/* ── Logistics Panel (Stock Purchasing) ──────────────────────────────── */

.sratix-logistics-panel {
	padding: 8px 0;
}

.sratix-logistics-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}

.sratix-logistics-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	background: var(--sratix-navy-mid, #1a2332);
	border: 1px solid var(--sratix-border, #2d3a4a);
	border-radius: var(--sratix-radius-md);
}

.sratix-logistics-item__name {
	font-weight: 600;
	font-size: 0.95rem;
}

.sratix-logistics-item__desc {
	font-size: 0.82rem;
	opacity: 0.7;
	margin-top: 2px;
}

.sratix-logistics-item__price {
	font-size: 0.9rem;
	font-weight: 600;
	margin-top: 4px;
	color: var(--sratix-accent, #3b82f6);
}

.sratix-logistics-item__stock {
	font-size: 0.8rem;
	opacity: 0.6;
	margin-top: 2px;
}

.sratix-logistics-item__qty {
	flex-shrink: 0;
	width: 80px;
}

.sratix-logistics-qty {
	width: 100%;
	text-align: center;
}

.sratix-logistics-out-of-stock {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.78rem;
	background: rgba(239, 68, 68, 0.15);
	color: #ef4444;
	border-radius: var(--sratix-radius-sm);
	white-space: nowrap;
}

.sratix-logistics-order-summary {
	margin-top: 16px;
	padding: 16px;
	background: var(--sratix-navy-mid, #1a2332);
	border: 1px solid var(--sratix-border, #2d3a4a);
	border-radius: var(--sratix-radius-md);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.sratix-logistics-order-total {
	font-size: 1rem;
	flex: 1;
}

.sratix-logistics-orders {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}

.sratix-logistics-order {
	padding: 14px 16px;
	background: var(--sratix-navy-mid, #1a2332);
	border: 1px solid var(--sratix-border, #2d3a4a);
	border-radius: var(--sratix-radius-md);
}

.sratix-logistics-order__header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.sratix-logistics-order__number {
	font-weight: 600;
	font-size: 0.9rem;
}

.sratix-logistics-order__date {
	font-size: 0.82rem;
	opacity: 0.6;
}

.sratix-logistics-badge {
	display: inline-block;
	padding: 2px 10px;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.sratix-logistics-badge--paid {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.sratix-logistics-badge--pending {
	background: rgba(234, 179, 8, 0.15);
	color: #eab308;
}

.sratix-logistics-badge--cancelled,
.sratix-logistics-badge--expired {
	background: rgba(239, 68, 68, 0.15);
	color: #ef4444;
}

.sratix-logistics-badge--fulfilled {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.sratix-logistics-badge--problematic {
	background: rgba(249, 115, 22, 0.15);
	color: #f97316;
}

.sratix-logistics-order__items {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.85rem;
}

.sratix-logistics-order__line {
	display: flex;
	justify-content: space-between;
	opacity: 0.85;
}

.sratix-logistics-order__total {
	margin-top: 8px;
	font-size: 0.9rem;
	text-align: right;
}

/*
 * What can still be done with an order: go back to paying it, or place an
 * expired one again. Below the bill, behind a dashed rule, so it reads as the
 * next step rather than another line of the bill.
 */
.sratix-logistics-order__actions {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--sratix-border, #2d3a4a);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.sratix-logistics-order__note {
	flex: 1 1 220px;
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.85;
}

/* An unpaid order waits on the reader: amber at the edge, like its badge. */
.sratix-logistics-order--awaiting {
	border-left: 3px solid rgba(234, 179, 8, 0.55);
}

/* Under the disabled Place order button, saying what switches it on. */
.sratix-logistics-order-hint {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

.sratix-logistics-order-summary .sratix-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.sratix-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	cursor: pointer;
}

.sratix-password-field {
	position: relative;
	display: block;
}

.sratix-password-field .sratix-password-field__input,
.sratix-password-field input[type="password"],
.sratix-password-field input[type="text"] {
	padding-right: 46px !important;
}

.sratix-password-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: var(--sratix-radius-sm);
	background: transparent;
	color: var(--sratix-text-muted, #94a3b8);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.sratix-password-toggle:hover,
.sratix-password-toggle:focus-visible {
	background: rgba(var(--sratix-fg-rgb), 0.08);
	color: var(--sratix-text, #e2e8f0);
	outline: none;
}

.sratix-password-toggle svg {
	width: 18px;
	height: 18px;
}

/* ── Set Password Widget ── */
.sratix-set-password {
	display: flex;
	justify-content: center;
	padding: 40px 0;
}

.sratix-set-password__card {
	max-width: 420px;
	width: 100%;
	background: var(--sratix-navy-mid);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-xl);
	padding: 32px;
}

.sratix-set-password__title {
	font-size: 1.3em;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--sratix-text);
}

.sratix-set-password__desc {
	color: var(--sratix-text-muted);
	font-size: 0.95em;
	margin: 0 0 24px;
}

.sratix-set-password__form .sratix-form-field {
	margin-bottom: 16px;
}

.sratix-set-password__form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--sratix-text);
}

.sratix-set-password__form input[type="password"],
.sratix-set-password__form input[type="text"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-lg);
	font-size: 1em;
	font-family: var(--sratix-font);
	box-sizing: border-box;
	background: var(--sratix-navy);
	color: var(--sratix-text);
	transition: border-color 0.18s, box-shadow 0.18s;
}

.sratix-set-password__form input[type="password"]:focus,
.sratix-set-password__form input[type="text"]:focus {
	outline: none;
	border-color: var(--sratix-red);
	box-shadow: 0 0 0 3px rgba(var(--sratix-primary-rgb), 0.15);
}

/* Expired / incomplete link recovery panel. Same card, no <form> wrapper, so
   the field styling above does not reach it and is restated here. */
.sratix-set-password__recover-field {
	margin-bottom: 4px;
}

.sratix-set-password__recover-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--sratix-text);
}

.sratix-set-password__recover-field input[type="email"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-lg);
	font-size: 1em;
	font-family: var(--sratix-font);
	box-sizing: border-box;
	background: var(--sratix-navy);
	color: var(--sratix-text);
	transition: border-color 0.18s, box-shadow 0.18s;
}

.sratix-set-password__recover-field input[type="email"]:focus {
	outline: none;
	border-color: var(--sratix-red);
	box-shadow: 0 0 0 3px rgba(var(--sratix-primary-rgb), 0.15);
}

.sratix-set-password__recover-field input[type="email"]:disabled {
	opacity: 0.6;
}

.sratix-set-password__recover-submit {
	width: 100%;
	margin-top: 6px;
}

.sratix-password-match {
	min-height: 18px;
	margin-top: 6px;
	font-size: 0.84em;
}

.sratix-password-match--ok {
	color: #4ade80;
}

.sratix-password-match--bad {
	color: #f87171;
}

.sratix-set-password__error {
	color: #f87171;
	background: rgba(220, 38, 38, 0.1);
	border: 1px solid rgba(220, 38, 38, 0.2);
	border-radius: var(--sratix-radius-sm);
	padding: 10px 14px;
	font-size: 0.9em;
	margin-bottom: 16px;
}

.sratix-set-password__submit {
	width: 100%;
	margin-top: 4px;
}

.sratix-set-password__success {
	text-align: center;
	padding: 20px 0;
}

.sratix-set-password__success h2 {
	color: #4ade80;
	font-size: 1.2em;
	margin: 0 0 8px;
}

.sratix-set-password__success p {
	color: var(--sratix-text-muted);
	margin: 0 0 12px;
}

.sratix-set-password__redirect {
	font-size: 0.85em;
	font-style: italic;
}

/* ── Password Strength Meter ── */
.sratix-strength-display {
	margin-top: 10px;
}

.sratix-strength-meter {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.sratix-strength-meter__bar {
	flex: 1;
	height: 6px;
	background: rgba(var(--sratix-fg-rgb), 0.1);
	border-radius: 3px;
	overflow: hidden;
}

.sratix-strength-meter__fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.sratix-strength-meter__fill[data-level="weak"]   { width: 25%;  background: #ef4444; }
.sratix-strength-meter__fill[data-level="fair"]   { width: 50%;  background: #f59e0b; }
.sratix-strength-meter__fill[data-level="good"]   { width: 75%;  background: #22d3ee; }
.sratix-strength-meter__fill[data-level="strong"] { width: 100%; background: #4ade80; }

.sratix-strength-meter__label {
	font-size: 0.8em;
	font-weight: 600;
	min-width: 52px;
	text-align: right;
}

.sratix-strength-meter__label[data-level="weak"]   { color: #ef4444; }
.sratix-strength-meter__label[data-level="fair"]   { color: #f59e0b; }
.sratix-strength-meter__label[data-level="good"]   { color: #22d3ee; }
.sratix-strength-meter__label[data-level="strong"] { color: #4ade80; }

.sratix-strength-checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 12px;
	font-size: 0.82em;
}

.sratix-strength-checks li {
	color: var(--sratix-text-muted);
	transition: color 0.2s;
}

.sratix-strength-checks li::before {
	content: '○ ';
}

.sratix-strength-checks li.pass {
	color: #4ade80;
}

.sratix-strength-checks li.pass::before {
	content: '● ';
}

/* ── Confirmation Loading Hint ── */
.sratix-confirmation-loading__hint {
	font-size: 0.85em;
	color: var(--sratix-text-muted);
	margin-top: 8px;
	font-style: italic;
}

/* ── Portal Login Form ── */
.sratix-portal-login {
	display: flex;
	justify-content: center;
	padding: 40px 0;
}

.sratix-portal-login__card {
	max-width: 420px;
	width: 100%;
	background: var(--sratix-navy-mid);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-xl);
	padding: 32px;
}

.sratix-portal-login__title {
	font-size: 1.3em;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--sratix-text);
}

.sratix-portal-login__desc {
	color: var(--sratix-text-muted);
	font-size: 0.95em;
	margin: 0 0 24px;
}

.sratix-portal-login__notice {
	background: rgba(74, 222, 128, 0.1);
	border: 1px solid rgba(74, 222, 128, 0.25);
	color: #86efac;
	border-radius: var(--sratix-radius-md);
	padding: 14px 16px;
	font-size: 0.92em;
	line-height: 1.5;
	margin-bottom: 20px;
}

.sratix-portal-login__form .sratix-form-field {
	margin-bottom: 16px;
}

.sratix-portal-login__form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--sratix-text);
}

.sratix-portal-login__form input[type="email"],
.sratix-portal-login__form input[type="password"],
.sratix-portal-login__form input[type="text"],
.sratix-portal-reset input[type="email"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-lg);
	font-size: 1em;
	font-family: var(--sratix-font);
	box-sizing: border-box;
	background: var(--sratix-navy);
	color: var(--sratix-text);
	transition: border-color 0.18s, box-shadow 0.18s;
}

.sratix-portal-login__form input:focus {
	outline: none;
	border-color: var(--sratix-red);
	box-shadow: 0 0 0 3px rgba(var(--sratix-primary-rgb), 0.15);
}

.sratix-portal-login__error {
	color: #f87171;
	background: rgba(220, 38, 38, 0.1);
	border: 1px solid rgba(220, 38, 38, 0.2);
	border-radius: var(--sratix-radius-sm);
	padding: 10px 14px;
	font-size: 0.9em;
	margin-bottom: 16px;
}

.sratix-portal-login__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}

.sratix-portal-login__submit {
	flex: 0 0 auto;
}

.sratix-portal-login__forgot {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: #93c5fd;
	font: inherit;
	font-size: 0.88em;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.sratix-portal-login__forgot:hover,
.sratix-portal-login__forgot:focus-visible {
	color: #bfdbfe;
	text-decoration: underline;
	outline: none;
}

.sratix-portal-reset {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--sratix-border, rgba(var(--sratix-fg-rgb), 0.1));
}

.sratix-portal-reset__copy {
	margin: 0 0 12px;
	color: var(--sratix-text-muted, #94a3b8);
	font-size: 0.9em;
	line-height: 1.45;
}

.sratix-portal-reset__submit {
	width: 100%;
	margin-top: 6px;
}

.sratix-portal-reset__status {
	min-height: 20px;
	margin-top: 10px;
	font-size: 0.88em;
	line-height: 1.4;
}

.sratix-portal-reset__status--success {
	color: #86efac;
}

.sratix-portal-reset__status--error {
	color: #fca5a5;
}

/* == Exhibitor Post-Purchase Confirmation == */

.sratix-exhibitor-confirmation {
max-width: 640px;
margin: 0 auto 30px;
}

.sratix-confirmation-card {
background: var(--sratix-navy-mid, #1a1f3d);
border: 1px solid var(--sratix-border, rgba(var(--sratix-fg-rgb), 0.1));
border-radius: var(--sratix-radius-xl);
overflow: hidden;
}

.sratix-confirmation-header {
text-align: center;
padding: 30px 24px 20px;
border-bottom: 1px solid var(--sratix-border, rgba(var(--sratix-fg-rgb), 0.1));
}

.sratix-confirmation-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(22, 163, 74, 0.15);
color: #4ade80;
font-size: 1.5em;
font-weight: 700;
margin-bottom: 12px;
}

/* A payment held for a refund: same card, amber instead of green. */
.sratix-payment-refused .sratix-confirmation-icon {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}

.sratix-payment-refused .sratix-confirmation-header p {
max-width: 34em;
margin: 0 auto;
}

.sratix-confirmation-header h2 {
margin: 0 0 6px;
font-size: 1.4em;
color: var(--sratix-text);
}

.sratix-confirmation-header p {
margin: 0;
color: var(--sratix-text-muted);
font-size: 0.95em;
}

.sratix-confirmation-loading {
text-align: center;
padding: 40px 24px;
}

.sratix-spinner {
display: inline-block;
width: 36px;
height: 36px;
border: 3px solid rgba(var(--sratix-fg-rgb), 0.15);
border-top-color: #4f46e5;
border-radius: 50%;
animation: sratix-spin 0.8s linear infinite;
}

.sratix-field-hint {
margin: 4px 0 12px;
font-size: 0.85em;
color: var(--sratix-text-muted);
line-height: 1.4;
}

@keyframes sratix-spin {
to { transform: rotate(360deg); }
}

.sratix-confirmation-loading p {
margin: 16px 0 0;
color: var(--sratix-text-muted);
}

.sratix-confirmation-ready {
padding: 24px;
}

.sratix-confirmation-ready h3 {
margin: 0 0 16px;
font-size: 1.15em;
color: var(--sratix-text);
}

.sratix-confirmation-features {
background: rgba(var(--sratix-fg-rgb), 0.04);
border-radius: var(--sratix-radius-md);
padding: 16px 20px;
margin-bottom: 16px;
}

.sratix-confirmation-features p {
margin: 0 0 8px;
color: var(--sratix-text-muted);
font-size: 0.9em;
}

.sratix-confirmation-features ul {
margin: 0;
padding-left: 20px;
color: var(--sratix-text-muted);
font-size: 0.9em;
}

.sratix-confirmation-features li {
margin-bottom: 4px;
}

.sratix-confirmation-note {
color: var(--sratix-text-muted);
font-size: 0.9em;
line-height: 1.5;
margin: 0 0 20px;
}

.sratix-confirmation-actions {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}

.sratix-confirmation-actions .sratix-btn-primary {
display: inline-block;
background: #4f46e5;
color: #fff;
padding: 12px 28px;
border-radius: var(--sratix-radius-md);
text-decoration: none;
font-weight: 600;
font-size: 1em;
border: none;
cursor: pointer;
transition: background 0.2s;
}

.sratix-confirmation-actions .sratix-btn-primary:hover {
background: #4338ca;
}

.sratix-confirmation-actions .sratix-btn-secondary {
background: none;
border: none;
color: #64748b;
font-size: 0.9em;
cursor: pointer;
text-decoration: underline;
padding: 4px;
}

.sratix-confirmation-later {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--sratix-border, rgba(var(--sratix-fg-rgb), 0.1));
text-align: center;
}

/* ── Multi-Select Checkbox Dropdown ── */

.sratix-msd {
	position: relative;
}

/* Override Elementor / theme button styling on the trigger */
button.sratix-msd-trigger,
.sratix-msd-trigger {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	cursor: pointer;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	min-width: 0;
	overflow: hidden;
	background: var(--sratix-navy) !important;
	color: var(--sratix-text) !important;
	border: 1px solid var(--sratix-border-h) !important;
	border-radius: var(--sratix-radius-lg) !important;
	padding: 10px 14px !important;
	font-size: 1em !important;
	font-family: var(--sratix-font) !important;
	box-sizing: border-box;
	transition: border-color 0.18s, box-shadow 0.18s;
}

button.sratix-msd-trigger:focus,
.sratix-msd-trigger:focus {
	outline: none;
	border-color: var(--sratix-red) !important;
	box-shadow: 0 0 0 3px rgba(var(--sratix-primary-rgb), 0.15);
}

.sratix-msd-text {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--sratix-text-muted);
}

.sratix-msd-text.sratix-msd-has-value {
	color: var(--sratix-text);
}

.sratix-msd-arrow {
	flex-shrink: 0;
	margin-left: 8px;
	color: var(--sratix-text-muted);
	transition: transform 0.2s;
}

.sratix-msd-open .sratix-msd-arrow {
	transform: rotate(180deg);
}

.sratix-msd-panel {
	display: none;
	position: fixed;
	z-index: 100000;
	min-width: 320px;
	width: max-content;
	max-width: min(480px, 90vw);
	max-height: 45vh;
	overflow-y: auto;
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-lg);
	padding: 4px 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.sratix-msd-open .sratix-msd-panel {
	display: block;
}

/* Scrollbar */
.sratix-msd-panel::-webkit-scrollbar {
	width: 6px;
}
.sratix-msd-panel::-webkit-scrollbar-track {
	background: transparent;
}
.sratix-msd-panel::-webkit-scrollbar-thumb {
	background: rgba(var(--sratix-fg-rgb), 0.12);
	border-radius: 3px;
}

/* Group wrapper — visual separator between parent groups */
.sratix-msd-group + .sratix-msd-group {
	border-top: 1px solid var(--sratix-border);
	margin-top: 2px;
	padding-top: 2px;
}

/* Individual item */
.sratix-msd-item {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 3px 12px;
	font-size: 0.82em;
	line-height: 1.3;
	cursor: pointer;
	color: var(--sratix-text);
	transition: background 0.12s;
	white-space: nowrap;
}

.sratix-msd-item:hover {
	background: var(--sratix-navy-mid);
}

/* Parent item (bold) */
.sratix-msd-parent {
	font-weight: 600;
	font-size: 0.85em;
	padding-top: 5px;
	padding-bottom: 2px;
}

/* Child item (indented) */
.sratix-msd-child {
	padding-left: 28px;
	font-size: 0.8em;
}

/* Checkbox styling */
.sratix-msd-item input[type="checkbox"] {
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	margin: 0;
	accent-color: var(--sratix-red);
	cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   Tooltip (? icon) — hover on desktop, tap-to-modal on mobile
   Scoped under parent containers to beat Elementor specificity.
   ═══════════════════════════════════════════════════════════════ */

.sratix-page-wrap .sratix-tooltip-wrap,
.sratix-modal .sratix-tooltip-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 5px;
	vertical-align: middle;
}

.sratix-page-wrap .sratix-tooltip-btn,
.sratix-modal .sratix-tooltip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 1.5px solid var(--sratix-text-muted);
	border-radius: 50%;
	background: transparent;
	color: var(--sratix-text-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	flex-shrink: 0;
}

.sratix-page-wrap .sratix-tooltip-btn:hover,
.sratix-page-wrap .sratix-tooltip-btn:focus-visible,
.sratix-modal .sratix-tooltip-btn:hover,
.sratix-modal .sratix-tooltip-btn:focus-visible {
	color: var(--sratix-text);
	border-color: var(--sratix-text);
	outline: none;
}

.sratix-page-wrap .sratix-tooltip-popup,
.sratix-modal .sratix-tooltip-popup {
	display: none;
	/* Fixed so the popup escapes the registration modal's overflow clipping and
	   stays fully visible even when it extends past the modal edge. JS sets
	   top/left relative to the ? button and clamps it to the viewport. */
	position: fixed;
	width: max-content;
	max-width: min(280px, 80vw);
	padding: 10px 14px;
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-md);
	font-size: 0.82em;
	font-weight: 400;
	line-height: 1.45;
	color: var(--sratix-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	/* Above the modal (99999), tooltip-modal (100002) and legal overlay. */
	z-index: 100003;
	pointer-events: none;
	white-space: normal;
}

/* Shown by JS on hover/focus (desktop). */
.sratix-page-wrap .sratix-tooltip-popup.sratix-tooltip-popup--visible,
.sratix-modal .sratix-tooltip-popup.sratix-tooltip-popup--visible {
	display: block;
}

/* Tooltip mini-modal (mobile tap) */
.sratix-tooltip-modal .sratix-modal-box {
	max-width: 400px;
}

.sratix-tooltip-modal .sratix-modal-body {
	font-size: 0.95em;
	line-height: 1.55;
}

/* ── Portal info box ──────────────────────────────────────────────────────
   This class has been used since the Events panel shipped and never had a
   rule, so the "booth assigned by organisers" notice has been rendering
   unstyled. Values follow .sratix-info-callout and .sratix-media-tip. */
.sratix-portal-info-box {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	/*
	 * Grey rather than blue. These sit above the thing they explain and there
	 * are now several per panel, so a coloured fill competed with the form for
	 * attention. The variants keep a 2px accent instead: enough to tell a
	 * caution from a note, not enough to shout.
	 */
	background: rgba(var(--sratix-fg-rgb), 0.035);
	border: 1px solid var(--sratix-border);
	border-left: 2px solid rgba(var(--sratix-fg-rgb), 0.18);
	border-radius: var(--sratix-radius-md);
	font-size: 0.85em;
	color: var(--sratix-text-muted);
	line-height: 1.5;
}
.sratix-portal-info-box p { margin: 0; }
.sratix-portal-info-box__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-top: 1px;
}
.sratix-portal-info-box__icon svg { width: 16px; height: 16px; }

/* Amber, because this one is a caution rather than a hint. */
.sratix-portal-info-box--provisional {
	border-left-color: rgba(234, 179, 8, 0.55);
}

/*
 * The box that says something just happened.
 *
 * Amber means pay attention and plain means neutral, so a confirmation needed
 * its own accent rather than borrowing one of those. Full-strength text as
 * well: this one is the answer to a question the reader just asked, not a note
 * sitting above a form.
 */
.sratix-portal-info-box--confirmed {
	border-left-color: rgba(74, 222, 128, 0.65);
	color: var(--sratix-text);
}

/* ── The stand card ───────────────────────────────────────────────
   Was an asymmetric two-column row, narrow booth data beside the load-in and
   storage panels. Those moved to Venue & logistics, so what is left is four
   read-only fields: they lay out as a wide row of their own rather than
   pretending the second column is still coming. */
.sratix-booth-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px 28px;
}

/* One line, once, for anyone who looks where these used to be. */
.sratix-booth-elsewhere {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--sratix-border);
	font-size: 0.85em;
	color: var(--sratix-text-muted);
}

.sratix-booth-elsewhere a {
	color: var(--sratix-red);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--sratix-primary-rgb), 0.35);
}

.sratix-booth-elsewhere a:hover { border-bottom-color: var(--sratix-red); }

/* ── Two-column pages: Venue & logistics, Booth staff ────────────────────
   Reading on the left at two thirds, the things you fill in on the right at one
   third. Same proportion as the brief's rail on Event details, so the portal
   has one column rhythm rather than three.

   Folds below 1000px, matching the tab strip: at that width a third of the page
   is too narrow for a booking form, and stacking puts the form under the
   reading, which is the order someone works in anyway. */
.sratix-split {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 28px;
	align-items: start;
}

@media (max-width: 1000px) {
	.sratix-split { grid-template-columns: 1fr; gap: 20px; }
}

.sratix-split__main { min-width: 0; }

.sratix-split__aside {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The panels in the rail bring their own boxes; the rail adds none. */
.sratix-split__aside > .sratix-portal-card { margin-bottom: 16px; }
.sratix-split__aside > .sratix-portal-card:last-child { margin-bottom: 0; }

.sratix-venue-panel {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ── Briefing sections ──────────────────────────────────────────
   Always open, on every tab. This was an accordion while one page carried all
   ten sections; filing them across three tabs left at most five on a page, and
   at that size closed titles are just things to click before you can read.
   No summary row, no marker, a heading and a hairline between each. */
.sratix-guide-item--open {
	border-top: 1px solid var(--sratix-border);
	padding: 16px 0 4px;
}

.sratix-guide-item--open:first-of-type { border-top: none; padding-top: 4px; }

.sratix-guide-item__title {
	margin: 0 0 8px;
	font-size: 0.98em;
	font-weight: 600;
	color: var(--sratix-text);
}

/* ── Load-in / load-out ───────────────────────────────────────────────── */
.sratix-portal-card {
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-xl);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 16px;
}
.sratix-loadslot-section { display: flex; flex-direction: column; gap: 10px; }
.sratix-loadslot-day {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--sratix-text-muted);
	margin: 6px 0 0;
}
.sratix-loadslot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
}
.sratix-loadslot {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-lg);
	padding: 10px 12px;
	background: var(--sratix-navy-mid);
	color: inherit;
	text-align: left;
	cursor: pointer;
	font: inherit;
}
.sratix-loadslot:hover:not(:disabled) { border-color: var(--sratix-red); }
.sratix-loadslot__time { font-weight: 600; }
.sratix-loadslot__meta { font-size: 0.8em; color: var(--sratix-text-muted); }
.sratix-loadslot--full { opacity: 0.45; cursor: not-allowed; }
.sratix-loadslot--mine { border-color: var(--sratix-red); }
.sratix-loadslot:disabled { cursor: not-allowed; }

.sratix-loadslot-current {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 14px;
	border-radius: var(--sratix-radius-lg);
	background: rgba(var(--sratix-primary-rgb), 0.06);
	border: 1px solid rgba(var(--sratix-primary-rgb), 0.15);
}
.sratix-loadslot-form {
	margin-top: 10px;
	padding: 14px;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-lg);
	background: var(--sratix-navy-mid);
}

/* ── Storage request rows ─────────────────────────────────────────────── */
.sratix-storage-row {
	display: grid;
	grid-template-columns: 2fr 80px 1.6fr 2fr;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}
@media (max-width: 700px) {
	.sratix-storage-row { grid-template-columns: 1fr; }
}

/*──────────────────────────────────────────────────────────────
 * Exhibitor Portal — Help tab
 *
 * Sections reuse .sratix-media-section, so the Help tab reads as the same
 * product as the Media tab rather than as a document bolted onto it. Only the
 * prose rhythm and the deep-link flash are new.
 *────────────────────────────────────────────────────────────*/
.sratix-help {
	/*
	 * Two columns rather than one narrow one. A single column capped at a
	 * readable measure left most of a desktop screen empty; removing the cap
	 * instead would give lines too long to track back. Columns solve both:
	 * the page fills the width and each line stays around 60 characters.
	 */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	align-items: start;
	gap: 16px;
}

/* The intro and the questions read as one thread, so they run full width. */
.sratix-help__title,
.sratix-help__intro,
#sratix-help-sec-faq {
	grid-column: 1 / -1;
}

.sratix-help__intro { max-width: 68ch; }

/* Questions are short; three columns of them beats one long list. */
#sratix-help-sec-faq .sratix-help-faq-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
	gap: 0 32px;
}

.sratix-help__title {
	margin: 0;
	font-size: 1.35em;
	font-weight: 600;
	color: var(--sratix-text);
}

.sratix-help__intro {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.6;
	color: var(--sratix-text-muted);
}

.sratix-help-section p {
	margin: 0;
	font-size: 0.92em;
	line-height: 1.65;
	color: var(--sratix-text);
}

.sratix-help-list {
	margin: 0;
	padding-left: 20px;
	font-size: 0.92em;
	line-height: 1.65;
	color: var(--sratix-text);
}

.sratix-help-list li { margin-bottom: 6px; }

/* Native accordion: no script, no state, and it prints expanded. */
.sratix-help-faq {
	border-top: 1px solid var(--sratix-border);
	padding: 10px 0 2px;
}

.sratix-help-faq:first-of-type { border-top: none; }

.sratix-help-faq > summary {
	cursor: pointer;
	font-size: 0.92em;
	font-weight: 500;
	color: var(--sratix-text);
	list-style: none;
	padding-left: 18px;
	position: relative;
}

.sratix-help-faq > summary::-webkit-details-marker { display: none; }

.sratix-help-faq > summary::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.45em;
	border: 4px solid transparent;
	border-left-color: var(--sratix-text-muted);
	transition: transform 0.15s ease;
	transform-origin: 2px 50%;
}

.sratix-help-faq[open] > summary::before { transform: rotate(90deg); }

.sratix-help-faq > p {
	margin: 8px 0 10px;
	padding-left: 18px;
	color: var(--sratix-text-muted);
}

/*
 * Arriving from a "read more" link elsewhere in the portal. The scroll alone
 * leaves people unsure which section answered them, so the target pulses once.
 */
@keyframes sratix-help-flash {
	0%   { background: rgba(var(--sratix-primary-rgb), 0.14); }
	100% { background: transparent; }
}

.sratix-help-section--flash { animation: sratix-help-flash 1.4s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
	.sratix-help-section--flash { animation: none; outline: 2px solid var(--sratix-red); }
	.sratix-help-faq > summary::before { transition: none; }
}

/*──────────────────────────────────────────────────────────────
 * Exhibitor Portal — inline hints
 *────────────────────────────────────────────────────────────*/
.sratix-help-link {
	color: var(--sratix-red);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.sratix-help-link:hover { color: var(--sratix-red-hover); }

/* The pending-invite banner carries a button, so its text has to sit on the
   same baseline rather than wrapping the button onto its own line. */
.sratix-staff-pending p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/*──────────────────────────────────────────────────────────────
 * Exhibitor Portal — first visit and checklist
 *────────────────────────────────────────────────────────────*/
.sratix-welcome {
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-left: 3px solid var(--sratix-red);
	border-radius: var(--sratix-radius-xl);
	padding: 20px;
	margin-bottom: 16px;
}

.sratix-welcome__title {
	margin: 0 0 8px;
	font-size: 1.1em;
	font-weight: 600;
	color: var(--sratix-text);
}

.sratix-welcome__body {
	margin: 0 0 14px;
	font-size: 0.92em;
	line-height: 1.6;
	color: var(--sratix-text-muted);
}

.sratix-welcome__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.sratix-checklist {
	background: var(--sratix-navy-light);
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-xl);
	padding: 16px 20px;
	margin-bottom: 16px;
}

.sratix-checklist__title {
	margin: 0 0 10px;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--sratix-text);
}

.sratix-checklist__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sratix-checklist__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.9em;
	line-height: 1.5;
	color: var(--sratix-text);
}

.sratix-checklist__tick {
	flex-shrink: 0;
	width: 1em;
	color: var(--sratix-text-muted);
}

.sratix-checklist__item--done { color: var(--sratix-text-muted); }
.sratix-checklist__item--done .sratix-checklist__tick { color: #4ade80; }

/* Neither a tick nor a failure: the exhibitor cannot act on these. */
.sratix-checklist__item--waiting,
.sratix-checklist__item--unknown { color: var(--sratix-text-muted); }

.sratix-checklist__item--todo a {
	color: var(--sratix-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sratix-checklist__item--todo a:hover { color: var(--sratix-red); }

.sratix-checklist__note {
	color: var(--sratix-text-muted);
	font-size: 0.9em;
}

.sratix-checklist--done {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9em;
	color: var(--sratix-text-muted);
}

.sratix-checklist--done .sratix-checklist__tick { color: #4ade80; }

/*──────────────────────────────────────────────────────────────
 * Exhibitor Portal — focus states
 *
 * The portal is not inside .sratix-page-wrap, so the umbrella `all: unset`
 * reset near the top of this file never reached it. Elementor's reset.css
 * carries `button:focus, button:hover { background-color: #c36; color: #fff }`,
 * and while :hover was already beaten on specificity by the rules above, there
 * was no :focus rule at all, so a focused tab or the logout button turned
 * magenta. These restate the intended appearance for :focus and keep a visible
 * ring, because removing the outline instead would make the portal
 * unnavigable by keyboard.
 *────────────────────────────────────────────────────────────*/
.sratix-exhibitor-portal .sratix-portal-tab:focus,
.sratix-exhibitor-portal .sratix-portal-tab:focus-visible {
	color: var(--sratix-text);
	background: var(--sratix-navy-mid);
	outline: 2px solid var(--sratix-red);
	outline-offset: 2px;
}

.sratix-exhibitor-portal .sratix-portal-tab--active:focus,
.sratix-exhibitor-portal .sratix-portal-tab--active:focus-visible {
	color: #fff;
	background: var(--sratix-red);
}

.sratix-exhibitor-portal .sratix-portal-logout:focus,
.sratix-exhibitor-portal .sratix-portal-logout:focus-visible {
	color: var(--sratix-text);
	background: rgba(var(--sratix-primary-rgb), 0.08);
	border-color: var(--sratix-red);
	outline: 2px solid var(--sratix-red);
	outline-offset: 2px;
}

/* Same treatment for every other button the portal renders, so a focused
   Save or Send invite does not go magenta either. */
.sratix-exhibitor-portal .sratix-btn:focus,
.sratix-exhibitor-portal .sratix-btn:focus-visible {
	outline: 2px solid var(--sratix-red);
	outline-offset: 2px;
}

.sratix-exhibitor-portal .sratix-btn--primary:focus,
.sratix-exhibitor-portal .sratix-btn--primary:focus-visible {
	background: var(--sratix-red-hover);
	color: #fff;
}

.sratix-exhibitor-portal .sratix-btn--outline:focus,
.sratix-exhibitor-portal .sratix-btn--outline:focus-visible,
.sratix-exhibitor-portal .sratix-btn--ghost:focus,
.sratix-exhibitor-portal .sratix-btn--ghost:focus-visible {
	background: var(--sratix-navy-mid);
	color: var(--sratix-text);
}

/*──────────────────────────────────────────────────────────────
 * Exhibitor Portal — dismissible hints
 *────────────────────────────────────────────────────────────*/
.sratix-portal-info-box,
.sratix-media-tip { position: relative; }

.sratix-hint-dismiss {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	/* Was transparent, borderless, muted grey at 0.5 opacity, which the design
	   review could barely see. The box it sits on is already quiet, so the
	   control does not need to whisper as well. */
	background: rgba(var(--sratix-fg-rgb), 0.06);
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-sm);
	color: var(--sratix-text);
	opacity: 0.85;
	cursor: pointer;
	transition: opacity 0.15s, background 0.15s;
	line-height: 1;
}

.sratix-hint-dismiss:hover,
.sratix-exhibitor-portal .sratix-hint-dismiss:hover {
	opacity: 1;
	background: rgba(var(--sratix-fg-rgb), 0.07);
	color: var(--sratix-text);
}

.sratix-exhibitor-portal .sratix-hint-dismiss:focus,
.sratix-exhibitor-portal .sratix-hint-dismiss:focus-visible {
	opacity: 1;
	background: rgba(var(--sratix-fg-rgb), 0.07);
	outline: 2px solid var(--sratix-red);
	outline-offset: 1px;
}

/* Room for the X, so a long hint does not run under it. */
.sratix-portal-info-box--dismissible > p,
.sratix-media-tip--dismissible > span { padding-right: 28px; }


/*──────────────────────────────────────────────────────────────
 * Exhibitor Portal — event brief, deadlines and guide
 *
 * The Event details tab now opens with the organiser's briefing rather than
 * with a booking form. Three pieces, in the order an exhibitor reads them:
 * the brief (when, where, the handful of facts everyone asks for), the dated
 * chips for the things they have to do by a date, and the guide, which is the
 * long reference material collapsed out of the way at the bottom.
 *
 * The brief is deliberately NOT another .sratix-event-card. It is the top of a
 * page rather than one item in a list, and giving it the same box as the stand
 * below it made the two read as siblings, which is exactly backwards.
 *────────────────────────────────────────────────────────────*/
.sratix-event-group { margin-bottom: 28px; }

.sratix-brief {
	/* Flat, with one brand-red rule down the side. A filled card here would
	   have competed with the stand card immediately below it. */
	border-left: 3px solid var(--sratix-red);
	padding: 2px 0 2px 18px;
	margin-bottom: 20px;
}

/*
 * Two columns once there is room for them.
 *
 * The brief is mostly prose, and prose has to stop at a readable measure, so a
 * single column left the right half of a desktop empty and looking like
 * something had failed to load. The facts and the portal map fill it. Below the
 * breakpoint the grid collapses and the aside falls underneath, which keeps the
 * reading order the same on a phone.
 */
@media (min-width: 900px) {
	.sratix-brief--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
		gap: 8px 40px;
		align-items: start;
	}
}

.sratix-brief__main { min-width: 0; }

.sratix-brief__aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 16px;
}

/* A hairline between the columns rather than a rule above the map. Once the
   facts moved back into the main column the map was the only thing in here, so
   a rule over the top of it separated it from nothing; on the side it shows
   that the rail is a column on purpose. */
@media (min-width: 900px) {
	.sratix-brief__aside {
		margin-top: 6px;
		padding-left: 32px;
		border-left: 1px solid var(--sratix-border);
	}
}

.sratix-brief__title {
	margin: 0 0 4px;
	font-size: 1.4em;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sratix-text);
}

.sratix-brief__when {
	margin: 0;
	font-size: 1em;
	font-weight: 500;
	color: var(--sratix-text);
}

.sratix-brief__where {
	margin: 2px 0 0;
	font-size: 0.9em;
	line-height: 1.5;
	color: var(--sratix-text-muted);
}

.sratix-brief__map {
	color: var(--sratix-red);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--sratix-primary-rgb), 0.35);
	white-space: nowrap;
}

.sratix-brief__map:hover { border-bottom-color: var(--sratix-red); }

/* The answers to the questions organisers field most often, in one strip under
   the address. No dividing rules between them: the strip wraps, and a rule on
   the left of every item leaves a stray one at the start of each new row. */
.sratix-brief__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 34px;
	margin-top: 14px;
}

.sratix-brief-fact {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.sratix-brief-fact__label {
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sratix-text-muted);
}

.sratix-brief-fact__value {
	font-size: 0.92em;
	color: var(--sratix-text);
}

.sratix-brief__intro {
	margin-top: 14px;
	max-width: 72ch;
}

/* ── What the portal is for ─────────────────────────────────────
   The tab strip names the pages; this says what they are for. Set apart from
   the event facts above it by a rule, because it is the one block in the brief
   that is not about this event. */
.sratix-portal-map {
	border-top: 1px solid var(--sratix-border);
	padding-top: 16px;
}

/* On a phone the rail is underneath the brief, so it keeps its own rule. In
   two columns the aside supplies one and a second would box the map in. */
@media (min-width: 900px) {
	.sratix-portal-map { border-top: none; padding-top: 0; }
}

.sratix-portal-map__title {
	margin: 0 0 8px;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sratix-text-muted);
}

.sratix-portal-map__list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.sratix-portal-map__list a {
	font-size: 0.88em;
	line-height: 1.4;
	color: var(--sratix-text);
	text-decoration: none;
	display: inline-block;
	position: relative;
	padding-left: 15px;
}

/* An arrow rather than a bullet: these go somewhere. */
.sratix-portal-map__list a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.42em;
	border: 4px solid transparent;
	border-left-color: var(--sratix-red);
}

.sratix-portal-map__list a:hover { color: var(--sratix-red); }

.sratix-exhibitor-portal .sratix-portal-map__list a:focus-visible,
.sratix-exhibitor-portal .sratix-portal-map .sratix-help-link:focus-visible {
	outline: 2px solid var(--sratix-red);
	outline-offset: 2px;
}

.sratix-portal-map__here {
	margin: 0 0 10px;
	font-size: 0.82em;
	line-height: 1.5;
	color: var(--sratix-text-muted);
}

.sratix-portal-map .sratix-help-link {
	font-size: 0.82em;
	color: var(--sratix-red);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--sratix-primary-rgb), 0.35);
}

.sratix-portal-map .sratix-help-link:hover { border-bottom-color: var(--sratix-red); }

/* ── Deadlines ──────────────────────────────────────────────────────────
   A date on its own makes every reader do the subtraction, so each chip
   carries the count as well. Chips with a tab are links into the tab where
   the thing is actually done. */
.sratix-deadlines { margin-top: 18px; }

.sratix-deadlines__title {
	margin: 0 0 8px;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sratix-text-muted);
}

.sratix-deadlines__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sratix-deadline {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 14px;
	background: rgba(var(--sratix-fg-rgb), 0.035);
	border: 1px solid var(--sratix-border);
	border-left: 2px solid rgba(var(--sratix-fg-rgb), 0.18);
	border-radius: var(--sratix-radius-md);
	text-decoration: none;
	color: var(--sratix-text);
	transition: background 0.15s, border-color 0.15s;
}

a.sratix-deadline:hover {
	background: rgba(var(--sratix-fg-rgb), 0.06);
	border-color: var(--sratix-border-h);
}

.sratix-exhibitor-portal a.sratix-deadline:focus-visible {
	outline: 2px solid var(--sratix-red);
	outline-offset: 2px;
}

.sratix-deadline__date {
	font-size: 0.95em;
	font-weight: 600;
	white-space: nowrap;
}

.sratix-deadline__label {
	font-size: 0.9em;
	color: var(--sratix-text);
}

.sratix-deadline__count {
	font-size: 0.8em;
	color: var(--sratix-text-muted);
	white-space: nowrap;
}

/* Amber inside a week, matching the provisional info box. Red would put a
   rental order on the same footing as a failure. */
.sratix-deadline--soon { border-left-color: rgba(234, 179, 8, 0.55); }
.sratix-deadline--soon .sratix-deadline__count { color: #facc15; }

/* Past deadlines stay on the page. Removing them leaves someone who missed
   one with no idea it existed. */
.sratix-deadline--past {
	border-left-color: var(--sratix-border);
	opacity: 0.6;
}

.sratix-deadline--past .sratix-deadline__date { text-decoration: line-through; }

/* ── The guide ──────────────────────────────────────────────────────────
   Reuses .sratix-media-section for its shell so the tab reads as one product.
   Rows rather than the Help tab's two columns: several of these are tables of
   dimensions and times that break badly in a narrow column. */
.sratix-guide { margin-top: 4px; }

.sratix-guide__items {
	display: flex;
	flex-direction: column;
}

.sratix-guide-item__body {
	max-width: 78ch;
}

.sratix-guide__updated {
	margin: 4px 0 0;
	font-size: 0.8em;
	color: var(--sratix-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.sratix-deadline { transition: none; }
}

/* ── Organiser-authored copy ────────────────────────────────────────────
   The brief's intro and every guide section are HTML written in the Dashboard,
   so unlike the rest of the portal the markup here is not ours. These rules
   cover what that editor can produce and nothing else. */
.sratix-richtext {
	font-size: 0.92em;
	line-height: 1.65;
	color: var(--sratix-text);
}

.sratix-richtext > :first-child { margin-top: 0; }
.sratix-richtext > :last-child { margin-bottom: 0; }
.sratix-richtext p { margin: 0 0 10px; }
.sratix-richtext ul,
.sratix-richtext ol { margin: 0 0 10px; padding-left: 20px; }
.sratix-richtext li { margin-bottom: 5px; }

.sratix-richtext a {
	color: var(--sratix-red);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--sratix-primary-rgb), 0.35);
}

.sratix-richtext a:hover { border-bottom-color: var(--sratix-red); }

/*────────────────────────────────────────────────────────────────
 * Exhibitor Portal — theme underline override
 *
 * The event site's theme carries `.page-content a { text-decoration: underline }`.
 * That is (0,1,1), the same as `.sratix-portal-map__list a`, and it loads after
 * us, so it won the tie and put an underline through every chip and rail row.
 * `.sratix-brief__map` at (0,1,0) lost outright.
 *
 * Only visible on the live site, never in a local preview, which is why it
 * shipped: none of these look like body-copy links, and underlining them makes
 * a row of chips read as a paragraph of links.
 *
 * Prefixed with the portal wrapper to clear the theme on specificity rather
 * than with !important, matching the umbrella reset at the top of this file.
 *──────────────────────────────────────────────────────*/
.sratix-exhibitor-portal .sratix-deadline,
.sratix-exhibitor-portal .sratix-portal-map__list a,
.sratix-exhibitor-portal .sratix-brief__map,
.sratix-exhibitor-portal .sratix-portal-map .sratix-help-link,
.sratix-exhibitor-portal .sratix-richtext a {
	text-decoration: none;
}

/* ── Payment step ────────────────────────────────────────────────────────
   Only rendered where sratixConfig.demoPayments is set, which no live site
   does. Structure lives here so a theme can restyle it like anything else;
   the DTS theme adjusts colour and shape only. */

.sratix-pay-summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--sratix-border);
	font-size: 0.95em;
}
.sratix-pay-summary__amount { font-weight: 700; font-size: 1.15em; }

.sratix-pay-options { display: grid; gap: 10px; }

.sratix-pay-option {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 16px;
	justify-content: flex-start;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--sratix-border-h);
	border-radius: var(--sratix-radius-md);
	color: var(--sratix-text);
	transition: border-color 0.2s ease, background 0.2s ease;
}
.sratix-pay-option:hover {
	border-color: var(--sratix-primary);
	background: rgba(var(--sratix-primary-rgb), 0.06);
}
.sratix-pay-option__text { display: flex; flex-direction: column; gap: 2px; }
.sratix-pay-option__label { font-weight: 600; }
.sratix-pay-option__note { font-size: 0.8em; color: var(--sratix-text-muted); }

.sratix-pay-mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	height: 34px;
	padding: 0 10px;
	border-radius: var(--sratix-radius-sm);
	font-size: 0.95em;
	font-weight: 600;
	white-space: nowrap;
}
.sratix-pay-mark--card   { border: 1px solid var(--sratix-border-h); color: var(--sratix-text); }
.sratix-pay-mark--apple  { background: #000; color: #fff; }
.sratix-pay-mark--google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.sratix-pay-mark--google b { color: #4285f4; font-weight: 700; }

.sratix-pay-disclaimer {
	margin: 18px 0 0;
	font-size: 0.8em;
	line-height: 1.6;
	color: var(--sratix-text-muted);
}

/* The sheet: a stand-in for a wallet or card window. Recognisable, and
   labelled so it cannot be mistaken for the real thing. */
.sratix-pay-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--sratix-border);
}
.sratix-pay-sheet__tag {
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--sratix-text-muted);
}
.sratix-pay-sheet__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--sratix-border);
	font-weight: 600;
}
.sratix-pay-instrument {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--sratix-border);
	border-radius: var(--sratix-radius-md);
	margin-bottom: 20px;
}
.sratix-pay-instrument__chip {
	width: 34px;
	height: 24px;
	border-radius: 3px;
	background: linear-gradient(135deg, #c9cdd3, #eef1f4);
	flex: 0 0 auto;
}
.sratix-pay-instrument__text { display: flex; flex-direction: column; gap: 2px; }
.sratix-pay-instrument__text em {
	font-style: normal;
	font-size: 0.78em;
	color: var(--sratix-text-muted);
}
.sratix-pay-card-form { margin-bottom: 20px; }
.sratix-pay-card-row { display: flex; gap: 12px; margin-top: 12px; }
.sratix-pay-card-row > span { flex: 1; display: block; }
.sratix-pay-confirm { width: 100%; margin-bottom: 10px; }
.sratix-pay-cancel  { width: 100%; }
.sratix-pay-sheet__foot {
	margin: 16px 0 0;
	font-size: 0.76em;
	line-height: 1.6;
	text-align: center;
	color: var(--sratix-text-muted);
}

/* ── Form sections ───────────────────────────────────────────────────────
   A registration form of twenty fields needs to say where one topic ends and
   the next begins. The schema has carried section labels all along; this is
   what draws them. */
.sratix-form-section {
	/* The container is a wrapping flex row, so the heading has to claim a
	   whole line itself or it sits beside the previous field. */
	flex: 1 1 100%;
	width: 100%;
	margin: 26px 0 4px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--sratix-border);
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sratix-text-muted);
}
.sratix-form-section--first { margin-top: 4px; }