/* fa-faq.css - сторінка «Поширені запитання» (faq.html), 07.10.2026.
   Підключено ПІСЛЯ inline-стилів faq.html. Відкат = прибрати <link> у faq.html. */

/* ---------- 1. Одна колонка, питання по порядку 01-16 ---------- */
.faq-grid { justify-content: center; }
.fa-faq-col { max-width: 920px; margin: 0 auto; counter-reset: faq; }
.fa-faq-col .faq-card { margin-bottom: 12px !important; }

/* ---------- 2. Картка ---------- */
.faq-card {
  padding: 0 !important;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.faq-card::before { border-radius: 16px; opacity: .45; }
.faq-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.05); }
.faq-card:hover::before { opacity: .85; }
.faq-card.active { background: rgba(255,255,255,0.055); box-shadow: 0 16px 44px rgba(98,7,188,0.22), 0 10px 30px rgba(0,0,0,0.4); }
.faq-card.active::before { opacity: 1; }
.faq-glow { right: -70px; top: -70px; }

/* ---------- 3. Рядок питання ---------- */
.faq-q {
  gap: 16px !important; padding: 16px 18px; min-height: 76px;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.faq-q:focus-visible { box-shadow: inset 0 0 0 2px rgba(250,80,10,.7); border-radius: 16px; }

/* номер - однакова плитка в кольорах сайту */
.faq-num {
  flex: 0 0 44px; width: 44px; min-width: 44px !important; height: 44px !important;
  border-radius: 12px !important; border: 0 !important;
  font-size: 15px; font-weight: 800; letter-spacing: .5px; font-variant-numeric: tabular-nums;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(250,80,10,.22), rgba(98,7,188,.22)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12) !important;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.faq-card:hover .faq-num { box-shadow: inset 0 0 0 1.5px rgba(250,80,10,.55) !important; }
.faq-card.active .faq-num {
  background: linear-gradient(135deg, #FA500A, #6207BC) !important;
  box-shadow: 0 6px 18px rgba(250,80,10,.35) !important;
}

.faq-title { flex: 1 1 auto; min-width: 0; font-size: 17px !important; line-height: 1.4; color: #fff; }

/* плюс → хрестик, малюється CSS (однаковий розмір у всіх картках) */
.faq-icon {
  position: relative; flex: 0 0 38px; width: 38px !important; height: 38px !important;
  border-radius: 50% !important; margin-left: 4px !important;
  border: 0 !important; background: rgba(255,255,255,0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transform: none !important;
  transition: background .25s ease, box-shadow .25s ease !important;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: #fff;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-card:hover .faq-icon { background: rgba(255,255,255,0.1) !important; }
.faq-card.active .faq-icon {
  background: linear-gradient(135deg, #FA500A, #6207BC) !important;
  box-shadow: 0 6px 18px rgba(98,7,188,.35);
}
.faq-card.active .faq-icon::before { transform: rotate(180deg); }
.faq-card.active .faq-icon::after { transform: rotate(180deg); }  /* «+» стає «−» */

/* ---------- 4. Відповідь: плавне розгортання на будь-яку висоту ---------- */
.faq-a {
  display: grid; grid-template-rows: 0fr;
  max-height: none !important; margin: 0 !important; opacity: 0;
  transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1), opacity .3s ease !important;
}
.faq-a > .faq-text { min-height: 0; overflow: hidden; }
.faq-card.active .faq-a { grid-template-rows: 1fr; opacity: 1; margin: 0 !important; max-height: none !important; }
.faq-text {
  position: relative;
  margin: 0 18px 0 78px !important; padding: 0 0 0 16px;
  font-size: 15.5px !important; line-height: 1.65 !important; color: rgba(255,255,255,.82) !important;
}
.faq-text::before {   /* градієнтна вертикальна риска зліва від відповіді */
  content: ""; position: absolute; left: 0; top: 2px; bottom: 20px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #FA500A, #6207BC);
}
.faq-text::after { content: ""; display: block; height: 18px; }  /* нижній відступ усередині (не стрибає при анімації) */
.faq-text a { color: #FA500A; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .faq-q { gap: 12px !important; padding: 14px 14px; min-height: 68px; }
  .faq-num { flex-basis: 38px; width: 38px; min-width: 38px !important; height: 38px !important; font-size: 14px; border-radius: 10px !important; }
  .faq-title { font-size: 15.5px !important; line-height: 1.35; }
  .faq-icon { flex-basis: 34px; width: 34px !important; height: 34px !important; }
  .faq-icon::before, .faq-icon::after { width: 12px; margin-left: -6px; }
  .faq-text { margin: 0 14px 0 14px !important; font-size: 15px !important; }
  .fa-faq-col .faq-card { margin-bottom: 10px !important; }
}

/* ---------- 5. «Залишились ще запитання?» - кнопки ---------- */
.faq-phone-btn, .faq-msg-btn, .faq-form-btn { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; }

/* телефон - градієнтна кнопка як «Записатися», без білої рамки */
.faq-phone-btn {
  justify-content: flex-start !important; gap: 14px !important;
  padding: 16px 18px !important; border-radius: 16px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #FA500A, #6207BC) !important;
  box-shadow: 0 12px 30px rgba(250,80,10,.28), 0 8px 26px rgba(98,7,188,.25);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.faq-phone-btn:hover { transform: translateY(-2px) !important; filter: brightness(1.08); box-shadow: 0 16px 38px rgba(250,80,10,.36), 0 10px 30px rgba(98,7,188,.3); background: linear-gradient(135deg, #FA500A, #6207BC) !important; }
.faq-phone-btn:active { transform: scale(.98) !important; }
.faq-phone-btn .faq-msg-icon.phone {
  background: rgba(255,255,255,.18) !important; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35);
  animation: faFaqRing 2.6s ease-in-out infinite;
}
.faq-phone-btn .faq-msg-body strong { font-size: 18px; letter-spacing: .3px; white-space: nowrap; }
.faq-phone-btn .faq-msg-body span { color: rgba(255,255,255,.8) !important; }
.faq-phone-btn::after {   /* стрілка-кружечок справа */
  content: ""; margin-left: auto; flex: 0 0 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.16) var(--fa-chev, none) center / 14px no-repeat;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3);
}
@keyframes faFaqRing { 0%,70%,100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(5deg); } }

/* месенджери - як .contact-btn (градієнтна рамка) */
.faq-msg-btn { border: 0 !important; background: rgba(255,255,255,0.03) !important; transition: transform .22s ease, background .22s ease !important; }
.faq-msg-btn::before {
  content: ""; position: absolute; inset: 0; padding: 1.2px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,90,31,.55), rgba(122,44,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .45; transition: opacity .22s ease;
}
.faq-msg-btn:hover { transform: translateY(-2px) !important; background: rgba(255,255,255,0.06) !important; }
.faq-msg-btn:hover::before { opacity: .9; }
.faq-msg-btn:active { transform: scale(.98) !important; }

/* кнопка форми - без білої рамки */
.faq-form-btn { border: 0 !important; border-radius: 14px !important; padding: 16px 28px !important; }

/* біла «стрічка»-відблиск, що пробігає по кнопках по черзі (як на головній у «Контактах») */
.faq-phone-btn > .fa-faq-shine, .faq-msg-btn > .fa-faq-shine, .faq-form-btn > .fa-faq-shine {
  position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg); pointer-events: none; z-index: 3;
  animation: faCbShine 5s ease-in-out infinite; animation-delay: var(--cb-d, 0s);
}
.faq-msg-btn > .fa-faq-shine { background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); }
@media (hover: hover) {
  .faq-phone-btn:hover > .fa-faq-shine, .faq-msg-btn:hover > .fa-faq-shine, .faq-form-btn:hover > .fa-faq-shine { animation: faCbShineHover .6s ease forwards; }
}
@keyframes faCbShine { 0% { left: -75%; } 14% { left: 130%; } 100% { left: 130%; } }
@keyframes faCbShineHover { from { left: -75%; } to { left: 130%; } }

.faq-divider { margin: 4px 0 22px !important; font-size: 13px; color: rgba(255,255,255,.45) !important; }
.faq-divider::before, .faq-divider::after { width: 18% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18)) !important; }
.faq-divider::after { background: linear-gradient(270deg, transparent, rgba(255,255,255,.18)) !important; }

