/* ================================
   Paleta global e tipografia
   ================================ */
:root{
  --bg-main: #111111;      /* page background */
  --panel-dark: #1F1F1F;   /* inner panel */
  --panel-darker: #2A2A2A; /* slightly lighter dark for contrast */
  --text-main: #FFFFFF;    /* primary text */
  --text-sub: #D9D9D9;     /* subtitle / secondary text */
  --accent: #F2C335;       /* metallic yellow accent */
  --muted: #9A9A9A;
  --glass: rgba(255,255,255,0.03);
}

html, body {
  height: 100%;
  background: var(--bg-main) !important;
  color: var(--text-main);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Tailwind/bg classes usadas inline */
.bg-white, .bg-white.dark\:bg-gray-800, .bg-red-50, .bg-gray-700 {
  background: transparent !important;
}

/* ================================
   Painéis, cards e seções
   ================================ */
.section-panel,
.bg-white, .dark\:bg-gray-800, .info-line, .rounded-lg,
.hero-section > .max-w-7xl, .map-container a {
  background: linear-gradient(180deg, var(--panel-dark), var(--panel-darker)) !important;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  color: var(--text-main);
}

/* ================================
   Navegação e logo
   ================================ */
nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}

nav .text-2xl {
  color: var(--accent) !important;
}

/* ================================
   Títulos e textos
   ================================ */
h1, h2, h3, h4 {
  color: var(--text-main) !important;
  font-weight: 700;
  letter-spacing: 0.2px;
}

p, li, address, .text-gray-700, .text-gray-600, .text-gray-300 {
  color: var(--text-sub) !important;
  line-height: 1.6;
}

/* Subtítulos em cinza mais claro */
.text-gray-900, .text-gray-700, .text-gray-600 {
  color: var(--text-sub) !important;
}

/* ================================
   Botões e elementos de destaque
   ================================ */
button, .glow-button, .inline-flex, .bg-red-600, .bg-green-500 {
  background: linear-gradient(180deg, rgba(242,195,53,0.14), rgba(242,195,53,0.06));
  color: var(--bg-main) !important;
  border: 1px solid rgba(242,195,53,0.18);
  box-shadow: 0 6px 18px rgba(242,195,53,0.06);
  transition: transform .12s ease, box-shadow .12s ease;
}

button:hover, .glow-button:hover, .inline-flex:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(242,195,53,0.12);
}

/* Ícones em cor de destaque */
svg path, svg {
  stroke: var(--accent) !important;
  color: var(--accent) !important;
  fill: var(--accent) !important;
}

/* Links */
a, a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Ensure links inside service cards, panels and image cards are clearly visible in yellow */
#services a,
.bg-white a,
.bg-white.dark\:bg-gray-700 a,
.section-panel a,
.hero-section a,
#image-gallery a,
footer a {
  color: var(--accent) !important;
  text-decoration: none !important;
}

/* Keep action buttons (green/red) text colors intact */
.btn-contact, .btn-testimonials, .bg-green-500, .bg-red-600 {
  color: #ffffff !important;
}

/* ================================
   Cards, galeria e rodapé
   ================================ */
.bg-white.dark\:bg-gray-800.rounded-lg,
.overflow-hidden.rounded-lg.shadow-lg,
.bg-white.dark\:bg-gray-700 {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.03);
}

/* Texto de overlay na galeria de imagens */
#image-gallery .p-4 {
  background: transparent !important;
}

/* Rodapé */
footer {
  background: linear-gradient(180deg, var(--panel-darker), rgba(0,0,0,0.6)) !important;
  color: var(--text-sub);
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* Logos de marca */
.brand-logo {
  filter: grayscale(30%) brightness(0.95);
  opacity: 0.95;
}

/* Logos de parceiros */
.partner-logo {
  filter: none;
  border-radius: 8px;
}

/* Imagem destacada lateral */
#featured-sidebar-image {
  width: 228px;
  height: 228px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 24px rgba(0,0,0,0.65);
  border-radius: 8px;
}

/* ================================
   BANNER / SLIDER SF MOTORS
   ================================ */

/* Wrapper do banner */
.banner-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  min-height: 220px; /* garante altura mínima visível */
}

/* Container do slider (várias imagens lado a lado)
   OBS: sobrescreve o "absolute inset-0 flex" do HTML  */
.slider-container {
  display: flex;
  width: 100%;
  position: relative !important;
  inset: auto !important;
  height: 100%;
}

/* Cada slide (a própria <img>) */
.slider-slide,
.banner-wrapper img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  display: block;
}

