/**
 * RegistrationGuard — Custom Forms Frontend Styles
 * @version 2.2.0
 */

/* ========== Form Wrapper ========== */
.ossce-rg-form-wrap {
	max-width: 540px;
	margin: 30px auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* Standalone shortcode pages only. Inside the overlay this is overridden by
   `.ossce-rg-overlay .ossce-rg-form-wrap { max-width: none }` and the dialog's
   own width governs instead — see the overlay section at the end of this file.
   The register form carries more fields and a three-step indicator, so it gets
   more room than the login form when it has a page to itself. */
.ossce-rg-register-form {
	max-width: 620px;
}

/* ========== Form Header ========== */
.ossce-rg-form-header {
	background: linear-gradient(135deg, #7d0418 0%, #a41e32 50%, #c73650 100%);
	padding: 12px 24px;
	text-align: center;
	color: #fff;
}

.ossce-rg-form-header .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	margin-bottom: 0;
	opacity: 0.9;
	vertical-align: middle;
}

.ossce-rg-form-header h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: #fff;
	display: inline;
	vertical-align: middle;
}

.ossce-rg-form-header p {
	margin: 3px 0 0;
	font-size: 12px;
	opacity: 0.85;
	line-height: 1.4;
}

/* ========== Form Body ========== */
.ossce-rg-form-body {
	padding: 28px 30px;
}

/* ========== Role Tabs ========== */
.ossce-rg-role-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 24px;
	border: 2px solid #dfe6e9;
	border-radius: 8px;
	overflow: hidden;
}

.ossce-rg-role-tab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	background: #fff;
	border: none;
	color: #636e72;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.ossce-rg-role-tab:first-child {
	border-right: 2px solid #dfe6e9;
}

.ossce-rg-role-tab:hover {
	background: #f8f9fa;
	color: #2d3436;
}

.ossce-rg-role-tab.active {
	background: linear-gradient(135deg, #7d0418, #a41e32);
	color: #fff;
}

.ossce-rg-role-tab .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ========== Wizard Progress ========== */
.ossce-rg-wizard-progress {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 28px;
	/* Bottom padding leaves room for the labels, which are taken out of flow
	   below. */
	padding: 0 10px 20px;
}

/* Width is pinned to the circle rather than left to the label. Previously the
   indicator was a column containing both, so its box grew to the width of the
   widest label — "CONTACT INFORMATION" — and the connectors attached to the
   edge of that box instead of to the circle, leaving a visible gap on each
   side. The labels are positioned below instead, so they can be as wide as they
   like without pushing the connectors away. */
.ossce-rg-wizard-step-indicator {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 32px;
	flex-shrink: 0;
}

.ossce-rg-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #dfe6e9;
	color: #636e72;
	font-size: 13px;
	font-weight: 700;
	transition: background 0.3s, color 0.3s;
}

.ossce-rg-wizard-step-indicator.active .ossce-rg-step-number,
.ossce-rg-wizard-step-indicator.completed .ossce-rg-step-number {
	background: linear-gradient(135deg, #7d0418, #a41e32);
	color: #fff;
}

.ossce-rg-wizard-step-indicator.completed .ossce-rg-step-number {
	background: #46b450;
}

.ossce-rg-step-label {
	position: absolute;
	top: 38px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	color: #868e96;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
}

.ossce-rg-wizard-step-indicator.active .ossce-rg-step-label {
	color: #a41e32;
	font-weight: 600;
}

.ossce-rg-step-connector {
	flex: 1;
	height: 2px;
	background: #dfe6e9;
	/* 15px = half the 32px circle, less the connector's own 2px, so the line sits
	   on the circles' centre line. It used to be nudged with margin-bottom, which
	   only worked while the labels were still inside the indicator's box. */
	margin: 15px 8px 0;
	transition: background 0.3s;
}

.ossce-rg-step-connector.completed {
	background: #46b450;
}

/* ========== Fields Grid ========== */
.ossce-rg-fields-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.ossce-rg-field {
	position: relative;
}

.ossce-rg-field-full {
	width: 100%;
}

.ossce-rg-field-half {
	width: calc(50% - 8px);
}

/* ========== Field Styles ========== */
.ossce-rg-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #2d3436;
}

.ossce-rg-required {
	color: #dc3232;
	margin-left: 2px;
}

