/**
 * Лендінг /raq/ (шаблон page-request-quote.php).
 *
 * Палітра/радіуси/тіні — глобальні токени --pp-* (enqueue-залежність `pp-theme`),
 * розміри шрифтів — шкала --pp-fs-* (сирі px заборонені, див. typography-scale-tokens).
 * Усі селектори scoped під .pp-raq, окрім блоку статусу (.pp-raq-state) — його
 * друкує шорткод плагіна всередині тієї ж <main>, тож він теж під .pp-raq.
 * Хедер/футер приходять з get_header()/get_footer(); контейнер = .pp-wrap.
 */

.pp-raq { color: var(--pp-text); background: var(--pp-bg); }
.pp-raq *, .pp-raq *::before, .pp-raq *::after { box-sizing: border-box; }
.pp-raq svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Button appearance is owned by buttons.css. */

/* --- HERO -------------------------------------------------------------- */

.pp-raq-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #0f172a 0%, var(--pp-dark) 65%, #1c2336 100%);
	color: #fff;
}
.pp-raq-hero::before {
	content: "";
	position: absolute;
	top: -220px;
	right: -170px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: rgba(249, 115, 22, .08);
	pointer-events: none;
}
.pp-raq-hero__grid {
	position: relative;
	display: grid;
	align-items: center;
	gap: clamp(36px, 4vw, 64px);
	grid-template-columns: minmax(300px, .8fr) minmax(560px, 1.2fr);
	padding-block: 36px 48px;
}
.pp-raq-hero__copy { max-width: 570px; }

/* Уніфікований блок крихт у theme.css фарбує активну крихту у --pp-text через
   `!important` (розрахунок на світлі сторінки) — на темному герої вона зникала.
   Перебити можна лише таким самим `!important`; ті ж кольори, що в .pp-cat-hero. */

.pp-raq-eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	color: #fb923c;
	font-size: var(--pp-fs-2xs, 11px);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.pp-raq-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-orange); }

