@import url(_sprite-stack.css);

:root {
	--regular: 'GolosText-Regular', sans-serif;
	--medium: 'GolosText-Medium', sans-serif;
	--bold: 'GolosText-Bold', sans-serif;
	--black: 'GolosText-Black', sans-serif;
	--oranienbaum: 'Oranienbaum', sans-serif;
}

.dialog_modal {width:100%; height:100%; overflow-y:auto; left:0; top:0; position:fixed; z-index:100; background: rgba(0, 0, 0, .75)}

body { font-family: var(--regular); }

.btn-pred { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 16px; letter-spacing: -0.25px; margin-top: auto; border-radius: 10px; }
.btn-violet { font-family: var(--regular); }
.btn-violet:hover { color: #fff; }
.btn-white { font-family: var(--medium); color: #000; border: none; background: #fff; cursor: pointer; }
.btn-white:hover { color: #000; }
.btn-darkred, .btn-darkred-outline { width: 269px; font-family: var(--medium); color: var(--color-darkred); border: 2px solid #b4272d; }
.btn-darkred { background: #fff; }
.btn-darkred-outline { background: transparent; }

.modal-prediction .click-zone,
.modal-cards .click-zone { width: 44px; height: 44px; font-size: 22px; color: #fff; position: absolute; right: -32px; top: -32px; z-index: 8; opacity: 1; transition: var(--transition); cursor: pointer; }

.prediction-container, .prediction-card { width: 360px; height: 640px; position: relative; z-index: 5; }
.modal-prediction .prediction-container { -webkit-clip-path: inset(0 round 20px); clip-path: inset(0 round 20px); background: #000; }

.prediction-card, .gallery-card { text-align: center; }
	.prediction-card img { width: 100%; height: auto;}

.prediction-card-main { flex-direction: column; color: #000; position: relative; z-index: 7; padding: 90px 24px 24px; background: #e6eaeb; }
	.prediction-card-main .title { font-family: var(--bold); font-size: 20px; line-height: 1.15; margin-bottom: 9px; }
	.prediction-card-main p { font-size: 16px; line-height: 1.375; margin-bottom: 48px; }
	.prediction-card-main img { width: 288px; margin-inline: auto; }

.prediction-card__body { height: 260px; width: 100%; flex-direction: column; color: #fff; position: absolute; left: 0; bottom: 0; margin-top: auto; padding: 0 24px 24px; }
	.prediction-card__body :is(.title, p) { opacity: .85; }
	.prediction-card__body .title { font-size: 16px; margin-bottom: 10px; }
	.prediction-card__body p { font-family: var(--medium); font-size: 18px; line-height: 23px; }

.social-row { margin-top: auto; gap: 0 24px; }
	.social-row .share-link { cursor: pointer; }
	.social-row .share { pointer-events: none; }
	.social-row .shared { width: 54px; height: 54px; border-radius: 28px; }

.modal-valentin .prediction-container { flex-direction: column; color: var(--color-darkred); padding: 80px 0 24px; border-radius: 20px; background-color: #fbd6de; background-image: url('february/bg_360.webp'); background-position: 50%; }
.modal-women .prediction-container { flex-direction: column; color: rgba(255, 255, 255, .95); padding: 50px 0 24px; border-radius: 20px; background-color: #ff47a0; background-image: url('march/bg_360.svg'); background-position: 50%; }

.modal-cards .button-row { margin-top: auto; padding: 0 24px; }
.modal-cards .btn-white { border-radius: 100px; }

.gallery-card { width: 100%; row-gap: 8px; padding: 0 37px; }
	.gallery-card img { width: 256px; height: auto; display: block; margin: 0 auto 8px; }
	.gallery-card .title { font-family: var(--oranienbaum); font-size: 28px; line-height: 1.1428; text-transform: uppercase; }
	.gallery-card p { font-size: var(--size-sm); margin-bottom: 8px; }

/* gallery */
.gallery-cards .slider { overflow: hidden; position: relative; border-radius: 0; background: transparent; }
.gallery-cards .slider::before { display: none; }
.gallery-cards, .gallery-cards .slider { width: 100%; height: 422px; }
.gallery-cards { visibility: hidden; z-index: 5; }
	.gallery-cards .slider { -webkit-clip-path: inset(0 round 20px); clip-path: inset(0 round 20px); }
	.gallery-cards .dots-ctrl { width: 100%; gap: 0 10px; position: absolute; bottom: -34px; }
		.gallery-cards .dots-ctrl li { width: 8px; height: 8px; background: #fff; opacity: .5; border-radius: 10px; transition: var(--transition); cursor: pointer; }
		.gallery-cards .dots-ctrl :is(li:hover,.active) { opacity: 1; }

.gallery-cards .nav-ctrl { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 0; }
	.gallery-cards .nav-ctrl :is(.prev, .next) { width: 32px; height: 32px; position: absolute; z-index: 5; transition: var(--transition); border-radius: 20px; -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 38, 83, 0.14)) drop-shadow(-3px 0px 6px rgba(0, 38, 83, 0.14)); filter: drop-shadow(2px 4px 6px rgba(0, 38, 83, 0.14)) drop-shadow(-3px 0px 6px rgba(0, 38, 83, 0.14)); background: #fff; cursor: pointer; }
	.gallery-cards .nav-ctrl :is(.prev, .next)::before { width: 20px; height: 20px; display: block; content: ''; position: absolute; left: 6px; top: 6px; }
	.gallery-cards .nav-ctrl .prev { left: -55px; }
	.gallery-cards .nav-ctrl .prev::before { background: url('sprite-stack.svg?1779971199#arrow-prev-violet') no-repeat 50% / cover; }
	.gallery-cards .nav-ctrl .next { right: -55px; }
	.gallery-cards .nav-ctrl .next::before { background: url('sprite-stack.svg?1779971199#arrow-next-violet') no-repeat 50% / cover; }
	.gallery-cards .nav-ctrl .disable { display: none; }


.modal-women :is(.gallery-cards, .gallery-cards .slider) { height: auto; }
.modal-women .gallery-cards .dots-ctrl { bottom: -45px; }

@media screen and (max-width: 1024px) {
	.prediction-container .click-zone { width: 44px; height: 44px; right: -30px; top: -30px; }
}

@media screen and (max-width: 420px) {
	.prediction-container .click-zone { right: 7px; top: 7px; opacity: 1; }
	.prediction-card-main .click-zone { display: flex; }
	.prediction-wrapper .click-zone { right: -6px; top: 11px; opacity: 1; }
}

@media screen and (max-width: 375px) {
	.prediction-wrapper .click-zone { right: 10px; top: 12px; }
	.prediction-container, .prediction-card { width: 328px; height: 583px; margin-inline: auto; }
	.prediction-card-main { padding: 55px 16px 16px; }
		.prediction-card-main p { margin-bottom: 38px; }
	.prediction-card__body { height: 250px; padding: 0 16px 16px; }
	.gallery-card { padding: 0 16px; }
	.modal-cards .prediction-container { padding-top: 50px; }
	.gallery-cards .dots-ctrl { bottom: -16px; }

	.modal-women .gallery-cards .dots-ctrl { bottom: -21px; }
	.modal-women .prediction-container { padding-top: 40px; }
}

[hidden] { display: none; }
.p-rel { position: relative; }