html { scroll-behavior: auto !important; }

/* ─── Обгортка сторінки підтримки ─────────────────────────────────────────── */
.support-wrapper {
  padding: 0 0 40px;
  background: #fff;
}

/* ─── Змінні для лейауту ─────────────────────────────────────────────────── */
:root{
  --support-gap:   clamp(16px, 2.5vw, 32px);
  --chat-width:    clamp(315px, 29.9vw, 380px);
  --speed-mult:    1.1;                       /* +10% швидше */
  --support-shift: clamp(0px, calc(8vw * var(--speed-mult)), 140px);
  --support-bias:  -3vw;                      /* базовий зсув вправо, як було */
  --support-move:  clamp(0px, calc(var(--support-bias) + var(--support-shift)), 3000px);
}

/* ─── Дві колонки: контент + чат ────────────────────────────────────────── */
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--chat-width);
  gap: 24px;
  align-items: start;
}
.support-layout > :not(.support-chat) { min-width: 0; }

/* Праворуч — чат */
.support-chat {
  position: sticky;
  top: 100px;
  align-self: start;
  z-index: 2;
}

/* Контентна колонка */
.support-article {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
}

/* ─── Лейаут для single post з динамічним зсувом (без «вилізання») ─────── */
body.single-post #primary .support-layout {
  width: 100% !important; /* ✅ хай завжди вписується у viewport */
  max-width: 1300px;
  margin-left: clamp(-20px, calc(-1 * var(--support-move)), 40px); /* ✅ не йде у від’єм */
  
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--chat-width);
  gap: var(--support-gap);
  align-items: start;
  box-sizing: border-box;
}
body.single-post #primary .support-layout > *{ min-width: 0; }
body.single-post #primary .support-chat{ width: var(--chat-width); }

/* Вузькі екрани */
@media (max-width:1024px){
  .support-layout { grid-template-columns: 1fr; }
  .support-chat   { position: static; margin-top: 16px; }
  body.single-post #primary .support-layout{
    margin-left: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  body.single-post #primary .support-chat{ width: auto; }
}

/* Максимальна ширина контейнера (як була) */
#primary .support-layout { max-width: 1300px !important; }

