/* ============================================================================
   SRAtix theme: IHF (International Humanoid Forum)
   ----------------------------------------------------------------------------
   Registration widget, Exhibitor Portal and the SRAtix-hosted registration page
   for IHF events. Tokens first, so every component the base file gains arrives
   already themed, then the few component overrides the IHF look needs (the
   gradient buttons, the uppercase labels). Pattern: sratix-theme-dts.css.

   Applies where the widget stamped data-sratix-theme="ihf" on <html>, which it
   does from the event's meta.theme. sratix-client enqueues this file on pages
   whose event names the theme (SRAtix_Client_Public::enqueue_event_theme), and
   the hosted page (/e/<slug>) loads it itself.

   NOT SIGNED OFF BY IHF. The ticket cards (2026-10-10) follow IHF's own draft
   ticket page (docs/onboarding/ihf/2026-10-09-feedback-round-1/img/
   email-2-ihf-ticket-page.webp). COLOURS FROM IHF'S BRAND GUIDELINES (v1.0,
   09/2024; package received 2026-10-09, memory ihf-brand-package): the web
   codes #2b449c (blue) and #a6499b (magenta), the two ends of the official
   background gradient, replace the site's #26488C and #CE5A9D. White on the
   magenta end reads at 5.2:1 (3.8:1 on the old pink). The rest is still measured from
   humanoid-forum.com (2026-10-08): square corners, Sora for headings, buttons
   and the menu, Inter for body text, #000224 text and footer, white page. The
   guidelines set Swis721; the owner kept the site's Sora and Inter on
   2026-10-09 (the package holds desktop fonts, no web licence confirmed).
   Notes: docs/onboarding/ihf/2026-10-08-ihf-web-research.md section 5.

   Fonts: this file does not load them. On a WordPress site the client's own
   theme loads Sora and Inter; the hosted page loads them from the address
   declared in the next line (read by the server; an import rule in this file
   would fetch the fonts a second time on WordPress):

   hosted-fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@500;600;700&display=swap
   ========================================================================= */

