/* Special-event page overrides — match Figma "special event 2026" design. */
/* The "gopher" family is loaded via the Typekit kit https://use.typekit.net/axx3sqs.css,
   which is included from special-event.php (same kit as nishmas-signup.php et al.). */

/* Palette — extracted from Figma via get_design_context (node 5044:967) */
:root {
	--se-header-bg: #C6BFBF;
	--se-header-text: #2b273c;   /* section heading text */
	--se-slate: #777483;         /* Reservation Yes pill, Submit buttons, sidebar icons, radio circles */
	--se-slate-hover: #65636c;
	--se-mauve: #b49fb3;         /* Ohel Sarala Yes pill, Kvitel Clear button */
	--se-mauve-hover: #9c8a9c;
	--se-eligibility-bg: #FAF3DF;
	--se-ohel-panel-bg: #faf1fa;
	--se-input-border: #d1d2d8;
	--se-error-bg: #FFDFDF;
	--se-error-text: #4f0000;
	--se-body-text: #0b101f;
	--se-placeholder: #c1c1c1;
	/* legacy aliases (kept so older selectors below keep working) */
	--se-accent: var(--se-mauve);
	--se-accent-hover: var(--se-mauve-hover);
	--se-sidebar-header-bg: #C6BFBF;
}

body.special-event-page {
	background: #ffffff;
	color: var(--se-body-text);
}

/* Layout: force the outer flex row to keep the sidebar narrow and let the form take remaining width */
body.special-event-page section.my-account .room-container-section > .container-center > .flex-col {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	width: 100%;
}
body.special-event-page section.my-account .flex-col > .left-panel {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}
body.special-event-page section.my-account .flex-col > .sticky-section {
	flex: 0 0 336px;
	width: 336px;
	min-width: 336px;
	max-width: 336px;
	margin: 0;
	position: sticky;
	top: 130px; /* offset for the fixed top-nav (.ohel-outer-section, ~113px) */
	align-self: flex-start;
}
/* Section headers align vertically with the sidebar top by having matching margin-top */
body.special-event-page .left-panel .section-head:first-of-type,
body.special-event-page .left-panel .toggle-text-head.section-head:first-of-type {
	margin-top: 0;
}
body.special-event-page .sticky-section .checkout-sticky-content {
	margin-top: 0;
}
/* Nested wrappers in the left panel shouldn't add their own padding/max-widths */
body.special-event-page .left-panel .cont-area,
body.special-event-page .left-panel .main-cont.full-area,
body.special-event-page .left-panel .form-area1 {
	padding: 0;
	max-width: none;
	width: 100%;
}
@media (max-width: 991px) {
	body.special-event-page section.my-account .room-container-section > .container-center > .flex-col {
		flex-direction: column;
	}
	body.special-event-page section.my-account .flex-col > .sticky-section {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
	}
}

/* Section headers — 32px Gopher Bold, #2b273c text on #C6BFBF bar, 15px padding */
body.special-event-page .section-head,
body.special-event-page h2.section-head,
body.special-event-page .toggle-text-head.section-head {
	background: var(--se-header-bg);
	color: var(--se-header-text);
	padding: 15px;
	margin: 30px 0 20px;
	font-family: "gopher", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0;
	border-radius: 0;
}

/* Sidebar "Sign up" — 26px Gopher Bold, uppercase, centered in a 58px grey bar */
body.special-event-page .sticky-section .heading-section {
	height: 58px;
}
body.special-event-page .sticky-section .heading-section span {
	font-family: "gopher", sans-serif;
	font-weight: 700;
	font-size: 26px;
	text-transform: uppercase;
	color: var(--se-header-text);
}
body.special-event-page .sticky-section .checkout-list li {
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: var(--se-body-text);
}

/* Event description block (HTML from admin) — 16px Roboto Regular, black */
body.special-event-page .event-description {
	padding: 0;
	margin: 0 0 15px;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #000;
}
body.special-event-page .event-description p:last-child { margin-bottom: 0; }

