@charset "UTF-8";/* =========================================================
   ABCD Detailing — custom.css (final v2)
   Шапка з двох чорних смуг (фіксована), лого ліворуч, бургер праворуч,
   глобальний темний фон із "сотами", читабельний текст, без білих боксів.
========================================================= */

/* ------- БАЗА + ФОН ------- */
:root{
  --topbar-h: 80px;   /* соц/тел */
  --header-h: 80px;   /* лого/меню */
}

html, body { margin:0; padding:0; overflow-x: hidden; }

/* фонове зображення + затемнення */
html{
  background: #000 !important;
}
body{
  background: #000 url('https://abcddetailing.pl/images/carbon.jpg') center top / 800px auto repeat fixed !important;
  color:#e9eef5;
}
body::before{
  content:""; position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  pointer-events:none; z-index:0;
}
.body-wrapper, .body-innerwrapper, #sp-top-bar, #sp-header, #sp-main, #sp-footer{
  position:relative; z-index:1;
}

/* прибираємо білі коробки в секціях */
#sp-main, #sp-main-body, .sp-page-title, .sppb-section, .sppb-row, .sppb-container,
.com-content-article, article, .article { 
  background: transparent !important; 
  box-shadow:none !important; 
  border:none !important;
}

/* ------- ТИПОГРАФІЯ (контрастно) ------- */
h1,h2,h3,h4,h5,h6{ color:#fff !important; }
body, p, li { color:#e9eef5 !important; }
.sppb-addon, .sppb-addon-content, .com-content-article p, 
.com-content-article li, .article p, .article li{ color:#e9eef5 !important; }
a{ color:#9fd1ff; } a:hover{ color:#cfe7ff; }

/* ------- ТОП-БАР (соц+тел) ------- */
#sp-top-bar{
  position:fixed; top:0; left:0; right:0;
  height: 80px;
  display:flex; align-items:center;
  background:#000; color:#fff;
  z-index:10020;
  border-bottom:1px solid rgba(255,255,255,.07);
}
#sp-top-bar .container, #sp-top-bar .container-inner{
  width:100%; padding:0 14px; margin:0;
}
#sp-top-bar a{ color:#fff !important; opacity:.95; }
#sp-top-bar a:hover{ opacity:1; }

/* ------- ХЕДЕР (лого/меню) ------- */
#sp-header{
  position:fixed; top:0; left:0; right:0; width:100%; max-width:100%; transform:none;
  /* margin-top: 0px; */
  left:0; right:20px;
  height: 80px;
  display:flex; align-items:center;
  background:#000; color:#fff;
  z-index:10010;
  border-bottom:1px solid rgba(255,255,255,.07);
}
#sp-header .container, #sp-header .container-inner, #sp-header .row{
  width:100%; position: right;
  display:flex !important;
  align-items:right;
  justify-content:space-between;
  gap: 20px;
  padding:0 10px;
  margin:0 !important;
}

/* лого зліва */
#sp-header #sp-logo{ order:1; margin-top: 20px; flex:0 1 center; }
#sp-header .logo{ display:block; }

/* меню/пошук/логін праворуч */
#sp-header #sp-menu{ order:2; flex:1 1; right 0px; }
#sp-header #sp-menu .sp-megamenu-parent{ margin-left:right; }

