/**
 * aiModelka — окошко «Упорядочить фото» (Documents/WPPlugin-HLD.md §2.10) и кнопки типов
 * фотосессии в блоке aiModelka (§2.1). Разметку окошка строит aimodelka-admin.js. Файл
 * подключается и на странице товара витрины, и в редакторе товара: и окошко, и кнопки там
 * одни, и стили у них одни.
 */

/* Кнопка типа фотосессии: картинка типа слева, название и строка состояния. Размеры заданы
   явно и с запасом на две строки, поэтому три кнопки одинаковы, есть фотосессия или нет.
   Селектор сильнее обычного: кнопка темы и кнопка WordPress задают свои отступы и высоту. */
button.button.aimodelka-kind-button {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: 54px;
	height: auto;
	padding: 6px 12px 6px 7px;
	line-height: 1.25;
	text-align: left;
	white-space: normal;
}

.aimodelka-kind-button__icon {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 7px;
	object-fit: cover;
	/* Верх картинки: на фото модели в квадрат попадают лицо и вещь, а не только вещь. */
	object-position: 50% 20%;
}

.aimodelka-kind-button__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.aimodelka-kind-button__name {
	font-weight: 600;
}

.aimodelka-kind-button__state {
	font-size: 0.86em;
	font-weight: 400;
	opacity: 0.85;
}

/* -----------------------------------------------------------------------------------
   Каждый элемент окошка — с классом, и у каждого класса явно заданы размеры, отступы,
   обтекание и шрифт. Темы пишут правила на голые теги — section { width: 30% },
   h3 { margin: 40px 0 }, button { text-transform: uppercase } — и без явных значений
   такое правило достаёт и до окошка. Перебить явное значение может только правило темы
   с !important — это риск §7 HLD. Крупные части окошка (шапка, тело, разделы, подвал) —
   обычные div, у которых тегов-правил не бывает.

   Цвета нейтральные серые — окошко плагина, а не часть темы; «Сохранить» и выбранная ★ —
   тёмные, чтобы главное было видно в любой теме.
   ----------------------------------------------------------------------------------- */

/* Пока окошко открыто, страница под ним не прокручивается: прокрутка — внутри тела окошка. */
body.aimodelka-photos-open {
	overflow: hidden;
}

.aimodelka-photos,
.aimodelka-photos * {
	box-sizing: border-box;
}

.aimodelka-photos {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: auto;
	margin: 0;
	padding: 24px 12px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: #222;
	text-align: left;
}

.aimodelka-photos__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.aimodelka-photos__window {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
	max-height: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
	outline: none;
}

/* Телефон: окошко во всю ширину и высоту экрана, без скругления. */
@media (max-width: 560px) {
	.aimodelka-photos {
		padding: 0;
	}

	.aimodelka-photos__window {
		max-width: none;
		height: 100%;
		border-radius: 0;
	}
}

/* Шапка: название окошка, название товара мелким, крестик. */
.aimodelka-photos__header {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	margin: 0;
	padding: 14px 18px;
	border-bottom: 1px solid #e6e6e6;
}

.aimodelka-photos__title {
	flex: none;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: #222;
	text-transform: none;
	letter-spacing: normal;
}

.aimodelka-photos__product {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 12.5px;
	color: #666;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aimodelka-photos__close {
	flex: none;
	width: 36px;
	height: 36px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: #666;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.aimodelka-photos__close:hover {
	background: #f0f0f0;
	color: #222;
}

/* Тело прокручивается само: список вариаций бывает длинным. */
.aimodelka-photos__body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: auto;
	margin: 0;
	padding: 16px 18px;
}

.aimodelka-photos__loading,
.aimodelka-photos__hint {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #666;
}

/* Раздел — во всю ширину тела, без отступов и обтекания, что бы тема ни писала про теги. */
.aimodelka-photos__section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;
}

.aimodelka-photos__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.aimodelka-photos__section-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #222;
	text-transform: none;
	letter-spacing: normal;
}

.aimodelka-photos__section-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #666;
}

/* Число фото в заголовке раздела — бейджем. */
.aimodelka-photos__badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: #eee;
	color: #333;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
}

.aimodelka-photos__rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Строка фото: миниатюра, название с пометкой и подписью, кнопки-значки справа. */
.aimodelka-photos__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	margin: 0;
	padding: 7px 8px 7px 7px;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	background: #fafafa;
}

.aimodelka-photos__row:hover {
	border-color: #d0d0d0;
}

/* Изображение товара выделено лёгкой подложкой и рамкой в тон. */
.aimodelka-photos__row--main {
	border-color: #b8c6e0;
	background: #f3f6fb;
}

.aimodelka-photos__row--removed {
	border-style: dashed;
	background: #fcfcfc;
	color: #666;
}

.aimodelka-photos__thumb {
	flex: none;
	display: block;
	width: 56px;
	height: 56px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #ececec;
}

.aimodelka-photos__row--removed .aimodelka-photos__thumb {
	opacity: 0.45;
}