/* ─── Декор/вміст (без змін) ─────────────────────────────────────────────── */
.expert-card {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.expert-card img {
  width: 60px; height: 60px; border-radius: 50%; margin-right: 15px;
}
.expert-info h3 { margin: 0; font-size: 18px; }
.expert-info p  { margin: 4px 0; font-size: 14px; color: #555; }

/* Діалог */
.conversation { font-family: Arial, sans-serif; }
.chat { align-items: flex-start; margin: 15px 0; gap: 8px; }
.chat img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; }
.message { background:#f1f1f1; padding:10px 14px; border-radius:8px; max-width:100%; }
.chat.customer .message { background:#e6f2ff; }
.chat.customer img { display:none; }
.chat.assistant .message { background:#f9f9f9; }

/* Узгодження дрібниць */
.label { font-weight: 700; font-size: 14px; margin-bottom: 4px; color:#333; }
.chat.customer { justify-content:flex-end; text-align:right; flex-direction:column; align-items:flex-end; }
.chat.customer .message { border-radius:8px 8px 0 8px; text-align:left; }
.chat.assistant { justify-content:flex-start; }
.chat.assistant img { width:32px; height:32px; border-radius:50%; margin-top:4px; }
.chat.assistant .message { border-radius:8px 8px 8px 0; }

@media (min-width: 993px) {
    .ast-separate-container #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container.ast-right-sidebar #primary {
        margin: 2em 0 !important;
        padding: 0;
    }
}

@media (min-width: 922px) {
    .ast-container {
        max-width: 1300px !important;
    }
}

.tech-header {
  display: flex;
  align-items: center; /* вирівнює по вертикалі */
  margin-bottom: 4px;  /* щоб не прилипало до message */
}

.tech-header img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.tech-label {
  font-weight: 700;
  font-size: 14px;
  color: #333;
}

/* ===== Apple-style “Discover more answers” ===== */
:root{
  --as-bg:#ffffff;
  --as-text:#1d1d1f;
  --as-subtle:#6e6e73;
  --as-border:rgba(0,0,0,.12);
  --as-divider:rgba(0,0,0,.10);
  --as-link:#0a84ff;       /* Apple blue */
  --as-link-hover:#0077ed; /* hover blue */
  --as-ring:#0a84ff;       /* focus ring */
}

.answer-shelf{
  margin:24px 0;
  padding:16px 18px;
  background:var(--as-bg);
  color:var(--as-text);
  border:1px solid var(--as-border);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 18px rgba(0,0,0,.06);
  -webkit-font-smoothing:antialiased;
}

.as-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.as-head h3{margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--as-text);}
.as-icon{width:18px; height:18px; color:var(--as-subtle); stroke-width:1.7;}
.as-list{display:flex; flex-direction:column; margin-top:6px;}

/* Пункт-лінк: блочний, без підкреслення */
.answer-shelf .as-item{
  position:relative;
  display:block;
  padding:12px 44px 12px 18px;    /* запас справа під стрілку */
  margin:0 -18px;                 /* на всю ширину боксу */
  font-size:16px; line-height:1.45;
  color:var(--as-link);
  border-radius:8px;              /* базово округлено */
  cursor:pointer;
  text-decoration:none !important;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.answer-shelf .as-item:link,
.answer-shelf .as-item:visited,
.answer-shelf .as-item:hover,
.answer-shelf .as-item:active{
  text-decoration:none !important; /* ніколи не підкреслюємо */
}

/* Рівні розділювачі на всю ширину */
.answer-shelf .as-item + .as-item::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:var(--as-divider);
}

/* Hover: квадратний (без радіуса), легка підсвітка + зміна синього */
.answer-shelf .as-item:hover{
  background:rgba(10,132,255,.06);
  color:var(--as-link-hover);
  border-radius:0;                 /* ← забираємо радіус для hover */
}

/* Active: трішки інтенсивніше */
.answer-shelf .as-item:active{
  background:rgba(10,132,255,.12);
}

/* Chevron справа (з’являється на hover) */
.answer-shelf .as-item::after{
  content:"";
  position:absolute;
  right:14px; top:50%;
  width:16px; height:16px;
  transform:translateY(-50%) translateX(-4px);
  opacity:0;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%230a84ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>')
    no-repeat center/16px;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.answer-shelf .as-item:hover::after{
  opacity:.9;
  transform:translateY(-50%) translateX(0);
}

/* Focus ring (клавіатура) */
.answer-shelf .as-item:focus-visible{
  outline:2px solid var(--as-ring);
  outline-offset:2px;
  border-radius:8px;               /* на фокус можна лишити округлення */
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .answer-shelf{ background:#111214; color:#e7e7ea; border-color:rgba(255,255,255,.12); box-shadow:none; }
  .as-head h3{ color:#f5f5f7; }
  .as-icon{ color:#9b9ba0; }
  .answer-shelf .as-item{ color:#4da3ff; }
  .answer-shelf .as-item:hover{ color:#1f8fff; background:rgba(77,163,255,.12); border-radius:0; }
  .answer-shelf .as-item + .as-item::before{ background:rgba(255,255,255,.10); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .answer-shelf .as-item,
  .answer-shelf .as-item::after{ transition:none; }
}

/* ===== Tip block (no box, compact) ===== */
.tip-hero{
  margin:16px 0 10px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.tip-hero h2{
  margin:0 0 6px;
  font-size:28px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.01em;
  color:#111827;
}
.tip-hero .tip-sub{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.4;
  color:#6b7280;
  font-style:italic;
}
.tip-hero p{ margin:0 0 10px; font-size:16px; line-height:1.55; color:#111827; }
.tip-hero .tip-disclaimer{ margin-top:6px; font-size:12px; line-height:1.4; color:#6b7280; }
.tip-hero .tip-cta{ margin:12px 0 0; }

/* ===== Big full-width CTA button (original size) ===== */
.btn-ask{
  display:block;
  width:100%;
  padding:14px 18px;
  text-align:center;
  background:#2bb0d9;          /* base */
  color:#fff;                   /* stays white in all states */
  font-weight:700;
  border-radius:8px;
  text-decoration:none;
  transition:background-color .15s ease, transform .02s ease;
  cursor:pointer;
}

/* no underline & fixed text color in any state */
.btn-ask,
.btn-ask:link,
.btn-ask:visited,
.btn-ask:hover,
.btn-ask:active,
.btn-ask:focus{
  text-decoration:none !important;
  color:#fff;
}

/* only the background darkens */
.btn-ask:hover,
.btn-ask:focus{ background-color:#229cc2; }
.btn-ask:active{ background-color:#1b86a5; transform:translateY(1px); }

/* mobile padding tweak */
@media (max-width:640px){
  .btn-ask{ padding:12px 16px; }
}

.section-divider {
  border: 0;
  border-top: 0px solid #e5e7eb; /* світло-сіра лінія */
  margin: 16px 0;               /* відступи зверху і знизу */
}

/* ========== Testimonials / Carousel ========== */

.testimonials {
  background: #ffffff;
  padding: 80px 810px 80px 40px;
  text-align: center;
}

.testimonials h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 50px;
  color: #1f2937;
}

.testimonial-carousel {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  min-height: 180px;
}

.testimonial {
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.testimonial.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.testimonial-text {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.6;
}

.testimonial-footer {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #1f2937;
}

.quote-icon {
  font-size: 60px;
  color: #1de9b6;
  display: block;
}

.quote-icon.end {
  margin-top: 30px;
}

/* --- FIX для testimonials в статті --- */
.article-body .testimonials{
  padding: 40px 20px !important;   /* без 810/510 */
  text-align: center;
  box-sizing: border-box;
}

.article-body .testimonial-carousel{
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  min-height: 180px;
  padding: 0 10px;
}

/* гарантуємо, що слайди займають всю ширину контейнера */
.article-body .testimonial{
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
}

/* про всяк випадок — не даємо тексту ламатися по літерах */
.article-body .testimonial-text,
.article-body .testimonial-footer{
  white-space: normal;
  word-break: normal;
}


/* приберіть ці padding-и, якщо вони є нижче по файлу */
.testimonials { padding: 80px 810px 80px 40px; }
@media (max-width:1440px){ .testimonials { padding: 80px 510px 80px 40px; } }
@media (max-width:1024px){ .testimonials { padding: 80px 510px 80px 40px; } }
@media (max-width: 768px){ .testimonials { padding: 80px 510px 80px 40px; } }


/* ===== Getting Started / 3-card feature block ===== */
.article-body .gs-card{
  background:#f7f7f7;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:28px;
  margin:24px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.article-body .gs-card h2{
  margin:0 0 18px;
  font-size:28px;
  line-height:1.2;
  color:#1f2937;
  text-align:left;
}

.article-body .gs-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:26px;
  align-items:start;
}

.article-body .gs-item h3{
  margin:10px 0 6px;
  font-size:18px;
  font-weight:700;
  color:#111827;
}

.article-body .gs-item p{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:#374151;
}

.article-body .gs-ico{
  width:54px; height:54px;
  border-radius:50%;
  display:grid; place-items:center;
  color:#1fb6ff;                /* колір іконки */
  background: radial-gradient(72px 72px at 30% 30%, #eaf6ff 0, #eaf6ff 50%, #e6f2ff 100%);
  border:1px solid #dbeafe;
  box-shadow: 0 4px 10px rgba(31,182,255,.08), inset 0 0 0 4px rgba(255,255,255,.7);
}

/* responsive */
@media (max-width: 1024px){
  .article-body .gs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .article-body .gs-card{ padding:22px; }
  .article-body .gs-grid{ grid-template-columns: 1fr; gap:18px; }
  .article-body .gs-card h2{ text-align:center; }
}

.entry-content p {
  margin-bottom: 10px;
}

.live-support-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 15px;
  max-width: 750px;
  margin: 20px auto;
}

.live-support-avatars {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
}

.live-support-avatars img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-left: -10px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ddd;
    flex-shrink: 0;        /* 🔒 забороняє стискання */
  object-fit: cover; 
}

.live-support-avatars .checkmark {
  color: #0abf53;
  font-size: 18px;
  margin-left: 6px;
}

.live-support-text {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}


.avatar-with-badge {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.avatar-with-badge img {
  display: block;
  border-radius: 50%;
  flex-shrink: 0 !important;
  max-width: 60px;
}

.expert-badge {
  position: absolute;
  bottom: -2px;
  right: -8px;
  width: 33px !important;   /* піджени розмір під свій PNG */
  height: 33px !important;
  border: 0px solid #fff !important;
  box-shadow: 0 0 0 0px #ddd !important;
}


    .ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single, .ast-separate-container .ast-author-box, .ast-separate-container .ast-404-layout-1, .ast-separate-container .no-results {
        padding: 2em;
    }


.breadcrumbs { font-size:14px; line-height:1.4; }
.breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 12px;}
.breadcrumbs li{display:flex; align-items:center; color:#6b7280;}
/* стрілочки */
.breadcrumbs li+li::before{
  content:"›"; margin:0 8px; color:#9ca3af; font-weight:600;
}
.breadcrumbs a{ color:#3b82f6; text-decoration:none; border-bottom:1px solid rgba(59,130,246,.25); }
.breadcrumbs a:hover{ text-decoration:underline; }
/* «поточний», але клікабельний і сірий */
.breadcrumbs a.is-current{
  color:#6b7280; border-bottom-color:transparent; cursor:pointer;
}
.breadcrumbs a.is-current:hover{ color:#4b5563; text-decoration:none; }

h1, .entry-content h1 {
    font-size: 40px;
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1.4em;
}

h2, .entry-content h2 {
    font-size: 25px;
    font-weight: 600;
    line-height: 1.3em;