/**
 * BMC × Cobra — front-end styles.
 *
 * Mirrors The Events Calendar's native List + single-event views (the pages
 * this plugin replaces) in the site's own brand, so the Cobra pages read as
 * native and keep that look after Tribe is retired (no dependency on Tribe's
 * stylesheets). Typography is inherited from the theme; only layout, spacing
 * and the brand palette are set here.
 *
 * Brand tokens from the theme (styles/style-layout.css):
 *   primary #006bb3 · text #141827 · rules #e1e9ee / #dddddd · accent #80b5d9
 */

.bmc-cobra {
	--bmc-blue: #006bb3;
	--bmc-blue-dark: #005a96;
	--bmc-rule: #e1e9ee;
	--bmc-rule-strong: #dddddd;
	--bmc-accent: #80b5d9;
	--bmc-ink: #141827;
	--bmc-muted: #888888;
	margin: 0 0 2rem;
}

/* Notices (error / empty states) */
.bmc-cobra-notice {
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--bmc-rule);
	border-left: 4px solid var(--bmc-accent);
}
.bmc-cobra-notice--error {
	background: #fdf3f3;
	border-left-color: #cf5b5b;
}

/* ========================================================================== *
 * Overview — mirrors the Tribe List view:
 * month heading · date · title · venue · full-width image
 * ========================================================================== */

.bmc-cobra-month-separator {
	font-family: 'latolight', Helvetica, sans-serif;
	font-weight: normal;
	color: var(--bmc-blue);
	font-size: 24px;
	line-height: 1.3;
	border-top: 1px solid var(--bmc-rule-strong);
	margin: 45px 0 0;
	padding-top: 22px;
}
.bmc-cobra-eventlist > .bmc-cobra-month-separator:first-child {
	margin-top: 20px;
}

.bmc-cobra-event-row {
	margin: 26px 0 0;
	padding: 0 0 42px;
	border: 0;
	overflow: hidden;
}

.bmc-cobra-event-row__datetime {
	margin: 0 0 6px;
	color: var(--bmc-ink);
	font-size: 16px;
}

.bmc-cobra-event-row__title {
	font-family: 'source_sans_prosemibold', Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.35;
	margin: 0 0 4px;
}
.bmc-cobra-event-row__title a {
	color: var(--bmc-blue);
	text-decoration: none;
}

.bmc-cobra-event-row__venue {
	margin: 0 0 16px;
	color: var(--bmc-ink);
	font-size: 16px;
	line-height: 1.5;
}

/* Full-width featured image below the text. The `.bmc-cobra-overview` prefix
 * out-specifies the theme's `article .the-content img { width:100% }`. */
.bmc-cobra-overview .bmc-cobra-event-row__image-link {
	display: block;
	line-height: 0;
}
.bmc-cobra-overview .bmc-cobra-event-row__image {
	width: 100%;
	height: auto;
	display: block;
}

/* ========================================================================== *
 * Single event — mirrors the Tribe single-event view
 * ========================================================================== */

.bmc-cobra-event__back {
	margin: 0 0 1rem;
	font-size: 16px;
}

/* The theme prints the event name as <h1 class="title"> (page.php); on the
 * detail page scope it up to the Tribe single-event title size. */
body.bmc-cobra-detail .title {
	font-size: 32px;
	line-height: 1.2;
}

.bmc-cobra-event__pastnotice {
	margin: 0 0 1rem;
	color: var(--bmc-ink);
}

/* Event subline (titel2 from the Cobra API). */
.bmc-cobra-event__subtitle {
	font-family: 'latolight', Helvetica, sans-serif;
	font-size: 1.35rem;
	line-height: 1.3;
	color: var(--bmc-muted);
	margin: 0 0 0.75rem;
}

.bmc-cobra-event__schedule {
	color: var(--bmc-ink);
	font-size: 18px;
	border-top: 1px solid var(--bmc-rule);
	padding-top: 10px;
	margin: 0 0 1.5rem;
}

.bmc-cobra-event__hero {
	margin: 0 0 1.5rem;
}
.bmc-cobra .bmc-cobra-event__hero-image {
	width: 100%;
	height: auto;
	display: block;
}

.bmc-cobra-event__description {
	margin: 0 0 1.75rem;
	font-size: 16px;
	line-height: 1.6;
}

.bmc-cobra-event__modules {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin: 0 0 2rem;
}

