/* ==========================================================================
   Попап «Выставка образования в Италии 2026»
   studiareinitalia.ru → регистрация на study-italy.org
   Автономный блок: все стили под .expo-popup, ничего снаружи не задевает.
   ========================================================================== */

.expo-popup {
	--ep-ink: #10203a;
	--ep-ink-soft: #5a6473;
	--ep-red: #d92b2b;
	--ep-red-deep: #b81d1d;
	--ep-green: #2f8f5b;
	--ep-green-deep: #056038;
	--ep-line: #e6e9ee;
	--ep-bg-green: #f1f6f2;
	--ep-bg-red: #fdf2f2;

	position: fixed;
	inset: 0;
	z-index: 200000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	color: var(--ep-ink);
	-webkit-font-smoothing: antialiased;
}

.expo-popup.is-open { display: flex; }

/* пока попап открыт — прячем кнопку чата amoCRM (z-index 100001, лезет поверх) */
html.expo-popup-is-open .amo-button-holder { display: none !important; }

.expo-popup *,
.expo-popup *::before,
.expo-popup *::after { box-sizing: border-box; }

.expo-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 21, 36, .58);
	opacity: 0;
	transition: opacity .28s ease;
}

.expo-popup.is-shown .expo-popup__overlay { opacity: 1; }

.expo-popup__dialog {
	position: relative;
	width: 100%;
	max-width: 940px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: hidden auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 30px 90px rgba(10, 21, 36, .35);
	padding: 38px 44px 30px;
	opacity: 0;
	transform: translateY(18px) scale(.985);
	transition: opacity .3s ease, transform .3s ease;
}

.expo-popup.is-shown .expo-popup__dialog {
	opacity: 1;
	transform: none;
}

/* --- Закрыть -------------------------------------------------------------- */

.expo-popup__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ep-line);
	border-radius: 50%;
	background: #fff;
	color: var(--ep-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.expo-popup__close:hover {
	background: #f4f6f9;
	border-color: #cfd5de;
	transform: rotate(90deg);
}

.expo-popup__close svg { width: 15px; height: 15px; display: block; }

/* --- Декоративная карта --------------------------------------------------- */

.expo-popup__decor {
	position: absolute;
	top: 26px;
	right: 58px;
	width: 286px;
	max-width: 34%;
	pointer-events: none;
	user-select: none;
}

.expo-popup__decor-map {
	display: block;
	width: 100%;
	height: auto;
	opacity: .85;
}

.expo-popup__decor-arc {
	position: absolute;
	top: -5%;
	right: -14%;
	width: 42%;
	height: 112%;
}

/* --- Шапка ---------------------------------------------------------------- */

.expo-popup__head { position: relative; z-index: 2; max-width: 62%; }

.expo-popup__logo {
	display: block;
	width: 126px;
	height: auto;
	margin-bottom: 22px;
}

.expo-popup__title {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.02;
	font-weight: 900;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: var(--ep-ink);
}

.expo-popup__title span { color: var(--ep-red); display: block; }

.expo-popup__rule {
	display: flex;
	gap: 6px;
	margin: 16px 0 20px;
	max-width: 380px;
}

.expo-popup__rule i {
	display: block;
	height: 4px;
	border-radius: 2px;
	flex: 1;
}

.expo-popup__rule i:nth-child(1) { background: var(--ep-green); }
.expo-popup__rule i:nth-child(2) { background: #e6e9ee; }
.expo-popup__rule i:nth-child(3) { background: var(--ep-red); }

/* --- Подзаголовок «ведущие университеты» ---------------------------------- */

.expo-popup__lead {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}

.expo-popup__lead-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ep-bg-green);
	color: var(--ep-green-deep);
	display: flex;
	align-items: center;
	justify-content: center;
}

.expo-popup__lead-icon svg { width: 22px; height: 22px; }

.expo-popup__lead-title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.expo-popup__lead-sub {
	display: block;
	font-size: 14px;
	color: var(--ep-ink-soft);
	line-height: 1.3;
	margin-top: 2px;
}

/* --- Карточки форматов ---------------------------------------------------- */

.expo-popup__formats {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 16px;
	margin-bottom: 20px;
}

.expo-popup__card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 16px;
}

.expo-popup__card--online { background: var(--ep-bg-green); }
.expo-popup__card--offline { background: var(--ep-bg-red); }

