/**
 * Request a Quote — попап запиту ціни під дизайн PIUROPRINT.
 *
 * Плагінна розмітка попапа неперекривна (include_once замість locate_template),
 * тож перебиваємо її стилями. Специфічність місцями завищена свідомо: базовий
 * quote.css плагіна б'є по тих самих класах і вантажиться після теми.
 */

#nbdq-form-popup {
	--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);
	font-family: var(--pp-font);
}

#nbdq-form-popup .overlay-popup {
	background: rgba(15, 23, 42, .72);
	backdrop-filter: blur(5px);
}

#nbdq-form-popup .main-popup {
	max-width: 560px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--pp-card-radius, 16px);
	background: var(--pp-ui-surface, #fff);
	box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
}

/* --- Шапка ------------------------------------------------------------- */

#nbdq-form-popup .nbdq-popup-head {
	/* Праворуч лишаємо місце під хрестик — інакше підзаголовок лізе під нього. */
	padding: 18px 52px 18px 20px;
	border-bottom: 1px solid var(--pp-quote-line);
	background: linear-gradient(180deg, var(--pp-quote-orange-soft), #fff);
}

#nbdq-form-popup .nbdq-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	color: var(--pp-quote-ink);
}

.pp-quote-head__icon {
	display: inline-grid;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 11px;
	background: var(--pp-quote-orange);
	color: #fff;
	place-items: center;
}

.pp-quote-head__icon svg { width: 21px; height: 21px; }

.pp-quote-head__text { display: grid; gap: 2px; min-width: 0; }
.pp-quote-head__text b { font-size: var(--pp-fs-2xl, 18px); font-weight: 800; line-height: 1.2; }
.pp-quote-head__text i {
	color: var(--pp-quote-muted);
	font-size: var(--pp-fs-xs, 12px);
	font-style: normal;
	font-weight: 500;
}

#nbdq-form-popup .close-popup { top: 20px; right: 18px; color: var(--pp-quote-muted); }
#nbdq-form-popup .close-popup:hover { color: var(--pp-quote-ink); }

#nbdq-form-popup .nbdq-popup-body { padding: 20px; }

/* --- Поля -------------------------------------------------------------- */

.pp-quote-form .form-row { margin: 0 0 14px; padding: 0; }
.pp-quote-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--pp-quote-ink);
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 700;
}
.pp-quote-form label .optional { color: var(--pp-quote-muted); font-weight: 500; }
.pp-quote-form label .required,
.pp-quote-form label abbr.required { border: 0; color: var(--pp-quote-orange); text-decoration: none; }

.pp-quote-input { position: relative; display: block; }

.pp-quote-input__icon {
	position: absolute;
	top: 14px;
	left: 13px;
	display: inline-grid;
	color: var(--pp-quote-muted);
	place-items: center;
	pointer-events: none;
}
.pp-quote-input__icon svg { width: 18px; height: 18px; }