/* Meta box (Tribe "Details" + "Veranstaltungsort") */
.bmc-cobra-event__details {
	border-top: 2px solid var(--bmc-accent);
	border-bottom: 1px solid var(--bmc-accent);
	padding: 1.25rem 0;
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 3rem;
}
.bmc-cobra-event__detailgroup {
	flex: 1 1 240px;
}
.bmc-cobra-event__detailtitle {
	font-family: 'source_sans_prosemibold', Helvetica, sans-serif;
	color: var(--bmc-blue);
	font-size: 18px;
	margin: 0 0 0.6rem;
}
.bmc-cobra-event__meta {
	margin: 0;
}
.bmc-cobra-event__meta-row {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
}
.bmc-cobra-event__meta-row dt {
	flex: 0 0 9.5rem;
	font-family: 'source_sans_prosemibold', Helvetica, sans-serif;
	margin: 0;
}
.bmc-cobra-event__meta-row dd {
	margin: 0;
}
.bmc-cobra-event__venue,
.bmc-cobra-event__address {
	margin: 0;
	font-style: normal;
	line-height: 1.5;
	white-space: pre-line; /* address_lines() joined with "\n" */
}
.bmc-cobra-event__online {
	margin: 0.4rem 0 0;
}
.bmc-cobra-event__maplink {
	margin: 0.4rem 0 0;
}

/* ========================================================================== *
 * "Zum Kalender hinzufügen" — add-to-calendar dropdown
 *
 * Mirrors The Events Calendar's subscribe dropdown in the site's own brand,
 * built on a native <details>/<summary> so it works without JavaScript (a small
 * enhancement adds click-outside / Escape). Sits above the "Details" meta box.
 * ========================================================================== */

.bmc-cobra-event__addtocal {
	margin: 0 0 1.5rem;
}

.bmc-cobra-addtocal {
	position: relative;
	display: inline-block;
}

/* The <summary> styled as the Tribe-style button. */
.bmc-cobra-addtocal__button {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--bmc-rule-strong);
	border-radius: 3px;
	background: #fff;
	color: var(--bmc-ink);
	font-family: 'source_sans_prosemibold', Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	list-style: none; /* hide the default disclosure triangle (most engines) */
	transition: border-color 0.15s ease, color 0.15s ease;
}
/* Hide the disclosure triangle in WebKit / older engines. */
.bmc-cobra-addtocal__button::-webkit-details-marker {
	display: none;
}
.bmc-cobra-addtocal__button::marker {
	content: "";
}
.bmc-cobra-addtocal__button:hover,
.bmc-cobra-addtocal__button:focus-visible,
.bmc-cobra-addtocal[open] > .bmc-cobra-addtocal__button {
	border-color: var(--bmc-blue);
	color: var(--bmc-blue);
	outline: none;
}

.bmc-cobra-addtocal__icon {
	width: 22px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--bmc-blue);
}
.bmc-cobra-addtocal__caret {
	width: 10px;
	height: 7px;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}
.bmc-cobra-addtocal[open] .bmc-cobra-addtocal__caret {
	transform: rotate(180deg);
}

.bmc-cobra-addtocal__content {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	white-space: nowrap;
	background: #fff;
	border: 1px solid var(--bmc-rule-strong);
	border-radius: 3px;
	box-shadow: 0 6px 18px rgba(20, 24, 39, 0.12);
}
.bmc-cobra-addtocal__list {
	list-style: none;
	margin: 0;
	padding: 0.35rem 0;
}
.bmc-cobra-addtocal__item {
	margin: 0;
}
.bmc-cobra-addtocal__link {
	display: block;
	padding: 0.5rem 1.1rem;
	color: var(--bmc-ink);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.3;
}
.bmc-cobra-addtocal__link:hover,
.bmc-cobra-addtocal__link:focus {
	background: #eef3f7;
	color: var(--bmc-blue);
}

/* ========================================================================== *
 * Content modules
 * ========================================================================== */

.bmc-cobra-module__headline {
	font-family: 'source_sans_prosemibold', Helvetica, sans-serif;
	color: var(--bmc-blue);
	font-size: 18px;
	line-height: 1.3;
	margin: 0 0 0.6rem;
}
.bmc-cobra-module__content {
	line-height: 1.6;
}
.bmc-cobra-module__list,
.bmc-cobra-module__linklist {
	margin: 0 0 1rem 1.5em;
}

