/* FE Workshop Registration 2.0.0. All frontend rules are scoped. */
.fe-workshops,
.fe-workshops * { box-sizing: border-box; }

.fe-workshops {
	--fe-blue: #30457b;
	--fe-text: #33435c;
	--fe-muted: #6e7782;
	--fe-panel: #e9edf2;
	--fe-border: #c8cdd3;
	--fe-selected: #6eb5c9;
	--fe-green: #62b477;
	--fe-error: #a33b48;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #fff;
	color: var(--fe-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.35;
	overflow: hidden;
}

.fe-workshops [hidden] { display: none !important; }

.fe-workshops__intro {
	width: 100%;
	padding: 45px 20px 49px;
	text-align: center;
}

.fe-workshops__title {
	margin: 0;
	padding: 0;
	color: var(--fe-blue);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(62px, 6.15vw, 104px);
	font-weight: 700;
	line-height: .94;
	letter-spacing: -3px;
	text-transform: none;
}

.fe-workshops__subtitle {
	margin: 33px auto 0;
	padding: 0;
	max-width: 1100px;
	color: var(--fe-blue);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(23px, 1.82vw, 31px);
	font-weight: 400;
	line-height: 1.25;
}

.fe-workshops__subtitle strong { font-weight: 700; }

.fe-workshops__cities {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-width: 0;
	padding: 0 0 70px;
	margin: 0;
}

.fe-workshops__city {
	flex: 0 0 auto;
	width: auto;
	height: 65px;
	min-height: 65px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--fe-blue);
	color: #fff;
	font: 700 22px/65px Arial, Helvetica, sans-serif;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}

.fe-workshops__city:hover { filter: brightness(.98); }
.fe-workshops__city:focus-visible { outline: 2px solid var(--fe-selected); outline-offset: 3px; }
.fe-workshops__city.is-active { box-shadow: 0 0 0 3px var(--fe-selected); }

.fe-workshops__details {
	width: min(902px, calc(100% - 34px));
	max-width: 902px;
	margin: 0 auto;
	padding: 0 0 35px;
}

.fe-workshops__location {
	margin: 0 0 19px;
	padding: 0;
	color: #203e70;
	font-size: 14px;
	line-height: 1.65;
}

.fe-workshops__location-line { display: block; margin: 0; padding: 0; }

.fe-workshops__event-shell {
	width: 100%;
	margin: 0 0 13px;
	padding: 9px 12px 11px;
	background: var(--fe-panel);
}

.fe-workshops__event-label {
	margin: 0 0 9px;
	padding: 0;
	color: #77808b;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.2;
}

