/* =========================
   Likenet Car Shop – SINGLE
   ========================= */

.lcs-single, .lcs-single * { box-sizing: border-box; color: #eaeaea; }

/* Cabeçalho */
.lcs-single { margin: 24px auto; max-width: 1200px; padding: 0 16px; }
.lcs-single__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.lcs-single__title { font-size: 42px; line-height: 1.2; margin: 0; }
.lcs-price-badge { background: #111; color: #fff; border: 1px solid #2a2a2a; padding: 10px 14px; border-radius: 10px; font-weight: 700; }

/* Estrutura */
.lcs-single__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
@media (max-width: 980px) { .lcs-single__top { grid-template-columns: 1fr; } }

/* ===== Galeria ===== */
.lcs-gallery { width: 100%; }
.lcs-slider { position: relative; }
.lcs-slides { position: relative; aspect-ratio: 16/9; background: #0f0f0f; border: 1px solid #262626; border-radius: 12px; overflow: hidden; }
.lcs-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.lcs-slide.is-active { opacity: 1; }

/* Navegação da galeria (dark) */
.lcs-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: #222; color: #fff; border: 0;
  width: 40px; height: 40px; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.lcs-prev { left: 10px; }
.lcs-next { right: 10px; }
.lcs-nav:hover { background: #2c2c2c; }

/* Thumbs */
.lcs-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lcs-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; outline: 1px solid #2a2a2a; }
.lcs-thumb.is-active { border-color: #fff; }

/* ===== Painéis ===== */
.lcs-panel { background: #151515; border: 1px solid #262626; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.lcs-panel__title { font-size: 18px; margin: 0 0 10px; display: flex; align-items: center; gap: .5rem; }

/* ===== Campos do veículo ===== */
.lcs-fields { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
@media (max-width: 640px) { .lcs-fields { grid-template-columns: 1fr; } }

.lcs-field {
  display: grid;
  grid-template-columns: 140px 1fr;  /* mais espaço para o valor */
  gap: 6px;
  align-items: center;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  padding: 10px 12px;
}
.lcs-field__label { color: #bdbdbd; font-size: 12px; display: flex; align-items: center; gap: .5rem; }
.lcs-field__label i { opacity: .9; font-size: .95em; }

/* Somente o VALOR: menor e mais à esquerda */
.lcs-field__value {
  color: #fff; font-weight: 600;
  font-size: calc(1rem - 2px);   /* ~2px menor */
  padding-left: .55rem;          /* aproxima da esquerda */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ===== Extras (tags) ===== */
.lcs-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lcs-tag { background: #0f0f0f; border: 1px solid #2a2a2a; color: #eaeaea; border-radius: 999px; padding: 6px 10px; font-size: 12px; }

/* ===== Descrição ===== */
.lcs-panel--desc { margin-top: 16px; background: #111; border: 1px solid #2a2a2a; border-radius: 12px; padding: 18px; }
.lcs-panel--desc p { margin: 0 0 8px; line-height: 1.5; }

/* ===== CTA (WhatsApp / Ligar / PDF) ===== */
.lcs-cta-row { display: flex; gap: .75rem; margin-top: .75rem; flex-wrap: wrap; }
.lcs-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; border-radius: .6rem; text-decoration: none;
  font-weight: 600; line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  border: 0;
}
.lcs-btn i { font-size: 1.05em; }

/* WhatsApp */
.lcs-btn--whatsapp { background: #25D366; color: #0b2a13; }
.lcs-btn--whatsapp:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,211,102,.35); }

/* Ligar */
.lcs-btn--call { background: #2e2e2e; color: #fff; }
.lcs-btn--call:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.35); }

/* PDF */
.lcs-btn--pdf { background: #e31b23; color: #fff; }
.lcs-btn--pdf:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(227,27,35,.35); }

/* Herda a cor do botão */
.lcs-btn--whatsapp span,
.lcs-btn--call span,
.lcs-btn--pdf span { color: inherit; }

/* ===== Alinhamento fino dos campos ===== */

/* Label: traz o texto mais perto do ícone e reduz o espaçamento lateral */
.lcs-field__label {
  color: #bdbdbd;
  font-size: 11px;            /* 1px menor */
  display: flex;
  align-items: center;
  gap: 0.35rem;               /* antes: 0.5rem */
  margin-left: 0.1rem;        /* aproxima do ícone à esquerda */
}

/* Ícone ligeiramente menor e mais integrado */
.lcs-field__label i {
  opacity: 0.9;
  font-size: 0.9em;           /* ligeiramente menor */
  margin-right: 0;            /* remove espaçamento adicional */
}

/* Valor: traz um pouco mais à esquerda e reduz fonte */
.lcs-field__value {
  color: #fff;
  font-weight: 600;
  font-size: calc(1rem - 3px); /* 1px menor que antes */
  padding-left: 0.3rem;        /* encosta mais à esquerda */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Garante que todo o bloco mantenha proporção */
.lcs-field {
  display: grid;
  grid-template-columns: 130px 1fr; /* reduz 10px para aproximar colunas */
  gap: 4px;                         /* mais compacto */
  align-items: center;
}

/* ============================
   Ajuste fino solicitado
   Rótulo mais à esquerda (2px)
   Valor mais à esquerda (3px)
   ============================ */

/* Label (título do campo) */
.lcs-field__label {
  color: #bdbdbd;
  font-size: 11px;               /* rótulo 1px menor */
  display: flex;
  align-items: center;
  gap: 0.25rem !important;       /* antes: 0.5rem → aproxima mais do ícone */
  margin-left: -2px !important;  /* move o rótulo 2px para a esquerda */
}

/* Ícone no rótulo */
.lcs-field__label i {
  opacity: 0.9;
  font-size: 0.9em;
  margin-right: 0 !important;
}

/* Valor (conteúdo à direita) */
.lcs-field__value {
  color: #fff;
  font-weight: 600;
  font-size: calc(1rem - 3px);   /* reduz ~2px */
  padding-left: 0 !important;    /* remove recuo */
  margin-left: -3px !important;  /* move ainda mais à esquerda (3px) */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Ajuste do bloco inteiro para acompanhar o alinhamento */
.lcs-field {
  display: grid;
  grid-template-columns: 125px 1fr; /* antes: 140-160px → mais compacto */
  gap: 4px;                          /* mais justo */
  align-items: center;
}

/* ===== Lightbox / Zoom de imagens ===== */
.lcs-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;

  /* efeito de abertura */
  opacity:0;
  transform:scale(0.96);
  transition:opacity .25s ease, transform .25s ease;
}
.lcs-lightbox.is-open{
  display:flex;
  opacity:1;
  transform:scale(1);
}

.lcs-lightbox__backdrop{
  position:absolute;
  inset:0;
}

.lcs-lightbox__dialog{
  position:relative;
  z-index:1;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.lcs-lightbox__body{
  position:relative;
  background:#000;
  border-radius:12px;
  padding:8px 52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lcs-lightbox__img{
  max-width:100%;
  max-height:80vh;
  object-fit:contain;

  opacity:0;
  transition:opacity .25s ease;
}
.lcs-lightbox.is-open .lcs-lightbox__img{
  opacity:1;
}

/* Botão fechar (X) */
.lcs-lightbox__close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:none;
  background:#e31b23;
  color:#fff;
  cursor:pointer;
  font-size:22px;
  font-weight:bold;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 10px rgba(0,0,0,.5);
  z-index:99999;
}
.lcs-lightbox__close:hover{
  background:#c4161f;
}

/* Navegação do lightbox */
.lcs-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#222;
  border:2px solid #000;
  color:#fff;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lcs-lightbox__nav:hover{
  background:#444;
}
.lcs-lightbox__prev{ left:8px; }
.lcs-lightbox__next{ right:8px; }

/* Thumbs no lightbox */
.lcs-lightbox__thumbs{
  display:flex;
  gap:6px;
  margin-top:6px;
  overflow-x:auto;
  padding:2px 0;
}
.lcs-lightbox__thumb{
  width:72px;
  height:54px;
  object-fit:cover;
  border-radius:6px;
  border:2px solid transparent;
  cursor:pointer;
  opacity:.75;
}
.lcs-lightbox__thumb.is-active{
  border-color:#fff;
  opacity:1;
}
/* Botões prev/next DENTRO DO ZOOM — dark */
.lcs-lightbox__nav {
    background: #222 !important;    /* cor escura */
    color: #fff !important;         /* seta branca */
    border: 2px solid #000 !important;
}

.lcs-lightbox__nav:hover {
    background: #333 !important;    /* hover mais claro */
}

/* Forçar ícones internos das setas */
.lcs-lightbox__nav svg,
.lcs-lightbox__nav i {
    color: #fff !important;
    fill: #fff !important;
}

/* ==== Forçar botão FECHAR (X) do Lightbox a ficar dark ==== */
.lcs-lightbox__close {
    background: #222 !important;   /* fundo dark real */
    color: #fff !important;        /* X branco */
    border: 2px solid #000 !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.6) !important;

    /* Garantir que nada sobreponha */
    z-index: 999999 !important;
}

/* Hover mais claro */
.lcs-lightbox__close:hover {
    background: #333 !important;
}

/* ===== Carousel de últimos veículos ===== */

.lcs-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}

.lcs-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 8px 4px;
}

.lcs-carousel__item {
  flex: 0 0 auto;
  min-width: 280px;
  max-width: 340px;
  scroll-snap-align: start;
}

.lcs-c-prev,
.lcs-c-next {
  background: #000;
  color: #f5f5f5;
  border: 1px solid #333;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  padding: 0;
}

.lcs-c-prev:hover,
.lcs-c-next:hover {
  background: #111;
}