:root[data-sratix-theme="ihf"] {

	/* Surfaces: white paper. Wells take the kit's lavender tint. */
	--sratix-navy:       #ffffff;   /* canvas          */
	--sratix-navy-light: #ffffff;   /* cards, panels   */
	--sratix-navy-mid:   #f4f4fd;   /* insets, wells   */

	/* Dark navy ink on paper: one triplet turns every alpha border and wash. */
	--sratix-fg-rgb: 0, 2, 36;

	--sratix-border:   rgba(0, 2, 36, 0.10);
	--sratix-border-h: rgba(0, 2, 36, 0.22);

	/* Type */
	--sratix-text:        #000224;
	--sratix-text-muted:  #666666;
	--sratix-text-strong: #000224;

	/* Accent: the forum's blue (it also carries what the base file calls red:
	   prices, the active step, links). The pink is the second voice, below. */
	--sratix-red:           #2b449c;
	--sratix-red-hover:     #22367d;
	--sratix-primary:       #2b449c;
	--sratix-primary-hover: #22367d;
	--sratix-primary-rgb:   43, 68, 156;
	--sratix-on-accent:     #ffffff;

	--sratix-logo-plate: #ffffff;

	/* Shape: square. */
	--sratix-radius-sm: 0px;
	--sratix-radius-md: 0px;
	--sratix-radius-lg: 0px;
	--sratix-radius-xl: 0px;

	/* Type families. Inter for text, Sora for headings, buttons and the menu. */
	--sratix-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--sratix-ihf-heading-font: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--sratix-ihf-secondary: #a6499b;
	--sratix-ihf-gradient: linear-gradient(90deg, #2b449c 0%, #a6499b 100%);

	/* Hosted page (hosted-page.css reads these; the widget ignores them). */
	--sratix-hp-header-bg:        #ffffff;
	--sratix-hp-header-fg:        #000224;
	--sratix-hp-header-border:    rgba(0, 2, 36, 0.10);
	--sratix-hp-topbar-bg:        var(--sratix-ihf-gradient);
	--sratix-hp-topbar-fg:        #ffffff;
	--sratix-hp-topbar-border:    rgba(255, 255, 255, 0.5);
	--sratix-hp-topbar-accent:    #ffffff;
	/* The package lockup (4.6:1, IHF round 3): about 240px wide at this height. */
	--sratix-hp-logo-height:      52px;
	--sratix-hp-logo-max-width:   280px;
	--sratix-hp-heading-font:     var(--sratix-ihf-heading-font);
	--sratix-hp-heading-weight:   700;
	--sratix-hp-menu-transform:   uppercase;
	--sratix-hp-menu-weight:      500;
	--sratix-hp-hero-bg:          #ffffff;
	--sratix-hp-hero-fg:          #2b449c;
	--sratix-hp-hero-accent:      #a6499b;
	--sratix-hp-hero-text:        #000224;
	--sratix-hp-hero-transform:   uppercase;
	--sratix-hp-hero-tracking:    1.6px;
	--sratix-hp-hero-image-clip:  polygon(14% 0, 100% 0, 100% 100%, 0 100%);
	--sratix-hp-footer-bg:        #000224;
	--sratix-hp-footer-fg:        #ffffff;
	--sratix-hp-footer-muted:     rgba(255, 255, 255, 0.7);
	--sratix-hp-button-bg:        var(--sratix-ihf-gradient);
	--sratix-hp-button-fg:        #ffffff;
	--sratix-hp-button-weight:    600;
	--sratix-hp-button-tracking:  1.2px;
	--sratix-hp-button-transform: uppercase;
}

/* ── Typeface and rhythm ────────────────────────────────────────────────
   The forum sets body text in Inter 16px with 0.6px of tracking. The base
   file declares its family on many components; this catches any a host page
   or the base file would otherwise leave on another face. */
:root[data-sratix-theme="ihf"] .sratix-page-wrap,
:root[data-sratix-theme="ihf"] .sratix-page-inner,
:root[data-sratix-theme="ihf"] [id^="sratix-"],
:root[data-sratix-theme="ihf"] .sratix-modal,
:root[data-sratix-theme="ihf"] .sratix-legal-overlay,
:root[data-sratix-theme="ihf"] .sratix-exhibitor-portal {
	font-family: var(--sratix-font) !important;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.6px;
	-webkit-font-smoothing: antialiased;
}

/* ── Corners ────────────────────────────────────────────────────────────
   Square on inputs, cards, buttons and modals. The tokens above cover almost
   every corner; this catches the ones written as literals. Only genuinely
   round controls keep a radius. */
:root[data-sratix-theme="ihf"] [class^="sratix-"],
:root[data-sratix-theme="ihf"] [class*=" sratix-"],
:root[data-sratix-theme="ihf"] .sx-hp input,
:root[data-sratix-theme="ihf"] .sx-hp select,
:root[data-sratix-theme="ihf"] .sx-hp textarea {
	border-radius: 0;
}
:root[data-sratix-theme="ihf"] .sratix-toggle-track,
:root[data-sratix-theme="ihf"] .sratix-toggle-thumb,
:root[data-sratix-theme="ihf"] .sratix-spinner,
:root[data-sratix-theme="ihf"] .sratix-avatar,
:root[data-sratix-theme="ihf"] .sratix-portal-avatar,
:root[data-sratix-theme="ihf"] .sratix-radio-mark,
:root[data-sratix-theme="ihf"] input[type="radio"] {
	border-radius: 999px;
}

/* ── Headings ───────────────────────────────────────────────────────────
   Sora, the forum's blue, open tracking. */
:root[data-sratix-theme="ihf"] .sratix-ticket-title,
:root[data-sratix-theme="ihf"] .sratix-widget-title,
:root[data-sratix-theme="ihf"] .sratix-section-title,
:root[data-sratix-theme="ihf"] .sratix-role-choice__title,
:root[data-sratix-theme="ihf"] .sratix-modal-title,
:root[data-sratix-theme="ihf"] .sratix-ticket-card h3,
:root[data-sratix-theme="ihf"] .sratix-portal-title,
:root[data-sratix-theme="ihf"] .sratix-confirmation-header h2 {
	font-family: var(--sratix-ihf-heading-font) !important;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--sratix-primary);
}
:root[data-sratix-theme="ihf"] .sratix-ticket-title {
	text-transform: uppercase;
}