.fe-workshops__event-label span,
.fe-workshops__field label span { color: #9b5360; }

.fe-workshops__events {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 7px;
	width: 100%;
}

.fe-workshops__event {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	height: 168px;
	margin: 0;
	padding: 14px 12px 11px;
	border: 1px solid #c4cbd2;
	border-radius: 4px;
	background: #fff;
	color: var(--fe-text);
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	overflow: hidden;
}

.fe-workshops__event:hover { border-color: #aeb7c0; }
.fe-workshops__event:focus-visible { outline: 2px solid var(--fe-selected); outline-offset: 1px; }

.fe-workshops__event.is-selected {
	padding: 12px 10px 9px;
	border: 3px solid var(--fe-selected);
}

.fe-workshops__check {
	position: absolute;
	top: -1px;
	right: -1px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 0 3px 0 5px;
	background: var(--fe-selected);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.fe-workshops__event.is-selected .fe-workshops__check { display: flex; }

.fe-workshops__event-title {
	display: block;
	width: 100%;
	min-height: 43px;
	margin: 0 0 6px;
	padding: 0 17px 0 0;
	color: #33435c;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.13;
	overflow-wrap: anywhere;
}

.fe-workshops__event-meta {
	display: grid;
	gap: 5px;
	width: 100%;
	margin-top: auto;
	color: #5c6671;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.2;
}

.fe-workshops__meta-row {
	display: flex;
	align-items: flex-start;
	min-width: 0;
	gap: 6px;
}

.fe-workshops__meta-icon {
	flex: 0 0 12px;
	width: 12px;
	color: #65717c;
	font-size: 10px;
	line-height: 1.1;
	text-align: center;
}

.fe-workshops__meta-text {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fe-workshops__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 13px;
	row-gap: 17px;
	width: 100%;
}

.fe-workshops__field { min-width: 0; }

.fe-workshops__field label {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	color: #6d7680;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.2;
}

.fe-workshops__field input {
	display: block;
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 8px 11px;
	border: 1px solid #bfc6ce;
	border-radius: 2px;
	background: #fff;
	color: #33435c;
	font: 400 14px/1.2 Arial, Helvetica, sans-serif;
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}

.fe-workshops__field input:focus {
	border-color: #8ab5c2;
	box-shadow: 0 0 0 2px rgba(110,181,201,.14);
}

.fe-workshops__sms {
	margin: 4px 0 0;
	padding: 0;
	color: #858c94;
	font-size: 7px;
	line-height: 1.2;
}

.fe-workshops__honeypot {
	position: absolute !important;
	left: -99999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.fe-workshops__actions { padding-top: 21px; text-align: center; }

.fe-workshops__submit {
	min-width: 80px;
	height: 31px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 3px;
	background: var(--fe-green);
	color: #fff;
	font: 700 11px/31px Arial, Helvetica, sans-serif;
	text-align: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.fe-workshops__submit:hover { filter: brightness(.98); }
.fe-workshops__submit:focus-visible { outline: 2px solid var(--fe-green); outline-offset: 3px; }
.fe-workshops__submit:disabled { opacity: .65; cursor: wait; }

.fe-workshops__status { min-height: 0; margin: 10px 0 0; font-size: 13px; line-height: 1.4; }
.fe-workshops__status.is-error { color: var(--fe-error); }
.fe-workshops__status.is-success { color: #2f7d43; }

.fe-workshops__empty { padding: 34px 20px; color: #59636e; font-size: 14px; text-align: center; }

@media (max-width: 1100px) {
	.fe-workshops__cities { padding-left: 0; padding-right: 0; }
	.fe-workshops__city { height: 60px; min-height: 60px; font-size: 20px; line-height: 60px; }
}

@media (max-width: 900px) {
	.fe-workshops__events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fe-workshops__cities { gap: 12px; padding: 0 14px 50px; }
	.fe-workshops__city { width: calc(50% - 6px); padding: 0 14px; }
}

@media (max-width: 767px) {
	.fe-workshops__intro { padding: 34px 16px 32px; }
	.fe-workshops__title { font-size: clamp(50px, 15vw, 78px); letter-spacing: -2px; }
	.fe-workshops__subtitle { margin-top: 20px; font-size: clamp(19px, 5.2vw, 24px); line-height: 1.3; }
	.fe-workshops__cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 34px; }
	.fe-workshops__city { width: 100%; height: 56px; min-height: 56px; padding: 0 8px; font-size: 17px; line-height: 56px; }
	.fe-workshops__details { width: calc(100% - 28px); padding-bottom: 32px; }
	.fe-workshops__location { margin-bottom: 17px; font-size: 13px; }
	.fe-workshops__event-shell { padding: 9px 9px 10px; }
	.fe-workshops__events { grid-template-columns: 1fr; gap: 7px; }
	.fe-workshops__event { height: auto; min-height: 148px; }
	.fe-workshops__fields { grid-template-columns: 1fr; row-gap: 15px; }
	.fe-workshops__field input { height: 44px; }
	.fe-workshops__sms { font-size: 8px; }
}

@media (max-width: 390px) {
	.fe-workshops__cities { grid-template-columns: 1fr; }
	.fe-workshops__city { width: 100%; }
	.fe-workshops__subtitle { font-size: 18px; }
}