.expo-popup__card-icon {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.expo-popup__card--online .expo-popup__card-icon { background: var(--ep-green-deep); }
.expo-popup__card--offline .expo-popup__card-icon { background: var(--ep-red); }

.expo-popup__card-icon svg { width: 26px; height: 26px; }

.expo-popup__card-body { display: block; min-width: 0; flex: 1 1 auto; }

.expo-popup__card-label {
	display: block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.expo-popup__card--online .expo-popup__card-label { color: var(--ep-green-deep); }
.expo-popup__card--offline .expo-popup__card-label { color: var(--ep-red-deep); }

.expo-popup__row {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ep-ink);
	text-decoration: none;
	padding: 3px 0;
	border-radius: 8px;
}

.expo-popup__row svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--ep-ink-soft);
}

.expo-popup__row-text { min-width: 0; }

.expo-popup__row b { font-weight: 700; }

@media (min-width: 641px) {
	.expo-popup__row { white-space: nowrap; }
}

a.expo-popup__row { transition: color .18s ease; }
a.expo-popup__row:hover { color: var(--ep-red-deep); text-decoration: none; }
a.expo-popup__row:hover b { text-decoration: underline; }

/* --- Бесплатно ------------------------------------------------------------ */

.expo-popup__free {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--ep-ink-soft);
	font-size: 15px;
}

.expo-popup__free::before,
.expo-popup__free::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ep-line);
}

.expo-popup__free span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.expo-popup__free svg { width: 18px; height: 18px; color: var(--ep-green); }

/* --- Кнопка --------------------------------------------------------------- */

.expo-popup__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	padding: 19px 26px;
	border-radius: 12px;
	background: var(--ep-green-deep);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.expo-popup__cta:hover {
	background: #045c35;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(5, 96, 56, .28);
}

.expo-popup__cta svg { width: 22px; height: 14px; flex: 0 0 auto; }

.expo-popup__site {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 14px;
	color: var(--ep-ink-soft);
}

.expo-popup__site svg { width: 16px; height: 16px; }