@media (max-width: 767px) {
  .faq-phone-btn .faq-msg-body strong { font-size: 17px; }
  .faq-contact-card { padding: 24px 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-faq-shine, .faq-phone-btn .faq-msg-icon.phone { animation: none !important; display: none; }
  .faq-a { transition: none !important; }
}

/* розділювач «або якщо не хочете телефонувати» - лінії не налазять на текст */
.faq-divider { display: flex; align-items: center; gap: 12px; }
.faq-divider::before, .faq-divider::after { position: static !important; flex: 1 1 0; width: auto !important; height: 1px; }

/* ---------- 6. Колонки (07.10, v=3): ліворуч - форма «Напишіть нам», праворуч - телефон над месенджерами ---------- */
.faq-contact-grid { align-items: stretch !important; }
.faq-contact-card { display: flex; flex-direction: column; }
.fa-faq-right .faq-phone-block { margin-bottom: 0 !important; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.fa-faq-right .faq-phone-block + .faq-card-title { margin-top: 22px; }
.fa-faq-left .faq-form-group { flex: 1 1 auto; }
.fa-faq-left .faq-form-group textarea { flex: 1 1 auto; min-height: 120px; }
@media (max-width: 767px) {
  .fa-faq-right { order: -1; }   /* на телефоні дзвінок - першим, як найшвидший спосіб */
}

/* заголовок «Поширені запитання» на телефоні - вміщується без розриву слова (split-text ріже по літерах) */
@media (max-width: 767px) { .breadcumb-page .page-title { font-size: 30px !important; } }
@media (max-width: 359px) { .breadcumb-page .page-title { font-size: 26px !important; } }