/* ============================================================
   LA CASA LANCHES — CSS Principal
   Efeito de madeira 100% CSS + layout corrigido
   ============================================================ */

/* ---------- Variáveis de cor ---------- */
:root {
  --amarelo:   #ffc107;
  --amarelo2:  #ffcc00;
  --escuro:    #111;
  --card-bg:   #1e1e1e;

  /* Tons de madeira */
  --mad-base:  #a55d25;
  --mad-clara: #8b5a2b;
  --mad-veia1: #ac510b;
  --mad-veia2: #7a4820;
  --mad-veia3: #4a2808;
  --mad-luz:   #c8894a;
}

/* ============================================================
   EFEITO DE MADEIRA — 100% CSS (sem imagem)
   Técnica: múltiplos repeating-linear-gradient sobrepostos
   ============================================================ */
body {
  margin: 0;
  padding-top: 70px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  background-color: var(--mad-base);

  /* Camada 1 — veios principais diagonais */
  background-image:
    /* reflexo/brilho superficial */
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.00) 60%
    ),
    /* veios finos escuros */
    repeating-linear-gradient(
      92deg,
      transparent                0px,
      transparent                18px,
      rgba(74, 40,  8, 0.25)     19px,
      rgba(74, 40,  8, 0.25)     20px,
      transparent                21px,
      transparent                46px,
      rgba(90, 48, 16, 0.18)     47px,
      rgba(90, 48, 16, 0.18)     48px,
      transparent                49px,
      transparent                80px
    ),
    /* veios médios quentes */
    repeating-linear-gradient(
      88deg,
      transparent                0px,
      transparent                30px,
      rgba(200,137, 74, 0.12)    32px,
      rgba(200,137, 74, 0.12)    33px,
      transparent                35px,
      transparent                70px,
      rgba(139, 90, 43, 0.15)    72px,
      rgba(139, 90, 43, 0.15)    74px,
      transparent                76px,
      transparent               120px
    ),
    /* veios largos de profundidade */
    repeating-linear-gradient(
      91deg,
      rgba(107, 63, 30, 1.00)    0px,
      rgba(122, 72, 32, 1.00)   60px,
      rgba( 90, 48, 16, 1.00)  120px,
      rgba(139, 90, 43, 1.00)  180px,
      rgba(107, 63, 30, 1.00)  240px
    );

  background-attachment: fixed;
  background-size: auto;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.navbar-brand img {
  height: 40px;
  width: auto;
}

.nav-item .nav-link {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem;
  transition: color 0.3s ease;
}

.nav-item .nav-link:hover,
.nav-item .nav-link.active {
  color: var(--amarelo);
}

.nav-link i {
  margin-right: 5px;
}

/* ============================================================
   ÍCONES SOCIAIS
   ============================================================ */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.social-icons a {
  color: #fff;
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  background-color: #333;
}

.social-icons a:hover           { transform: scale(1.1); color: #fff; }
.social-icons a.instagram:hover {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-icons a.whatsapp:hover  { background-color: #25d366; }
.social-icons a.facebook:hover  { background-color: #1877f2; }

/* ============================================================
   HERO — logo + imagens de destaque
   ============================================================ */

/* Logo grande abaixo da navbar */
.log {
  display: block;
  max-width: 300px;
  margin: 30px auto 0;
}

/* Wrapper da imagem principal (p1) */
.fre {
  display: flex;
  justify-content: center;
  padding: 20px 20px 0;
}

.fre img {
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}

/* Wrapper das duas imagens secundárias (p2 e p3) */
.pred {
  display: flex;
  justify-content: center;
  padding: 16px 20px 0;
}

.predim {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
}

.predim img {
  width: 48%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* Imagem quadrada lateral (6.jpg) — agora no fluxo normal */
.fam {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.fam img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 14px rgba(0,0,0,0.5);
  object-fit: cover;
}

/* ============================================================
   BANNER / LINK PARA CARDÁPIO
   ============================================================ */
.carr {
  display: block;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: transform 0.2s ease;
  margin: 10px auto;
}

.carr:hover { transform: scale(1.01); }

.imcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.imcard h3 {
  font-size: 1.5rem;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.imcard-images {
  display: flex;
  gap: 16px;
  justify-content: center;
  width: 100%;
}

.imcard img {
  width: 45%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ============================================================
   SEÇÃO MAPA + INFORMAÇÕES
   ============================================================ */
.mapa-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  max-width: 1300px;
  margin: 40px auto;
  justify-content: space-between;
}

.info-section {
  flex: 1 1 280px;
  max-width: 380px;
  background-color: var(--card-bg);
  color: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  text-align: center;
}

.info-section h3 {
  margin-bottom: 20px;
  font-size: 1.3rem;
  color: var(--amarelo2);
}

.info-box {
  margin-bottom: 15px;
}

.info-box h5 {
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--amarelo2);
}

.info-box p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.info-box a {
  color: #fff;
  text-decoration: underline;
  transition: color 0.3s;
}

.info-box a:hover { color: var(--amarelo2); }

/* Mapa */
.map {
  flex: 1 1 400px;
}

.map-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.35);
}

.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   SEÇÃO SOBRE
   ============================================================ */
.sobre-container {
  display: flex;
  justify-content: center;
  padding: 60px 20px;
  background-color: rgba(0,0,0,0.45);
  color: #fff;
}

.sobre {
  max-width: 900px;
  text-align: center;
}

.sobre h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #ffea00;
}

.sobre p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 15px;
}

strong { color: #ffea00; }

/* ============================================================
   FAVORITOS
   ============================================================ */
#favoritos {
  padding: 40px 20px;
  background-color: #222;
  color: #fff;
  text-align: center;
}

#favoritos h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--amarelo);
}