/* Module 04 "Linkliste" / 06 "Downloadliste": the rows come from their own
   Cobra tables (contentmodule-linklist / -downloadlist), so both render as a
   flat list of labelled entries rather than a single link/button. */
.bmc-cobra-module__linklist-item {
	margin: 0 0 0.35rem;
	line-height: 1.5;
}

.bmc-cobra-module__downloadlist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bmc-cobra-module__downloadlist-item {
	margin: 0;
	border-bottom: 1px solid #e3e9ee;
}
.bmc-cobra-module__downloadlist-item:last-child {
	border-bottom: 0;
}
.bmc-cobra .bmc-cobra-download {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.55rem 0;
	line-height: 1.4;
	text-decoration: none;
}
.bmc-cobra .bmc-cobra-download:hover,
.bmc-cobra .bmc-cobra-download:focus {
	text-decoration: underline;
}
.bmc-cobra-download__icon {
	flex: 0 0 auto;
}
.bmc-cobra-download__label {
	flex: 1 1 auto;
}
.bmc-cobra-download__meta {
	flex: 0 0 auto;
	font-size: 0.85em;
	color: #6b7b88;
}
/* A row whose PDF is missing in Cobra — shown as plain text, not a dead link. */
.bmc-cobra .bmc-cobra-download--empty {
	color: #6b7b88;
	cursor: default;
}
.bmc-cobra-module__figure {
	margin: 0;
}
.bmc-cobra-module__image {
	max-width: 100%;
	height: auto;
}

.bmc-cobra-hinweis {
	padding: 1rem 1.25rem;
	background: #fff8e5;
	border-left: 4px solid #e4b200;
}
.bmc-cobra-hinweis .bmc-cobra-module__headline {
	color: #8a6d00;
}

.bmc-cobra-module__devnote {
	font-size: 0.85rem;
	color: #8a5a00;
}

/* ========================================================================== *
 * Buttons & the Phase-1 registration placeholder
 * ========================================================================== */

.bmc-cobra .bmc-cobra-button {
	display: inline-block;
	padding: 0.5em 1.1em;
	background: var(--bmc-blue);
	color: #fff;
	border-radius: 3px;
	text-decoration: none;
	font-family: 'source_sans_prosemibold', Helvetica, sans-serif;
}
.bmc-cobra .bmc-cobra-button:hover,
.bmc-cobra .bmc-cobra-button:focus {
	background: var(--bmc-blue-dark);
	color: #fff;
}

.bmc-cobra-registration-placeholder {
	padding: 1.25rem;
	border: 1px dashed var(--bmc-accent);
	border-radius: 4px;
	background: #f5f9fc;
	text-align: center;
}

/* ========================================================================== *
 * Category side-navigation (categories plan §5)
 *
 * Rendered into the theme's right #sidebar (Bmc_Cobra_Router::render_sidebar_nav),
 * above the promo widgets. Full-width boxes; the current node is highlighted
 * (darker, no chevron), every other item carries a "›". Two levels since 1.20.0:
 * the working groups nest under the Arbeitsgruppen row as indented, lighter
 * boxes, and the list no longer swaps with context.
 *
 * On plugin pages the content column's 17% Bootstrap offset is dropped so the
 * content (.span8) and the sidebar (.span4) sit side by side instead of the
 * sidebar wrapping below (span8 + offset2 + span4 > 100%).
 * ========================================================================== */


@media (max-width: 640px) {
	body.bmc-cobra-catpage #content.offset2 {
		width: auto;
	}
}

/* Container matches the theme's own sidebar menu block (#sidebar > div.sidebar):
   same ground, same 30px gap to the promo widget below it. Verified against
   /der-bmc/ueber-uns/, where that block is the sidebar nav on an ordinary page. */
.bmc-cobra-catnav {
	margin: 0 0 30px;
	background: #e1e9ee;
}
.bmc-cobra-catnav__list,
.bmc-cobra-catnav__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The rows deliberately mirror the theme's own sidebar menu — the block this nav
   replaces (see the suppression rule at the end of this section) — so the two are
   visually interchangeable: one flush column, rows separated by the theme's 2px
   white rule rather than gaps, 18px/24px type, and its arrow asset on the right.
   Values taken from bmc-template/styles/style-layout.css:
       #sidebar .menu-item                      => #e1e9ee + link-arrow-menu.png 95% 50%
       #sidebar … ul li                         => padding 15px 0; border-top 2px #fff
       #sidebar … ul li a                       => font-size 18px; color #000; padding 0 30px 0 20px
       #sidebar ul li.current-menu-item         => #c3d4dd
   Only `display` needs to out-specify the theme (#sidebar ul li { display: none }
   further down); every other property here is uncontested, because the theme's
   remaining sidebar rules are keyed to .menu-item / .current-menu-* classes that
   our rows do not carry. The arrow is referenced from the theme's img folder, so
   it follows the theme's own asset — a theme rename is the one thing that breaks
   it, and it degrades to a plain row. */
