/* ===========================
   NAVBAR
=========================== */
.navbar {
  background: var(--rest-card, #fff);
  border-bottom: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
  position: relative;
  overflow: visible;
  z-index: 50;

  --navbar-border-h: 8px;
  --logo-size: 190px;
  --logo-ring: 3px;
  --logo-float: 46px;
}

/* container central com respiro à direita para o botão de reserva */
.container-navbar {
  width: 100%;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 92px;
  position: relative;
  padding-right: 108px;
}

/* ===========================
   BORDA INFERIOR COLORIDA
=========================== */
.headernav-bar {
  position: absolute;
  margin-bottom: -5px;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--navbar-border-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 55;
}

.headernav-bar .bar {
  height: 100%;
}

.headernav-bar .red1 {
  background: var(--rest-principal, #6b0400);
}

.headernav-bar .red2 {
  background: var(--rest-primaria, #D84315);
}

.headernav-bar .red3 {
  background: var(--rest-hover, #FF7043);
}

.headernav-bar .red4 {
  background: var(--rest-erro, #E53935);
}

/* ===========================
   BRAND + LOGO “SAINDO”
=========================== */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 16px;
  text-decoration: none;
  position: relative;
  transition: transform .15s ease, box-shadow .2s ease;
}

.navbar-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--logo-float) - 8px);
  transform: translateX(-50%);
  width: calc(var(--logo-size) * 1.15);
  height: calc(var(--logo-size) * 0.55);
  background: radial-gradient(ellipse at center,
      color-mix(in oklab, var(--rest-principal, #6b0400) 18%, transparent) 0%,
      transparent 70%);
  filter: blur(2px);
  z-index: 59;
  pointer-events: none;
}

.header-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  display: block;
  margin-left: -50px !important;
  margin-top: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--logo-ring) solid transparent;
  background:
    linear-gradient(var(--rest-card, #fff), var(--rest-card, #fff)) padding-box,
    linear-gradient(90deg,
      var(--rest-principal, #6b0400),
      var(--rest-primaria, #D84315)) border-box;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .14),
    0 2px 0 rgba(0, 0, 0, .04) inset;
  filter: saturate(1.02);
  position: absolute;
  z-index: 60;
}

/* Placeholder com mesmas dimensões da logo */
.header-placeholder-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-destaque, Poppins, sans-serif);
  font-weight: 700;
  color: var(--rest-texto, #3E2723);

  border: var(--logo-ring) solid transparent;
  background:
    linear-gradient(var(--rest-card, #fff), var(--rest-card, #fff)) padding-box,
    linear-gradient(90deg,
      var(--rest-principal, #6b0400),
      var(--rest-primaria, #D84315)) border-box;

  box-shadow: 0 10px 24px rgba(0, 0, 0, .14), 0 2px 0 rgba(0, 0, 0, .04) inset;
  transform: translateY(var(--logo-float));
  z-index: 60;
}

/* ===========================
   MINI BOTÃO DE RESERVA
=========================== */
.navbar-reserve {
  position: absolute;
  right: 54px;
  top: 22px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 8px 35px;
  border-radius: 16px;
  font-family: var(--font-destaque);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--rest-hover);
  background: var(--rest-branco);
  border: 2px solid var(--rest-hover);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
  transition: transform .3s ease, box-shadow .2s ease, filter .2s ease;
}

.navbar-reserve .bi {
  font-size: 16px;
  line-height: 0;
}

.navbar-reserve:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .14);
  filter: saturate(1.08);
}

.navbar-reserve:active {
  transform: translateY(0);
}

.navbar-reserve:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rest-destaque, #4CAF50) 35%, transparent),
    0 6px 14px rgba(0, 0, 0, .14);
}

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

/* Tablet: logo vai para a ESQUERDA aqui */
@media (max-width: 768px) {
  .navbar {
    --logo-size: 124px;
    --logo-float: 38px;
  }

  .container-navbar {
    justify-content: flex-start; 
    padding-right: 88px;        
  }

  .navbar-brand {
    margin-left: 16px;          
  }

  .header-logo {
    margin-left: 0 !important;   
    margin-top: 64px;           
    left: 0;                
  }

  .header-placeholder-logo {
    transform: translateY(var(--logo-float));
  }

  .navbar-reserve {
    right: 20px;
    top: 16px;
    height: 40px;
    padding: 8px 16px;
  }
}

/* Mobile: ajustes finos + texto do botão opcionalmente oculto */
@media (max-width: 480px) {
  .navbar {
    --logo-size: 120px;
    --logo-float: 34px;
  }

  .container-navbar {
    justify-content: flex-start;
    padding-right: 70px; 
  }

  .navbar-brand {
    margin-left: 12px;
  }

  .header-logo {
    margin-top: 52px;
    left: 0;
  }

  .navbar-reserve {
    height: 34px;
    padding: 8px 10px;
    right: 12px;
    top: 27px;
  }

}