.expo-popup__site a {
	color: var(--ep-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid rgba(90, 100, 115, .35);
}

.expo-popup__site a:hover { color: var(--ep-ink); }

/* --- Планшет -------------------------------------------------------------- */

@media (max-width: 900px) {
	.expo-popup__dialog { padding: 34px 30px 26px; }
	.expo-popup__head { max-width: 100%; }
	.expo-popup__decor { top: 14px; right: 34px; width: 176px; opacity: .55; }
	.expo-popup__title { font-size: clamp(26px, 5.2vw, 36px); }
	.expo-popup__formats { grid-template-columns: 1fr; gap: 12px; }
}

/* --- Телефон: шторка снизу ------------------------------------------------ */

@media (max-width: 640px) {
	.expo-popup {
		padding: 0;
		align-items: flex-end;
	}

	.expo-popup__dialog {
		max-width: none;
		max-height: 94vh;
		max-height: 94dvh;
		border-radius: 20px 20px 0 0;
		padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
		transform: translateY(28px);
	}

	.expo-popup__close { top: 12px; right: 12px; width: 36px; height: 36px; }
	.expo-popup__decor { width: 118px; top: 10px; right: 14px; opacity: .4; }
	.expo-popup__decor-arc { display: none; }
	.expo-popup__head { max-width: 78%; }
	.expo-popup__logo { width: 88px; margin-bottom: 14px; }
	.expo-popup__title { font-size: 25px; }
	.expo-popup__rule { margin: 12px 0 16px; }
	.expo-popup__lead { gap: 11px; margin-bottom: 16px; }
	.expo-popup__lead-icon { width: 38px; height: 38px; }
	.expo-popup__lead-icon svg { width: 18px; height: 18px; }
	.expo-popup__lead-title { font-size: 15px; }
	.expo-popup__lead-sub { font-size: 13px; }
	.expo-popup__card { padding: 14px 15px; gap: 12px; }
	.expo-popup__card-icon { width: 42px; height: 42px; }
	.expo-popup__card-icon svg { width: 20px; height: 20px; }
	.expo-popup__card-label { font-size: 13px; margin-bottom: 7px; }
	.expo-popup__row { font-size: 14px; gap: 8px; }
	.expo-popup__free { font-size: 13px; margin-bottom: 14px; }
	.expo-popup__cta { font-size: 14px; padding: 16px 14px; gap: 10px; }
	.expo-popup__site { font-size: 13px; margin-top: 12px; }
}

/* --- Очень узкие и низкие экраны ------------------------------------------ */

@media (max-width: 360px) {
	.expo-popup__title { font-size: 22px; }
	.expo-popup__dialog { padding: 24px 14px calc(18px + env(safe-area-inset-bottom)); }
	.expo-popup__card { padding: 13px 12px; gap: 10px; }
	.expo-popup__card-icon { width: 36px; height: 36px; }
	.expo-popup__card-icon svg { width: 17px; height: 17px; }
	.expo-popup__row { font-size: 13px; gap: 7px; }
	.expo-popup__row svg { width: 14px; height: 14px; }
	.expo-popup__head { max-width: 100%; }
	.expo-popup__decor { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
	.expo-popup { align-items: center; padding: 12px; }

	.expo-popup__dialog {
		max-height: calc(100vh - 24px);
		border-radius: 18px;
		padding: 22px 24px 18px;
	}

	.expo-popup__decor { display: none; }
	.expo-popup__head { max-width: 100%; }
	.expo-popup__title { font-size: 26px; }
	.expo-popup__formats { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
	.expo-popup__row { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.expo-popup__overlay,
	.expo-popup__dialog,
	.expo-popup__cta,
	.expo-popup__close { transition: none; }

	.expo-popup__dialog { transform: none; }
}

/* ==========================================================================
   Вариант «панель справа» (.expo-popup--side) — как выезжал старый попап.
   Ниже 641 px оба варианта одинаковые: шторка снизу.
   ========================================================================== */

@media (min-width: 641px) {

	.expo-popup--side {
		align-items: stretch;
		justify-content: flex-end;
		padding: 0;
	}

	.expo-popup--side .expo-popup__dialog {
		width: 560px;
		max-width: 100%;
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 26px 0 0 26px;
		padding: 44px 44px 32px;
		box-shadow: -24px 0 70px rgba(10, 21, 36, .3);
		transform: translateX(48px);
	}

	.expo-popup--side.is-shown .expo-popup__dialog { transform: none; }

	.expo-popup--side .expo-popup__head { max-width: 64%; }
	.expo-popup--side .expo-popup__logo { width: 112px; margin-bottom: 18px; }
	.expo-popup--side .expo-popup__title { font-size: 34px; }
	.expo-popup--side .expo-popup__rule { max-width: 100%; margin: 14px 0 18px; }
	.expo-popup--side .expo-popup__lead { margin-bottom: 18px; }
	.expo-popup--side .expo-popup__formats { grid-template-columns: 1fr; gap: 12px; }
	.expo-popup--side .expo-popup__cta { padding: 18px 20px; font-size: 16px; }

	.expo-popup--side .expo-popup__decor {
		top: 58px;
		right: 26px;
		width: 172px;
		max-width: 40%;
		opacity: .85;
	}

	.expo-popup--side .expo-popup__decor-arc { display: none; }
}

@media (min-width: 641px) and (max-height: 800px) {
	.expo-popup--side .expo-popup__dialog { padding: 24px 40px 14px; }
	.expo-popup--side .expo-popup__logo { width: 92px; margin-bottom: 12px; }
	.expo-popup--side .expo-popup__title { font-size: 29px; }
	.expo-popup--side .expo-popup__rule { margin: 12px 0 14px; }
	.expo-popup--side .expo-popup__lead { margin-bottom: 14px; }
	.expo-popup--side .expo-popup__lead-icon { width: 40px; height: 40px; }
	.expo-popup--side .expo-popup__formats { gap: 10px; margin-bottom: 14px; }
	.expo-popup--side .expo-popup__card { padding: 13px 15px; }
	.expo-popup--side .expo-popup__row { padding: 2px 0; }
	.expo-popup--side .expo-popup__card-icon { width: 46px; height: 46px; }
	.expo-popup--side .expo-popup__free { margin-bottom: 14px; }
	.expo-popup--side .expo-popup__cta { padding: 15px 20px; }
	.expo-popup--side .expo-popup__site { margin-top: 8px; }
	.expo-popup--side .expo-popup__decor { top: 48px; right: 22px; width: 148px; }
}