/**
 * File: /wp-content/plugins/partmost-qr-generator/assets/css/partmost-qr-generator.css
 * Module: PMQR Shared Frontend Styles
 * Version: 1.0.0
 *
 * Назначение модуля:
 * - Это первый общий CSS-слой для публичных экранов нового плагина Partmost QR Generator.
 * - Файл стилизует уже существующую HTML-структуру shortcodes:
 *   1) [pmqr_generator]
 *   2) [pmqr_dashboard]
 *   3) [pmqr_pricing]
 *
 * Что делает этот файл:
 * - задает аккуратную базовую сетку и отступы;
 * - оформляет карточки, формы, кнопки, сообщения, pricing-блоки;
 * - стилизует dashboard-карточки;
 * - стилизует success/error response-блоки;
 * - делает адаптивное поведение для мобильных экранов.
 *
 * Что этот файл НЕ делает:
 * - не меняет HTML-разметку;
 * - не добавляет JS-логику;
 * - не рисует preview QR;
 * - не управляет анимациями, кроме очень легких hover/focus состояний.
 *
 * На какие классы опирается:
 * - .pmqr
 * - .pmqr__*
 * - .pmqr-form__*
 * - .pmqr-button*
 * - .pmqr-format-card*
 * - .pmqr-dashboard__*
 * - .pmqr-plan-card*
 * - .pmqr-notice*
 *
 * История изменений:
 * - 1.0.0 — первый общий CSS-слой для публичных экранов плагина.
 */

.pmqr {
	--pmqr-bg: #ffffff;
	--pmqr-bg-soft: #f6f8fb;
	--pmqr-bg-muted: #f2f4f7;
	--pmqr-border: #d9e1ea;
	--pmqr-border-strong: #c6d2de;
	--pmqr-text: #1f2937;
	--pmqr-text-soft: #5b6574;
	--pmqr-title: #0f172a;
	--pmqr-primary: #111827;
	--pmqr-primary-text: #ffffff;
	--pmqr-success-bg: #ecfdf3;
	--pmqr-success-border: #9bd9b3;
	--pmqr-success-text: #166534;
	--pmqr-error-bg: #fef2f2;
	--pmqr-error-border: #f1b3b3;
	--pmqr-error-text: #991b1b;
	--pmqr-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
	--pmqr-radius-lg: 18px;
	--pmqr-radius-md: 12px;
	--pmqr-radius-sm: 10px;
	--pmqr-gap: 18px;

	color: var(--pmqr-text);
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 28px;
}

.pmqr * {
	box-sizing: border-box;
}

.pmqr__header {
	margin-bottom: 18px;
}

.pmqr__title {
	margin: 0 0 8px;
	font-size: 30px;
	line-height: 1.15;
	font-weight: 800;
	color: var(--pmqr-title);
}

.pmqr__subtitle {
	margin: 0;
	color: var(--pmqr-text-soft);
	font-size: 16px;
}

.pmqr__plan-summary {
	background: var(--pmqr-bg-soft);
	border: 1px solid var(--pmqr-border);
	border-radius: var(--pmqr-radius-lg);
	padding: 16px 18px;
	margin-bottom: 18px;
	box-shadow: var(--pmqr-shadow);
}

.pmqr__plan-badge,
.pmqr__plan-limit,
.pmqr__plan-note {
	margin: 0 0 8px;
}

.pmqr__plan-note:last-child,
.pmqr__plan-limit:last-child,
.pmqr__plan-badge:last-child {
	margin-bottom: 0;
}

.pmqr__plan-badge strong,
.pmqr__plan-limit strong {
	color: var(--pmqr-title);
}

.pmqr__plan-usage {
	color: var(--pmqr-text-soft);
	font-size: 14px;
}

.pmqr-form,
.pmqr-preview,
.pmqr-dashboard__cards,
.pmqr-pricing__grid {
	width: 100%;
}

.pmqr-form {
	background: var(--pmqr-bg);
	border: 1px solid var(--pmqr-border);
	border-radius: var(--pmqr-radius-lg);
	padding: 20px;
	box-shadow: var(--pmqr-shadow);
	margin-bottom: 18px;
}

