/* ============================================================
   Bahia Bartender - SLIDESHOW da galeria
   Arquivo dedicado para bypassar cache do servidor.
   Carregado DEPOIS do styles.css para garantir precedência.
============================================================ */

.gallery-slideshow {
  position: relative !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
  background: #0A0604 !important;
}
@media (max-width: 1024px) {
  .gallery-slideshow { max-width: 95% !important; aspect-ratio: 16 / 11 !important; }
}
@media (max-width: 768px) {
  .gallery-slideshow { aspect-ratio: 4 / 5 !important; border-radius: 14px !important; max-width: 100% !important; }
}

.gallery-slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .8s cubic-bezier(.4,0,.2,1), visibility .8s !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}
.gallery-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}
.gallery-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 0;
  transition: opacity .5s ease;
}
.gallery-slide img.is-loaded { opacity: 1; }

/* Skeleton "carregando..." enquanto a imagem baixa */
.gallery-slide::before {
  content: 'Carregando…';
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: rgba(248,241,228,.55) !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.04) 0%, rgba(224,165,44,.08) 50%, rgba(255,255,255,.04) 100%),
    #14100C !important;
  background-size: 200% 100% !important;
  animation: galSkeletonShimmer 1.6s linear infinite;
  z-index: 0 !important;
  pointer-events: none;
}
.gallery-slide.has-image::before { display: none !important; }

@keyframes galSkeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.gallery-slide::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(10,6,4,.15) 0%, transparent 30%, rgba(10,6,4,.85) 100%) !important;
  pointer-events: none !important;
}

.gallery-slide-info {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  padding: 40px 50px 50px !important;
  z-index: 3 !important;
  color: #F8F1E4 !important;
}
@media (max-width: 768px) {
  .gallery-slide-info { padding: 18px 18px 56px !important; }
}
@media (max-width: 480px) {
  .gallery-slide-info { padding: 14px 16px 50px !important; }
  .gallery-slide-info h3 {
    font-size: clamp(1.05rem, 4.2vw, 1.3rem) !important;
    line-height: 1.2 !important;
  }
  .gallery-slide-tag {
    font-size: 9px !important;
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
  }
}
.gallery-slide-tag {
  display: inline-block !important;
  padding: 6px 14px !important;
  background: rgba(224,165,44,.2) !important;
  border: 1px solid rgba(224,165,44,.5) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: #F2C14E !important;
  margin-bottom: 10px !important;
}
.gallery-slide-info h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.3rem, 3vw, 1.9rem) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  color: #F8F1E4 !important;
}

.gallery-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: rgba(10,6,4,.6) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s, transform .15s, border-color .2s !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gallery-arrow:hover {
  background: rgba(224,165,44,.85) !important;
  color: #0A0604 !important;
  border-color: #E0A52C !important;
  transform: translateY(-50%) scale(1.05) !important;
}
.gallery-prev { left: 16px !important; }
.gallery-next { right: 16px !important; }
@media (max-width: 480px) {
  .gallery-arrow { width: 40px !important; height: 40px !important; }
  .gallery-prev { left: 8px !important; }
  .gallery-next { right: 8px !important; }
}

.gallery-controls {
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  bottom: 16px !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 0 20px !important;
}
@media (max-width: 480px) {
  .gallery-controls { bottom: 10px !important; gap: 8px !important; padding: 0 12px !important; }
  .gallery-counter { font-size: 11px !important; padding: 4px 10px !important; min-width: 50px !important; }
  .gallery-dot { width: 6px !important; height: 6px !important; }
  .gallery-dot.is-active { width: 22px !important; }
}
.gallery-counter {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.85) !important;
  background: rgba(10,6,4,.6) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  letter-spacing: .05em !important;
  font-variant-numeric: tabular-nums !important;
  min-width: 60px !important;
  text-align: center !important;
}
.gallery-counter span { color: #E0A52C !important; }

.gallery-dots {
  display: flex !important;
  gap: 6px !important;
}
.gallery-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.4) !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background .2s, width .25s !important;
}
.gallery-dot.is-active {
  background: #E0A52C !important;
  width: 28px !important;
  border-radius: 999px !important;
}
.gallery-dot:hover { background: rgba(255,255,255,.7) !important; }

.gallery-progress {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #F2C14E, #E0A52C) !important;
  z-index: 4 !important;
  width: 0 !important;
  transition: width 5s linear !important;
}
.gallery-slideshow.is-paused .gallery-progress { transition: none !important; }

.gallery-lightbox {
  position: fixed !important; inset: 0 !important;
  background: rgba(10,6,4,.96) !important;
  z-index: 9998 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
.gallery-lightbox.is-open { display: flex !important; }
.gallery-lightbox img {
  max-width: 100% !important; max-height: 95vh !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
}
.gallery-lightbox-close {
  position: absolute !important;
  top: 18px !important; right: 18px !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  font-size: 24px !important;
  cursor: pointer !important;
}

/* ============================================================
   FIXES RESPONSIVOS — P2 da auditoria
============================================================ */

/* Feature cards (Sobre) - padding compactado em 480px */
@media (max-width: 480px) {
  .feature { padding: 24px 18px !important; }
  .feature-icon { width: 44px !important; height: 44px !important; }
}

/* Section padding minimo em telas muito pequenas */
@media (max-width: 480px) {
  .section { padding: 56px 0 !important; }
  .section-tight { padding: 40px 0 !important; }
}

/* Autocomplete dropdown - max-height responsivo */
@media (max-width: 480px) {
  .ac-list, [role="listbox"], .autocomplete-list {
    max-height: 35vh !important;
  }
}

/* Header mobile - garante que nav nunca ultrapasse viewport */
@media (max-width: 900px) {
  .header-nav.is-open {
    max-height: calc(100dvh - 70px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Lightbox - close button maior em mobile (acessibilidade) */
@media (max-width: 480px) {
  .gallery-lightbox-close {
    top: 12px !important;
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .gallery-lightbox img {
    max-height: 80vh !important;
  }
}

/* Pacote cards - lista de drinks 2 colunas garantida no mobile */
@media (max-width: 480px) {
  .pkg-sublist {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* Footer - hierarquia limpa em mobile */
@media (max-width: 480px) {
  .footer-grid { gap: 28px !important; }
  .footer-col h4 { font-size: 13px !important; margin-bottom: 12px !important; }
}

/* Builder bar - inputs nunca cortam em mobile */
@media (max-width: 480px) {
  .builder-bar input,
  .builder-bar select {
    font-size: 16px !important; /* Evita zoom no iOS */
    min-height: 44px !important;
  }
}

/* Inputs do funil - mesma proteção iOS */
@media (max-width: 480px) {
  .funil-step input[type="text"],
  .funil-step input[type="email"],
  .funil-step input[type="tel"],
  .funil-step input[type="date"],
  .funil-step input[type="time"],
  .funil-step input[type="number"],
  .funil-step textarea,
  .funil-step select {
    font-size: 16px !important;
  }
}