/* Age eligibility banner — 16px Roboto SemiBold, black text + border, #FAF3DF bg */
body.special-event-page .age-eligibility-banner {
	margin: 0 0 20px;
	padding: 10px 16px;
	background: var(--se-eligibility-bg);
	border: 1px solid #000;
	color: #000;
	border-radius: 0;
	font-family: "Roboto", sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-align: center;
}

/* Reservation-price block — plain white per Figma, prominent $18 price with a divider */
body.special-event-page .reservation-price-block {
	padding: 0 0 12px;
}
/* 16px Roboto Regular per Figma */
body.special-event-page .reservation-price-intro {
	margin: 0 0 8px;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
}
/* 32px Gopher Bold — the big price */
body.special-event-page .reservation-price-amount {
	font-family: "gopher", sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #000;
	margin: 0 0 20px;
}
body.special-event-page .reservation-price-amount.monthly-member-price {
	position: relative;
	display: inline-block;
	text-decoration-line: line-through !important;
	text-decoration-thickness: 3px;
	text-decoration-color: currentColor;
}
body.special-event-page .reservation-price-amount.monthly-member-price::after {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	top: 50%;
	border-top: 3px solid currentColor;
	pointer-events: none;
}
body.special-event-page .reservation-price-divider {
	border: 0;
	border-top: 1px solid var(--se-input-border);
	margin: 20px 0;
}
/* 18px Roboto Medium per Figma */
body.special-event-page .reservation-price-note {
	margin: 0 0 15px;
	color: var(--se-body-text);
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
}
body.special-event-page .monthly-signup-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0 0;
}
body.special-event-page .monthly-signup-toggle p.max-w-240 {
	margin: 0;
	max-width: none;
	flex: 1;
	font-size: 14px;
}
/* Currency + amount box per Figma: 100px tall pair of rounded panels, no border on right/left junction */
body.special-event-page .monthly-signup-fields,
body.special-event-page .sign-me-ohel-sarala .ohelDonation {
	margin-top: 30px;
}
body.special-event-page .monthly-signup-fields .amount-large-section,
body.special-event-page .sign-me-ohel-sarala .amount-large-section {
	display: flex;
	gap: 0;
	align-items: stretch;
	max-width: 954px;
	overflow: visible;
	border-radius: 20px;
}
body.special-event-page .monthly-signup-fields .left-col,
body.special-event-page .sign-me-ohel-sarala .amount-large-section .left-col {
	position: relative;
	background: #fff;
	border: 1px solid var(--se-input-border);
	border-right: 0;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	width: 200px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30px;
}
body.special-event-page .monthly-signup-fields .right-col,
body.special-event-page .sign-me-ohel-sarala .amount-large-section .right-col {
	flex: 1;
	background: #fff;
	border: 1px solid var(--se-input-border);
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	height: 100px;
	display: flex;
	align-items: center;
	padding: 0 30px;
}
body.special-event-page .monthly-signup-fields .form-controls,
body.special-event-page .sign-me-ohel-sarala .amount-large-section .form-controls {
	width: 100%;
	border: 0 !important;
	height: 100%;
	padding: 0;
	background: transparent;
	font-family: "gopher", sans-serif;
	font-size: 32px;
	color: #000;
}
body.special-event-page .monthly-signup-fields .form-controls::placeholder,
body.special-event-page .sign-me-ohel-sarala .amount-large-section .form-controls::placeholder {
	color: var(--se-placeholder);
	opacity: 1;
}
body.special-event-page .dropdown-currency {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	height: auto;
	cursor: pointer;
	background: transparent;
	color: #000;
	font-family: "gopher", sans-serif;
	font-weight: 700;
	font-size: 32px;
}
body.special-event-page .dropdown-currency .dollar { font-weight: 700; }
body.special-event-page .dropdown-currency .currency { font-weight: 400; }
body.special-event-page .dropdown-currency-content {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 140px;
	background: #fff;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	list-style: none;
	padding: 4px 0;
	margin: 4px 0 0;
	z-index: 20;
}
body.special-event-page .dropdown-currency-content li {
	padding: 8px 12px;
	cursor: pointer;
}
body.special-event-page .dropdown-currency-content li:hover { background: #f5f5f5; }
body.special-event-page .dropdown-currency-content li label { cursor: pointer; }

/* Kvitel row — 4 columns (Hebrew name / Ben-Bas / Mother's name / Clear button).
   Base .form-list .rows uses grid-template-columns:1fr 1fr; override explicitly with !important
   because we're inside .form-list scope. */
body.special-event-page .ohel-kvitel-section {
	margin-bottom: 30px;
}
body.special-event-page .ohel-kvitel-section .rows.kvitel-row {
	display: grid !important;
	grid-template-columns: 1fr 140px 1fr 100px !important;
	gap: 12px !important;
	align-items: end;
}
body.special-event-page .kvitel-section-title {
	margin: 0 0 8px;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	color: #000;
}
@media (max-width: 767px) {
	body.special-event-page .ohel-kvitel-section .rows.kvitel-row {
		grid-template-columns: 1fr !important;
	}
}
/* Kvitel Clear button per Figma: bg #b49fb3 (mauve), 16px text, rounded 8px, X icon on right */
body.special-event-page .kvitel-action { text-align: left; }
body.special-event-page .kvitel-clear {
	width: 100%;
	height: 40px;
	border: 0;
	background: var(--se-mauve);
	color: #fff;
	font-weight: 400;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 8px 16px;
	transition: background 0.15s;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
}
body.special-event-page .kvitel-clear::after {
	content: '';
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='10' stroke='white' stroke-width='1.6'/><path d='M8.5 8.5L15.5 15.5M15.5 8.5L8.5 15.5' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat center / contain;
}
body.special-event-page .kvitel-clear:hover { background: var(--se-mauve-hover); }

/* -------------------------------------------------------------------------- */
/* Yes pill buttons (Reservation + Ohel Sarala join) — per Figma the Yes is
   a compact pill with a check-square icon + "Yes" text. When unchecked: white
   bg with a grey border. When checked: dark-grey bg with white icon+text.     */
/* -------------------------------------------------------------------------- */
body.special-event-page .monthly-signup-toggle,
body.special-event-page .join-ohel-toggle {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 !important;
}
body.special-event-page .monthly-signup-toggle .checkbox-white,
body.special-event-page .join-ohel-toggle .checkbox-white {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 !important;
	height: auto !important;
	font-family: "Roboto", sans-serif !important;
}
body.special-event-page .monthly-signup-toggle .checkbox-white input,
body.special-event-page .join-ohel-toggle .checkbox-white input {
	opacity: 0 !important;
	position: absolute !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
}
/* Reservation Yes pill: bg #777483 (slate) when checked, white when not. Per Figma height 67px. */
body.special-event-page .monthly-signup-toggle label {
	background: #fff !important;
	border: 1px solid var(--se-slate) !important;
	color: var(--se-slate) !important;
	border-radius: 5px !important;
	padding: 20px 24px 20px 60px !important;
	cursor: pointer;
	font-family: "Roboto", sans-serif !important;
	font-weight: 700 !important;
	font-size: 27px !important;
	line-height: 1 !important;
	min-width: 120px !important;
	height: 67px !important;
	display: inline-flex !important;
	align-items: center !important;
	position: relative !important;
	transition: background 0.15s, color 0.15s;
}
/* Ohel Sarala Yes pill: bg #b49fb3 (mauve) when checked, white when not. Per Figma. */
body.special-event-page .join-ohel-toggle label {
	background: #fff !important;
	border: 1px solid var(--se-mauve) !important;
	color: var(--se-mauve) !important;
	border-radius: 5px !important;
	padding: 20px 24px 20px 60px !important;
	cursor: pointer;
	font-family: "Roboto", sans-serif !important;
	font-weight: 400 !important;
	font-size: 27px !important;
	line-height: 1 !important;
	min-width: 120px !important;
	height: 67px !important;
	display: inline-flex !important;
	align-items: center !important;
	position: relative !important;
	transition: background 0.15s, color 0.15s;
}
/* Suppress the base .checkbox-white span:before / span:after icons */
body.special-event-page .monthly-signup-toggle label span:before,
body.special-event-page .monthly-signup-toggle label span:after,
body.special-event-page .join-ohel-toggle label span:before,
body.special-event-page .join-ohel-toggle label span:after {
	display: none !important;
	content: none !important;
}
/* Check-circle icon on Reservation Yes (per Figma) */
body.special-event-page .monthly-signup-toggle label::before {
	content: '';
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 27px;
	height: 27px;
	border: 2px solid var(--se-slate);
	border-radius: 50%;
	background: #fff;
	transition: background 0.15s, border-color 0.15s;
}
/* Check-square icon on Ohel Yes (per Figma) */
body.special-event-page .join-ohel-toggle label::before {
	content: '';
	position: absolute;
	left: 21px;
	top: 50%;
	transform: translateY(-50%);
	width: 27px;
	height: 27px;
	border: 2px solid var(--se-mauve);
	border-radius: 4px;
	background: #fff;
	transition: background 0.15s, border-color 0.15s;
}
/* Checked state: filled color + white text + white icon with checkmark */
body.special-event-page .monthly-signup-toggle input:checked ~ label {
	background: var(--se-slate) !important;
	color: #fff !important;
	border-color: var(--se-slate) !important;
}
body.special-event-page .join-ohel-toggle input:checked ~ label {
	background: var(--se-mauve) !important;
	color: #fff !important;
	border-color: var(--se-mauve) !important;
}
/* When checked, the icon is a WHITE filled circle/square with a DARK check inside (per Figma).
   Opposite of my earlier "dark filled with white check" — visually the icon reads as a bright
   filled ring on a colored pill. */
body.special-event-page .monthly-signup-toggle input:checked ~ label::before {
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M4 10L8 14L16 5' stroke='%23777483' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 20px 20px;
	border-color: #fff;
}
body.special-event-page .join-ohel-toggle input:checked ~ label::before {
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M4 10L8 14L16 5' stroke='%23b49fb3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 20px 20px;
	border-color: #fff;
}
body.special-event-page .monthly-signup-toggle p.max-w-240,
body.special-event-page .join-ohel-toggle p {
	margin: 0;
	max-width: none;
	flex: 1;
	font-size: 14px;
	color: var(--se-body-text);
}

/* -------------------------------------------------------------------------- */
/* Monthly / Yearly / One-time — pill buttons per Figma: bordered rectangle    */
/* with a native radio circle on the left + label text.                        */
/* -------------------------------------------------------------------------- */
body.special-event-page .sign-me-ohel-sarala .single-section {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}
/* Frequency pill: 67px rounded white box with a custom circle indicator + 25px label.
   Selected state matches Yes pill (mauve fill, white text, white circle inside). */
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	height: 67px !important;
	padding: 0 24px 0 24px !important;
	border-radius: 5px !important;
	background: #fff !important;
	font-family: "Roboto", sans-serif !important;
	cursor: pointer;
	position: relative;
	transition: background 0.15s, color 0.15s;
}
/* Hide the native radio; we'll draw a custom circle via ::before on the label */
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white input {
	opacity: 0 !important;
	position: absolute !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
}
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white label {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 0 0 36px !important;
	margin: 0 !important;
	height: 100% !important;
	color: #000 !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 25px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	min-width: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	cursor: pointer;
	position: relative;
}
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white label span:before,
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white label span:after {
	display: none !important;
	content: none !important;
}
/* Custom radio circle indicator (unchecked = mauve outline, checked = white filled with mauve dot) */
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 27px;
	height: 27px;
	border: 2px solid var(--se-mauve);
	border-radius: 50%;
	background: #fff;
	transition: background 0.15s, border-color 0.15s;
}
/* Selected state — mauve pill + white text + white outer ring with white dot in center */
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white:has(input:checked) {
	background: var(--se-mauve) !important;
}
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white:has(input:checked) label {
	color: #fff !important;
}
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white:has(input:checked) label::before {
	background: radial-gradient(circle, var(--se-mauve) 0 6px, #fff 7px 100%);
	border-color: #fff;
	box-shadow: none;
}
body.special-event-page .sign-me-ohel-sarala .single-section .checkbox-white b {
	font-weight: 400;
}

/* Ohel Sarala section container — plain white per Figma (no beige/cream fill) */
body.special-event-page .sign-me-ohel-sarala {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 20px 0;
	margin: 0;
}

body.special-event-page .sign-me-ohel-sarala h2 {
	margin-top: 0;
}

body.special-event-page .sign-me-ohel-sarala .logo-section img {
	max-width: 260px;
	height: auto;
	margin-bottom: 16px;
}

body.special-event-page .sign-me-ohel-sarala h4 {
	font-weight: 400;
	line-height: 1.55;
	margin-bottom: 20px;
}

/* Kvitel row inside ohel signup */
body.special-event-page .ohel-kvitel-section .rows.kvitel-row {
	display: grid;
	grid-template-columns: 1fr 140px 1fr;
	gap: 12px;
}

body.special-event-page .ohel-kvitel-section .col {
	width: auto;
	padding: 0;
}

body.special-event-page .ohel-kvitel-section .form-controls {
	width: 100%;
}

@media (max-width: 767px) {
	body.special-event-page .ohel-kvitel-section .rows.kvitel-row {
		grid-template-columns: 1fr;
	}
}

/* Password + confirm side by side */
body.special-event-page .signup-password-section .date-wrapper-content {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
	gap: 12px;
	align-items: center;
}

@media (max-width: 767px) {
	body.special-event-page .signup-password-section .date-wrapper-content {
		grid-template-columns: 1fr;
	}
}

body.special-event-page .signup-password-section .form-controls {
	width: 100%;
}

/* Payment info rows — per Figma: radio circle icon on the left + field(s) on the right */
body.special-event-page .payment-info-section .pay-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 0;
	margin: 0 0 20px;
	background: transparent;
	border: 0;
}
/* Custom radio circle indicator — hides the native input, draws a 27px circle */
body.special-event-page .payment-info-section .pay-radio {
	position: relative;
	width: 27px;
	height: 27px;
	flex: 0 0 27px;
	margin-top: 26px; /* aligns roughly with the boxed field baseline (label ~14 + gap 8 + input ~40/2) */
}
body.special-event-page .payment-info-section .pay-radio input {
	opacity: 0 !important;
	position: absolute !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
}
body.special-event-page .payment-info-section .pay-radio-label {
	display: block;
	width: 27px;
	height: 27px;
	border: 2px solid var(--se-slate);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	margin: 0;
	padding: 0;
	transition: background 0.15s, border-color 0.15s;
}
body.special-event-page .payment-info-section .pay-radio input:checked ~ .pay-radio-label {
	background: radial-gradient(circle, var(--se-slate) 0 6px, #fff 7px 100%);
	border-color: var(--se-slate);
}
/* Field wrapper — label above the boxed field, matching the shared field-label style */
body.special-event-page .payment-info-section .pay-field {
	flex: 1;
	min-width: 0;
}
/* The "Card on file" boxed pill — same visual as an input textbox with a muted placeholder */
body.special-event-page .payment-info-section .pay-boxed {
	background: #fff;
	border: 1px solid var(--se-input-border);
	border-radius: 8px;
	height: 40px;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	color: var(--se-body-text);
	font-family: "Roboto", sans-serif;
	font-size: 16px;
}
body.special-event-page .payment-info-section .pay-boxed .card-number-text {
	opacity: 0.5;
}
/* New card row — 3-col grid: card number (flex), exp date (200px), cvv (200px) */
body.special-event-page .new-card-grid {
	display: grid;
	grid-template-columns: 1fr 200px 200px;
	gap: 20px;
	flex: 1;
	min-width: 0;
}
@media (max-width: 767px) {
	body.special-event-page .new-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Sidebar summary card — match Figma: grey header bar, dark grey submit button */
body.special-event-page .sticky-section .heading-section {
	background: var(--se-sidebar-header-bg) !important;
	color: var(--se-header-text) !important;
}
body.special-event-page .sticky-section .heading-section span {
	color: var(--se-header-text);
	font-weight: 700;
	font-family: "gopher", sans-serif;
}

body.special-event-page .sticky-section .checkout-list li {
	padding: 12px 0;
}

/* Kvitel row starts "complete" visually (like Figma default state) — user can override */
body.special-event-page .sticky-section [data-section="kvitel"].circle-complete {
	background: #9b9b9b;
}
body.special-event-page .sticky-section [data-section="kvitel"].circle-complete.completed {
	background: #2ea44f;
}

/* Submit buttons per Figma: bg #777483, rounded 5px, 20px Roboto Bold text, 307px wide */
body.special-event-page #submit,
body.special-event-page #submit_side,
body.special-event-page .sticky-section .button-panel .btn.full,
body.special-event-page .checkout-button-section .btn.full {
	background: var(--se-slate) !important;
	border-color: var(--se-slate) !important;
	color: #fff !important;
	border-radius: 5px !important;
	font-family: "Roboto", sans-serif !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	padding: 16px 20px !important;
	width: 307px !important;
	max-width: 100%;
}
body.special-event-page #submit:hover,
body.special-event-page #submit_side:hover,
body.special-event-page .sticky-section .button-panel .btn.full:hover,
body.special-event-page .checkout-button-section .btn.full:hover {
	background: var(--se-slate-hover) !important;
	border-color: var(--se-slate-hover) !important;
}

/* Field labels — 14px Roboto Medium, 8px gap to input, per Figma */
body.special-event-page .field-label {
	display: block;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--se-body-text);
	margin: 0 0 8px;
	line-height: 16px;
}

/* Text inputs — Roboto Regular 16px, 1px #d1d2d8 border, rounded 8px, 40px height */
body.special-event-page #personal .form-controls,
body.special-event-page .ohel-kvitel-section .form-controls,
body.special-event-page .signup-password-section .form-controls {
	background: #fff !important;
	border: 1px solid var(--se-input-border) !important;
	border-radius: 8px !important;
	height: 40px !important;
	padding: 8px 16px !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--se-body-text) !important;
}
body.special-event-page #personal .form-controls::placeholder,
body.special-event-page .ohel-kvitel-section .form-controls::placeholder,
body.special-event-page .signup-password-section .form-controls::placeholder {
	color: var(--se-body-text);
	opacity: 0.5;
}

/* Personal-info grid — row-by-row layout: fname/lname, age alone, email/phone, addr1/addr2, city/state/zip */
body.special-event-page #personal .rows {
	margin-bottom: 20px;
	grid-row-gap: 20px;
}
body.special-event-page #personal .rows.cols3 {
	grid-template-columns: 1fr 1fr 1fr;
}
body.special-event-page #personal .age-row {
	grid-template-columns: 160px;
}
body.special-event-page #personal .col {
	width: auto;
	padding: 0;
}
body.special-event-page #personal .form-controls {
	width: 100%;
}

/* Inline error/help messaging */
body.special-event-page .error-msg {
	color: #b12a2a;
	font-size: 13px;
	margin: 4px 0;
}