.pmqr-form__row {
	margin-bottom: 18px;
}

.pmqr-form__row:last-child {
	margin-bottom: 0;
}

.pmqr-form__label {
	display: inline-block;
	margin-bottom: 8px;
	font-weight: 700;
	color: var(--pmqr-title);
}

.pmqr-form__input {
	display: block;
	width: 100%;
	border: 1px solid var(--pmqr-border-strong);
	border-radius: var(--pmqr-radius-sm);
	padding: 12px 14px;
	background: #fff;
	color: var(--pmqr-text);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pmqr-form__input:focus {
	outline: none;
	border-color: #94a3b8;
	box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

.pmqr-form__input--color {
	min-height: 48px;
	padding: 6px;
	cursor: pointer;
}

.pmqr-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.pmqr-form__hint {
	margin-top: 8px;
	font-size: 14px;
	color: var(--pmqr-text-soft);
}

.pmqr-form__hint a,
.pmqr__plan-note a,
.pmqr-dashboard__card-meta a {
	color: #1d4ed8;
	text-decoration: none;
}

.pmqr-form__hint a:hover,
.pmqr__plan-note a:hover,
.pmqr-dashboard__card-meta a:hover {
	text-decoration: underline;
}

.pmqr-form__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.pmqr-form__checkbox-label input[type="checkbox"] {
	margin-top: 3px;
	flex: 0 0 auto;
}

.pmqr-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.pmqr-button {
	appearance: none;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
	text-decoration: none;
}

.pmqr-button:hover:not(:disabled) {
	transform: translateY(-1px);
}

.pmqr-button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.pmqr-button--primary {
	background: var(--pmqr-primary);
	color: var(--pmqr-primary-text);
	box-shadow: 0 6px 16px rgba(17, 24, 39, 0.15);
}

.pmqr-button--primary:hover:not(:disabled) {
	background: #0b1220;
}

.pmqr-button--secondary {
	background: #fff;
	color: var(--pmqr-title);
	border-color: var(--pmqr-border-strong);
}

.pmqr-button--secondary:hover:not(:disabled) {
	background: var(--pmqr-bg-soft);
}

.pmqr-button--locked {
	background: var(--pmqr-bg-muted);
	color: var(--pmqr-text-soft);
	border-color: var(--pmqr-border);
}

.pmqr-form__formats {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--pmqr-border);
}

.pmqr-form__formats-title {
	font-weight: 800;
	color: var(--pmqr-title);
	margin-bottom: 12px;
}

.pmqr-format-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.pmqr-format-card {
	background: #fff;
	border: 1px solid var(--pmqr-border);
	border-radius: var(--pmqr-radius-md);
	padding: 16px;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
}

.pmqr-format-card.is-locked {
	background: var(--pmqr-bg-soft);
}

.pmqr-format-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pmqr-format-card__label {
	font-size: 18px;
	font-weight: 800;
	color: var(--pmqr-title);
}

.pmqr-format-card__badge {
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--pmqr-bg-muted);
	border: 1px solid var(--pmqr-border);
	font-size: 12px;
	font-weight: 700;
	color: var(--pmqr-text-soft);
	white-space: nowrap;
}

.pmqr-format-card__description,
.pmqr-format-card__upsell {
	font-size: 14px;
	color: var(--pmqr-text-soft);
}

.pmqr-preview {
	background: var(--pmqr-bg);
	border: 1px solid var(--pmqr-border);
	border-radius: var(--pmqr-radius-lg);
	padding: 18px;
	box-shadow: var(--pmqr-shadow);
}

.pmqr-preview__title {
	font-size: 18px;
	font-weight: 800;
	color: var(--pmqr-title);
	margin-bottom: 12px;
}

.pmqr-preview__canvas-placeholder {
	background: var(--pmqr-bg-soft);
	border: 1px dashed var(--pmqr-border-strong);
	border-radius: var(--pmqr-radius-md);
	padding: 24px 18px;
	color: var(--pmqr-text-soft);
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.pmqr-dashboard__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.pmqr-dashboard__card {
	background: var(--pmqr-bg);
	border: 1px solid var(--pmqr-border);
	border-radius: var(--pmqr-radius-lg);
	padding: 18px;
	box-shadow: var(--pmqr-shadow);
}

.pmqr-dashboard__card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.pmqr-dashboard__card-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--pmqr-title);
	word-break: break-word;
}