.ossce-rg-field input[type="text"],
.ossce-rg-field input[type="email"],
.ossce-rg-field input[type="tel"],
.ossce-rg-field input[type="url"],
.ossce-rg-field input[type="number"],
.ossce-rg-field input[type="date"],
.ossce-rg-field input[type="password"],
.ossce-rg-field select,
.ossce-rg-field textarea {
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
	border: 1px solid #dfe6e9;
	border-radius: 8px;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
	background: #fff;
}

.ossce-rg-field input:focus,
.ossce-rg-field select:focus,
.ossce-rg-field textarea:focus {
	border-color: #a41e32;
	box-shadow: 0 0 0 3px rgba(164, 30, 50, 0.1);
	outline: none;
}

.ossce-rg-field input.ossce-rg-valid {
	border-color: #46b450;
}

.ossce-rg-field input.ossce-rg-invalid {
	border-color: #dc3232;
}

/* ========== Password Field ========== */
.ossce-rg-password-wrap {
	position: relative;
}

.ossce-rg-password-wrap input {
	padding-right: 44px;
}

.ossce-rg-toggle-password {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: #636e72;
	transition: color 0.2s;
}

.ossce-rg-toggle-password:hover {
	color: #a41e32;
}

.ossce-rg-toggle-password .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ========== Password Strength ========== */
.ossce-rg-password-strength {
	margin-top: 6px;
}

.ossce-rg-strength-bar {
	height: 4px;
	background: #f0f0f1;
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 3px;
}

.ossce-rg-strength-fill {
	height: 100%;
	border-radius: 2px;
	transition: width 0.3s, background 0.3s;
	width: 0;
}

.ossce-rg-strength-label {
	font-size: 11px;
	color: #868e96;
}

