/* Общие стили сервисов обработки фото (шорткод [aimp_service]). */

.aimp-sv {
	--sv-accent: #6c5ce7;
	--sv-line: #e3e5ef;
	max-width: 900px;
}

.aimp-sv-free {
	margin: 0 0 1.2em;
	padding: .7em .9em;
	border-radius: 8px;
	background: #e9f7ee;
	color: #1a7f37;
	font-size: .9em;
}

.aimp-sv-intro {
	margin: 0 0 1.6em;
	color: #6b7080;
	font-size: .95em;
	line-height: 1.55;
}

.aimp-sv-step {
	margin-bottom: 2em;
}

.aimp-sv-title {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0 0 .7em;
	font-size: 1.05em;
}

.aimp-sv-title span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: var(--sv-accent);
	color: #fff;
	font-size: .8em;
	flex: 0 0 auto;
}

/* --- загрузка --- */

.aimp-sv-drop {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
	border: 2px dashed var(--sv-line);
	border-radius: 10px;
	cursor: pointer;
	color: #6b7080;
	font-size: .93em;
	transition: border-color .15s;
}

.aimp-sv-drop:hover {
	border-color: var(--sv-accent);
}

.aimp-sv-files {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.aimp-sv-file {
	position: relative;
	width: 112px;
	padding: 6px;
	border: 1px solid var(--sv-line);
	border-radius: 10px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aimp-sv-file img {
	width: 100%;
	height: 76px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.aimp-sv-file-name {
	font-size: .72em;
	color: #3a3f51;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aimp-sv-file-del {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--sv-line);
	background: #fff;
	color: #98304a;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.aimp-sv-file-del:hover {
	background: #98304a;
	color: #fff;
}

/* --- настройки --- */

.aimp-sv-option {
	margin-bottom: 1em;
}

.aimp-sv-option-label {
	display: block;
	margin-bottom: .4em;
	font-size: .92em;
	color: #3a3f51;
}

.aimp-sv-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aimp-sv-choice {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: .5em .9em;
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	font-size: .88em;
	transition: border-color .15s, background .15s;
}

.aimp-sv-choice:has(input:checked) {
	border-color: var(--sv-accent);
	background: #f3f1ff;
	color: var(--sv-accent);
}

.aimp-sv-notes {
	margin: 1.2em 0;
}

.aimp-sv-notes label {
	display: block;
	margin-bottom: .35em;
	font-size: .92em;
	color: #3a3f51;
}

.aimp-sv-notes label span {
	color: #8b8fa3;
}

/* Поле растёт под текст (высоту ведёт growNotes в aimp-services.js), CSS
   задаёт только пределы: ниже 70px не сжимается, выше 420px — прокрутка
   внутри поля, чтобы кнопка запуска не уезжала за экран. */
.aimp-sv-notes textarea {
	width: 100%;
	min-height: 70px;
	max-height: 420px;
	overflow-y: auto;
	line-height: 1.5;
	padding: .6em .8em;
	border: 1px solid var(--sv-line);
	border-radius: 8px;
	font: inherit;
	font-size: .92em;
	resize: vertical;
}

.aimp-sv-res {
	display: flex;
	align-items: center;
	gap: .7em;
	flex-wrap: wrap;
	font-size: .92em;
}

.aimp-sv-res select {
	padding: .45em .6em;
	border: 1px solid var(--sv-line);
	border-radius: 8px;
	background: #fff;
	font: inherit;
}

.aimp-sv-total {
	color: var(--sv-accent);
	font-weight: 600;
}

.aimp-sv-run {
	display: block;
	margin-top: 1.2em;
	padding: .75em 1.7em;
	border: 0;
	border-radius: 8px;
	background: var(--sv-accent);
	color: #fff;
	font-size: .95em;
	cursor: pointer;
}

.aimp-sv-run:disabled {
	opacity: .5;
	cursor: default;
}

/* --- статус --- */

.aimp-sv-status {
	margin-top: .9em;
	padding: .7em .9em;
	border-radius: 8px;
	font-size: .9em;
	background: #f4f5fa;
	color: #3a3f51;
}

.aimp-sv-status.is-ok {
	background: #e9f7ee;
	color: #1a7f37;
}

.aimp-sv-status.is-error {
	background: #fdf0f0;
	color: #a02020;
}

/* --- результаты --- */

.aimp-sv-actions {
	margin-bottom: 1em;
}

.aimp-sv-zip {
	padding: .6em 1.3em;
	border: 1px solid var(--sv-accent);
	border-radius: 8px;
	background: #fff;
	color: var(--sv-accent);
	font: inherit;
	font-size: .92em;
	cursor: pointer;
}

.aimp-sv-zip:hover {
	background: var(--sv-accent);
	color: #fff;
}

.aimp-sv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.aimp-sv-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--sv-line);
	border-radius: 10px;
	background: #fff;
	align-items: start;
}

.aimp-sv-card img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

.aimp-sv-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: .82em;
	color: #6b7080;
	text-align: center;
}

.aimp-sv-card.is-pending .aimp-sv-slot {
	min-height: 80px;
	background: #f4f5fa;
	border-radius: 6px;
}

.aimp-sv-card.is-failed .aimp-sv-slot {
	color: #a02020;
}

.aimp-sv-downloads {
	display: flex;
	gap: .9em;
	flex-wrap: wrap;
	justify-content: center;
}

.aimp-sv-downloads a {
	color: var(--sv-accent);
	font-size: .92em;
}

@media (max-width: 600px) {
	.aimp-sv-card {
		grid-template-columns: 1fr;
	}
}

/* Подпись шага в комплекте: карточек на одно фото несколько,
   и без подписи непонятно, что есть что. */
.aimp-sv-step-badge {
	grid-column: 1 / -1;
	display: inline-block;
	padding: .2em .7em;
	border-radius: 999px;
	background: var(--sv-accent);
	color: #fff;
	font-size: .72em;
	font-weight: 600;
	text-transform: uppercase;
	justify-self: start;
}