/* ── Buttons ────────────────────────────────────────────────────────────
   The primary button is the blue-to-pink gradient, white Sora 600, uppercase,
   square. .sratix-btn declares its properties !important against WordPress
   themes, so the ones that differ have to be restated the same way. */
:root[data-sratix-theme="ihf"] .sratix-btn {
	font-family: var(--sratix-ihf-heading-font) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	padding: 14px 28px !important;
	border-radius: 0 !important;
}
:root[data-sratix-theme="ihf"] .sratix-btn--sm { padding: 10px 18px !important; font-size: 12px !important; }
:root[data-sratix-theme="ihf"] .sratix-btn--xs { padding: 6px 12px !important; font-size: 11px !important; }
:root[data-sratix-theme="ihf"] .sratix-btn--primary,
:root[data-sratix-theme="ihf"] .sratix-btn-primary {
	background: var(--sratix-ihf-gradient) !important;
	color: #ffffff !important;
	border: 0 !important;
	box-shadow: none;
}
:root[data-sratix-theme="ihf"] .sratix-btn--primary:hover,
:root[data-sratix-theme="ihf"] .sratix-btn--primary:focus,
:root[data-sratix-theme="ihf"] .sratix-btn-primary:hover {
	background: var(--sratix-ihf-gradient) !important;
	color: #ffffff !important;
	filter: brightness(1.1);
}
:root[data-sratix-theme="ihf"] .sratix-btn--outline,
:root[data-sratix-theme="ihf"] .sratix-btn--secondary,
:root[data-sratix-theme="ihf"] .sratix-btn-secondary {
	background: transparent !important;
	border: 1px solid var(--sratix-primary) !important;
	color: var(--sratix-primary) !important;
}
:root[data-sratix-theme="ihf"] .sratix-btn--outline:hover,
:root[data-sratix-theme="ihf"] .sratix-btn--secondary:hover,
:root[data-sratix-theme="ihf"] .sratix-btn-secondary:hover {
	background: var(--sratix-ihf-gradient) !important;
	border-color: transparent !important;
	color: #ffffff !important;
}
:root[data-sratix-theme="ihf"] .sratix-btn--ghost {
	border: 1px solid var(--sratix-border-h) !important;
	color: var(--sratix-text) !important;
}
:root[data-sratix-theme="ihf"] .sratix-btn--ghost:hover {
	background: var(--sratix-navy-mid) !important;
	color: var(--sratix-primary) !important;
}

/* ── Cards ──────────────────────────────────────────────────────────────
   White, square, the forum's soft shadow. */
:root[data-sratix-theme="ihf"] .sratix-ticket-card,
:root[data-sratix-theme="ihf"] .sratix-card,
:root[data-sratix-theme="ihf"] .sratix-portal-card {
	background: #ffffff;
	border: 1px solid var(--sratix-border);
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.06);
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card:hover,
:root[data-sratix-theme="ihf"] .sratix-portal-card:hover {
	border-color: var(--sratix-ihf-secondary);
	box-shadow: 0 8px 36px rgba(0, 0, 0, 0.10);
}

/* ── Price ──────────────────────────────────────────────────────────────
   Sora 700 in blue; the struck-through list price stays grey. */
