/* ==================================================================
   Kelpie_v2 — Частые вопросы (FAQ-аккордеон), фронтенд
   «Закрытые» стили: блок изолирован от глобальных стилей сайта и темы.
   База зафиксирована через !important + сброс наследования, поэтому
   чистка/перетряска глобального CSS не должна ломать вид блока.
   Все правила скоупированы внутри .kbv2-faq.

   Брейкпоинты адаптива (см. секции @media ниже):
     ≤820px — заголовок мельче (31px → 26px).
     ≤768px — внутренний отступ блока 56px; шапка в колонку; кнопка слева;
              сетка вопроса 50px → 44px, иконка мельче, отступ ответа без
              левого «провала» под иконку.
     ≤480px — паддинги блока ужимаются, заголовок 22px.
     ≤420px — финальный проход против горизонтального скролла на 320/360/420:
              шрифты ещё мельче, паддинги минимальны, иконка 38px,
              перенос длинных слов; ничего фиксированного шире вьюпорта.
   ================================================================== */

/* ── Защитный сброс ───────────────────────────────────────────── */

.kbv2-faq,
.kbv2-faq *,
.kbv2-faq *::before,
.kbv2-faq *::after {
	box-sizing: border-box !important;
}

/* ── typography firewall: вернуть наследование голым элементам, чтобы темовые `p{font-size}` / `h*{}` не продавливали блок; классовые правила ниже всё равно выигрывают ── */
.kbv2-faq :where(p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,figure,figcaption,small,strong,em,b,i,span,a,button,input,label) { font-size: inherit; line-height: inherit; font-family: inherit; }


.kbv2-faq {
	--faq-ink:#16243B;
	--faq-ink-soft:#34425C;
	--faq-mute:#727C8C;
	--faq-paper:#FFFFFF;
	--faq-line:#E5E9F1;
	--faq-soft:#F4F7FB;
	--faq-orange:#FF6B1A;
	--faq-orange-deep:#E85B0E;
	--faq-blue:#0088C4;
	--faq-blue-deep:#006F9F;
	--faq-grid:#D9E4F2;

	display:block !important;
	max-width:1200px !important;
	margin:0 auto 88px !important;
	padding:0 20px !important;
	font-family:'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size:16px !important;
	line-height:1.5 !important;
	text-align:left !important;
	color:var(--faq-ink) !important;
	background:none !important;
}

