/**
 * Nik Quick Order — frontend styles.
 * Colours and radius come from CSS variables set inline from the settings.
 */

/*
 * Вигляд кнопки. Кольори, розмір шрифту й поведінка при наведенні приходять
 * змінними --nqo-*, які плагін друкує окремо для каталогу і для сторінки
 * товару. Незаповнене поле змінної не створює — працює друге значення в var(),
 * тобто загальні налаштування (акцентний колір, стиль, розмір).
 */
.nqo-btn {
	--_accent: var(--nqo-accent, #2563eb);
	--_accent-dark: var(--nqo-accent-dark, #1e51c9);
	--_radius: var(--nqo-radius, 8px);
	--_bg: var(--nqo-bg, var(--_accent));
	--_text: var(--nqo-text, #fff);
	--_border: var(--nqo-border, var(--_bg));
	--_bg-h: var(--nqo-bg-h, var(--_accent-dark));
	--_text-h: var(--nqo-text-h, var(--_text));
	--_border-h: var(--nqo-border-h, var(--_bg-h));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	margin: var(--nqo-mt, 10px) var(--nqo-mr, 0px) var(--nqo-mb, 0px) var(--nqo-ml, 0px);
	padding: var(--nqo-pad-y, 11px) var(--nqo-pad-x, 20px);
	border: 2px solid var(--_border);
	border-radius: var(--_radius);
	background: var(--_bg);
	color: var(--_text);
	font-size: var(--nqo-fs, 15px);
	font-weight: var(--nqo-weight, 600);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
	/* Картка товару в сучасних темах — flex або grid, і будь-яка дитина в ній
	   розтягується на всю ширину. Кнопка від цього ставала смугою на всю
	   картку, хоч ширина за вмістом і не була увімкнена: тут вирішує не
	   width, а вирівнювання елемента в контейнері. */
	align-self: flex-start;
	justify-self: start;
}

.nqo-btn:hover,
.nqo-btn:focus {
	background: var(--_bg-h);
	border-color: var(--_border-h);
	color: var(--_text-h);
}

.nqo-btn:active { transform: translateY(1px); }

.nqo-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; }

/* Ефекти наведення: підняття і тінь додаються поверх зміни кольору. */
.nqo-hover-lift:hover,
.nqo-hover-lift:focus { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.nqo-hover-invert:hover,
.nqo-hover-invert:focus {
	background: var(--nqo-bg-h, var(--_text));
	color: var(--nqo-text-h, var(--_bg));
	border-color: var(--nqo-border-h, var(--_bg));
}
.nqo-hover-none:hover,
.nqo-hover-none:focus {
	background: var(--_bg);
	border-color: var(--_border);
	color: var(--_text);
	box-shadow: none;
	transform: none;
}

/* Контурний вигляд: фон прозорий, поки колір фону не заданий явно. */
.nqo-btn--outline {
	background: var(--nqo-bg, transparent);
	color: var(--nqo-text, var(--_accent));
}
.nqo-btn--outline:hover,
.nqo-btn--outline:focus {
	background: var(--nqo-bg-h, var(--_accent));
	color: var(--nqo-text-h, #fff);
}

/* Розміри задають поля; розмір шрифту й відступи перебиває власна настройка. */
.nqo-btn--small { padding: var(--nqo-pad-y, 8px) var(--nqo-pad-x, 14px); font-size: var(--nqo-fs, 13px); }
.nqo-btn--large { padding: var(--nqo-pad-y, 14px) var(--nqo-pad-x, 26px); font-size: var(--nqo-fs, 17px); }
.nqo-btn--full { display: flex; width: 100%; align-self: stretch; justify-self: stretch; }
.nqo-btn--archive { margin-top: var(--nqo-mt, 6px); }
.nqo-btn__icon { flex: 0 0 auto; }

/* «На своїй рядку»: обгортка займає весь рядок картки товару — у flex-формі
   теми через flex-basis, у звичайній через ширину блоку — і переносить кнопку
   під ряд додавання в кошик. Сама кнопка всередині зберігає свою ширину. */
.nqo-single-line { flex-basis: 100%; width: 100%; margin: 0; }

/* ---------------------------------------------------------------- Modal */

.nqo-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.nqo-modal[hidden] { display: none; }

.nqo-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .55);
	backdrop-filter: blur(2px);
	animation: nqo-fade .18s ease;
}

.nqo-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	box-sizing: border-box;
	padding: 26px 26px 24px;
	border-radius: 16px;
	background: #fff;
	color: #1e293b;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
	animation: nqo-pop .2s ease;
	font-size: 15px;
	line-height: 1.45;
}

@keyframes nqo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nqo-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.nqo-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #64748b;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.nqo-modal__close:hover { background: #f1f5f9; color: #0f172a; }

.nqo-modal__title {
	margin: 0 30px 16px 0;
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
}

/* Product summary */
.nqo-product {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px;
	margin-bottom: 18px;
	border-radius: 12px;
	background: #f8fafc;
}
.nqo-product__img {
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
}
.nqo-product__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nqo-product__name { font-weight: 600; color: #0f172a; }
.nqo-product__price { color: var(--nqo-accent, #2563eb); font-weight: 700; }

/* Fields */
.nqo-field { margin-bottom: 13px; }
.nqo-label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
}
.nqo-req { color: #ef4444; }

.nqo-input,
.nqo-textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	color: #0f172a;
	font-size: 15px;
	line-height: 1.3;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
	/* Картка товару в сучасних темах — flex або grid, і будь-яка дитина в ній
	   розтягується на всю ширину. Кнопка від цього ставала смугою на всю
	   картку, хоч ширина за вмістом і не була увімкнена: тут вирішує не
	   width, а вирівнювання елемента в контейнері. */
	align-self: flex-start;
	justify-self: start;
}
.nqo-input:focus,
.nqo-textarea:focus {
	outline: none;
	border-color: var(--nqo-accent, #2563eb);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.nqo-textarea { resize: vertical; min-height: 70px; }

.nqo-input.nqo-invalid,
.nqo-textarea.nqo-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }

/* Why a field was refused, next to the field itself. */
.nqo-field-error {
	display: block;
	margin: 5px 0 0;
	color: #dc2626;
	font-size: 13px;
	line-height: 1.4;
}

/* Quantity stepper */
.nqo-qty { display: inline-flex; align-items: stretch; border: 1.5px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.nqo-qty__btn {
	width: 40px;
	border: 0;
	background: #f8fafc;
	color: #334155;
	font-size: 18px;
	cursor: pointer;
	transition: background .15s ease;
}
.nqo-qty__btn:hover { background: #eef2f7; }
.nqo-qty__input {
	width: 56px;
	border: 0;
	border-left: 1.5px solid #e2e8f0;
	border-right: 1.5px solid #e2e8f0;
	text-align: center;
	font-size: 15px;
	background: #fff;
	color: #0f172a;
	-moz-appearance: textfield;
}
.nqo-qty__input::-webkit-outer-spin-button,
.nqo-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Groups (delivery / payment) */
.nqo-group {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1.5px solid #eef2f7;
	border-radius: 12px;
}
.nqo-group__title {
	padding: 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.nqo-group .nqo-field:last-child { margin-bottom: 0; }

.nqo-radios { display: flex; flex-direction: column; gap: 8px; }
.nqo-radio {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 11px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.nqo-radio:hover { border-color: #cbd5e1; }
.nqo-radio input { accent-color: var(--nqo-accent, #2563eb); }
.nqo-radio:has(input:checked) { border-color: var(--nqo-accent, #2563eb); background: rgba(37, 99, 235, .05); }

.nqo-hint { margin: 4px 0 0; font-size: 13px; color: #94a3b8; }

/* Nik Shipping UA destination cascade */
.nqo-ship { display: flex; flex-direction: column; gap: 13px; margin-top: 3px; }
.nqo-ship-row { display: flex; gap: 10px; }
.nqo-ship-row .nqo-field { flex: 1; margin: 0; }
.nqo-ship .nqo-field { margin: 0; }
/* The flex containers set display, which would otherwise beat [hidden]. */
.nqo-ship[hidden],
.nqo-ship-row[hidden] { display: none; }

.nqo-ac { position: relative; }
.nqo-ac-list {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	top: calc(100% + 3px);
	max-height: 220px;
	overflow-y: auto;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(15, 23, 42, .14);
}
.nqo-ac-item {
	padding: 9px 12px;
	font-size: 14px;
	color: #0f172a;
	cursor: pointer;
	border-bottom: 1px solid #f1f5f9;
}
.nqo-ac-item:last-child { border-bottom: 0; }
.nqo-ac-item:hover,
.nqo-ac-item.is-active { background: rgba(37, 99, 235, .08); }
.nqo-ac-note { padding: 9px 12px; font-size: 13px; color: #94a3b8; }
.nqo-ac-note--error { color: #b91c1c; }

/* Total line */
.nqo-total {
	margin: 6px 0 14px;
	padding: 10px 13px;
	border-radius: 10px;
	background: #f1f5f9;
	font-weight: 700;
	color: #0f172a;
	display: flex;
	justify-content: space-between;
}

/* Messages */
.nqo-messages {
	margin-bottom: 14px;
	padding: 10px 13px;
	border-radius: 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-size: 14px;
}

/* Submit */
.nqo-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 4px;
	padding: 14px;
	border: 0;
	border-radius: 12px;
	background: var(--nqo-accent, #2563eb);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}
.nqo-submit:hover { background: var(--nqo-accent-dark, #1e51c9); }
.nqo-submit:disabled { opacity: .65; cursor: default; }

.nqo-spinner {
	width: 17px;
	height: 17px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: nqo-spin .7s linear infinite;
}
@keyframes nqo-spin { to { transform: rotate(360deg); } }

/* Honeypot — visually gone, still in the DOM for bots */
.nqo-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Success */
.nqo-success { text-align: center; padding: 22px 8px 8px; }
.nqo-success__icon {
	width: 62px;
	height: 62px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #dcfce7;
	color: #16a34a;
	font-size: 34px;
	line-height: 62px;
}
.nqo-success__text { font-size: 16px; color: #0f172a; margin: 0; }

body.nqo-open { overflow: hidden; }

/* ------------------------------------------------------------ Dark theme */
@media (prefers-color-scheme: dark) {
	.nqo-modal__dialog { background: #1e293b; color: #e2e8f0; }
	.nqo-modal__title { color: #f8fafc; }
	.nqo-modal__close { color: #94a3b8; }
	.nqo-modal__close:hover { background: #334155; color: #f8fafc; }
	.nqo-product { background: #0f172a; }
	.nqo-product__name { color: #f8fafc; }
	.nqo-label { color: #cbd5e1; }
	.nqo-input, .nqo-textarea { background: #0f172a; border-color: #334155; color: #f8fafc; }
	.nqo-qty { border-color: #334155; }
	.nqo-qty__btn { background: #0f172a; color: #cbd5e1; }
	.nqo-qty__btn:hover { background: #1e293b; }
	.nqo-qty__input { background: #0f172a; color: #f8fafc; border-color: #334155; }
	.nqo-group { border-color: #334155; }
	.nqo-group__title { color: #f8fafc; }
	.nqo-radio { border-color: #334155; }
	.nqo-total { background: #0f172a; color: #f8fafc; }
	.nqo-hint { color: #64748b; }
	.nqo-success__text { color: #f8fafc; }
	.nqo-ac-list { background: #1e293b; border-color: #334155; }
	.nqo-ac-item { color: #f8fafc; border-bottom-color: #0f172a; }
	.nqo-ac-item:hover, .nqo-ac-item.is-active { background: rgba(37, 99, 235, .22); }
}

@media (max-width: 480px) {
	.nqo-modal { padding: 0; align-items: flex-end; }
	.nqo-modal__dialog {
		max-width: 100%;
		max-height: 92vh;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		animation: nqo-slide .22s ease;
	}
	@keyframes nqo-slide { from { transform: translateY(100%); } to { transform: none; } }
}