.pmqr-dashboard__card-status {
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	border: 1px solid var(--pmqr-border);
	background: var(--pmqr-bg-soft);
	color: var(--pmqr-text-soft);
}

.pmqr-dashboard__card-status.is-active {
	background: var(--pmqr-success-bg);
	border-color: var(--pmqr-success-border);
	color: var(--pmqr-success-text);
}

.pmqr-dashboard__card-status.is-inactive {
	background: var(--pmqr-error-bg);
	border-color: var(--pmqr-error-border);
	color: var(--pmqr-error-text);
}

.pmqr-dashboard__card-meta {
	display: grid;
	gap: 8px;
	font-size: 14px;
	margin-bottom: 14px;
	color: var(--pmqr-text);
	word-break: break-word;
}

.pmqr-dashboard__card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pmqr-dashboard__empty {
	background: var(--pmqr-bg-soft);
	border: 1px dashed var(--pmqr-border-strong);
	border-radius: var(--pmqr-radius-lg);
	padding: 22px 18px;
	color: var(--pmqr-text-soft);
	text-align: center;
}

.pmqr-pricing__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 16px;
}

.pmqr-plan-card {
	background: var(--pmqr-bg);
	border: 1px solid var(--pmqr-border);
	border-radius: var(--pmqr-radius-lg);
	padding: 20px;
	box-shadow: var(--pmqr-shadow);
}

.pmqr-plan-card__title {
	font-size: 24px;
	font-weight: 800;
	color: var(--pmqr-title);
	margin-bottom: 8px;
}

.pmqr-plan-card__description {
	font-size: 15px;
	color: var(--pmqr-text-soft);
	margin-bottom: 14px;
}

.pmqr-plan-card__features {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 8px;
	color: var(--pmqr-text);
}

.pmqr-pricing__note {
	background: var(--pmqr-bg-soft);
	border: 1px solid var(--pmqr-border);
	border-radius: var(--pmqr-radius-lg);
	padding: 16px 18px;
	color: var(--pmqr-text-soft);
}

.pmqr-form__response,
.pmqr-dashboard__response {
	margin-top: 16px;
	padding: 13px 14px;
	border-radius: var(--pmqr-radius-md);
	border: 1px solid var(--pmqr-border);
	font-size: 14px;
	font-weight: 600;
}

.pmqr-form__response.is-success,
.pmqr-dashboard__response.is-success {
	background: var(--pmqr-success-bg);
	border-color: var(--pmqr-success-border);
	color: var(--pmqr-success-text);
}

.pmqr-form__response.is-error,
.pmqr-dashboard__response.is-error {
	background: var(--pmqr-error-bg);
	border-color: var(--pmqr-error-border);
	color: var(--pmqr-error-text);
}

.pmqr-notice {
	background: var(--pmqr-bg-soft);
	border: 1px solid var(--pmqr-border);
	border-radius: var(--pmqr-radius-lg);
	padding: 16px 18px;
}

.pmqr-notice__message {
	color: var(--pmqr-text-soft);
}

@media (max-width: 900px) {
	.pmqr__title {
		font-size: 26px;
	}

	.pmqr-form__grid,
	.pmqr-format-list,
	.pmqr-dashboard__cards,
	.pmqr-pricing__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.pmqr {
		font-size: 15px;
	}

	.pmqr__title {
		font-size: 23px;
	}

	.pmqr-form,
	.pmqr-preview,
	.pmqr-plan-card,
	.pmqr-dashboard__card,
	.pmqr__plan-summary,
	.pmqr-pricing__note,
	.pmqr-notice {
		padding: 16px;
		border-radius: 16px;
	}

	.pmqr-button {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.pmqr-dashboard__card-head {
		flex-direction: column;
		align-items: flex-start;
	}
}