.bmc-cobra-catnav__item {
	margin: 0;
	padding: 0;
	border-top: 2px solid #fff;
}
/* Ground and arrow sit on the LINK, not the row — the theme puts them on its
   <li> because nothing is ever nested inside one. Ours nests: a branch row's
   <li> also wraps its sublist, so a background there would span all of it and
   centre the 95% 50% arrow somewhere down beside the children, leaving the
   branch row itself looking arrow-less. On the link it covers exactly one row.
   The row's height is therefore built here (15px + 24px + 15px, + the 2px rule
   above) and matches the theme's 56px exactly. */
.bmc-cobra-catnav__link {
	display: block;
	padding: 15px 30px 15px 20px;
	background: #e1e9ee url(/wp-content/themes/bmc-template/img/link-arrow-menu.png) 95% 50% no-repeat;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	text-decoration: none;
}
.bmc-cobra-catnav__label {
	min-width: 0;
}

/* Nested working groups: the theme's own convention for a level further in —
   a step down in type — plus a left indent and a lighter ground, so the second
   level of the taxonomy reads without breaking the single flush column.
   background-COLOR only, so the arrow set above survives: these are archive
   links exactly like every other row. */
.bmc-cobra-catnav__link--child {
	padding-left: 40px;
	background-color: #eef3f6;
	font-size: 16px;
}

/* Current node, at either level: the theme's #c3d4dd. The shorthand drops the
   arrow with it, which is what the theme does for its own current row — the
   arrow means "go here", and you are already here. Last in the block, and more
   specific than the child ground above, so it wins at both levels.

   Ground only: no cursor change, no hover, no transition of our own. The theme's
   current row stays an ordinary link (cursor stays `pointer`), and its links
   carry one global `transition: color 0.25s ease-in-out` that ours inherit for
   free. Anything added here would make this nav behave unlike every other
   sidebar on the site. */
.bmc-cobra-catnav__item.is-active > .bmc-cobra-catnav__link {
	background: #c3d4dd;
}

/* The ONE property the theme contests: it blanket-hides every row in its sidebar
   (#sidebar ul li { display: none }, styles/style-layout.css) and reveals them
   again only for .current-menu-item / -parent / -ancestor, the classes its own
   menu widget sets. Ours carry none of them, so without this the whole nav sits
   in the DOM at height 0 — rendered, correct and invisible, which is exactly how
   it shipped until 1.20.1. An ID cannot be out-specified by classes, so the
   counter-rule carries one too; scoping it to #sidebar rather than reaching for
   !important keeps it as narrow as the rule it answers. */
#sidebar .bmc-cobra-catnav__item {
	display: block;
}

/* Suppress the theme's DUPLICATE of this list (1.20.2).
   bmc-template also renders the primary menu into the sidebar as
   #sidebar > div.sidebar, revealing just the current branch. On a plugin page
   that branch is "Veranstaltungen" — whose children are the very items
   Bmc_Cobra_Navigation injects — so the same categories appeared twice, once as
   our boxes and once in the theme's own spacing. It was invisible as a problem
   only while our nav was (see above): the theme's copy was the list that showed.

   Hidden on plugin pages ONLY, via the body class the router already sets, so
   every other page keeps its sidebar menu untouched. If the theme's list is ever
   preferred over ours, delete this rule and stop rendering the nav
   (Bmc_Cobra_Router::render_sidebar_nav) — do not keep both. */
body.bmc-cobra-catpage #sidebar > .sidebar {
	display: none;
}

/* ========================================================================== *
 * Registration form (module 09 injection) — the two-email DOI flow.
 * Scoped under .bmc-cobra so the brand tokens above cascade in; fallbacks keep
 * it presentable if it is ever rendered outside that scope.
 * ========================================================================== */
