/* Резюмка — фотоателье */

.rzp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(24, 36, 32, .62);
	display: grid;
	place-items: center;
	z-index: 130;
	padding: 16px;
}
.rzp {
	background: var(--paper, #fff);
	color: var(--ink, #182420);
	border-radius: 14px;
	width: min(880px, 100%);
	max-height: 92vh;
	overflow: auto;
	box-shadow: 0 26px 70px rgba(0, 0, 0, .4);
}
.rzp__head {
	padding: 16px 20px 12px;
	border-bottom: 1px solid var(--line, #d9e2dc);
}
.rzp__head b { font-size: 1.05rem; display: block; }
.rzp__privacy {
	font-size: .82rem;
	color: var(--stamp, #157347);
}
.rzp__body {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 22px;
	padding: 20px;
}
@media (max-width: 720px) {
	.rzp__body { grid-template-columns: 1fr; }
}

/* Кадр */
.rzp__stage {
	position: relative;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 3 / 4;
	margin-inline: auto;
	border-radius: 8px;
	overflow: hidden;
	background: #f3f6f4;
	box-shadow: inset 0 0 0 1px var(--line, #d9e2dc);
	touch-action: none;
	cursor: grab;
}
.rzp__stage:active { cursor: grabbing; }
.rzp__canvas { width: 100%; height: 100%; display: block; }

.rzp__guides { position: absolute; inset: 0; pointer-events: none; }
.rzp__guide { position: absolute; }
.rzp__guide--head {
	left: 0; right: 0; top: 8%;
	border-top: 1px dashed rgba(21, 115, 71, .6);
}
.rzp__guide--eyes {
	left: 0; right: 0; top: 34%;
	border-top: 1px dashed rgba(21, 115, 71, .85);
}
.rzp__guide--eyes i {
	position: absolute;
	right: 4px; top: 2px;
	font-style: normal;
	font-size: .6rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(21, 115, 71, .95);
	background: rgba(255, 255, 255, .78);
	padding: 1px 4px;
	border-radius: 3px;
}
.rzp__guide--face {
	left: 22%; right: 22%; top: 12%; bottom: 38%;
	border: 1px dashed rgba(21, 115, 71, .35);
	border-radius: 50% 50% 45% 45%;
}

/* Панель */
.rzp__group {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--line, #d9e2dc);
}
.rzp__group:last-of-type { border-bottom: 0; }
.rzp__label {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ink-soft, #4c5c54);
	margin-bottom: 8px;
}
.rzp__panel input[type="range"] { width: 100%; accent-color: var(--stamp, #157347); }
.rzp__row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rzp__btn {
	font: inherit;
	font-size: .88rem;
	padding: 8px 12px;
	border: 1px solid var(--line, #d9e2dc);
	border-radius: 8px;
	background: transparent;
	color: var(--ink, #182420);
	cursor: pointer;
}
.rzp__btn:hover { border-color: var(--stamp, #157347); }
.rzp__hint { font-size: .82rem; color: var(--ink-soft, #4c5c54); margin: 10px 0 0; line-height: 1.5; }

.rzp__check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .92rem;
	margin-bottom: 9px;
	cursor: pointer;
}
.rzp__check input { accent-color: var(--stamp, #157347); width: 17px; height: 17px; }

.rzp__bg { display: flex; flex-wrap: wrap; gap: 8px; }
.rzp__sw {
	font: inherit;
	font-size: .85rem;
	padding: 7px 12px;
	border: 1px solid var(--line, #d9e2dc);
	border-radius: 999px;
	background: transparent;
	color: var(--ink-soft, #4c5c54);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.rzp__sw[style*="--sw"]::before {
	content: "";
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--sw);
	box-shadow: inset 0 0 0 1px rgba(24, 36, 32, .18);
}
.rzp__sw--on {
	border-color: var(--stamp, #157347);
	color: var(--stamp, #157347);
	font-weight: 700;
}

.rzp__actions { display: flex; gap: 10px; margin-top: 4px; }
.rzp__apply, .rzp__cancel {
	font: inherit;
	font-weight: 700;
	padding: 12px 20px;
	border-radius: 10px;
	cursor: pointer;
	border: 2px solid transparent;
}
.rzp__apply { background: var(--stamp, #157347); color: #fff; }
.rzp__apply:hover { background: var(--stamp-dark, #0e5434); }
.rzp__cancel { background: transparent; border-color: var(--line, #d9e2dc); color: var(--ink, #182420); }

/* Блок обработки нейросетью */
.rzp__ai { border-top: 1px solid var(--line, #d9e2dc); padding-top: 16px; }
.rzp__outfits {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 12px;
}
.rzp__outfits .rzp__sw { font-size: .82rem; padding: 6px 11px; }
.rzp__btn--ai {
	width: 100%;
	border: 1.5px dashed var(--stamp, #157347);
	color: var(--stamp, #157347);
	font-weight: 700;
	padding: 11px 14px;
}
.rzp__btn--ai:hover { background: rgba(21, 115, 71, .08); border-style: solid; }
.rzp__btn--ai[disabled] { opacity: .6; cursor: wait; }
.rzp__warn {
	font-size: .8rem;
	line-height: 1.5;
	color: var(--ink-soft, #4c5c54);
	background: rgba(217, 164, 65, .12);
	border-left: 3px solid #d9a441;
	border-radius: 0 6px 6px 0;
	padding: 9px 11px;
	margin: 10px 0 0;
}

/* =========================================================
   ТЕЛЕФОН: убираем горизонтальную прокрутку
   Колонки сетки по умолчанию не дают содержимому сжиматься
   уже своей ширины, а ряд кнопок не переносился.
   ========================================================= */
.rzp__body > * { min-width: 0; }
.rzp__actions { flex-wrap: wrap; }
.rzp__stage { max-width: 100%; }
.rzp img, .rzp canvas { max-width: 100%; height: auto; }

@media (max-width: 560px) {
	.rzp__body { padding: 14px; gap: 16px; }
	.rzp__actions { gap: 8px; }
	.rzp__apply,
	.rzp__cancel {
		flex: 1 1 auto;
		min-width: 0;
		padding: 12px 14px;
		text-align: center;
	}
	/* Длинные подписи не должны распирать блок */
	.rzp__row,
	.rzp__bg { max-width: 100%; }
	.rzp__row > *,
	.rzp__bg > * { max-width: 100%; }
	.rzp input[type="range"] { width: 100%; min-width: 0; }
}

/* Само окно не должно быть шире экрана */
.rzp { max-width: 100vw; overflow-x: hidden; }