/* ── Карточка-обёртка с сеткой-подложкой ──────────────────────── */
.kbv2-faq__block{
	position:relative !important;
	overflow:hidden !important;
	background:var(--faq-paper) !important;
	border:1px solid var(--faq-line) !important;
	border-radius:28px !important;
	padding:30px 30px 34px !important;
	box-shadow:0 1px 0 rgba(22,36,59,.03), 0 26px 52px -34px rgba(22,36,59,.22) !important;
}
.kbv2-faq__block::before{
	content:"" !important;
	position:absolute !important;
	inset:0 !important;
	pointer-events:none !important;
	z-index:0 !important;
	background-image:linear-gradient(var(--faq-grid) 1px,transparent 1px),linear-gradient(90deg,var(--faq-grid) 1px,transparent 1px) !important;
	background-size:32px 32px !important;
	opacity:.5 !important;
	-webkit-mask-image:radial-gradient(120% 130% at 88% 0%,#000 22%,transparent 68%) !important;
	        mask-image:radial-gradient(120% 130% at 88% 0%,#000 22%,transparent 68%) !important;
}

/* ── Шапка ─────────────────────────────────────────────────────── */
.kbv2-faq__top{
	position:relative !important;
	z-index:1 !important;
	display:flex !important;
	align-items:flex-start !important;
	justify-content:space-between !important;
	gap:24px !important;
	flex-wrap:wrap !important;
	margin:0 0 26px !important;
}
.kbv2-faq__head-wrap{ min-width:0 !important; }
.kbv2-faq__eyebrow{
	margin:0 0 12px !important;
	font-family:'Manrope', system-ui, sans-serif !important;
	font-weight:700 !important;
	font-size:12px !important;
	letter-spacing:2px !important;
	color:var(--faq-mute) !important;
	text-transform:uppercase !important;
}
.kbv2-faq__head{
	margin:0 !important;
	padding:0 !important;
	font-family:'Manrope', system-ui, sans-serif !important;
	font-weight:800 !important;
	font-size:31px !important;
	line-height:1.15 !important;
	letter-spacing:-.3px !important;
	color:var(--faq-ink) !important;
	text-wrap:balance;
	max-width:820px !important;
}
.kbv2-faq__head strong{ color:var(--faq-blue) !important; font-weight:800 !important; }

.kbv2-faq__ask{
	display:inline-flex !important;
	align-items:center !important;
	gap:9px !important;
	text-decoration:none !important;
	font-family:'Manrope', system-ui, sans-serif !important;
	font-weight:700 !important;
	font-size:13.5px !important;
	color:#fff !important;
	padding:13px 22px !important;
	border-radius:999px !important;
	background:var(--faq-blue) !important;
	border:1px solid var(--faq-blue) !important;
	box-shadow:0 12px 22px -12px rgba(0,136,196,.7) !important;
	transition:background .18s, border-color .18s !important;
	white-space:nowrap !important;
	flex:0 0 auto !important;
}
.kbv2-faq__ask:hover,
.kbv2-faq__ask:focus{ background:var(--faq-blue-deep) !important; border-color:var(--faq-blue-deep) !important; color:#fff !important; }
.kbv2-faq__ask-arrow{
	width:1em !important; height:1em !important; flex:0 0 auto !important;
	transition:transform .18s !important;
}
.kbv2-faq__ask:hover .kbv2-faq__ask-arrow{ transform:translateX(3px) !important; }

/* ── Список вопросов ──────────────────────────────────────────── */
.kbv2-faq__qa{
	position:relative !important;
	z-index:1 !important;
	display:grid !important;
	gap:4px !important;
}
.kbv2-faq__q{
	all:unset;
	box-sizing:border-box !important;
	display:grid !important;
	grid-template-columns:50px 1fr !important;
	gap:18px !important;
	align-items:center !important;
	width:100% !important;
	cursor:pointer !important;
	text-align:left !important;
	padding:13px 8px !important;
	border-radius:14px !important;
	transition:background .18s !important;
}
.kbv2-faq__q:hover{ background:var(--faq-soft) !important; }
.kbv2-faq__q:focus-visible{ outline:3px solid var(--faq-blue) !important; outline-offset:2px !important; }

/* Иконка-маркер «плюс → минус» (это toggle-маркер, не ASCII-стрелка) */
.kbv2-faq__ic{
	width:50px !important; height:50px !important; border-radius:50% !important;
	flex:0 0 auto !important; position:relative !important;
	background:var(--faq-blue) !important;
	box-shadow:0 12px 22px -10px rgba(0,136,196,.7) !important;
	transition:background .22s, transform .22s, box-shadow .22s !important;
}
.kbv2-faq__ic::before,
.kbv2-faq__ic::after{
	content:"" !important; position:absolute !important; top:50% !important; left:50% !important;
	background:#fff !important; border-radius:2px !important;
}
.kbv2-faq__ic::before{ width:17px !important; height:2.6px !important; transform:translate(-50%,-50%) !important; }
.kbv2-faq__ic::after{ width:2.6px !important; height:17px !important; transform:translate(-50%,-50%) !important; transition:transform .26s, opacity .2s !important; }

.kbv2-faq__qt{
	font-family:'Manrope', system-ui, sans-serif !important;
	font-weight:700 !important;
	font-size:17px !important;
	line-height:1.32 !important;
	color:var(--faq-ink) !important;
	transition:color .18s !important;
	min-width:0 !important;
}

/* Раскрытие ответа через grid-template-rows */
.kbv2-faq__a{
	display:grid !important;
	grid-template-rows:0fr !important;
	transition:grid-template-rows .3s ease !important;
}
.kbv2-faq__row[aria-expanded="true"] .kbv2-faq__a{ grid-template-rows:1fr !important; }
.kbv2-faq__a > div{ overflow:hidden !important; min-height:0 !important; }
.kbv2-faq__at{
	font-family:'Manrope', system-ui, sans-serif !important;
	font-size:15px !important;
	line-height:1.62 !important;
	color:var(--faq-ink-soft) !important;
	padding:2px 8px 18px 76px !important;
	max-width:860px !important;
}
.kbv2-faq__at b,
.kbv2-faq__at strong{ color:var(--faq-ink) !important; font-weight:700 !important; }
.kbv2-faq__at a{ color:var(--faq-blue) !important; text-decoration:underline !important; }
.kbv2-faq__at p{ margin:0 0 8px !important; }
.kbv2-faq__at > *:last-child{ margin-bottom:0 !important; }

/* Состояние «раскрыто»: иконка темнеет, «плюс» превращается в «минус» */
.kbv2-faq__row[aria-expanded="true"] .kbv2-faq__ic{ background:var(--faq-blue-deep) !important; }
.kbv2-faq__row[aria-expanded="true"] .kbv2-faq__ic::after{ transform:translate(-50%,-50%) scaleY(0) !important; opacity:0 !important; }

/* Ховер по строке — «оранжевый» акцент (как .qa1.orange в макете) */
.kbv2-faq__q:hover .kbv2-faq__ic{ background:var(--faq-orange) !important; transform:scale(1.07) !important; box-shadow:0 16px 26px -10px rgba(255,107,26,.7) !important; }
.kbv2-faq__q:hover .kbv2-faq__qt{ color:var(--faq-orange-deep) !important; }

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width:820px){
	.kbv2-faq__head{ font-size:26px !important; }
}
@media (max-width:768px){
	.kbv2-faq{ margin:0 auto 56px !important; }
	.kbv2-faq__block{ border-radius:22px !important; padding:22px 18px 26px !important; }
	.kbv2-faq__top{ flex-direction:column !important; align-items:stretch !important; }
	.kbv2-faq__head{ font-size:22px !important; max-width:none !important; }
	.kbv2-faq__ask{ align-self:flex-start !important; }
	.kbv2-faq__q{ grid-template-columns:44px 1fr !important; gap:14px !important; }
	.kbv2-faq__ic{ width:44px !important; height:44px !important; }
	.kbv2-faq__qt{ font-size:15.5px !important; }
	.kbv2-faq__at{ padding:0 4px 18px 0 !important; }
}
@media (max-width:480px){
	.kbv2-faq__block{ padding:18px 14px 22px !important; }
	.kbv2-faq__head{ font-size:22px !important; }
}
/* Финальный проход против горизонтального скролла на 320/360/420 */
@media (max-width:420px){
	.kbv2-faq{ padding:0 12px !important; }
	.kbv2-faq__block{ border-radius:18px !important; padding:16px 12px 20px !important; }
	.kbv2-faq__head{ font-size:20px !important; }
	.kbv2-faq__eyebrow{ font-size:11px !important; letter-spacing:1.5px !important; }
	.kbv2-faq__ask{ width:100% !important; justify-content:center !important; white-space:normal !important; padding:12px 16px !important; }
	.kbv2-faq__q{ grid-template-columns:38px 1fr !important; gap:12px !important; padding:11px 4px !important; }
	.kbv2-faq__ic{ width:38px !important; height:38px !important; }
	.kbv2-faq__ic::before{ width:14px !important; }
	.kbv2-faq__ic::after{ height:14px !important; }
	.kbv2-faq__qt{ font-size:14.5px !important; }
	.kbv2-faq__at{ font-size:14px !important; padding:0 2px 16px 0 !important; overflow-wrap:anywhere !important; }
}


/* === фронт: каркас-карточка плоский — без рамки, сетки-фона, тени (как в макете на странице) === */
.kbv2-faq__block { background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; overflow:visible !important; }
.kbv2-faq__block::before { display:none !important; }


/* === опциональная рамка с сеткой (тумблер в админке, по умолчанию выкл) === */
.kbv2-faq.is-framed { background:#fff !important; border:1px solid #E3E9F2 !important; border-radius:24px !important; padding:32px 34px !important; box-shadow:0 1px 0 rgba(22,36,59,.03), 0 26px 52px -34px rgba(22,36,59,.22) !important; overflow:hidden !important; position:relative !important; }
.kbv2-faq.is-framed > * { position:relative !important; z-index:1 !important; }
.kbv2-faq.is-framed::before { content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; z-index:0 !important; border-radius:24px !important; background-image:linear-gradient(#D9E4F2 1px,transparent 1px),linear-gradient(90deg,#D9E4F2 1px,transparent 1px) !important; background-size:34px 34px !important; opacity:.55 !important; -webkit-mask-image:radial-gradient(120% 130% at 92% 0%,#000 22%,transparent 66%) !important; mask-image:radial-gradient(120% 130% at 92% 0%,#000 22%,transparent 66%) !important; }
@media (max-width:768px){ .kbv2-faq.is-framed { padding:22px 18px !important; } }