/*
 * Former "Additional CSS" (Customizer). WordPress stopped printing it when the theme mod
 * custom_css_post_id became -1; restored here in 2026-10. Loaded on every page after the theme CSS,
 * like the Customizer CSS was. Left out: the PRE-CTA block (/sales-crm/ styles it in templates/crm.php),
 * .uagb-separator-spacing-wrapper (no visible effect) and the API rules that never applied because of
 * broken comments (.feature-card height reset, a duplicate .glow-card centring, .integrations-hero).
 */

/* === Success Stories (чистий мінімум) === */
body.single-success-stories.wp-theme-Splynx .container--930.story-list{
  /* ширина контейнера + 2 колонки */
  max-width: 1280px !important;
  width: min(1280px, 96vw) !important;
  margin-inline: auto !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: clamp(60px, 6vw, 120px) !important;
  align-items: start !important;

  /* центральний роздільник */
  background: linear-gradient(#e6e8f0, #e6e8f0) center/1px calc(100% - 96px) no-repeat !important;
  background-position: center 8px !important;
  padding-inline: 16px !important;
}

/* прибрати обмеження і «з’їдачі» ширини у колонок */
body.single-success-stories.wp-theme-Splynx .story-list-before,
body.single-success-stories.wp-theme-Splynx .story-list-with{
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* заголовки */
body.single-success-stories.wp-theme-Splynx .story-list-before h3,
body.single-success-stories.wp-theme-Splynx .story-list-with h3{
  margin: 0 0 16px !important;
}

/* охайні списки */
body.single-success-stories.wp-theme-Splynx .story-list-before > ul,
body.single-success-stories.wp-theme-Splynx .story-list-with  > ul{
  list-style: disc outside !important;
  margin: 0 !important;
  padding-left: 1.25rem !important;
}
body.single-success-stories.wp-theme-Splynx .story-list-before > ul > li,
body.single-success-stories.wp-theme-Splynx .story-list-with  > ul > li{
  line-height: 1.55 !important;
  margin-top: 12px !important;
}
body.single-success-stories.wp-theme-Splynx .story-list-before > ul > li::marker{ color:#F243A3 !important; }
body.single-success-stories.wp-theme-Splynx .story-list-with  > ul > li::marker{ color:#367BF5 !important; }

/* мобільна версія — одна колонка, без лінії */
@media (max-width: 1024px){
  body.single-success-stories.wp-theme-Splynx .container--930.story-list{
    grid-template-columns: 1fr !important;
    row-gap: 24px !important;
    column-gap: 0 !important;
    background: none !important;
  }
}


.block-cards-body a.card-layout { display:block; text-decoration:none; color:inherit; }

/* базовий стан картки */
.home-block-cards .block-cards-body .card-layout{
  display:block;
  height:100%;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

/* підйом при наведенні + фокус з клавіатури */
.home-block-cards .block-cards-body a.card-layout:hover,
.home-block-cards .block-cards-body a.card-layout:focus-visible{
  transform: translateY(-4px);          /* трішки вгору */
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  z-index: 1;                           /* щоб не перекривали сусіди в гріді */
}

/* якщо користувач просить менше анімацій */
@media (prefers-reduced-motion: reduce){
  .home-block-cards .block-cards-body .card-layout{ transition:none; }
}


.cta-fix {
  min-width: 180px;
  white-space: nowrap;
  text-align: center;
}


a.btn--link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 32px;
  line-height:1.3;
  font-size:18px;
  border-radius:40px;
  white-space:normal!important;
  max-width:100%;
}

p.btn-wrap{
  text-align:center;
  margin:40px 0;
}

@media (max-width:480px){
  a.btn--link{
    width:100%;
  }
}

/* All for Inventory*/

/* ------------------------------------------------------------- */
/* БАЗОВІ СТИЛІ (ДЛЯ ДЕСКТОПА) */
/* ------------------------------------------------------------- */

/* Батьківський контейнер: Гарантуємо, що блоки будуть вирівняні по центру */
.logos-container { 
    display: flex;
    align-items: center; 
    justify-content: center;
}

/* Спільні стилі: Фіксована Висота 78px та PADDING */
.logo-box-award-pic, /* Блок WISPA */
.logo-box-award-wrapper { /* Блок Рейтингів */
    /* Спільний вигляд */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin: 0 10px; 

    /* ФІКСОВАНА ВИСОТА (ДЕСКТОП) */
    height: 78px;
    min-height: 78px;
    
    /* PADDING: 10px зверху і знизу */
    padding: 10px 25px; 
    
    /* Робимо контент Flex-контейнером для вирівнювання всередині */
    display: flex; 
    align-items: center;
}

/* ------------------------------------------------------------- */
/* A. БЛОК WISPA (logo-box-award-pic) - Ширина для ДЕСКТОПА */
.logo-box-award-pic {
    /* Оновлено: 264px + 24px = 288px */
    width: 288px;
    max-width: 290px;
    /* ... інші стилі ... */
}

/* B. БЛОК РЕЙТИНГІВ (logo-box-award-wrapper) - Ширина для ДЕСКТОПА */
.logo-box-award-wrapper {
    /* Оновлено: 444px + 24px = 468px */
    width: 468px;
    /* Вирівнювання контенту всередині (логотипи зліва, рейтинг праворуч) */
    justify-content: space-between;
    /* ... інші стилі ... */
}

/* ------------------------------------------------------------- */
/* 📱 АДАПТИВНІ СТИЛІ (ОПТИМІЗАЦІЯ ДЛЯ МОБІЛЬНИХ < 768px) */
/* ------------------------------------------------------------- */

@media(max-width: 768px){
    /* Батьківський контейнер: Вертикальне розташування */
    .logos-container {
        flex-direction: column;
        padding: 0; 
    }

    /* 1. Блоки: ЗМЕНШУЄМО ПРОПОРЦІЙНО (у 1.2 раза) та ЦЕНТРУЄМО */
    .logo-box-award-wrapper,
    .logo-box-award-pic {
        width: 100% !important; 
        
        /* ЗМЕНШЕННЯ: Змінюємо 90% на 75% для зменшення у 1.2 раза */
        max-width: 75% !important; 
        
        /* ЦЕНТРУВАННЯ: Гарантуємо, що вони будуть по центру */
        margin: 0 auto 16px auto !important; 
        
        /* Скидаємо фіксовану висоту */
        height: auto !important;
        min-height: auto !important;
        
        /* Зміна внутрішніх відступів */
        padding: 20px 15px;
    }
    
   /* 2. Вертикальне вирівнювання контенту всередині блоку Рейтингів */
    .logo-box-award-wrapper {
        flex-direction: column; 
        justify-content: center;
        text-align: center;
        
        /* КОРЕКЦІЯ PADDING: Встановлюємо великий нижній відступ */
        /* Спробуємо 40px знизу, щоб вмістити всі елементи */
        padding: 20px 15px 40px 15px !important; 
        /* !important, щоб гарантувати перезапис будь-яких спільних правил */
    }
    
    /* Додаємо стилі для тексту рейтингу, щоб прибрати зайві відступи */
    .logo-box-award-wrapper .hero-stars + div { 
        /* Припускаємо, що текст рейтингу знаходиться у div після hero-stars */
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .logo-box-award-wrapper div { 
        margin-bottom: 10px;
    }
}

/* === СТИЛІ ДЛЯ ЗІРОК (Клас hero-stars) === */
    
/* 1. Блок-контейнер для зірок (hero-stars) */
.hero-stars {
    /* Додаємо вертикальні відступи для вільного простору навколо зірок */
    padding-top: 15px; 
    padding-bottom: 5px; 
    
    /* Зберігаємо центровану ширину */
    max-width: 75%; 
    margin: 10px auto 0 auto; 
}

/* 2. Зображення зірок (масштабування) */
.hero-stars img {
    /* ЗМЕНШУЄМО МАСШТАБ до 1.6x */
    transform: scale(1.6);
    
    /* Ширина: Розрахунок 100% / 1.6 = 62.5% */
    width: 62.5% !important; 
    
    /* Зберігаємо інші правила */
    transform-origin: top center;
    display: block;
    margin: 0 auto;
    height: auto !important;
    max-width: none !important; 
}

.double-bg::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:320px;      /* піджени під свою червону лінію */
  background:#fff;   /* РІЗКИЙ перехід */
  z-index:0;
  pointer-events:none;
}
.double-bg > *{ position:relative; z-index:1; } /* контент над білим */

@media (max-width: 1024px){ .double-bg::after{ height:180px; } }
@media (max-width: 767px){  .double-bg::after{ height:130px; } }

/* Базове вирівнювання контенту */
.card-arrow .uagb-ifb-content,
.card-arrow .uagb-infobox-content,
.card-arrow .uagb-infobox__content-wrap{
  display:flex; flex-direction:column; min-height:100%;
}

/* ===== Google-style card link (стрілка без кола, underline, zoom) ===== */
.card-arrow{
  --arrow-size:22px;             /* ширина зони під стрілку */
  --arrow-thickness:2px;         /* товщина ліній */
  --arrow-color:#1f2937;         /* пасивний колір */
  --arrow-active:#367BF5;        /* hover колір */
}

/* місце під стрілку праворуч від заголовка */
.card-arrow .uagb-ifb-title,
.card-arrow .uagb-infobox-title{
  position:relative;
  display:block;
  padding-right:calc(var(--arrow-size) + 8px);
  line-height:1.25;
}

/* --- стрілка (shaft + head) БЕЗ SVG --- */
.card-arrow .uagb-ifb-title::after,
.card-arrow .uagb-infobox-title::after,
.card-arrow .uagb-ifb-title::before,
.card-arrow .uagb-infobox-title::before{
  content:"";
  position:absolute; right:0; top:50%;
  pointer-events:none;
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease;
}

/* вал (горизонтальна лінія) */
.card-arrow .uagb-ifb-title::after,
.card-arrow .uagb-infobox-title::after{
  width:16px; height:var(--arrow-thickness);
  background-color:var(--arrow-color);
  transform:translateY(-50%);
}

/* наконечник (діагональні бордери) */
.card-arrow .uagb-ifb-title::before,
.card-arrow .uagb-infobox-title::before{
  width:8px; height:8px;
  border-top:var(--arrow-thickness) solid var(--arrow-color);
  border-right:var(--arrow-thickness) solid var(--arrow-color);
  transform:translateY(-50%) rotate(45deg);
}

/* hover: синій колір, легкий зсув вправо, підкреслення заголовка */
.card-arrow:hover .uagb-ifb-title,
.card-arrow:focus-within .uagb-ifb-title,
.card-arrow:hover .uagb-infobox-title,
.card-arrow:focus-within .uagb-infobox-title{
  text-decoration:underline; text-underline-offset:4px;
}

.card-arrow:hover .uagb-ifb-title::after,
.card-arrow:focus-within .uagb-ifb-title::after,
.card-arrow:hover .uagb-infobox-title::after,
.card-arrow:focus-within .uagb-infobox-title::after{
  background-color:var(--arrow-active);
  transform:translate(4px,-50%);
}

.card-arrow:hover .uagb-ifb-title::before,
.card-arrow:focus-within .uagb-ifb-title::before,
.card-arrow:hover .uagb-infobox-title::before,
.card-arrow:focus-within .uagb-infobox-title::before{
  border-color:var(--arrow-active);
  transform:translate(4px,-50%) rotate(45deg);
}

/* ---- Легкий zoom зображення в картці ---- */
.card-arrow .uagb-ifb-image,
.card-arrow .uagb-infobox__image,
.card-arrow .uagb-infobox-image,
.card-arrow .uagb-ifb-image-content,
.card-arrow .uagb-infobox__image-content,
.card-arrow figure{ overflow:hidden; border-radius:inherit; }

.card-arrow .uagb-ifb-image img,
.card-arrow .uagb-infobox__image img,
.card-arrow .uagb-infobox-image img,
.card-arrow .uagb-ifb-image-content img,
.card-arrow .uagb-infobox__image-content img,
.card-arrow figure img{
  display:block; width:100%; height:auto;
  transform:scale(1);
  transform-origin:center;
  transition:transform .28s ease;
  will-change:transform;
}

.card-arrow:hover .uagb-ifb-image img,
.card-arrow:focus-within .uagb-ifb-image img,
.card-arrow:hover .uagb-infobox__image img,
.card-arrow:focus-within .uagb-infobox__image img,
.card-arrow:hover .uagb-infobox-image img,
.card-arrow:focus-within .uagb-infobox-image img,
.card-arrow:hover .uagb-ifb-image-content img,
.card-arrow:focus-within .uagb-ifb-image-content img,
.card-arrow:hover figure img,
.card-arrow:focus-within figure img{
  transform:scale(1.035);
}

/* Якщо блок рендерить превʼю як background-image (без img) */
.card-arrow [style*="background-image"]{ transition:transform .28s ease; }
.card-arrow:hover [style*="background-image"],
.card-arrow:focus-within [style*="background-image"]{ transform:scale(1.035); }

/* mobile / accessibility */
@media (max-width:782px){ .card-arrow{ --arrow-size:20px; } }
@media (prefers-reduced-motion: reduce){ .card-arrow *{ transition:none !important; } }


/* колонки в ряд вирівнюємо до верху */
.vtop-fix { align-self: flex-start !important; }
/* прибираємо верхній відступ у першого елемента всередині */
.vtop-fix > *:first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* затемнення тільки зони фото */
.inv-cards .wp-block-image{ position:relative; overflow:hidden; border-radius:var(--rad); }
.inv-cards .wp-block-image::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,0);
  transition:background .2s ease;
}
.inv-cards > .wp-block-uagb-container:hover .wp-block-image::after{
  background:rgba(0,0,0,.12); /* інтенсивність затемнення */
}

/* (опційно) легке підняття картки */
.inv-cards > .wp-block-uagb-container{
  transition:transform .2s ease, box-shadow .2s ease;
}
.inv-cards > .wp-block-uagb-container:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Центруємо ТІЛЬКИ текст у конкретній кнопці на мобільному,
   не чіпаючи її висоту/ширину/відступи */
@media (max-width: 768px){
  /* якщо клас на контейнері Buttons — просто не даємо штовхати вліво */
  .btn-fix-mobile-center .uagb-button__wrapper{
    justify-content: center !important;
  }

  /* сама кнопка: центруємо контент, але не змінюємо розміри */
  .btn-fix-mobile-center .uagb-button__link,
  a.uagb-button__link.btn-fix-mobile-center{
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: normal !important;

    /* скасувати попередні кастомні падінги/line-height, щоб лишились “рідні” */
    padding: revert !important;
    line-height: revert !important;
  }

  .btn-fix-mobile-center .uagb-button__text,
  a.uagb-button__link.btn-fix-mobile-center .uagb-button__text{
    display: block !important;
  }
}


/* Рядок лого під CTA у hero Inventory */
.hero-logos{ display:flex; align-items:center; gap:28px; }
.hero-logos figure{ margin:0; }                /* прибираємо зайві відступи */
.hero-logos img{ display:block; height:auto;   /* прибираємо "щілину" на baseline */
                  max-height:48px; }           /* уніфікуємо висоту логотипів */
@media (max-width: 767px){
  .hero-logos{ gap:16px; }
  .hero-logos img{ max-height:32px; }
}

/* Невелика поліровка на всіх ширинах */
body.page-id-6211 .hero-logos{ align-items: center; }

@media (max-width: 767.98px){
  body.page-id-6211 .hero-logos{ padding-bottom: 0; } /* було 14px */
}

/* ===== API page (/splynx-api/, /es/api-splynx/) ===== */
.feature-card .uagb-container-inner::after { content:none !important; }
/* ========================= 1) Змінні теми ========================= */
:root{ --brand:#367BF5; --card-bg:#2F343A; --card-border:rgba(255,255,255,.08); --card-border-hover:rgba(255,255,255,.16); --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.65); }
/* ========================= 2) Розкладка блоку з трьома картками (Spectra Stack) ========================= */ /* на Stack додай клас .features-row і увімкни Equal Height + Align items: Stretch */
.features-row, .features-row > .uagb-container { overflow:visible; }
/* щоб підсвітка не різалась */
.features-row > .uagb-container{ /* кожна колонка */ display:flex; /* колонка = flex-контейнер */ }
.features-row > .uagb-container > .uagb-container-inner{ display:flex; flex-direction:column; /* вертикальна колонка */ align-self:stretch; /* тягнемося по висоті */ overflow:visible; }
/* Гайд-картка завжди притиснута донизу (коли три колонки в ряд) */
@media (min-width:782px){ .features-row .glow-card{ margin-top:auto; margin-bottom: clamp(16px, 2.2vw, 32px); /* відступ від нижнього краю картки */ }
}
@media (max-width: 781px){ .features-row .glow-card{ margin-bottom: 32px; /* постав свій розмір, напр. 40px */ }
}
/* ========================= 3) Стилі гайд-картки ========================= */
.glow-card{ position:relative; display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:24px; /* було 14px */ background:var(--card-bg); border:1px solid var(--card-border); color:var(--text); text-decoration:none; transition:border-color .2s, transform .2s; align-items:center; /* + центрування */ justify-content:center; /* + центрування */ text-align:center; /* + центрування */ }
/* м’яка аура під карткою */
.glow-card::after{ content:""; position:absolute; left:10%; right:10%; bottom:-10px; height:18px; background:radial-gradient(50% 100% at 50% 0%, color-mix(in oklab, var(--brand) 50%, transparent) 0%, transparent 70%); filter:blur(10px); opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s; pointer-events:none; }
.glow-card:hover::after, .glow-card:focus-visible::after{ opacity:1; transform:translateY(0); }
/* Текст усередині */
.glow-card__eyebrow{ font-size:12px; line-height:1.2; letter-spacing:.02em; color:var(--muted); }
.glow-card__title{ font-size:16px; line-height:1.35; font-weight:600; color:var(--text); }
/* Доступність */
.glow-card:focus-visible{ outline:none; box-shadow:0 0 0 2px color-mix(in oklab, var(--brand) 75%, white 10%); }
/* Менше руху */
@media (prefers-reduced-motion:reduce){ .glow-card, .glow-card::after{ transition:none; }
}