/* бургер строго праворуч */
#offcanvas-toggler, .offcanvas-toggler, .navbar-toggler{
  order:3; margin-left:right !important;
  color:#fff !important;
}
#offcanvas-toggler i, .offcanvas-toggler i,
#offcanvas-toggler svg, .offcanvas-toggler svg{ color:#fff !important; fill:#fff !important; }
.offcanvas-toggler .hamburger span{ background:#fff !important; }

/* відступ контенту під фіксовані смуги (щоб не «ліз» під шапку) */
.body-innerwrapper{
  padding-top:0px;
}

/* ------- OFFCANVAS ------- */
.offcanvas-menu{ background: rgba(0,0,0,.95) !important; color:#fff !important; }
.offcanvas-inner a{ color:#fff !important; }
.offcanvas-inner a:hover{ color:#9fd1ff !important; }

/* ------- РЕСПОНС ------- */
@media (max-width: 991.98px) {
  :root{ --header-h: 70px; }
  #sp-header .logo img{ max-height:40px; height: auto; }
}
@media (max-width: 565.98px) {
  :root{ --topbar-h: 38px; }
  #sp-top-bar .container{ padding:0 10px; }
}

/* дрібний твік десктопа — бургер біля правого краю */
@media (min-width: 992px) {
  #offcanvas-toggler{ margin-right:-100px !important; }
}

/* Зрізаємо “повітря” у Page Title */
#sp-title, .sp-page-title{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  background: transparent; /* лишаємо фон як у сторінки */
}


/* 2) Єдиний відступ під фіксованими topbar + header на всіх сторінках */
#sp-top-bar{ height:32px; }   /* мобільний topbar */
#sp-header { height:60px; }   /* мобільний header */
.body-innerwrapper{ padding-top:0px !important; }

/* десктоп — трохи вищі смуги */
@media (min-width: 992px) {
  #sp-top-bar{ height:40px; }
  #sp-header { height:80px; }
  .body-innerwrapper{ padding-top:0px !important; }
}

/* Home (blog-featured): ховаємо службовий заголовок "Home" */
.blog-featured .page-header,
.blog-featured .page-header h1,
.blog-featured h1.page-title {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* на всяк випадок прибираємо порожній відступ зверху блоку */
.blog-featured {
  padding-top: 0 !important;
}

/* === 3 картки послуг: тіні, hover, кнопка, рівна висота === */
.services{
  display:flex; gap:20px; margin:40px 0;
}
.service-box{
  flex:1; display:flex; flex-direction:column; justify-content:space-between;
  background:rgba(0,0,0,.72); color:#fff;
  padding:18px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-box:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.25);
}

/* зображення однакове за висотою */
.service-box img{
  width:100%;
  height:220px;               /* підправ якщо треба */
  object-fit:cover;
  border-radius:10px;
  margin-bottom:12px;
  filter:brightness(.98);
  transition:filter .2s ease, transform .2s ease;
}
.service-box:hover img{ filter:brightness(1); transform:scale(1.01); }

/* заголовок/текст */
.service-box h3{ margin:8px 0 6px; font-size:1.1rem; }
.service-box p{ margin:0 0 14px; line-height:1.45; flex:1; color:#e8eef6; }

/* кнопка */
.btn-ghost{
  align-self:center;
  display:inline-block; padding:10px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.55); color:#fff; text-decoration:none;
  backdrop-filter:blur(2px);
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* адаптив */
@media (max-width: 991.98px) {
  .services{ flex-direction:column; gap:16px; }
  .service-box img{ height:200px; }
}

/* повага до "зменшити анімацію" */
@media (prefers-reduced-motion: reduce) {
  .service-box, .service-box img{ transition:none !important; }
}
/* === Вирівнювання висоти блоків цінника === */
.cennik-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cennik-card {
  flex: 1 1 300px; /* мінімальна ширина 300px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 20px;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cennik-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
}

/* заголовок і ціна */
.cennik-card h3 { margin-top: 0; color: #fff; }
.cennik-card .price { font-size: 1.4rem; font-weight: 700; margin: 10px 0; color:#ffcc00; }

/* список послуг */
.cennik-card ul { flex-grow: 1; padding-left: 18px; margin: 0 0 14px; }
.cennik-card li { margin-bottom: .4rem; }

/* кнопка */
.cennik-card .btn {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.5);
  background: transparent;
  color: #fff;
  padding: 10px 18px;
  text-decoration: none;
  text-align: center;
  transition: all .2s ease;
}
.cennik-card .btn:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
}
@media (max-width: 991.98px) {
  .body-innerwrapper {
    padding-right: 10px;
    padding-left: 10px; /* якщо треба ще й зліва симетрично */
  }
}
/* --- Fix: offcanvas не розтягує сторінку і коректно показується --- */
.offcanvas-menu{
  position: fixed;
  top: 0;
  right: 0;                 /* у тебе праве меню */
  height: 100vh;
  width: 320px;
  max-width: 90vw;
  transform: translateX(100%);    /* повністю сховано праворуч */
  will-change: transform;
  box-sizing: border-box;
  z-index: 10050;                 /* вище за оверлей */
  background: rgba(0,0,0,.92);    /* щоб точно було видно панель */
  color:#fff;
}

/* коли меню відкрите (Helix може ставити різні класи) */
body.offcanvas-open .offcanvas-menu,
body.offcanvas-active .offcanvas-menu,
body.offcanvas .offcanvas-menu,
body.offcanvas-menu-active .offcanvas-menu{
  transform: translateX(0);
}

/* оверлей на весь в’юпорт і ТРОХИ нижчий за панель */
.offcanvas-overlay{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10040;
}

/* блокуємо скрол сторінки, коли меню відкрите */
body.offcanvas-open,
body.offcanvas-active,
body.offcanvas,
body.offcanvas-menu-active{
  overflow: hidden;
}

/* на всяк випадок */
html, body{ overflow-x: hidden; }

/* — HERO відступ вниз тільки на головній — */
body.view-featured #sp-hero{
  padding-top:60px;
}

/* трішки інший відступ на десктопі */
@media (min-width: 992px) {
  body.view-featured #sp-hero{
    padding-top:60px;
  }
}