/* Картинка заполняет квадрат; «max-width: 100%; height: auto» от WooCommerce её не трогает. */
.aimodelka-photos .aimodelka-photos__thumb img,
.aimodelka-photos .aimodelka-photos__pick-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

.aimodelka-photos__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Название и пометка «ИИ» / «исх.» в одной строке. */
.aimodelka-photos__name {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.aimodelka-photos__label {
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #222;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aimodelka-photos__meta {
	overflow: hidden;
	font-size: 12px;
	line-height: 1.3;
	color: #777;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aimodelka-photos__removed-text {
	flex: 1;
	min-width: 0;
	font-size: 13px;
}

.aimodelka-photos__tag {
	flex: none;
	padding: 1px 6px;
	border-radius: 999px;
	background: #e1f0e6;
	color: #2f7d4f;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.aimodelka-photos__tag--source {
	background: #ececec;
	color: #666;
}

/* Кнопки-значки: ★ слева, пара ↑ ↓ одной группой, ✕ справа. 32 px на компьютере, 36 на телефоне. */
.aimodelka-photos__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.aimodelka-photos__moves {
	display: inline-flex;
}

.aimodelka-photos__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #d4d4d4;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: #333;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}

.aimodelka-photos__moves .aimodelka-photos__icon:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.aimodelka-photos__moves .aimodelka-photos__icon:last-child {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.aimodelka-photos__icon:hover:not(:disabled) {
	background: #f0f0f0;
	border-color: #bdbdbd;
}

.aimodelka-photos__icon:disabled {
	opacity: 0.35;
	cursor: default;
}

.aimodelka-photos__icon--on,
.aimodelka-photos__icon--on:disabled {
	background: #222;
	border-color: #222;
	color: #fff;
	opacity: 1;
}

/* ✕ краснеет только под курсором: в покое строка спокойная. */
.aimodelka-photos__icon--remove:hover:not(:disabled) {
	background: #fff2f2;
	border-color: #e0a0a0;
	color: #b32d2e;
}

/* Телефон: строка в две строчки — фото с названием, под ними кнопки справа; иначе название
   обрезается, потому что четыре кнопки под палец съедают половину ширины экрана. */
@media (max-width: 560px) {
	.aimodelka-photos__row {
		flex-wrap: wrap;
		gap: 8px 10px;
	}

	.aimodelka-photos__actions {
		flex-basis: 100%;
		justify-content: flex-end;
		gap: 6px;
	}

	.aimodelka-photos__icon {
		width: 36px;
		height: 36px;
	}
}

.aimodelka-photos__restore,
.aimodelka-photos__button {
	display: inline-block;
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: #222;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.aimodelka-photos__restore {
	flex: none;
	padding: 6px 10px;
}

.aimodelka-photos__restore:hover,
.aimodelka-photos__button:hover:not(:disabled) {
	background: #f0f0f0;
}

/* Строка вариации: название слева, справа миниатюра выбранного фото и выпадающий список. */
.aimodelka-photos__variation {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	margin: 0;
	padding: 6px 8px;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	background: #fff;
}

.aimodelka-photos__variation-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	color: #222;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aimodelka-photos__pick {
	flex: 0 1 62%;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.aimodelka-photos__pick-thumb {
	flex: none;
	display: block;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	background: #ececec;
}

/* «— нет —»: пустой квадрат с пунктиром — у вариации своего изображения нет. */
.aimodelka-photos__pick-thumb--none {
	border-style: dashed;
	background: #fafafa;
}

/* Обычный select со своими рамкой и шрифтом: на телефоне его рисует система своим колесом. */
.aimodelka-photos__select {
	flex: 1;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 7px 8px;
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: #222;
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.3;
	appearance: auto;
	-webkit-appearance: auto;
	cursor: pointer;
}

/* Телефон: список вариации под названием, во всю ширину. */
@media (max-width: 560px) {
	.aimodelka-photos__variation {
		flex-wrap: wrap;
	}

	.aimodelka-photos__pick {
		flex-basis: 100%;
	}
}

.aimodelka-photos__warning {
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	color: #b32d2e;
}

/* Подвал: заметка слева, «Отмена» и «Сохранить» справа. */
.aimodelka-photos__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	width: auto;
	margin: 0;
	padding: 12px 18px;
	border-top: 1px solid #e6e6e6;
}

.aimodelka-photos__note {
	flex: 1;
	min-width: 160px;
	font-size: 12px;
	color: #666;
}

.aimodelka-photos__error {
	flex-basis: 100%;
	font-size: 12.5px;
	color: #b32d2e;
}

.aimodelka-photos__error:empty {
	display: none;
}

/* «Сохранить» — тёмная заливка: главное действие окошка. */
.aimodelka-photos__button--primary {
	background: #222;
	border-color: #222;
	color: #fff;
}

.aimodelka-photos__button--primary:hover:not(:disabled) {
	background: #000;
}

.aimodelka-photos__button:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Телефон: кнопки подвала во всю ширину, друг под другом. */
@media (max-width: 560px) {
	.aimodelka-photos__footer .aimodelka-photos__button {
		flex: 1 1 40%;
	}
}