.ossce-rg-password-strength.weak .ossce-rg-strength-fill   { width: 25%; background: #dc3232; }
.ossce-rg-password-strength.fair .ossce-rg-strength-fill    { width: 50%; background: #ffb900; }
.ossce-rg-password-strength.good .ossce-rg-strength-fill    { width: 75%; background: #46b450; }
.ossce-rg-password-strength.strong .ossce-rg-strength-fill  { width: 100%; background: #00a32a; }

/* ========== Role Tabs at Top (register card) ========== */
.ossce-rg-register-form > .ossce-rg-role-tabs {
	margin: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background: #f4f5f7;
}

/* Neutralise the theme's <button> styling (rounded corners, shadows, margins)
   so the tabs read as flush segmented tabs, with an underline indicator for the
   active tab. Extra specificity + !important defeat theme button rules. */
.ossce-rg-form-wrap .ossce-rg-role-tab {
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	background: transparent;
	color: #636e72;
	border-bottom: 3px solid transparent !important;
}

.ossce-rg-form-wrap .ossce-rg-role-tab + .ossce-rg-role-tab {
	border-left: 1px solid #e5e7eb !important;
}

.ossce-rg-form-wrap .ossce-rg-role-tab:hover {
	background: #eceef1;
	color: #2d3436;
}

.ossce-rg-form-wrap .ossce-rg-role-tab.active {
	background: #fff;
	color: #a41e32;
	border-bottom-color: #a41e32 !important;
}

/* ========== Password Requirements ========== */
.ossce-rg-password-reqs {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 14px;
}

.ossce-rg-password-reqs li {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 11px;
	color: #868e96;
	line-height: 1.6;
}

.ossce-rg-password-reqs .ossce-rg-req-mark {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: #cbd2d9;
	flex-shrink: 0;
}

.ossce-rg-password-reqs li.met {
	color: #157347;
}

.ossce-rg-password-reqs li.met .ossce-rg-req-mark {
	color: #46b450;
}

.ossce-rg-password-reqs li.met .ossce-rg-req-mark:before {
	content: "\f147";
}

/* ========== Field Errors ========== */
.ossce-rg-field-error {
	font-size: 12px;
	color: #dc3232;
	margin-top: 4px;
	line-height: 1.4;
}

/* ========== Checkbox / Terms ========== */
/* Scoped under .ossce-rg-form-wrap so this beats the generic
   `.ossce-rg-field label { display:block }` rule (higher specificity), letting
   the flex row + vertical centering actually apply. */
.ossce-rg-form-wrap .ossce-rg-checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: #2d3436;
	cursor: pointer;
}

/* Custom-styled checkbox matching the form's inputs (burgundy brand, rounded,
   focus ring). appearance:none + !important defeats the theme's own checkbox
   styling. */
.ossce-rg-form-wrap .ossce-rg-checkbox-label input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	border: 1px solid #cdd5db !important;
	border-radius: 6px !important;
	background: #fff !important;
	cursor: pointer;
	position: relative;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

/* Neutralize any theme-drawn check glyph so only our own ::after check shows. */
.ossce-rg-form-wrap .ossce-rg-checkbox-label input[type="checkbox"]::before {
	content: none !important;
	display: none !important;
}

.ossce-rg-form-wrap .ossce-rg-checkbox-label input[type="checkbox"]:hover {
	border-color: #a41e32 !important;
}

.ossce-rg-form-wrap .ossce-rg-checkbox-label input[type="checkbox"]:focus {
	outline: none;
	border-color: #a41e32 !important;
	box-shadow: 0 0 0 3px rgba(164, 30, 50, 0.1);
}

.ossce-rg-form-wrap .ossce-rg-checkbox-label input[type="checkbox"]:checked {
	background: linear-gradient(135deg, #7d0418, #a41e32) !important;
	border-color: #a41e32 !important;
}

.ossce-rg-form-wrap .ossce-rg-checkbox-label input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ossce-rg-terms-label a {
	color: #a41e32;
	text-decoration: underline;
}

/* ========== Login Options Row ========== */
.ossce-rg-login-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ossce-rg-forgot-link {
	font-size: 13px;
	color: #a41e32;
	text-decoration: none;
}

.ossce-rg-forgot-link:hover {
	text-decoration: underline;
}

/* ========== File Upload ========== */
.ossce-rg-file-upload input[type="file"] {
	padding: 8px;
	border: 2px dashed #dfe6e9;
	border-radius: 8px;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
}

.ossce-rg-file-preview {
	position: relative;
	display: inline-block;
	margin-top: 8px;
}

.ossce-rg-file-preview img {
	max-width: 100px;
	max-height: 100px;
	border-radius: 8px;
	border: 1px solid #dfe6e9;
}

.ossce-rg-file-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #dc3232;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	padding: 0;
}

/* ========== Radio Group ========== */
.ossce-rg-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ossce-rg-radio-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #2d3436;
	cursor: pointer;
}

/* ========== Section Heading ========== */
.ossce-rg-section-heading {
	width: 100%;
	margin: 8px 0 0;
	padding-bottom: 8px;
	border-bottom: 1px solid #dfe6e9;
	font-size: 15px;
	font-weight: 600;
	color: #2d3436;
}

/* ========== Buttons ========== */
.ossce-rg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.1s;
}

.ossce-rg-btn:active {
	transform: scale(0.98);
}

.ossce-rg-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ossce-rg-btn-primary {
	background: linear-gradient(135deg, #7d0418, #a41e32);
	color: #fff;
	width: 100%;
}

.ossce-rg-btn-primary:hover:not(:disabled) {
	opacity: 0.9;
}

.ossce-rg-btn-secondary {
	background: #f0f0f1;
	color: #636e72;
}

.ossce-rg-btn-secondary:hover:not(:disabled) {
	background: #e0e0e1;
}

.ossce-rg-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ========== Wizard Navigation ========== */
.ossce-rg-wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f1;
}

.ossce-rg-wizard-nav .ossce-rg-btn-primary {
	width: auto;
	min-width: 140px;
}

.ossce-rg-wizard-nav .ossce-rg-btn-secondary {
	width: auto;
}

/* ========== Alerts ========== */
.ossce-rg-alert {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.5;
}

/* Standing notice set on FormsHub > Login Form (3.7.1).

   Shares the alert's shape so the form has one visual language, but is a
   separate class on purpose: .ossce-rg-alert is toggled by JS to report the
   attempt just made, and reusing it here would mean a site-wide message and a
   "wrong password" error competing for the same element. */
.ossce-rg-login-notice {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.5;
}

.ossce-rg-login-notice p:first-child {
	margin-top: 0;
}

.ossce-rg-login-notice p:last-child {
	margin-bottom: 0;
}

.ossce-rg-login-notice ul,
.ossce-rg-login-notice ol {
	margin: 6px 0 0;
	padding-left: 20px;
}

.ossce-rg-login-notice a {
	color: inherit;
	text-decoration: underline;
}

.ossce-rg-login-notice--info {
	background: #eff6ff;
	border: 1px solid #93c5fd;
	color: #1e40af;
}

.ossce-rg-login-notice--warning {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	color: #92400e;
}

.ossce-rg-login-notice--success {
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	color: #065f46;
}

.ossce-rg-alert.success {
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	color: #065f46;
}

.ossce-rg-alert.error {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	color: #991b1b;
}

.ossce-rg-alert.info {
	background: #eff6ff;
	border: 1px solid #93c5fd;
	color: #1e40af;
}

/* ========== Success takeover (replaces the form body on success) ========== */
.ossce-rg-success {
	text-align: center;
	padding: 24px 10px 12px;
}

.ossce-rg-success-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, #7d0418, #a41e32);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(164, 30, 50, 0.25);
}