.pp-quote-form .pp-quote-input .input-text {
	width: 100%;
	min-height: var(--pp-control-height, 48px);
	padding: 12px 14px 12px 40px !important;
	border: 1px solid var(--pp-quote-line) !important;
	border-radius: var(--pp-control-radius, 10px) !important;
	/* Сірий спокій полів — той самий, що в кошику й чекауті теми (--pp-bg),
	   щоб форма запиту не виглядала чужою. Білим підсвічуємо активне поле. */
	background: var(--pp-bg, #f5f5f6) !important;
	color: var(--pp-quote-ink);
	font-family: inherit;
	font-size: var(--pp-fs-md, 14px);
	transition: border-color var(--pp-ui-transition, .18s ease), box-shadow var(--pp-ui-transition, .18s ease);
}
.pp-quote-form .pp-quote-input textarea.input-text { min-height: 104px; padding-top: 13px !important; resize: vertical; }
.pp-quote-form .pp-quote-input .input-text:focus {
	border-color: var(--pp-quote-orange) !important;
	background: var(--pp-ui-surface, #fff) !important;
	box-shadow: var(--pp-ui-focus, 0 0 0 3px rgba(249, 115, 22, .14));
	outline: none;
}
.pp-quote-form .pp-quote-input .input-text:focus + .pp-quote-input__icon,
.pp-quote-form .pp-quote-input:focus-within .pp-quote-input__icon { color: var(--pp-quote-orange); }

/* Дві колонки як у чекауті теми. */
.pp-quote-form .form-row-first,
.pp-quote-form .form-row-last { width: calc(50% - 6px); float: none; display: inline-block; vertical-align: top; }
.pp-quote-form .form-row-first { margin-right: 8px; }

/* --- Спосіб контакту --------------------------------------------------- */

.pp-quote-methods__label { margin-bottom: 8px; }

.pp-quote-methods__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.pp-quote-method { display: block; margin: 0; cursor: pointer; }
.pp-quote-method__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.pp-quote-method__chip {
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 8px;
	border: 1px solid var(--pp-quote-line);
	border-radius: var(--pp-control-radius, 10px);
	background: var(--pp-ui-surface, #fff);
	color: var(--pp-quote-muted);
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 700;
	text-align: center;
	transition: border-color var(--pp-ui-transition, .18s ease), background var(--pp-ui-transition, .18s ease), color var(--pp-ui-transition, .18s ease);
}
.pp-quote-method__chip svg { width: 17px; height: 17px; }

.pp-quote-method:hover .pp-quote-method__chip { border-color: var(--pp-quote-orange); color: var(--pp-quote-ink); }

.pp-quote-method__input:checked + .pp-quote-method__chip {
	border-color: var(--pp-quote-orange);
	background: var(--pp-quote-orange-soft);
	color: var(--pp-quote-orange);
	box-shadow: 0 0 0 2px rgba(249, 115, 22, .12);
}

.pp-quote-method__input:focus-visible + .pp-quote-method__chip {
	box-shadow: var(--pp-ui-focus, 0 0 0 3px rgba(249, 115, 22, .14));
}

.pp-quote-methods__hint {
	display: block;
	margin-top: 6px;
	color: var(--pp-quote-muted);
	font-size: var(--pp-fs-xs, 12px);
}

/* --- Помилки ----------------------------------------------------------- */

.pp-quote-error,
.pp-quote-form .nbdq_error {
	display: block;
	margin-top: 5px;
	color: #d92d20;
	font-size: var(--pp-fs-xs, 12px);
	font-weight: 600;
}

.pp-quote-row--invalid .input-text { border-color: #d92d20 !important; }
.pp-quote-row--invalid .pp-quote-input__icon { color: #d92d20; }
.pp-quote-row--invalid .pp-quote-method__chip { border-color: #f3b1ab; }

#nbdq-form-popup .woocommerce-error,
#nbdq-form-popup .woocommerce-message {
	margin: 0 0 14px;
	padding: 11px 13px;
	border: 1px solid #f3b1ab;
	border-radius: var(--pp-control-radius, 10px);
	background: #fef3f2;
	color: #b42318;
	font-size: var(--pp-fs-sm, 13px);
	list-style: none;
}

/* --- Кнопка ------------------------------------------------------------ */

.pp-quote-actions {
	display: grid;
	gap: 8px;
	margin: 4px 0 0;
	text-align: center;
}

#nbdq-form-popup .pp-quote-submit {
	width: 100%;
	margin-top: 4px;
}
#nbdq-form-popup .pp-quote-submit.nbdq-disabled { opacity: .55; cursor: not-allowed; }

.pp-quote-note { color: var(--pp-quote-muted); font-size: var(--pp-fs-xs, 12px); }

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

@media (max-width: 680px) {
	/* Плагін центрує попап інлайновим left, порахованим під свою фіксовану
	   ширину 525px — на телефоні це виносить картку за екран у мінус. Ширину і
	   зсув задаємо самі; !important тут єдиний спосіб перебити інлайн-стиль. */
	#nbdq-form-popup .main-popup {
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		left: 12px !important;
	}
	#nbdq-form-popup .nbdq-popup-body { padding: 16px; }
	.pp-quote-form .form-row-first,
	.pp-quote-form .form-row-last { width: 100%; margin-right: 0; }
	.pp-quote-methods__list { grid-template-columns: 1fr; }
	.pp-quote-method__chip { justify-content: flex-start; }
}