/* navbar.css - CrushZone theme (blue + white) */
:root{
  --cz-blue: #0d6efd;
  --cz-blue-dark: #0b5ed7;
  --cz-white: #ffffff;
  --glass: rgba(255,255,255,0.85);
}

/* static/css/site.css */
.cz-navbar .nav-link { display: flex; align-items: center; gap: .4rem; }
.cz-navbar .navbar-brand img { height: 36px; }
#notif-badge { font-size: 0.75rem; line-height: 1; padding: 0.25rem 0.5rem; }


.navbar-glass{
  background: linear-gradient(135deg, rgba(13,110,253,0.95), rgba(11,94,215,0.95));
  color: var(--cz-white);
  padding: 0.6rem 0;
  transition: all 250ms ease;
  box-shadow: 0 6px 18px rgba(11,94,215,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* shrink effect on scroll */
.navbar-glass.shrink{
  padding: 0.25rem 0;
  box-shadow: 0 10px 30px rgba(11,94,215,0.18);
  transform: translateY(-2px);
}

/* brand */
.navbar-glass .brand-badge{
  width: 40px; height:40px; border-radius:10px;
  background: linear-gradient(45deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
  display:inline-flex; align-items:center; justify-content:center;
  color: white; font-size:18px;
  transition: transform .25s ease;
}
.navbar-glass .brand-badge:hover{ transform: rotate(-10deg) scale(1.03); }

.navbar-glass .brand-text{ font-weight:700; color:#fff; letter-spacing:0.4px; font-size:1.1rem; }

/* link styles */
.navbar-glass .nav-link{ color: rgba(255,255,255,0.92); position: relative; transition: color .18s ease; }
.navbar-glass .nav-link:hover{ color: #e9f2ff; }
.navbar-glass .nav-link.active{ font-weight:600; }

/* animated underline */
.navbar-glass .nav-link::after{
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.2));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.2,.9,.2,1);
}
.navbar-glass .nav-link:hover::after,
.navbar-glass .nav-link.active::after { transform: scaleX(1); }

/* avatar */
.avatar-sm{ width:36px; height:36px; border-radius:50%; object-fit:cover; border: 2px solid rgba(255,255,255,0.15); }

/* offcanvas customization */
.offcanvas{
  background: linear-gradient(180deg, #fff, #f7fbff);
}
.offcanvas .nav-link{ color: #1a2340; }

/* buttons */
.btn-primary{
  background: linear-gradient(90deg, var(--cz-blue), var(--cz-blue-dark)) !important;
  border: none;
  box-shadow: 0 6px 18px rgba(11,94,215,0.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11,94,215,0.18); }

/* small gradients & sparkle */
.brand-badge-sm{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background: linear-gradient(45deg,#0d6efd,#0b5ed7); color:white; }

/* responsiveness tweaks */
@media (max-width: 991px){
  .navbar-glass .d-none.d-lg-block { display:none !important }
}


/* static/css/site.css (append) */
.btn-location {
  background: linear-gradient(90deg, #0066ff 0%, #0088ff 100%);
  color: #fff;
  border: none;
  padding: 0.45rem 0.9rem;
  font-weight: 600;
  border-radius: 999px; /* pill */
  box-shadow: 0 4px 10px rgba(0, 102, 255, 0.18);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn-location:hover,
.btn-location:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.24);
}
.cz-navbar .nav-link { display: flex; align-items: center; gap: .4rem; }
#notif-badge { font-size: 0.72rem; line-height: 1; padding: 0.22rem 0.5rem; }