.ossce-rg-success-icon .dashicons {
	color: #fff;
	font-size: 38px;
	width: 38px;
	height: 38px;
}

.ossce-rg-success-text {
	font-size: 15px;
	line-height: 1.6;
	color: #2d3436;
	max-width: 440px;
	margin: 0 auto;
}

.ossce-rg-success-text a {
	color: #a41e32;
	font-weight: 600;
}

.ossce-rg-success-note {
	margin-top: 14px;
	font-size: 13px;
	color: #868e96;
}

/* ========== Form Footer ========== */
.ossce-rg-form-footer {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f1;
	text-align: center;
}

.ossce-rg-form-footer p {
	margin: 0;
	font-size: 13px;
	color: #636e72;
}

.ossce-rg-form-footer a {
	color: #a41e32;
	font-weight: 600;
	text-decoration: none;
}

.ossce-rg-form-footer a:hover {
	text-decoration: underline;
}

/* ========== reCAPTCHA ========== */
.ossce-rg-field-recaptcha {
	display: flex;
	justify-content: center;
	margin: 8px 0;
}

/* ========== Responsive ========== */
@media (max-width: 600px) {
	.ossce-rg-form-wrap {
		margin: 15px 10px;
		border-radius: 8px;
	}

	.ossce-rg-form-header {
		padding: 20px;
	}

	.ossce-rg-form-body {
		padding: 20px;
	}

	.ossce-rg-field-half {
		width: 100%;
	}

	.ossce-rg-wizard-progress {
		flex-wrap: wrap;
		gap: 8px;
		align-items: center;
		padding-bottom: 0;
	}

	.ossce-rg-step-connector {
		display: none;
	}

	/* On narrow screens each step becomes a circle with its label beside it and
	   the connectors are hidden, so the desktop rules that pin the indicator to
	   the circle's width and lift the label out of flow are undone here. */
	.ossce-rg-wizard-step-indicator {
		flex-direction: row;
		gap: 6px;
		width: auto;
		position: static;
	}

	.ossce-rg-step-label {
		position: static;
		transform: none;
		top: auto;
		left: auto;
	}

	.ossce-rg-wizard-nav {
		flex-direction: column-reverse;
		gap: 10px;
	}

	.ossce-rg-wizard-nav .ossce-rg-btn {
		width: 100%;
	}

	.ossce-rg-login-options {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* Phone mask flag icon (ported from the native-form enhancement) */
.ossce-rg-phone-wrapper {
	position: relative;
}

.ossce-rg-phone-wrapper .ossce-rg-flag-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: auto;
	border-radius: 2px;
	pointer-events: none;
}

.ossce-rg-phone-wrapper input[type="tel"] {
	padding-left: 44px;
}

/* Field description (admin-authored, shown under the label) */
.ossce-rg-field-desc {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.5;
	margin: 2px 0 8px;
}

/* Links inside consent checkbox text (Terms, Privacy, etc.) */
.ossce-rg-checkbox-label a {
	color: #a41e32;
	font-weight: 600;
	text-decoration: underline;
}

.ossce-rg-checkbox-label a:hover {
	color: #7d0418;
}

/* Searchable multi-select hint */
.ossce-rg-field-hint {
	font-size: 12px;
	color: #8a8a8a;
	margin: 6px 0 0;
}

/* ========== Self-contained chip multi-select ========== */
.ossce-rg-chips {
	position: relative;
}

.ossce-rg-chips-control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 42px;
	padding: 5px 8px;
	border: 1px solid #dfe6e9;
	border-radius: 8px;
	background: #fff;
	cursor: text;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.ossce-rg-chips.open .ossce-rg-chips-control {
	border-color: #a41e32;
	box-shadow: 0 0 0 3px rgba(164, 30, 50, 0.1);
}

.ossce-rg-chips-list {
	display: contents;
}

.ossce-rg-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 4px 3px 10px;
	background: #fbeaed;
	border: 1px solid rgba(164, 30, 50, 0.25);
	border-radius: 14px;
	font-size: 13px;
	font-weight: 600;
	color: #a41e32;
	line-height: 1.3;
}

