:root {
	--font-family: 'Cinzel', 'Montserrat', serif;
	--black: #120b05;
	--white: #f7e8c5;
	--bg-primary: #1f1208;
	--primary: #dd9f77;
	--secondary: #211008;
	--hover: #d59a45;
	--text-primary: rgba(247, 232, 197, 0.82);
	--bg-secondary: #3a2412;
	--button: #8b5a24;
	--bg-secondary-hover: #4b2f18;
	--tab: #442715;
	--tab-accent: #241409;
	--gradient: linear-gradient(
		180deg,
		rgba(18, 11, 5, 0.45) 13.62%,
		rgba(18, 11, 5, 0.92) 80%
	);
	--gradient-accent: linear-gradient(
		180deg,
		rgba(184, 122, 42, 0.08) 0%,
		rgba(184, 122, 42, 0.18) 40%,
		rgba(43, 26, 13, 0.76) 60%,
		rgba(31, 18, 8, 1) 100%
	);
}

main {
	background: #100804;
}

.promo-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.promo-popup__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
}

.promo-popup__content {
	position: relative;
	background: var(--bg-primary, #1e293b);
	border: 2px solid var(--primary, #7c3aed);
	border-radius: 16px;
	padding: 40px 30px 30px;
	max-width: 500px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.promo-popup__close {
	position: absolute;
	top: 10px;
	right: 15px;
	background: none;
	border: none;
	color: var(--text-primary, #fff);
	font-size: 32px;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s;
	line-height: 1;
}

.promo-popup__close:hover {
	opacity: 1;
}

.promo-popup__body {
	color: var(--text-primary, #fff);
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 20px;
	text-align: center;
}

.promo-popup__body h1,
.promo-popup__body h2,
.promo-popup__body h3 {
	color: var(--primary, #7c3aed);
	margin-bottom: 15px;
}

.promo-popup__button {
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	padding: 15px 40px;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
}

.promo-popup__content {
	text-align: center;
}

.img-cov {
	width: 100%;
	height: 100%;
	max-width: 900px;
	margin: 15px auto;
}
.img-cov img {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
}