/* ────────────────────────────────────────────────────────────────
 *  IVA Product Quiz – style.css  (FULL FILE, 18-Jul-2025)
 *  Шрифт: «Unbounded»  |  Акцент: #F5A84D
 *  Якщо Unbounded не підтягується – розкоментуйте імпорт ↓
 *  @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700&display=swap');
 * ────────────────────────────────────────────────────────────────*/

/* ---------- ЗМІННІ ---------- */
:root{
	--iva-orange: #F37D00;
	--iva-orange-dark:#e49538; 
	--iva-black:  #121212;
	--iva-grey:   #f4f4f4;
	--iva-radius: 0px;
	--iva-gap:    24px;
	--iva-font:   'Unbounded',sans-serif;
}

/* ---------- ОБГОРТКА КВІЗУ ---------- */
.iva-pq{
	max-width:760px;margin:0 auto;
	padding:0 var(--iva-gap);
	font-family:var(--iva-font);color:var(--iva-black);
	position:relative;
}
/* ⇒ розширюємо тільки секцію з товарами */
@media (min-width:992px){ .iva-pq.show-results{max-width:1200px;} }

/* ---------- LOADING SPINNER ---------- */
.iva-pq.loading::after{
	content:"";position:absolute;inset:0;
	background:rgba(255,255,255,.7);backdrop-filter:blur(2px);z-index:10;
}
.iva-pq.loading::before{
	content:"";position:absolute;top:50%;left:50%;
	width:48px;height:48px;margin:-24px 0 0 -24px;
	border:4px solid var(--iva-orange);border-right-color:transparent;
	border-radius:50%;animation:spin .8s linear infinite;z-index:11;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- СТРУКТУРА КРОКІВ ---------- */
.iva-pq-step{display:none;}
.iva-pq-step.active{display:block;}

/* ---------- ЗАГОЛОВОК ПИТАННЯ ---------- */
.iva-pq h2{
	font-size:clamp(16px,4vw,26px);
	font-weight:600;line-height:1.3;text-align:center;
	margin-bottom:32px;
}

/* текст акції під заголовком результатів */
.iva-pq-promo{
	text-align:center;
	font-size:16px;
	line-height:1.5;
	font-weight:700;
	margin:0 auto 32px;
	max-width:640px;
	padding:14px 20px;
	color:#fff;
	background:var(--iva-orange);
	border-radius:12px;
}

/* ---------- ВАРІАНТИ ВІДПОВІДІ ---------- */
.iva-pq label{
	display:flex;align-items:center;gap:14px;
	padding:12px 18px;background:var(--iva-grey);
	border-radius:var(--iva-radius);cursor:pointer;
	user-select:none;margin-bottom:14px;
	transition:background .25s,box-shadow .25s;
}
.iva-pq label:hover{background:#eaeaea;}
.iva-pq label:has(input:checked){
	background:var(--iva-orange);color:#fff;
	box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* ► кастом-radio */
.iva-pq input[type=radio]{
	appearance:none;width:20px;height:20px;
	border:2px solid var(--iva-black);border-radius:50%;
	position:relative;flex-shrink:0;
}
.iva-pq input[type=radio]::after{
	content:"";position:absolute;inset:3px;border-radius:50%;
	background:var(--iva-black);scale:0;transition:scale .2s;
}
.iva-pq input[type=radio]:checked::after{scale:1;}
.iva-pq label:has(input:checked) input[type=radio]{border-color:#fff;}
.iva-pq label:has(input:checked) input[type=radio]::after{background:#fff;}

/* ---------- КНОПКА «ПРОДОВЖИТИ / РЕЗУЛЬТАТ» ---------- */
.iva-pq-next{
	display:block;margin:32px auto 0;
	padding:16px 42px;border:none;border-radius:var(--iva-radius);
	background:var(--iva-orange)!important;color:#fff!important;
	font-family:var(--iva-font);font-weight:600;letter-spacing:.5px;
	text-transform:uppercase;cursor:pointer;transition:transform .25s;
}
.iva-pq-next:hover{transform:scale(1.05);}
.iva-pq-next:active{transform:scale(1.02);}
.iva-pq.loading .iva-pq-next{pointer-events:none;opacity:.6;transform:none;}

/* ────────────────── КАРТКИ ТОВАРУ ────────────────── */

/* контейнер */
.iva-pq-cards{
	display:flex;flex-wrap:wrap;justify-content:center;
	gap:40px 56px;              /* 40px вертикаль, 56px горизонталь */
	margin:0;padding:0;list-style:none;width:fit-content;
}

/* картка */
.iva-card{
	flex:0 0 220px;             /* БУЛО 260 → компактніше */
	text-align:left;
}

/* фіксуємо висоту зони фото, щоб усі назви починалися з однієї лінії */
.iva-card__img{
	display:flex;justify-content:center;align-items:center;
	height:180px;overflow:hidden;margin-bottom:14px;
}
.iva-card__img img{
	max-height:100%;width:auto;height:auto;
	transition:transform .25s;
}
.iva-card:hover .iva-card__img img{transform:scale(1.05);}

/* текст */
.iva-card__title{
	font-size:14px;font-weight:400;line-height:1.35;
	margin:0 0 8px;
}
.iva-card__note{
	display:block;font-size:13px;line-height:1.35;
	margin:-4px 0 8px;color:var(--iva-black);
}
.iva-card__price{
	display:block;font-size:14px;font-weight:600;color:var(--iva-orange);
	margin-bottom:12px;
}

/* кнопка */
.iva-card .iva-add-to-cart-btn,
.iva-card a.button{
	display:inline-block;width:100%;
	background:var(--iva-orange);color:#fff;
	padding:10px;border:none;
	font-family:var(--iva-font);font-weight:600;font-size:14px;
	border-radius:var(--iva-radius);
	text-align:center;transition:all .2s;
	cursor:pointer;
}
.iva-card .iva-add-to-cart-btn:hover,
.iva-card a.button:hover{
	transform:scale(1.05);
	background:var(--iva-orange-dark);
}
.iva-card .iva-add-to-cart-btn.disabled,
.iva-card a.button.disabled{
	opacity:.4;pointer-events:none;cursor:not-allowed;
}

/* стани кнопки додавання в кошик */
.iva-add-to-cart-btn.loading{
	opacity:.7;pointer-events:none;
}
.iva-add-to-cart-btn.added{
	background:#4caf50!important;
}
.iva-add-to-cart-btn .btn-loader{
	display:inline-block;
	width:16px;
	height:16px;
	border:2px solid #fff;
	border-right-color:transparent;
	border-radius:50%;
	animation:spin .6s linear infinite;
}
@keyframes spin{
	to{transform:rotate(360deg);}
}

/* ---------- МОБІЛЬНИЙ (≤767) : 2 × 2 ---------- */
@media (max-width: 767px){

	.iva-pq       { padding: 0 16px; }

	/* ► кнопка */
	.iva-card .iva-add-to-cart-btn,
	.iva-card a.button{
		display: flex;               /* центруємо flex'ом */
		justify-content: center;
		align-items:    center;
		width: 100%;
		min-height: 36px;            /* фіксуємо єдину висоту */
		background: var(--iva-orange);
		color: #fff;
		border:none;
		border-radius: var(--iva-radius);
		font-family: var(--iva-font);
		font-weight: 600;
		font-size: 10px;
		line-height: 1;              /* прибираємо зайвий вертикальний відступ від тексту */
		padding: 0;                  /* padding більше не керує висотою */
		transition: transform .2s;
		cursor:pointer;
	}
}


/* 19-Jul-2025 │ Кнопка «Хочу більший обʼєм» під результатами */
.iva-pq-more{
	width:100%;margin-top:48px;
	display:flex;justify-content:center;
}
.iva-pq-more-btn{
	display:inline-block;
	background:var(--iva-orange);
	color:#fff;
	padding:14px 38px;
	border-radius:0px;
	font-family:var(--iva-font);
	font-weight:600;
	font-size:16px;
	text-transform:uppercase;
	transition:transform .2s;
}
.iva-pq-more-btn:hover{transform:scale(1.05);color:#fff;}


/* ───────────── FINISH: однакова висота карток без fixed min-height ───────────── */

/* 1. контейнер уже перевели у grid, тож лишаємо: */
.iva-pq-cards{
    display:grid;
    gap:40px 56px;
    grid-template-columns:repeat(4, 1fr);        /* десктоп */
    justify-content:center;
}
@media (min-width:768px) and (max-width:1199px){
    .iva-pq-cards{ grid-template-columns:repeat(3, 1fr); gap:40px 38px; }
}
@media (max-width:767px){
    .iva-pq-cards{ grid-template-columns:repeat(2, 1fr); gap:24px; }
}

/* 2. Картка розтягується на всю висоту комірки */
/*    і лишається flex-колонкою, щоб кнопку можна було штовхнути вниз */
.iva-card{
    display:flex;
    flex-direction:column;
    align-self:stretch;   /* ← ключове: займати всі 100% треку */
    height:100%;
}

/* 3. Кнопка прилипне донизу картки */
.iva-card a.button,
.iva-card .iva-add-to-cart-btn{
    margin-top:auto;
}

/* ───── Менший шрифт назв товарів на мобілці та планшеті ───── */

/* планшети: 768 – 1199 px */
@media (min-width:768px) and (max-width:1199px){
	.iva-card__title{
		font-size:14px;   /* було 14px */
	}
}

/* телефони: 0 – 767 px */
@media (max-width:767px){
	.iva-card__title{
		font-size:12px;   /* ще трохи менше */
	}
}

/* ───── Менші вертикальні відступи лише на мобільних ───── */
@media (max-width: 767px){

	/* 1. відстань між рядками товарів (зверху-знизу) */
	.iva-pq-cards{
		gap: 4px 20px;   /* 12 px вертикаль  | 24 px горизонталь */
		/* можна й 8px 24px, якщо треба ще щільніше */
	}

	/* 2. відстань від фото до назви всередині картки */
	.iva-card__img{
		margin-bottom: 0px;  /* було 14 px */
	}
}

/* телефони: 0 – 767 px */
@media (max-width: 767px){
	/* ...інші мобільні правила… */

	/* менший шрифт та трохи компактніший padding для CTA-кнопки */
	.iva-pq-more-btn{
		font-size: 12px;      /* було 16px */
		padding: 10px 26px;   /* піджали відступи, щоб виглядало пропорційно */
	}
}


/* ═══════════════════════════════════════════════════════════
 *  СПОВІЩЕННЯ (додано Feb-2026)
 * ═══════════════════════════════════════════════════════════ */
.iva-notification{
	position:fixed;
	top:20px;
	right:20px;
	background:#fff;
	color:var(--iva-black);
	padding:16px 24px;
	border-radius:8px;
	box-shadow:0 4px 20px rgba(0,0,0,.15);
	z-index:9999;
	font-family:var(--iva-font);
	font-size:14px;
	font-weight:500;
	max-width:320px;
	transform:translateX(400px);
	opacity:0;
	transition:all .3s ease-out;
}
.iva-notification.show{
	transform:translateX(0);
	opacity:1;
}
.iva-notification--success{
	border-left:4px solid #4caf50;
}
.iva-notification--error{
	border-left:4px solid #f44336;
}

/* мобільна версія */
@media (max-width:767px){
	.iva-notification{
		top:10px;
		right:10px;
		left:10px;
		max-width:none;
		font-size:13px;
		padding:12px 16px;
	}
}

/* ─── Кінець файлу ─── */