.ossce-rg-chip-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(164, 30, 50, 0.12);
	color: #a41e32;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.ossce-rg-chip-x:hover {
	background: linear-gradient(135deg, #7d0418, #a41e32);
	color: #fff;
}

.ossce-rg-chips-search {
	flex: 1 1 80px;
	min-width: 80px;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 4px !important;
	margin: 0 !important;
	background: transparent !important;
	font-size: 14px;
}

.ossce-rg-chips-menu {
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	max-height: 240px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #dfe6e9;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.ossce-rg-chips-option {
	padding: 8px 12px;
	font-size: 14px;
	color: #2d3436;
	cursor: pointer;
}

.ossce-rg-chips-option:hover {
	background: #fbeaed;
	color: #a41e32;
}

.ossce-rg-chips-empty,
.ossce-rg-chips-note {
	padding: 8px 12px;
	font-size: 12px;
	color: #868e96;
}

.ossce-rg-chips-note {
	color: #a41e32;
	background: #fbeaed;
}

/* ==========================================================================
   Replace mode
   ==========================================================================
   In replace mode our forms are moved out of Superio's popup markup and into
   our own overlay at init (see initOssceOverlay in registration-guard-forms.js),
   and the theme's popup is never opened. The overlay styles live at the end of
   this file.

   The block of magnific-popup overrides that used to sit here has been removed:
   it was written while our forms still rendered inside the theme's popup, and
   every rule in it was scoped with :has(.ossce-rg-form-wrap) or .mfp-*, so it
   stopped matching anything once the forms were relocated. */



/* The reCAPTCHA widget is a fixed 304px iframe, so left-aligning it leaves a
   dead gap once the form spans the full panel width. */
.ossce-rg-recaptcha-container:not(:empty) {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

/* The login form stacks bare .ossce-rg-field blocks directly in the body with
   no grid gap to space them (unlike the register wizard, which uses
   .ossce-rg-fields-grid). Give the login body its own vertical rhythm so the
   Remember-me row and the reCAPTCHA are not jammed against the field above. */
#ossce-rg-login-form .ossce-rg-form-body > .ossce-rg-field {
	margin-bottom: 18px;
}

#ossce-rg-login-form .ossce-rg-login-options {
	margin-top: 4px;
}

#ossce-rg-login-form .ossce-rg-recaptcha-container:not(:empty) {
	margin-top: 4px;
	margin-bottom: 20px;
}

/* ==========================================================================
   OSSCE modal overlay (replace mode)
   ==========================================================================
   Our own modal container, used instead of the theme's magnific popup.

   Superio's popup positions its panel as an inline-block centred with
   vertical-align: middle, so every height change (moving between wizard steps,
   a validation message appearing) re-centred and shifted it. Overriding that
   from the outside proved brittle, so in replace mode we intercept the header
   triggers and render the forms in this container instead.

   The layout is deliberately simple and cannot jump: a full-viewport scroll
   area with fixed top padding, and a dialog with `margin: 0 auto`. The dialog's
   top edge is always the same distance from the top of the scroll area no
   matter how tall it becomes; when it outgrows the viewport the scroll area
   scrolls rather than the dialog re-positioning. */

.ossce-rg-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ossce-rg-overlay.is-visible {
	display: block;
}

.ossce-rg-overlay.is-open {
	opacity: 1;
}

.ossce-rg-overlay-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 11, 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ossce-rg-overlay-scroll {
	position: relative;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 5vh 16px;
	box-sizing: border-box;
}

.ossce-rg-overlay-dialog {
	position: relative;
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
	transition: width 0.2s ease;
}