.pp-raq-hero__copy h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(36px, 3.6vw, 56px);
	font-weight: 850;
	letter-spacing: -.035em;
	line-height: 1.05;
	text-transform: uppercase;
}
.pp-raq-lead { max-width: 560px; margin: 20px 0 0; color: #a8b5c8; font-size: var(--pp-fs-lg, 15px); line-height: 1.65; }

.pp-raq-facts { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.pp-raq-facts li { display: flex; align-items: center; gap: 10px; color: #cbd5e1; font-size: var(--pp-fs-md, 14px); }
.pp-raq-facts svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--pp-orange); }

.pp-raq-hero__products-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 24px;
	color: #fb923c;
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 750;
	text-decoration: none;
}
.pp-raq-hero__products-link:hover { color: #fff; }
.pp-raq-hero__products-link svg { width: 1.1em; height: 1.1em; transition: transform .2s; }
.pp-raq-hero__products-link:hover svg { transform: translateX(3px); }

.pp-raq-hero__form-card {
	--pp-quote-line: var(--pp-ui-line, #e2e8f0);
	--pp-quote-ink: var(--pp-text, #1a1a1a);
	--pp-quote-muted: var(--pp-ui-muted, #64748b);
	--pp-quote-orange: var(--pp-orange, #f97316);
	--pp-quote-orange-soft: var(--pp-ui-orange-soft, #fff4e9);
	width: 100%;
	padding: 26px 28px 28px;
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: var(--pp-radius-lg);
	background: #fff;
	box-shadow: 0 28px 70px rgba(2, 6, 23, .28);
	color: var(--pp-quote-ink);
	scroll-margin-top: 24px;
}
.pp-raq-hero__form-head { margin-bottom: 20px; }
.pp-raq-hero__form-head p {
	margin: 0 0 6px;
	color: var(--pp-orange);
	font-size: var(--pp-fs-2xs, 11px);
	font-weight: 850;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.pp-raq-hero__form-head h2 {
	margin: 0;
	color: var(--pp-dark);
	font-size: var(--pp-fs-4xl, 22px);
	font-weight: 850;
	letter-spacing: -.02em;
	line-height: 1.2;
}
.pp-raq-hero__form-head span {
	display: block;
	margin-top: 7px;
	color: var(--pp-quote-muted);
	font-size: var(--pp-fs-sm, 13px);
	line-height: 1.5;
}

/* --- Статус запиту (з листа) ------------------------------------------- */

.pp-raq-status { padding: 34px 0 0; }

.pp-raq-alert {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid #fdba74;
	border-left: 4px solid var(--pp-orange);
	border-radius: var(--pp-radius-lg);
	background: var(--pp-orange-light);
	box-shadow: var(--pp-shadow-float);
}
.pp-raq-alert__icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--pp-orange); color: #fff; }
.pp-raq-alert__icon svg { width: 22px; height: 22px; }
.pp-raq-alert__text { flex: 1; min-width: 0; }
.pp-raq-alert__text p { margin: 0; color: var(--pp-dark); font-size: var(--pp-fs-lg, 15px); font-weight: 700; }
.pp-raq-alert__hint { margin-top: 5px; color: var(--pp-text-muted); font-size: var(--pp-fs-sm, 13px); font-weight: 500; }
.pp-raq-alert__cta { flex: 0 0 auto; }

.pp-raq-confirm {
	margin-top: 18px;
	padding: 26px;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	background: #fff;
	box-shadow: var(--pp-shadow-float);
}
.pp-raq-confirm__title { margin: 0; color: var(--pp-dark); font-size: var(--pp-fs-4xl, 22px); font-weight: 850; letter-spacing: -.02em; }
.pp-raq-confirm__lead { margin: 8px 0 18px; color: var(--pp-text-muted); font-size: var(--pp-fs-md, 14px); }
.pp-raq-confirm__field { margin: 0 0 16px; }
.pp-raq-confirm__field label { display: block; margin-bottom: 7px; color: var(--pp-dark); font-size: var(--pp-fs-sm, 13px); font-weight: 700; }
.pp-raq-confirm__field textarea {
	width: 100%;
	min-height: 96px;
	padding: 12px 14px;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-control-radius, 10px);
	background: var(--pp-bg, #f5f5f6);
	color: var(--pp-dark);
	font: inherit;
	font-size: var(--pp-fs-md, 14px);
	resize: vertical;
}
.pp-raq-confirm__field textarea:focus {
	border-color: var(--pp-orange);
	background: #fff;
	box-shadow: var(--pp-ui-focus, 0 0 0 3px rgba(249, 115, 22, .14));
	outline: none;
}
.pp-raq-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Кроки ------------------------------------------------------------- */

/* --- Generic quote without a product -------------------------------------- */

.pp-raq-generic-form__fields::after { display: table; clear: both; content: ""; }
.pp-raq-generic-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.pp-raq-generic-form__actions {
	display: grid;
	margin-top: 4px;
	text-align: center;
}
.pp-raq .pp-raq-generic-form__submit { width: 100%; border: 0; }
.pp-raq .pp-raq-generic-form__submit:disabled { opacity: .6; cursor: wait; transform: none; }
.pp-raq-generic-form__result {
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid;
	border-radius: var(--pp-radius);
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 650;
	line-height: 1.5;
}
.pp-raq-generic-form__result.is-success { border-color: #86efac; background: #f0fdf4; color: #166534; }
.pp-raq-generic-form__result.is-error { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }

.pp-raq-steps { padding: 56px 0 8px; }
.pp-raq-steps h2 { margin: 0 0 28px; color: var(--pp-dark); font-size: var(--pp-fs-7xl, 32px); font-weight: 850; letter-spacing: -.025em; }
.pp-raq-steps__list {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.pp-raq-steps__list li {
	position: relative;
	padding: 24px 22px;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	background: #fff;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pp-raq-steps__list li:hover { border-color: #fdba74; box-shadow: var(--pp-shadow-float); transform: translateY(-2px); }
.pp-raq-steps__num {
	display: grid;
	width: 36px;
	height: 36px;
	margin-bottom: 14px;
	place-items: center;
	border-radius: 50%;
	background: var(--pp-orange-light);
	color: var(--pp-orange);
	font-size: var(--pp-fs-lg, 15px);
	font-weight: 850;
}
.pp-raq-steps__list h3 { margin: 0 0 7px; color: var(--pp-dark); font-size: var(--pp-fs-xl, 16px); font-weight: 800; }
.pp-raq-steps__list p { margin: 0; color: var(--pp-text-muted); font-size: var(--pp-fs-md, 14px); line-height: 1.6; }

/* --- Товари на запит --------------------------------------------------- */

.pp-raq-products { padding: 56px 0 64px; }
.pp-raq-products__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.pp-raq-products__head h2 { margin: 0; color: var(--pp-dark); font-size: var(--pp-fs-7xl, 32px); font-weight: 850; letter-spacing: -.025em; }
.pp-raq-products__head > div > p { max-width: 640px; margin: 9px 0 0; color: var(--pp-text-muted); font-size: var(--pp-fs-md, 14px); }
.pp-raq-products__all { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--pp-orange); font-weight: 750; text-decoration: none; }
.pp-raq-products__all svg { width: 1.1em; height: 1.1em; }
.pp-raq-products__all:hover { color: var(--pp-orange-hover); }

.pp-raq-products__grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pp-raq-card {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	background: var(--pp-product-card-bg);
	color: inherit;
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pp-raq-card:hover { border-color: #fdba74; box-shadow: var(--pp-shadow-float); transform: translateY(-2px); }
.pp-raq-card__visual { display: grid; aspect-ratio: 4 / 3; place-items: center; background: var(--pp-product-card-media-bg); }
.pp-raq-card__visual img { width: 100%; height: 100%; object-fit: contain; }
.pp-raq-card__ph { width: 46px; height: 46px; color: var(--pp-text-muted); }
.pp-raq-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.pp-raq-card__cat { margin: 0; color: var(--pp-orange); font-size: var(--pp-fs-2xs, 11px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pp-raq-card__body h3 { margin: 0; color: var(--pp-dark); font-size: var(--pp-fs-xl, 16px); font-weight: 800; line-height: 1.3; }
.pp-raq-card__action { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px; color: var(--pp-orange); font-size: var(--pp-fs-sm, 13px); font-weight: 750; }
.pp-raq-card__action svg { width: 1.1em; height: 1.1em; }

.pp-raq-empty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px;
	border: 1px dashed var(--pp-border);
	border-radius: var(--pp-radius-lg);
	background: #fff;
}
.pp-raq-empty p { margin: 0; color: var(--pp-text-muted); font-size: var(--pp-fs-lg, 15px); }

/* --- Підтримка --------------------------------------------------------- */

.pp-raq-help { padding: 0 0 72px; }
.pp-raq-help__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 26px;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	background: #fff;
	box-shadow: var(--pp-shadow-float);
}
.pp-raq-help__text { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pp-raq-help__ico { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--pp-orange-light); color: var(--pp-orange); }
.pp-raq-help__ico svg { width: 22px; height: 22px; }
.pp-raq-help__text p { margin: 0; color: var(--pp-text-muted); font-size: var(--pp-fs-md, 14px); }
.pp-raq-help__text strong { display: block; color: var(--pp-dark); font-size: var(--pp-fs-xl, 16px); font-weight: 800; }
.pp-raq-help__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Адаптив ----------------------------------------------------------- */

@media (max-width: 1100px) {
	.pp-raq-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.pp-raq-hero__copy { max-width: 720px; }
	.pp-raq-hero__form-card { max-width: 760px; }
	.pp-raq-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pp-raq-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.pp-raq-hero__grid { padding-block: 26px 40px; }
	.pp-raq-hero__form-card { padding: 20px 16px 18px; }
	.pp-raq-hero__form-head { margin-bottom: 18px; }
	.pp-raq-alert { flex-direction: column; align-items: flex-start; }
	.pp-raq-alert__cta { width: 100%; text-align: center; }
	.pp-raq-steps { padding-top: 44px; }
	.pp-raq-steps__list,
	.pp-raq-products__grid { grid-template-columns: 1fr; }
	.pp-raq-products__head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.pp-raq-empty,
	.pp-raq-help__inner { flex-direction: column; align-items: flex-start; }
	.pp-raq-help__actions .pp-raq-btn,
	.pp-raq-empty .pp-raq-btn { flex: 1 1 100%; }
}