.bmc-cobra-reg {
	--bmc-reg-blue: var(--bmc-blue, #006bb3);
	--bmc-reg-rule: var(--bmc-rule, #e1e9ee);
	--bmc-reg-ink: var(--bmc-ink, #141827);
	--bmc-reg-err: #cf5b5b;
	margin: 1.75rem 0;
}
.bmc-cobra-reg__noscript {
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	background: #fdf3f3;
	border-left: 4px solid #cf5b5b;
}
.bmc-cobra-reg__msg {
	margin: 1.25rem 0;
	padding: 0.85rem 1.1rem;
	border-left: 4px solid var(--bmc-accent, #80b5d9);
	background: #eef4f8;
	font-size: 15px;
}
.bmc-cobra-reg__msg.is-error {
	background: #fdf3f3;
	border-left-color: var(--bmc-reg-err);
}
.bmc-cobra-reg__msg.is-ok {
	background: #eef6ee;
	border-left-color: #4c9a5b;
}

/* Off-screen honeypot — never visible, never focusable. */
.bmc-cobra-reg__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bmc-cobra-reg__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}
.bmc-cobra-field--wide,
.bmc-cobra-field--consent {
	grid-column: 1 / -1;
}
@media (max-width: 640px) {
	.bmc-cobra-reg__grid {
		grid-template-columns: 1fr;
	}
}

.bmc-cobra-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.bmc-cobra-field > label,
.bmc-cobra-field__legend {
	margin: 0 0 0.35rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--bmc-reg-ink);
}
.bmc-cobra-reg__req {
	color: var(--bmc-reg-err);
	margin-left: 2px;
}
.bmc-cobra-field input[type="text"],
.bmc-cobra-field input[type="email"],
.bmc-cobra-field select,
.bmc-cobra-field textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--bmc-rule-strong, #ccd6dd);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	color: var(--bmc-reg-ink);
	box-sizing: border-box;
}
.bmc-cobra-field input:focus,
.bmc-cobra-field select:focus,
.bmc-cobra-field textarea:focus {
	border-color: var(--bmc-reg-blue);
	outline: 2px solid rgba(0, 107, 179, 0.15);
	outline-offset: 0;
}
.bmc-cobra-field textarea {
	resize: vertical;
}
.bmc-cobra-field.has-error input,
.bmc-cobra-field.has-error select,
.bmc-cobra-field.has-error textarea {
	border-color: var(--bmc-reg-err);
}
/* The widget renders in a cross-origin iframe whose own 1px border cannot be
   restyled, so the error state is drawn on the mount element instead. The border
   is reserved transparently in the resting state — unlike an outline, a border
   takes up space, and only reserving it on .has-error would nudge the layout
   whenever the error appears. Outer radius = the widget's 4px + the 2px border. */
.bmc-cobra-field--captcha .frc-captcha {
	border: 2px solid transparent;
	border-radius: 6px;
}
.bmc-cobra-field--captcha.has-error .frc-captcha {
	border-color: var(--bmc-reg-err);
}
.bmc-cobra-field__error {
	margin-top: 0.3rem;
	min-height: 1em;
	font-size: 14px;
	font-weight: 600;
	color: var(--bmc-reg-err);
}
/* Hide the error box entirely while it holds no message. The JS clears an
   error by emptying the span (textContent = '' / removing the inserted link),
   so :empty matches exactly the "no error" state and reveals it the moment a
   message or link node is added. */
.bmc-cobra-field__error:empty {
	display: none;
}

/* Duplicate-email check: small spinner shown inside the E-Mail field on blur. */
.bmc-cobra-reg__email-wrap {
	position: relative;
}
.bmc-cobra-reg__spinner {
	position: absolute;
	top: 50%;
	right: 0.7rem;
	width: 1rem;
	height: 1rem;
	margin-top: -0.5rem;
	border: 2px solid var(--bmc-rule-strong, #ccd6dd);
	border-top-color: var(--bmc-reg-blue);
	border-radius: 50%;
	pointer-events: none;
	animation: bmc-cobra-spin 0.6s linear infinite;
}
/* Reserve room for the spinner only while checking, so long addresses never overlap it. */
.bmc-cobra-reg__email-wrap.is-checking input[type="email"] {
	padding-right: 2.2rem;
}
@keyframes bmc-cobra-spin {
	to {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.bmc-cobra-reg__spinner {
		animation-duration: 1.6s;
	}
}

.bmc-cobra-reg__radios {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.bmc-cobra-reg__radio,
.bmc-cobra-reg__check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
}
.bmc-cobra-reg__radio input,
.bmc-cobra-reg__check input {
	margin-top: 0;
	flex: 0 0 auto;
}
.bmc-cobra-field--consent {
	margin-top: 1rem;
}
.bmc-cobra-reg__hint {
	margin: 0 0 1.25rem;
	font-size: 16px;
	color: var(--bmc-muted, #888);
}
.bmc-cobra-reg__submit {
	display: inline-block;
	margin-top: 10px;
	padding: 0.7rem 1.6rem;
	border: 0;
	border-radius: 4px;
	background: var(--bmc-reg-blue);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.bmc-cobra-reg__submit:hover,
.bmc-cobra-reg__submit:focus {
	background: var(--bmc-blue-dark, #005a96);
}
.bmc-cobra-reg__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* --- Step 2 attention treatment ------------------------------------------ */
/* Keep the revealed step clear of a sticky site header when scrolled into view. */
.bmc-cobra-reg__verify {
	scroll-margin-top: 2rem;
}

/* 2-step indicator shown above the amber panel. */
.bmc-cobra-reg__steps {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
}
.bmc-cobra-reg__step {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--bmc-muted, #888);
}
.bmc-cobra-reg__step + .bmc-cobra-reg__step {
	position: relative;
	padding-left: 1.9rem;
}
.bmc-cobra-reg__step + .bmc-cobra-reg__step::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	opacity: 0.4;
}
.bmc-cobra-reg__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: #d7dee4;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.bmc-cobra-reg__step.is-done {
	color: var(--bmc-blue, #006bb3);
}
.bmc-cobra-reg__step.is-done .bmc-cobra-reg__step-num {
	background: var(--bmc-blue, #006bb3);
}
.bmc-cobra-reg__step.is-active {
	color: #8a6413;
}
.bmc-cobra-reg__step.is-active .bmc-cobra-reg__step-num {
	background: #e0a83e;
	color: #3a2c07;
}

/* The amber "action required" panel wrapping the whole code-entry step. */
.bmc-cobra-reg__panel {
	position: relative;
	padding: 1.2rem 1.4rem 1.4rem;
	background: #fff8ec;
	border: 1px solid #f1dcae;
	border-left: 5px solid #e0a83e;
	border-radius: 6px;
}
.bmc-cobra-reg__badge {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	background: #e0a83e;
	color: #3a2c07;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
}
.bmc-cobra-reg__callout-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.6rem 0 0.4rem;
	font-size: 18px;
	font-weight: 700;
	color: var(--bmc-reg-ink, #141827);
}
.bmc-cobra-reg__callout-icon {
	font-size: 20px;
	line-height: 1;
}
.bmc-cobra-reg__panel .bmc-cobra-reg__verify-lead {
	margin: 0 0 1.1rem;
}

/* One-time expanding-ring pulse drawing the eye when the panel appears. */
@keyframes bmc-cobra-attn {
	0% {
		box-shadow: 0 0 0 0 rgba( 224, 168, 62, 0.55 );
	}
	70% {
		box-shadow: 0 0 0 14px rgba( 224, 168, 62, 0 );
	}
	100% {
		box-shadow: 0 0 0 0 rgba( 224, 168, 62, 0 );
	}
}
.bmc-cobra-reg__panel.is-appearing {
	animation: bmc-cobra-attn 1.3s ease-out 2;
}
@media (prefers-reduced-motion: reduce) {
	.bmc-cobra-reg__panel.is-appearing {
		animation: none;
	}
}

.bmc-cobra-reg__verify-lead {
	margin: 0 0 1rem;
}
.bmc-cobra-reg__verify .bmc-cobra-field {
	max-width: 220px;
}
.bmc-cobra-reg__verify input[name="code"] {
	font-size: 22px;
	letter-spacing: 6px;
	text-align: center;
}
.bmc-cobra-reg__resend-line {
	margin: 1rem 0 0;
	font-size: 14px;
	color: var(--bmc-muted, #888);
}
.bmc-cobra-reg__resend {
	border: 0;
	background: none;
	padding: 0;
	color: var(--bmc-reg-blue);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.bmc-cobra-reg__done {
	padding: 1.25rem 1.4rem;
	background: #eef6ee;
	border-left: 4px solid #4c9a5b;
}
.bmc-cobra-reg__done-title {
	margin: 0 0 0.4rem;
	font-size: 18px;
	font-weight: 700;
	color: #2f6b3b;
}
.bmc-cobra-reg__done-text {
	margin: 0;
}