/* Login is a two-field form and reads stretched at the register width. */
.ossce-rg-overlay-dialog[data-active="login"] {
	width: 460px;
}

.ossce-rg-overlay-close {
	position: absolute;
	top: 12px;
	right: 14px;
	z-index: 5;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.ossce-rg-overlay-close:hover,
.ossce-rg-overlay-close:focus {
	opacity: 1;
	background: rgba(255, 255, 255, 0.15);
	outline: none;
}

.rtl .ossce-rg-overlay-close {
	right: auto;
	left: 14px;
}

.ossce-rg-overlay-panel {
	display: none;
}

.ossce-rg-overlay-panel.is-active {
	display: block;
}

/* Our card is the single rounded white surface in the overlay. */
.ossce-rg-overlay .ossce-rg-form-wrap {
	width: 100%;
	max-width: none;
	margin: 0;
	background: #fff;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

/* Prevent the page behind the overlay from scrolling. The scrollbar width is
   compensated with padding (set from JS) so removing the scrollbar does not
   reflow the page wider, which reads as a sideways jump when the modal opens. */
body.ossce-rg-overlay-open {
	overflow: hidden;
}

/* ==========================================================================
   Success panel
   ==========================================================================
   Replaces the entire card on a successful submit — including the burgundy
   header, which is dropped because the form chrome is no longer meaningful once
   the submission has gone through. */

.ossce-rg-success-panel {
	background: #fff;
	border-radius: 8px;
	padding: 44px 32px 40px;
	text-align: center;
}

.ossce-rg-success-badge {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
}

.ossce-rg-success-badge svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ossce-rg-success-ring {
	fill: none;
	stroke: #2e9e5b;
	stroke-width: 2.5;
	stroke-dasharray: 145;
	stroke-dashoffset: 145;
	animation: ossce-rg-success-ring-in 0.5s ease-out forwards;
}

.ossce-rg-success-check {
	fill: none;
	stroke: #2e9e5b;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: ossce-rg-success-check-in 0.3s 0.4s ease-out forwards;
}

@keyframes ossce-rg-success-ring-in {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes ossce-rg-success-check-in {
	to {
		stroke-dashoffset: 0;
	}
}

.ossce-rg-success-title {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: #1d2327;
}

.ossce-rg-success-text {
	margin: 0 auto;
	max-width: 42ch;
	font-size: 15px;
	line-height: 1.6;
	color: #50575e;
}

.ossce-rg-success-text p:last-child {
	margin-bottom: 0;
}

.ossce-rg-success-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #f0f0f1;
	font-size: 13px;
	color: #7c848b;
}

.ossce-rg-success-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid #d8dde2;
	border-top-color: #a41e32;
	border-radius: 50%;
	animation: ossce-rg-success-spin 0.7s linear infinite;
}

.ossce-rg-success-actions {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid #f0f0f1;
}

.ossce-rg-success-close {
	display: inline-block;
	min-width: 140px;
	padding: 11px 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #7d0418 0%, #a41e32 50%, #c73650 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.ossce-rg-success-close:hover,
.ossce-rg-success-close:focus {
	filter: brightness(1.08);
	box-shadow: 0 4px 14px rgba(164, 30, 50, 0.3);
	outline: none;
}

.ossce-rg-success-close:focus-visible {
	outline: 2px solid #a41e32;
	outline-offset: 2px;
}

/* With the burgundy header replaced by the white success panel, the overlay's
   own close control would be white on white. */
.ossce-rg-overlay-dialog.is-success .ossce-rg-overlay-close {
	color: #646970;
}

.ossce-rg-overlay-dialog.is-success .ossce-rg-overlay-close:hover,
.ossce-rg-overlay-dialog.is-success .ossce-rg-overlay-close:focus {
	color: #1d2327;
	background: rgba(0, 0, 0, 0.06);
}

@keyframes ossce-rg-success-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ossce-rg-success-ring,
	.ossce-rg-success-check {
		animation: none;
		stroke-dashoffset: 0;
	}

	.ossce-rg-success-spinner {
		animation-duration: 2s;
	}
}

@media screen and (max-width: 782px) {
	.ossce-rg-overlay-scroll {
		padding: 3vh 12px;
	}

	.ossce-rg-overlay-dialog,
	.ossce-rg-overlay-dialog[data-active="login"] {
		width: 100%;
	}
}