/* Всплывающее окно «Выгодные предложения» (html/promo-popup.php).
   Размеры в px, а не в rem: у сайта корневой шрифт скачет от 12 до 20 px
   по ширине экрана, а окно свёрстано по макету 1330 px. */

/* Выше плашки cookie (z-index 9999 в index.php), иначе она ложится поверх формы */
#promo-popup {z-index: 10000;}
/* Композиция по макету: окно 1330 px, девушка выходит за него на 230 px влево
   и на 25 px вверх (+60 px дорисованного локтя), зуб — на 200 px вправо. Итого 1820 px плюс отступы диалога.
   На экранах уже/ниже композицию целиком уменьшает zoom из JS (fit в promo-popup.php). */
#promo-popup .modal-dialog {max-width: 1844px; margin: 10px auto; padding: 0 12px;}
/* min-height — высота девушки: иначе она выступает ниже композиции и у окна появляется своя прокрутка */
.pp-stage {position: relative; width: 1820px; min-height: 892px; margin: 0 auto; padding: 25px 200px 0 290px;}
.pp-stage__girl {position: absolute; z-index: 1; left: 0; top: 0; width: 585px; height: auto; pointer-events: none;}
.pp-stage__tooth {position: absolute; left: 1635px; top: 533px; width: 180px; height: auto; pointer-events: none;}
.pp-stage__heart {position: absolute; left: 227px; top: 249px; color: #60ded8; pointer-events: none;}
#promo-popup .modal-content {border: 0; border-radius: 28px; background: transparent; box-shadow: none;}

.pp {position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(115deg, #f3f2f3 0%, #f4f7f9 45%, #f3f8f9 75%, #fafbfc 100%); box-shadow: 0 20px 60px rgba(14, 47, 54, .25); color: #0e2f36; font-size: 16px; line-height: 1.35;}
.pp *, .pp *::before, .pp *::after {box-sizing: border-box;}

.pp__decor {position: absolute; top: 20px; right: 0; width: 360px; height: auto; pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 75% 75% at 60% 45%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 75% 75% at 60% 45%, #000 60%, transparent 100%);}

.pp__close {position: absolute; z-index: 4; top: 13px; right: 13px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0e2f36; box-shadow: 0 4px 14px rgba(14, 47, 54, .15); cursor: pointer; transition: transform .15s;}
.pp__close:hover {transform: rotate(90deg);}

/* Слева — место под девушку (.pp-stage__girl, z-index 1): шапка и карточки
   лежат над ней, первая карточка, как в макете, чуть заходит на плечо */
.pp__body {position: relative; z-index: 2; margin-left: 270px; padding: 7px 15px 0 0;}

.pp__badge {display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px 8px 12px; border-radius: 22px; background: #fff; box-shadow: 0 4px 16px rgba(14, 47, 54, .08); font-size: 14px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: #4a4c50;}
.pp__badge-icon {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fdeaea; color: #f2707a;}

.pp__title {margin: 14px 0 10px; max-width: 640px; font-size: 46px; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; color: #0e2f36;}
.pp__title-end {white-space: nowrap;}
.pp__title svg {display: inline-block; vertical-align: middle; margin-left: 8px; color: #f2707a;}
.pp__subtitle {max-width: 620px; margin: 0 0 26px; font-size: 17px; color: #3d4b50;}

.pp__head {padding-left: 82px;}
.pp__cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 20px;}
.pp-card {position: relative; display: flex; flex-direction: column; margin: 0; border-radius: 26px; overflow: hidden; border: 2px solid transparent; box-shadow: 0 8px 26px rgba(14, 47, 54, .08); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;}
.pp-card:hover {transform: translateY(-3px); box-shadow: 0 14px 32px rgba(14, 47, 54, .14);}
.pp-card--birthday {--pp-accent: #ec5a66; background: linear-gradient(180deg, #fbf4f4 0%, #fafbfc 100%);}
.pp-card--review {--pp-accent: #0b6a70; background: linear-gradient(180deg, #eaf6fa 0%, #f6fafb 100%);}
.pp-card--friend {--pp-accent: #0b6a70; background: linear-gradient(180deg, #e0f6f4 0%, #f3fafb 100%);}
.pp-card__img {display: block; width: 100%; height: auto; aspect-ratio: 337 / 152; object-fit: cover;
	-webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent); mask-image: linear-gradient(to bottom, #000 85%, transparent);}
.pp-card__text {display: flex; flex-direction: column; flex: 1; padding: 6px 28px 22px;}
.pp-card__title {margin: 0 0 8px; font-size: 21px; font-weight: 800; line-height: 1.2; color: #0e2f36;}
.pp-card__desc {margin: 0 0 16px; font-size: 16px; color: #4a5559;}
.pp-card__check {display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 16px; color: #2c3a3e;}
.pp-card__check::before {content: ""; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--pp-accent); background: #fff; transition: box-shadow .15s, background .15s;}
.pp-card input {position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;}
.pp-card input:checked ~ .pp-card__text .pp-card__check::before {background: var(--pp-accent); box-shadow: inset 0 0 0 5px #fff;}
.pp-card input:checked ~ .pp-card__text .pp-card__check {font-weight: 600;}
.pp-card input:focus-visible ~ .pp-card__text .pp-card__check::before {outline: 2px solid var(--pp-accent); outline-offset: 3px;}
.pp-card:has(input:checked) {border-color: var(--pp-accent); box-shadow: 0 12px 30px rgba(14, 47, 54, .16);}

.pp__panel {position: relative; z-index: 3; margin: 0 15px 15px 170px; padding: 24px 38px 16px 40px; border-radius: 24px; background: rgba(250, 251, 252, .96); box-shadow: 0 8px 30px rgba(14, 47, 54, .1);}
.pp__panel-top {display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px;}
.pp__panel-title {margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: #0e2f36;}
.pp__perks {display: flex; gap: 28px; margin: 0; padding: 0; list-style: none;}
.pp__perks li {display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.25; color: #3d4b50;}
.pp__perks svg {flex: 0 0 auto; color: #0b6a70;}

.pp__form-row {display: grid; grid-template-columns: 1fr 1.05fr 1.4fr; gap: 26px; align-items: center;}
.pp__field {position: relative; margin: 0;}
.pp__field svg {position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: #0b6a70; pointer-events: none;}
.pp__field input {width: 100%; height: 60px; padding: 0 18px 0 54px; border: 1px solid #c9d3d6; border-radius: 10px; background: #fff; font-size: 17px; color: #0e2f36; outline: none; transition: border-color .15s, box-shadow .15s;}
.pp__field input:focus {border-color: #0b6a70; box-shadow: 0 0 0 3px rgba(11, 106, 112, .15);}
.pp__submit {height: 66px; padding: 0 20px; border: 0; border-radius: 12px; background: #0b6a70; color: #fff; font-size: 19px; font-weight: 500; box-shadow: 0 8px 20px rgba(11, 106, 112, .3); cursor: pointer; transition: background .15s;}
.pp__submit:hover {background: #09585d;}
.pp__submit:active {background: #07494e;}
.pp__agree {display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 14px; color: #3d4b50; cursor: pointer;}
.pp__agree input {flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: #0b6a70; cursor: pointer;}
.pp__agree a {color: #0b6a70;}
.pp__error {display: none; margin: 10px 0 0; font-size: 14px; color: #d23a47;}
.pp__error.is-visible {display: block;}

/* Окно уже макета (без фото, < 1200 px) — ужимаем шрифты и отступы */
@media (max-width: 1199.98px) {
	.pp__title {font-size: 40px;}
	.pp-card__text {padding: 4px 20px 18px;}
	.pp-card__title {font-size: 19px;}
	.pp-card__desc {font-size: 15px;}
	.pp__panel {padding: 20px 26px 14px;}
	.pp__perks {gap: 18px;}
	.pp__form-row {gap: 16px;}
	.pp__submit {font-size: 17px;}
}

/* Без фото: композиция сводится к одному окну */
@media (max-width: 1199.98px) {
	#promo-popup .modal-dialog {max-width: 1330px; margin: 1.75rem auto;}
	.pp-stage {width: auto; min-height: 0; padding: 0;}
	.pp-stage__girl, .pp-stage__tooth, .pp-stage__heart {display: none;}
	.pp__body {margin-left: 0; padding: 20px 28px 0;}
	.pp__head {padding-left: 0;}
	.pp__panel {margin: 0 15px 15px;}
	.pp__decor {width: 280px; opacity: .8;}
}

/* Планшеты и телефоны: акции списком, форма в столбик */
@media (max-width: 991.98px) {
	#promo-popup .modal-dialog {margin: 10px auto; padding: 0 10px;}
	.pp, #promo-popup .modal-content {border-radius: 22px;}
	.pp {font-size: 15px;}
	.pp__decor {display: none;}
	.pp__close {top: 10px; right: 10px; width: 40px; height: 40px;}
	.pp__body {padding: 16px 16px 0;}
	.pp__badge {font-size: 12px; padding: 6px 16px 6px 8px;}
	.pp__title {margin: 12px 0 8px; padding-right: 30px; font-size: 28px;}
	.pp__br {display: none;}
	.pp__title svg {width: 26px; height: 24px;}
	.pp__subtitle {margin-bottom: 16px; font-size: 15px;}
	.pp__cards {grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px;}
	.pp-card {flex-direction: row; align-items: stretch; border-radius: 18px;}
	.pp-card:hover {transform: none;}
	.pp-card__img {width: 40%; max-width: 170px; aspect-ratio: auto; object-fit: contain;
		-webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent);}
	.pp-card__text {padding: 12px 14px 12px 6px;}
	.pp-card__title {margin-bottom: 4px; font-size: 16px;}
	.pp-card__desc {margin-bottom: 8px; font-size: 13px;}
	.pp-card__check {gap: 8px; font-size: 14px;}
	.pp-card__check::before {width: 22px; height: 22px;}
	.pp__panel {margin: 0 10px 10px; padding: 16px;}
	.pp__panel-top {margin-bottom: 12px;}
	.pp__panel-title {font-size: 17px;}
	.pp__perks {display: none;}
	.pp__form-row {grid-template-columns: 1fr; gap: 10px;}
	.pp__field input {height: 50px; font-size: 16px;}
	.pp__submit {height: 54px; font-size: 16px;}
	.pp__agree {font-size: 13px; align-items: flex-start;}
}

@media (max-width: 479.98px) {
	.pp__title {font-size: 24px;}
	.pp-card__desc {display: none;}
}

/* Невысокие экраны 992–1199 px: окно ~880 px в высоту — уменьшаем его целиком,
   чтобы кнопка и галочка согласия были видны без прокрутки. От 1200 px
   масштаб считает JS по размерам всей композиции. */
@media (min-width: 992px) and (max-width: 1199.98px) and (max-height: 939.98px) {.pp {zoom: .9;}}
@media (min-width: 992px) and (max-width: 1199.98px) and (max-height: 849.98px) {.pp {zoom: .82;}}
@media (min-width: 992px) and (max-width: 1199.98px) and (max-height: 769.98px) {.pp {zoom: .74;}}
@media (min-width: 992px) and (max-width: 1199.98px) and (max-height: 689.98px) {.pp {zoom: .66;}}