:root[data-sratix-theme="ihf"] .sratix-price,
:root[data-sratix-theme="ihf"] .sratix-price-early,
:root[data-sratix-theme="ihf"] .sratix-price-member {
	font-family: var(--sratix-ihf-heading-font);
	font-weight: 700;
	color: var(--sratix-primary);
}
:root[data-sratix-theme="ihf"] .sratix-price-original {
	color: #666666;
	font-weight: 400;
}
:root[data-sratix-theme="ihf"] .sratix-early-badge,
:root[data-sratix-theme="ihf"] .sratix-savings-badge {
	background: var(--sratix-ihf-secondary);
	color: #ffffff;
	font-family: var(--sratix-ihf-heading-font);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 11px;
}

/* ── Ticket cards, after IHF's own ticket page (draft, 2026-10-09) ───────
   A magenta band carries the ticket name; under it the price, large and
   centred, the list price struck through and the saving, then a full-width
   button, and the description last. Price and button sit at the same height
   in every card of a row whatever the description's length, which runs below
   them. The card's top zone is unwrapped (display: contents) so the
   description can move below the button without touching the markup the
   other themes use. */
:root[data-sratix-theme="ihf"] .sratix-cards {
	gap: 28px;
	margin: 28px 0 8px;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card {
	padding: 0;
	border: 0;
	box-shadow: 0 5px 30px rgba(0, 2, 36, 0.08);
	text-align: center;
	overflow: visible;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card:hover {
	border: 0;
	box-shadow: 0 10px 40px rgba(0, 2, 36, 0.14);
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-card-top {
	display: contents;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-ticket-icon {
	display: none;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card h3 {
	order: 0;
	margin: 0;
	padding: 15px 20px;
	background: var(--sratix-ihf-secondary);
	color: #ffffff;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	/* Two lines' room, so one-line and two-line names share a band height. */
	min-height: 73px;
	display: flex;
	/* A column, so the dates row sits under the name. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card h3 .sratix-ticket-dates {
	margin-top: 3px;
	font-size: 13px;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-card-badges {
	order: 1;
	justify-content: center;
	margin: 16px 24px 0;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-card-mid {
	order: 2;
	margin-top: 0;
	padding: 26px 24px 4px;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-card-bot {
	order: 3;
	display: flex;
	flex-direction: column;
	padding: 18px 24px 0;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-desc {
	order: 4;
	margin: 0;
	padding: 20px 24px 26px;
	color: var(--sratix-text-muted);
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
}
/* No description: the button row closes the card. */
:root[data-sratix-theme="ihf"] .sratix-ticket-card:not(:has(.sratix-desc)) .sratix-card-bot {
	padding-bottom: 26px;
}

/* Price: Sora 700 in the forum's blue; the list price struck through in grey
   under it, the saving under that. The early-bird tag sits above as a kicker. */
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-early-badge,
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-savings-badge {
	order: 0;
	margin-bottom: 10px;
	padding: 3px 10px;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price,
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price-early,
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price-member,
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price-free {
	order: 1;
	display: block;
	margin: 0;
	font-family: var(--sratix-ihf-heading-font);
	font-size: 34px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--sratix-primary);
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price-original {
	order: 2;
	margin-top: 6px;
	font-family: var(--sratix-ihf-heading-font);
	font-size: 20px;
	font-weight: 600;
	color: #8d8f9b;
	text-decoration-thickness: 2px;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price-save {
	order: 3;
	display: block;
	color: #666666;
	font-size: 15px;
}

/* A full-width button. Solid blue on the white cards, as on IHF's page; the
   gradient belongs to the pass that covers both days (below). */
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-btn--primary {
	display: block !important;
	width: 100% !important;
	order: 0;
	padding: 15px 20px !important;
	background: var(--sratix-primary) !important;
	color: #ffffff !important;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-btn--primary:hover,
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-btn--primary:focus {
	background: var(--sratix-ihf-secondary) !important;
	filter: none;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-avail {
	order: 1;
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--sratix-text-muted);
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-badge--sold-out {
	display: block;
	padding: 14px 20px;
	border: 1px solid var(--sratix-border-h);
	font-family: var(--sratix-ihf-heading-font);
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	background: #f4f4fd;
	color: #666666;
}

/* The pass for both days: the brand gradient, white type, a white button.
   Picked by what the ticket's name says, so a renamed ticket keeps it as long
   as the name still says "both days" (or "combo", "2-day", "two days"). */
:root[data-sratix-theme="ihf"] .sratix-ticket-card:is([data-ticket-name*="both days" i], [data-ticket-name*="combo" i], [data-ticket-name*="2-day" i], [data-ticket-name*="two days" i]) {
	background: linear-gradient(150deg, #2b449c 0%, #6b479c 55%, #a6499b 100%);
	color: #ffffff;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card:is([data-ticket-name*="both days" i], [data-ticket-name*="combo" i], [data-ticket-name*="2-day" i], [data-ticket-name*="two days" i]) h3 {
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card:is([data-ticket-name*="both days" i], [data-ticket-name*="combo" i], [data-ticket-name*="2-day" i], [data-ticket-name*="two days" i]) :is(.sratix-price, .sratix-price-early, .sratix-price-member, .sratix-price-free) {
	color: #ffffff;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card:is([data-ticket-name*="both days" i], [data-ticket-name*="combo" i], [data-ticket-name*="2-day" i], [data-ticket-name*="two days" i]) .sratix-price-original {
	color: rgba(255, 255, 255, 0.7);
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card:is([data-ticket-name*="both days" i], [data-ticket-name*="combo" i], [data-ticket-name*="2-day" i], [data-ticket-name*="two days" i]) :is(.sratix-price-save, .sratix-avail, .sratix-desc) {
	color: rgba(255, 255, 255, 0.88);
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card:is([data-ticket-name*="both days" i], [data-ticket-name*="combo" i], [data-ticket-name*="2-day" i], [data-ticket-name*="two days" i]) :is(.sratix-early-badge, .sratix-savings-badge) {
	background: #ffffff;
	color: var(--sratix-ihf-secondary);
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card:is([data-ticket-name*="both days" i], [data-ticket-name*="combo" i], [data-ticket-name*="2-day" i], [data-ticket-name*="two days" i]) .sratix-btn--primary {
	background: #ffffff !important;
	color: var(--sratix-primary) !important;
}
:root[data-sratix-theme="ihf"] .sratix-ticket-card:is([data-ticket-name*="both days" i], [data-ticket-name*="combo" i], [data-ticket-name*="2-day" i], [data-ticket-name*="two days" i]) .sratix-btn--primary:hover,
:root[data-sratix-theme="ihf"] .sratix-ticket-card:is([data-ticket-name*="both days" i], [data-ticket-name*="combo" i], [data-ticket-name*="2-day" i], [data-ticket-name*="two days" i]) .sratix-btn--primary:focus {
	background: #000224 !important;
	color: #ffffff !important;
}

/* Cards side by side: when any card shows a struck-through price, every price
   block takes the room of one (tag, price, list price, saving), with the price
   centred in it, so the buttons of a row line up. */
@media (min-width: 561px) {
	:root[data-sratix-theme="ihf"] .sratix-cards:has(.sratix-price-original) .sratix-ticket-card .sratix-card-mid {
		box-sizing: border-box;
		min-height: 171px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Phone width: one card per row (the base grid), a smaller price. */
@media (max-width: 560px) {
	:root[data-sratix-theme="ihf"] .sratix-cards { gap: 20px; }
	:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price,
	:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price-early,
	:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price-member,
	:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-price-free { font-size: 30px; }
	:root[data-sratix-theme="ihf"] .sratix-ticket-card .sratix-card-mid { padding-top: 22px; }
}

/* ── "Have a code?" and the tickets a code opens ──────────────────────────
   The link in the forum's blue, the section title in Sora like the ticket
   heading, messages in colours that read on white. */
:root[data-sratix-theme="ihf"] .sratix-code-toggle,
:root[data-sratix-theme="ihf"] .sratix-code-remove {
	font-family: var(--sratix-ihf-heading-font);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.6px;
}
:root[data-sratix-theme="ihf"] .sratix-code-chip {
	border-color: var(--sratix-ihf-secondary);
	color: var(--sratix-ihf-secondary);
	font-family: var(--sratix-ihf-heading-font);
	font-weight: 600;
	letter-spacing: 0.6px;
}
:root[data-sratix-theme="ihf"] .sratix-unlocked__title {
	font-family: var(--sratix-ihf-heading-font) !important;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--sratix-primary);
	text-align: center;
}
:root[data-sratix-theme="ihf"] .sratix-code-msg--err,
:root[data-sratix-theme="ihf"] .sratix-promo-msg--err { color: #b91c1c; }
:root[data-sratix-theme="ihf"] .sratix-promo-msg--ok { color: #15803d; }

/* ── Fields ─────────────────────────────────────────────────────────────
   Square, hairline, the primary on focus. */
:root[data-sratix-theme="ihf"] .sratix-input,
:root[data-sratix-theme="ihf"] .sratix-select,
:root[data-sratix-theme="ihf"] .sratix-textarea,
:root[data-sratix-theme="ihf"] .sratix-modal input[type="text"],
:root[data-sratix-theme="ihf"] .sratix-modal input[type="email"],
:root[data-sratix-theme="ihf"] .sratix-modal input[type="tel"],
:root[data-sratix-theme="ihf"] .sratix-modal input[type="password"],
:root[data-sratix-theme="ihf"] .sratix-modal input[type="number"],
:root[data-sratix-theme="ihf"] .sratix-modal select,
:root[data-sratix-theme="ihf"] .sratix-modal textarea {
	background: #ffffff;
	border: 1px solid var(--sratix-border-h);
	color: var(--sratix-text);
	font-family: var(--sratix-font);
	letter-spacing: 0.6px;
}
:root[data-sratix-theme="ihf"] .sratix-input:focus,
:root[data-sratix-theme="ihf"] .sratix-select:focus,
:root[data-sratix-theme="ihf"] .sratix-textarea:focus,
:root[data-sratix-theme="ihf"] .sratix-modal input:focus,
:root[data-sratix-theme="ihf"] .sratix-modal select:focus,
:root[data-sratix-theme="ihf"] .sratix-modal textarea:focus {
	border-color: var(--sratix-primary);
	outline: 2px solid var(--sratix-primary);
	outline-offset: 1px;
	box-shadow: none;
}
:root[data-sratix-theme="ihf"] .sratix-label,
:root[data-sratix-theme="ihf"] .sratix-modal label {
	color: var(--sratix-text);
	font-weight: 500;
}
:root[data-sratix-theme="ihf"] ::placeholder { color: #8d8f9b; }

/* Focus ring in the primary, for everything that takes a keyboard. */
:root[data-sratix-theme="ihf"] .sratix-page-wrap :focus-visible,
:root[data-sratix-theme="ihf"] .sratix-modal :focus-visible {
	outline: 2px solid var(--sratix-primary);
	outline-offset: 2px;
}

/* ── Modals ─────────────────────────────────────────────────────────────
   A white sheet, square, over a navy veil. */
:root[data-sratix-theme="ihf"] .sratix-modal--visible {
	background: rgba(0, 2, 36, 0.55);
}
:root[data-sratix-theme="ihf"] .sratix-modal-box {
	background: #ffffff;
	border: 0;
	box-shadow: 0 20px 60px rgba(0, 2, 36, 0.28);
}

/* ── Wizard steps ───────────────────────────────────────────────────── */
:root[data-sratix-theme="ihf"] .sratix-wizard-step__num {
	border: 1px solid var(--sratix-border-h);
	background: transparent;
	color: var(--sratix-text-muted);
	font-family: var(--sratix-ihf-heading-font);
	font-weight: 600;
}
:root[data-sratix-theme="ihf"] .sratix-wizard-step--active .sratix-wizard-step__num,
:root[data-sratix-theme="ihf"] .sratix-wizard-step--done .sratix-wizard-step__num {
	background: var(--sratix-ihf-gradient);
	border-color: transparent;
	color: #ffffff;
}

/* ── Role choice ────────────────────────────────────────────────────── */
:root[data-sratix-theme="ihf"] .sratix-role-btn {
	background: #ffffff;
	border: 1px solid var(--sratix-border-h);
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.06);
}
:root[data-sratix-theme="ihf"] .sratix-role-btn:hover {
	border-color: var(--sratix-ihf-secondary);
}
:root[data-sratix-theme="ihf"] .sratix-role-btn__label {
	font-family: var(--sratix-ihf-heading-font);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--sratix-primary);
}

/* ── Eyebrows and form sections ─────────────────────────────────────────
   The pink, Sora, tracked: the forum's small-label voice. */
:root[data-sratix-theme="ihf"] .sratix-eyebrow,
:root[data-sratix-theme="ihf"] .sratix-kicker,
:root[data-sratix-theme="ihf"] .sratix-form-section {
	color: var(--sratix-ihf-secondary);
	font-family: var(--sratix-ihf-heading-font);
	font-weight: 500;
	letter-spacing: 1.2px;
}

/* ── Tables ─────────────────────────────────────────────────────────── */
:root[data-sratix-theme="ihf"] th {
	color: var(--sratix-text-muted);
	font-family: var(--sratix-ihf-heading-font);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	border-bottom: 1px solid var(--sratix-border);
	background: transparent;
}
:root[data-sratix-theme="ihf"] td { border-bottom: 1px solid var(--sratix-border); }

/* ── Status colours ─────────────────────────────────────────────────────
   Tuned for white. */
:root[data-sratix-theme="ihf"] .sratix-badge--success,
:root[data-sratix-theme="ihf"] .sratix-status--success { color: #15803d; }
:root[data-sratix-theme="ihf"] .sratix-badge--warning,
:root[data-sratix-theme="ihf"] .sratix-status--warning { color: #a16207; }
:root[data-sratix-theme="ihf"] .sratix-badge--error,
:root[data-sratix-theme="ihf"] .sratix-status--error,
:root[data-sratix-theme="ihf"] .sratix-error { color: #b91c1c; }

/* ── Light-blue text from the dark base ────────────────────────────────
   sratix-client.css colours these #93c5fd (and #bfdbfe on hover) for its
   navy canvas; on IHF's white they read 1.8:1. Measured on the Exhibitor
   Portal sign-in through SRAtix Connect, 2026-10-14: "Forgot password?" at
   1.65:1 on the lavender panel. */
:root[data-sratix-theme="ihf"] .sratix-portal-login__forgot,
:root[data-sratix-theme="ihf"] .sratix-legal-prose a { color: var(--sratix-primary); }
:root[data-sratix-theme="ihf"] .sratix-portal-login__forgot:hover,
:root[data-sratix-theme="ihf"] .sratix-portal-login__forgot:focus-visible,
:root[data-sratix-theme="ihf"] .sratix-toggle-link:hover {
	color: var(--sratix-ihf-secondary);
	text-decoration-color: var(--sratix-ihf-secondary);
}
:root[data-sratix-theme="ihf"] .sratix-info { color: #1d4ed8; }

/* ── Selection ──────────────────────────────────────────────────────── */
:root[data-sratix-theme="ihf"] ::selection {
	background: var(--sratix-primary);
	color: #ffffff;
}