.favoritos-container {
  width: 100%;
  margin: 20px auto;
  padding: 10px;
}

.favoritos-container h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #fff;
}

.favoritos-list {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fav-card {
  background: #111;
  border: 1px solid #333;
  border-radius: 10px;
  width: 160px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  animation: fadeIn 0.4s ease;
}

.fav-card img {
  width: 55px;
  height: 55px;
  border-radius: 8px;
  object-fit: cover;
}

.fav-card .info h4 {
  font-size: 14px;
  color: #fff;
  margin: 0;
}

.fav-card .preco-mini {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: #00c853;
}

.remove-fav-btn {
  position: absolute;
  top: 5px;
  right: 6px;
  background: transparent;
  border: none;
  font-size: 16px;
  color: #ff4444;
  cursor: pointer;
}

.temp-tag {
  position: absolute;
  bottom: 5px;
  right: 6px;
  font-size: 10px;
  color: #fff;
  opacity: 0.7;
}

.favorito-card {
  width: 200px;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(51,51,51,0.65);
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  text-align: center;
}

.favorito-card img  { width: 100%; height: auto; object-fit: cover; }
.favorito-card h3   { margin: 10px 0; font-size: 1.1rem; }

.btn-favorito { position: relative; z-index: 10; pointer-events: auto; }
.produto-card * { pointer-events: auto; }

/* ============================================================
   LOGIN PANEL
   ============================================================ */
.btn-login-toggle {
  position: fixed;
  top: 15px;
  right: 15px;
  background-color: var(--amarelo);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  z-index: 1100;
  transition: background-color 0.3s;
}
.btn-login-toggle:hover { background-color: #e6b800; }

.login-panel {
  position: fixed;
  top: 0; right: 0;
  width: 350px;
  height: 100vh;
  background-color: var(--card-bg);
  box-shadow: -3px 0 15px rgba(0,0,0,0.5);
  padding: 30px 20px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  z-index: 1200;
  overflow-y: auto;
}

.login-panel.hidden { transform: translateX(100%); }
.login-panel.show   { transform: translateX(0);    }

.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.login-header h2 { color: var(--amarelo); margin: 0; font-weight: 700; font-size: 1.8rem; }

.btn-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.login-form label { display: block; margin-bottom: 6px; font-weight: 600; color: #ddd; }

.login-form input[type="email"],
.login-form input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  background-color: #333;
  color: #fff;
  box-sizing: border-box;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
  outline: 2px solid var(--amarelo);
  background-color: #444;
}

.btn-primary {
  background-color: var(--amarelo);
  color: #222;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  margin-bottom: 15px;
  transition: background-color 0.3s;
}
.btn-primary:hover { background-color: #e6b800; }

.btn-google {
  background-color: #db4437;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.btn-google:hover { background-color: #c23321; }

.divider { text-align: center; margin: 15px 0; color: #aaa; font-weight: 600; }
.divider span { background-color: var(--card-bg); padding: 0 10px; }

.login-links { text-align: center; margin-top: 15px; font-size: 0.9rem; }
.login-links a {
  color: var(--amarelo);
  text-decoration: none;
  font-weight: 600;
  margin: 0 6px;
  transition: color 0.3s;
}
.login-links a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background-color: var(--escuro);
  color: #fff;
  padding: 40px 0 20px;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  border-top: 5px solid var(--amarelo);
}

footer h5, footer h6 { color: var(--amarelo); font-weight: bold; margin-bottom: 15px; }
footer p            { font-size: 0.95rem; margin-bottom: 10px; }
footer a            { color: #ddd; text-decoration: none; transition: color 0.3s; }
footer a:hover      { color: var(--amarelo); text-decoration: underline; }
footer ul           { list-style: none; padding-left: 0; }
footer ul li        { margin-bottom: 8px; }
footer i            { margin-right: 6px; vertical-align: middle; }
footer hr           { border-top: 1px solid #444; margin: 20px 0; }

footer .social-icons a {
  color: #fff;
  margin: 0 8px;
  font-size: 1.4rem;
  display: inline-block;
  transition: transform 0.3s;
}
footer .social-icons a:hover { transform: scale(1.2); color: var(--amarelo); }

/* ============================================================
   ANIMAÇÕES
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Tablet */
@media (max-width: 768px) {
  .log {
    max-width: 200px;
    margin: 20px auto 0;
  }

  .fre img     { max-width: 100%; }
  .predim      { gap: 10px; }
  .predim img  { width: 48%; }

  .fam img     { max-width: 260px; }

  .imcard img  { width: 80%; }

  .mapa-container {
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
  }

  .info-section {
    max-width: 100%;
    width: 100%;
  }

  .map { width: 100%; }

  .login-panel { width: 100%; }
}

/* Celular pequeno */
@media (max-width: 480px) {
  .predim {
    flex-direction: column;
    align-items: center;
  }

  .predim img { width: 90%; }

  .imcard img { width: 90%; margin: 8px 0; }

  .imcard-images { flex-direction: column; align-items: center; }

  .log { max-width: 160px; }
}