/* ===== Базови променливи / типография ===== */
:root{
    --brand-red:#E3141A;
    --text:#050505;
    --muted:#9F9F9F;
    --surface:#fff;
    --border:rgba(0,0,0,.12);
    --radius:12px;
    --gap:24px;
}
html,body{margin:0; background:#F5F5F5; color:var(--text); font-family:Involve, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}

* {
  box-sizing: border-box;
}

.detail-top h1{
    color: #FFF;
    text-align: center;
    font-family: Bounded;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    padding-top:75px;
    margin-bottom: 20px;
}

  /* ===== Контейнер за секцията ===== */
    .car-detail{
        width:100%;
        background:center/cover no-repeat var(--bg, none);
        margin-top: -65px;
        gap:28px;
    }

  .car-detail__top{
    max-width:1440px;
    display:flex;
    flex-direction: row;
    align-items:start;
    margin:25px auto;
    justify-content: center;
  }

 .car-detail__top .gallery {
  flex: 1 1 50%;
}
.car-detail__top .info {
  flex: 1 1 50%;
}

  /* ===== Лява колона: галерия ===== */
  .gallery{
    background:var(--surface);
    position: relative;
    width:600px;
  }
  .gallery .swiper{
    overflow:hidden;
  }
  .gallery .swiper-slide{
    background:#000;
  }
  .gallery .swiper-slide img{
    width:100%; height:100%; object-fit:cover;
  }
  .gallery .swiper-button-prev,
  .gallery .swiper-button-next{
    color:#fff; width:40px; height:40px; text-shadow:0 2px 6px rgba(0,0,0,.35);
  }
  .gallery .swiper-pagination-bullet{ background:#fff; opacity:.6 }
  .gallery .swiper-pagination-bullet-active{ opacity:1 }

    .car-main-gallery .swiper-button-prev,
    .car-main-gallery .swiper-button-next {
        top: auto !important;       /* махаме позицията по Y */
        bottom: 16px !important;    /* долу */
        width: 38px;
        height: 38px;
        color: #fff;
    }

/* контейнерът за стрелките – позиция абсолют вдясно долу */
.car-main-gallery .swiper-button-next {
  position: absolute;
  right: 16px;
}

.car-main-gallery .swiper-button-prev {
  position: absolute;
  right: 20px;
  left:auto;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none; /* маха вградената стрелка на Swiper */
}

/* next е вдясно, prev го изместваш наляво на него */
.car-main-gallery .swiper-button-prev {
  transform: translateX(-44px); /* измести ~ ширината + gap */
}

  /* Лупа за lightbox */
  .zoom-btn{
    position:absolute;
    top:16px;
    right:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index: 100;
    background: none;
    border: none;
  }
  .zoom-btn svg{ width:38px; height:38px }

  /* ===== Дясна колона: инфо панел ===== */
  .info{
    padding:0 20px;
    display:grid;
    grid-template-rows: auto auto auto 1fr auto;
    color: #fff;
    width: 30%;
  }
  .info__title{ margin:0; font-size:28px; font-weight:700; text-transform:uppercase }
  .info__sub{ margin:0; color:var(--muted); font-size:16px; text-transform:uppercase; font-weight:700 }

  .info__price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 10px 0;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    margin-top: 14px;
  }
  .price{ font-size:26px; font-weight:700; color:#9AEFA7; }
  .price span{
      color:#fff;
      text-transform: uppercase;
  }
  .btn-lease{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:10px; background:var(--brand-red); color:#fff; font-weight:700; border:none; cursor:pointer;
  }

  .specs{ display:grid; gap:8px; padding: 8px 0; border-bottom:1px solid #fff; }
  .specs .row{ display:flex; gap:8px; font-size:15px }
  .specs .key{ color:#fff; width:240px; flex:0 0 240px; text-transform: uppercase;font-weight: 700;}
  .specs .val{ flex:1 }

  .buttons{ gap:10px; margin-top:20px }
  .car-detail__top .btn-red, .car-detail__top .btn-outline, .specs-cta__inner .btn-red{
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
    padding:12px 18px; border-radius:10px; font-weight:700; font-size:16px; cursor:pointer; border:none;
  }
  /*.btn-red{ background:var(--brand-red); color:#fff }*/
  .btn-red:hover{ filter:brightness(.95) }
  .car-detail__top .btn-outline{
    background:none; color:#fff; border:1.5px solid #fff; margin-top: 20px; width:auto;text-transform: uppercase;
  }
  .button-row{ display:flex; gap:10px; flex-wrap:wrap }

  /* ===== Lightbox ===== */
  .lightbox{
    position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,.86); z-index:1000; padding:24px;
  }
  .lightbox.is-open{ display:flex }
  .lightbox__inner{ width:min(1200px, 96vw); }
  .lightbox .swiper-slide{ aspect-ratio: 16/9; background:#000; }
  .lightbox .swiper-slide img{ width:100%; height:100%; object-fit:contain; background:#000 }
  .lightbox .swiper-button-prev, .lightbox .swiper-button-next{ color:#fff }
  .lightbox__close{
    position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,.12);
    color:#fff; display:inline-grid; place-items:center; border:1px solid rgba(255,255,255,.25); cursor:pointer;
  }




  /* ===== Responsive ===== */
  @media (max-width: 1350px){
    .gallery{
        width:500px;
    }

    .car-detail__top .btn-red, .car-detail__top .btn-outline {
        font-size: 14px;
        padding: 12px 10px;
    }

    .buttons {
     margin-top: 0px;
    }
  }
  @media (max-width: 900px){
    .car-detail__top {
        flex-direction: column;   /* вертикално */
        align-items: center;
    }
    .car-detail__top .gallery,
    .car-detail__top .info {
        flex: 1 1 100%;
    }

    .info{
        width:500px;
    }

  }
  @media (max-width: 600px){
    .info__title{ font-size:22px; }
    .price{ font-size:22px; }
    .specs .key{ width:120px; flex-basis:120px; }
    .info__title, .btn-lizing{ display:none;}
    .info__price-row{ border-top: none;}

      .detail-top h1{
          font-size: 22px;
      }
  }

  @media (max-width: 500px){
    .gallery, .info{
        width:100%;
    }
  }

  /* Лента с миниатюри – 100% ширина, черен фон, едноредово */
.car-detail__thumbs{
    width:100%;
    background:#000;
    max-height:300px;
    overflow:hidden;
    padding: 9px 0;
}

/* самият слайдер */
.car-thumbs{
    padding: 9px;                      /* „рамка“ по 9px */
}

/* един ред, свободно движение, отстояние 9px между thumb-овете */
.car-thumbs .swiper-wrapper{
  align-items:center;
}

/* всяка миниатюра – височина се води от лентата; ширина според пропорцията */
.car-thumbs .swiper-slide{
  height: calc(300px - 18px);        /* 386 - 2*9px padding */
  aspect-ratio: 4 / 3;               /* или 16/9, според снимките */
  width: auto;                        /* ширина според аспект-ratio */
  margin-right: 9px;                  /* междинен отстъп */
  overflow: hidden;
  cursor: pointer;
  opacity: .6;                        /* неактивни по-бледи */
  transition: opacity .2s ease, outline-color .2s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.car-thumbs .swiper-slide:last-child{ margin-right:0; }

.car-thumbs .swiper-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* активна миниатюра */
.car-thumbs .swiper-slide-thumb-active{
    opacity: 1;
}

/* скрий на най-малки екрани */
@media (max-width: 600px){
  .car-detail__thumbs{ display:none; }
}

.car-specs-section{
  width:100%;
  background:#fff;
  padding: 50px;
  margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.spec-group__title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding:10px 16px;
    font:700 18px/1.2 Involve, system-ui, sans-serif;
    background:#000;
    color:#fff;
    text-transform:uppercase;
}

.spec-group{
    background: #F3F3F3;
}

.spec-group__list {
    /*list-style: none;*/
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 колони на голям екран */
}

.spec-group__item {
    position: relative;
    padding-left: 28px;
}

.spec-group__item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 13px;
    /*transform: translateY(-50%);*/
    width: 16px;
    height: 16px;
    background-image: url(data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2048.997%2048.998%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22M45.961%2C18.702c-0.033-0.038-0.061-0.075-0.1-0.112l-1.717-1.657c1.424-0.323%2C2.957-1.516%2C2.957-2.74c0-1.426-1.979-1.932-3.668-1.932c-1.766%2C0-1.971%2C1.21-1.992%2C2.065l-4.43-4.271c-0.9-0.891-2.607-1.592-3.883-1.592H24.5h-0.002h-8.63c-1.275%2C0-2.981%2C0.701-3.882%2C1.592l-4.429%2C4.271c-0.023-0.855-0.228-2.065-1.992-2.065c-1.691%2C0-3.669%2C0.506-3.669%2C1.932c0%2C1.224%2C1.534%2C2.417%2C2.958%2C2.74l-1.717%2C1.657c-0.039%2C0.037-0.066%2C0.074-0.1%2C0.112C1.2%2C20.272%2C0%2C23.184%2C0%2C25.297v6.279c0%2C1.524%2C0.601%2C2.907%2C1.572%2C3.938v2.435c0%2C1.424%2C1.192%2C2.585%2C2.658%2C2.585h3.214c1.466%2C0%2C2.657-1.159%2C2.657-2.585v-0.623h14.397H24.5h14.396v0.623c0%2C1.426%2C1.19%2C2.585%2C2.658%2C2.585h3.213c1.467%2C0%2C2.657-1.161%2C2.657-2.585v-2.435c0.972-1.031%2C1.572-2.414%2C1.572-3.938v-6.279C48.998%2C23.184%2C47.798%2C20.272%2C45.961%2C18.702z%20M13.613%2C11.953c0.623-0.519%2C1.712-0.913%2C2.255-0.913h8.63H24.5h8.63c0.543%2C0%2C1.632%2C0.394%2C2.255%2C0.913l5.809%2C5.63H24.5h-0.002H7.805L13.613%2C11.953z%20M1.993%2C24.347c0-1.546%2C1.21-2.801%2C2.704-2.801c1.493%2C0%2C6.372%2C2.864%2C6.372%2C4.41s-4.879%2C1.188-6.372%2C1.188C3.203%2C27.144%2C1.993%2C25.894%2C1.993%2C24.347z%20M10.102%2C34.573H9.587H9.072l-3.055%2C0.005c-0.848-0.264-1.446-0.572-1.869-0.903c-0.214-0.167-0.378-0.341-0.506-0.514c-0.129-0.175-0.223-0.347-0.284-0.519c-0.38-1.074%2C0.405-2.061%2C0.405-2.061h5.214l3.476%2C3.99L10.102%2C34.573L10.102%2C34.573z%20M31.996%2C34.575H24.5h-0.002h-7.496c-1.563%2C0-2.832-1.269-2.832-2.831h10.328H24.5h10.328C34.828%2C33.308%2C33.559%2C34.575%2C31.996%2C34.575z%20M32.654%2C29.812H24.5h-0.002h-8.154c-1.7%2C0-3.08-2.096-3.08-4.681h11.234H24.5h11.234C35.734%2C27.717%2C34.354%2C29.812%2C32.654%2C29.812z%20M45.641%2C32.644c-0.062%2C0.172-0.156%2C0.344-0.285%2C0.518c-0.127%2C0.173-0.291%2C0.347-0.506%2C0.514c-0.422%2C0.331-1.021%2C0.641-1.869%2C0.903l-3.055-0.005h-0.515h-0.515h-2.353l3.478-3.99h5.213C45.234%2C30.583%2C46.02%2C31.568%2C45.641%2C32.644z%20M44.301%2C27.144c-1.492%2C0-6.371%2C0.356-6.371-1.188s4.879-4.41%2C6.371-4.41c1.494%2C0%2C2.704%2C1.255%2C2.704%2C2.801C47.005%2C25.892%2C45.795%2C27.144%2C44.301%2C27.144z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 1200px) {
    .spec-group__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Малки таблети / големи телефони */
@media (max-width: 768px) {
    .spec-group__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Най-малки устройства – 1 колона */
@media (max-width: 480px) {
    .spec-group__list {
        grid-template-columns: 1fr;
    }
}



/* колона */
.spec-col{
    background:#fff;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    width:auto;
    height:100%;
    margin: 10px;
    padding: 10px;
}

/* заглавие */
.spec-col__title{
  margin:0;
  padding:14px 16px;
  font:700 18px/1.2 Involve, system-ui, sans-serif;
  background:#000;
  color:#fff;
  text-transform:uppercase;
}

/* редове с редуващ се фон */
.spec-group__list{
  /*list-style:none;*/
    margin:0;
    padding:0;
  font:400 16px/1.45 Involve, system-ui, sans-serif;
}
.spec-group__list li{
  padding:10px 28px;
}
/*.spec-col__list li:nth-child(odd){ background:#FFFFFF; }*/
/*.spec-col__list li:nth-child(even){ background:#F3F3F3; }*/

/* контроли */
.specs-prev,.specs-next{
  color:#000;
}
.specs-pager .swiper-pagination-bullet{ background:#000; opacity:.3 }
.specs-pager .swiper-pagination-bullet-active{ opacity:1 }

@media (min-width:1400px){
/*  .specs-swiper { width:100%;}*/
}

/* при големи екрани показваме 4; скриваме стрелките ако няма нужда */
@media (min-width:1200px){
  .specs-swiper{ padding-bottom:12px; }
}

/* ако искаш по-тесен вътрешен падинг на мобилно */
@media (max-width:600px){
.car-specs-section, .specs-swiper { overflow:hidden; }

  .specs-swiper { padding-left: 0; padding-right: 0; }
  .specs-swiper .swiper-wrapper { gap:0 !important; }

  .specs-swiper .swiper-slide,
  .spec-col{
        min-width: 0 !important;
        width: 100% !important;
        flex: 0 0 100% !important;   /* 🔑 слайдът заема 100% */
        box-sizing: border-box;
        max-width: none !important;  /* 🔑 отмени 300px, ако остане отнякъде */
        margin-left: 0 !important;
        margin-right: 0 !important;
  }

  .car-specs-section {
    padding: 10px;
}
}

.specs-note{
    width: 90%;
    margin: 30px 0;
    background:#fff;
    box-sizing: border-box;
}

.specs-note__title{
    margin:0 0 8px;
    font: 700 20px/1.25 Involve, system-ui, sans-serif;
    text-transform: uppercase;
}
.specs-note__text{
  margin:0;
  font: 400 16px/1.55 Involve, system-ui, sans-serif;
  color:#333;
}

/* Адаптация – следва ширината на колоните според екрана */
@media (max-width: 1200px){
  .specs-note{ max-width: 1000px; }
}
@media (max-width: 900px){
  .specs-note{ max-width: 720px; padding:18px; }
  .specs-note__title{ font-size:18px; }
  .specs-note__text{ font-size:15px; line-height:1.5; }
}
@media (max-width: 600px){
    .specs-note {
        max-width: none;
        padding: 16px;
        width: 100%;
    }

    .specs-cta__inner a{
        font-size: 14px !important;
    }
}

.specs-cta{
  width:100%;
  height:100px;
  background:#fff;
  border-top:1px solid #8E8E8E;
  border-bottom:1px solid #8E8E8E;
  display:flex;
  align-items:center;
  justify-content:center;
}

.specs-cta__inner{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
}

/* червен бутон – взимаме стандарта от проекта */
.specs-cta .btn-red {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 25px;
  border-radius:10px;
  background:#E3141A;
  color:#FFF;
  font-family:Involve, sans-serif;
  font-size:20px;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:background 0.3s ease;
  text-transform:uppercase;
  text-decoration:none;
  margin-top: 0px;
}

.btn-red:hover{ filter:brightness(.95); }

.lease-calculator{
    width:100%;
    height:auto;
    background:#fff;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    margin-top: 0px;
    padding-bottom: 10px;
    border-bottom: 15px solid #E3141A;
}

.lease-calculator_top{
    width:100%;
    margin:0 auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 0px;
    color:#000;
    font-family:Involve, sans-serif;
    font-size:25px;
    font-weight:700;
}

.lease-calculator_top img{
    margin:0 auto;
    text-align: center;
    padding: 10px;
    width:200px;
    height:auto;
}

.lease-calculator__inner{
    display:flex;
    width:100%;
    height:245px;
    margin: 0 auto;
}

.lease-calculator iframe {
    border: none;
    outline: none;
}

@media (max-width: 1170px) {
    .lease-calculator__inner {
        width: 95%;
        height: 250px;
    }
}

@media (max-width: 1120px) {
    .lease-calculator__inner {
        width: 95%;
        height: 300px;
    }
}

@media (max-width: 996px) {
    .lease-calculator__inner {
        width: 95%;
        height: 350px;
    }
}

@media (max-width: 822px) {
    .lease-calculator__inner {
        width: 100%;
        height: 1200px;
    }

    .lease-calculator_top{
        font-size:20px;
        font-weight:600;
    }
}

.sf-main-video {
    padding-left: 200px;
    padding-right: 200px;
}

@media (max-width: 1500px) {
    .sf-main-video {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 600px) {
    .sf-main-video {
        padding-left: 0px;
        padding-right: 0px;
    }
}