/* ================================
   Ajuste da seção hero no mobile
   ================================ */
@media (max-width: 768px) {
  .hero-section {
    min-height: auto !important;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    align-items: flex-start;
  }

  /* imagem lateral menor no mobile */
  #featured-sidebar-image {
    width: 180px;
    height: 180px;
  }
}

/* Destaque no título da hero */
.hero-section h1 {
  text-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* ================================
   Formulários
   ================================ */
input, textarea, select {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  color: var(--text-main) !important;
}

/* Map container overlay */
.map-container a {
  border: 1px solid rgba(255,255,255,0.04);
}

/* ================================
   Utilitários e botões flat
   ================================ */
.muted { color: var(--muted) !important; }

/* Botão vermelho contato */
.btn-contact {
  background: #e11d1d !important; /* solid red */
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  transition: background .12s ease, transform .12s ease;
}
.btn-contact:hover {
  background: #c41414 !important;
  transform: translateY(-1px);
}

/* Botão verde depoimentos */
.btn-testimonials {
  background: #059669 !important; /* solid green (emerald-600) */
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: background .12s ease, transform .12s ease;
}
.btn-testimonials:hover {
  background: #047857 !important;
  transform: translateY(-1px);
}

/* Garantir que sombras globais não afetem estes botões */
.btn-contact, .btn-testimonials {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
}

/* Force these specific CTAs to use black text (override other link styles) */
.btn-contact, .btn-testimonials, .whatsapp-float {
  color: #000000 !important;
  /* keep existing visual styles unchanged */
}
/* Ícones nos títulos dos serviços */
.service-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-title-icon svg {
  width: 22px;
  height: 22px;
}
/* Botão flutuante do WhatsApp */
.whatsapp-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  background: #25d366;
  color: #000000;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.whatsapp-float:hover {
  background: #1eb255;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}

/* Image and team card refinements added for Imagens / Nossa equipe */
.image-card,
.team-card {
  background: #0f1720; /* deep dark for cards */
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 24px rgba(2,6,23,0.6);
  overflow: hidden;
  border-radius: 12px;
}

/* hover interaction shared for both sets of cards */
.image-card:hover,
.team-card:hover,
.image-card:focus,
.team-card:focus {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2,6,23,0.65);
}

/* ensure images inside cards keep proportions */
.image-card img,
.team-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* force fixed height for gallery thumb images */
.image-card img {
  height: 14rem; /* equivalent to h-56 */
}

/* team avatars */
.team-card img {
  width: 6rem;  /* w-24 */
  height: 6rem;
  object-fit: cover;
  border-radius: 9999px;
  display: block;
}

/* caption typography */
.image-card p,
.team-card p {
  color: #e6edf3;
  line-height: 1.4;
}

/* small screens spacing tweaks */
@media (max-width: 640px) {
  .image-card img { height: 12.5rem; } /* slightly smaller on small screens */
  .team-card { padding: 1.25rem; }
}

/* ================================
   Service cards visual polish (SF Motors)
   Applied only to the services section; keeps existing content & links.
   ================================ */

.service-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px; /* rounded-xl */
  padding: 1.5rem; /* p-6 */
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Hover elevation on desktop only */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 46px rgba(0,0,0,0.66);
  }
}

/* Title styling */
.service-title {
  font-size: 1.125rem; /* text-xl */
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.75rem;
  line-height: 1.15;
}

/* Description text */
.service-desc {
  color: #d1d5db; /* text-gray-300 equivalent */
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 1rem;
}

/* Actions container */
.service-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Standardized buttons: primary (solid) and ghost (neutral) */
.service-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  color: #ffffff;
}

/* Primary (red) CTA */
.service-btn.primary {
  background: linear-gradient(180deg,#e11d1d,#c91a1a); /* matches SF brand red */
  border: 1px solid rgba(0,0,0,0.15);
  color: #fff;
}

/* Ghost / neutral button */
.service-btn.ghost {
  background: rgba(255,255,255,0.04);
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,0.04);
}

/* Hover states */
@media (hover: hover) and (pointer: fine) {
  .service-btn.primary:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  }
  .service-btn.ghost:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.42);
  }
}

/* Ensure consistent spacing on small screens */
@media (max-width: 640px) {
  .service-card { padding: 1.25rem; min-height: auto; }
  .service-actions { justify-content: flex-start; }
}

/* Keep buttons' link colors intact for accessibility */
.service-btn, .service-btn * { color: inherit !important; }