:root{
  --app-primary: var(--primary-color, #4a6ee0);
  --app-primary-light: var(--primary-light, #6a8aec);
  --app-secondary: var(--secondary-color, #8a6ee0);
  --app-dark: var(--dark-color, #2d3748);
  --app-gray-light: var(--gray-light, #f7fafc);
  --app-gray-medium: var(--gray-medium, #e2e8f0);
}

/* ===== Navbar (global) ===== */
.navbar.bs-navbar{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 16px 0;
  transition: all .25s ease;
}

.navbar.bs-navbar.scrolled{
  padding: 12px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
}

.navbar.bs-navbar .navbar-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.navbar.bs-navbar .navbar-brand:before{
  content: none !important;
}

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

.navbar.bs-navbar .navbar-nav{
  align-items: center;
}

.navbar.bs-navbar .navbar-nav .nav-link{
  color: var(--app-dark);
  font-weight: 600;
  margin: 0 12px;
  transition: all .2s ease;
  position: relative;
  padding: 8px 0;
  text-decoration: none !important;
  letter-spacing: .2px;
}

.navbar.bs-navbar .navbar-nav .nav-link:after{
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--app-primary);
  transition: width .25s ease;
}

.navbar.bs-navbar .navbar-nav .nav-link:hover,
.navbar.bs-navbar .navbar-nav .nav-link.active{
  color: var(--app-primary);
}

.navbar.bs-navbar .navbar-nav .nav-link:hover:after,
.navbar.bs-navbar .navbar-nav .nav-link.active:after{
  width: 100%;
}

/* Nav primary button (scoped to navbar) */
.navbar.bs-navbar .btn.btn-primary,
.navbar.bs-navbar .btn.bs-nav-btn{
  background: linear-gradient(to right, var(--app-primary), var(--app-secondary));
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  transition: all .2s ease;
  box-shadow: 0 4px 15px rgba(74, 110, 224, 0.25);
}

.navbar.bs-navbar .btn.btn-primary:hover,
.navbar.bs-navbar .btn.bs-nav-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 110, 224, 0.35);
}

/* Navbar toggler focus */
.navbar.bs-navbar .navbar-toggler{ border: none; }
.navbar.bs-navbar .navbar-toggler:focus{
  box-shadow: 0 0 0 0.25rem rgba(74, 110, 224, 0.25);
}

/* ===== Language switcher ===== */
.navbar.bs-navbar .lang-toggle{
  position: relative;
  margin-right: 10px;
}

.navbar.bs-navbar .lang-btn{
  background: white;
  border: 1px solid var(--app-gray-medium);
  color: var(--app-dark);
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.navbar.bs-navbar .lang-btn:hover{
  background-color: var(--app-gray-light);
  border-color: rgba(74,110,224,.45);
  box-shadow: 0 4px 8px rgba(74, 110, 224, 0.10);
}

.navbar.bs-navbar .lang-options{
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid var(--app-gray-medium);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  display: none;
  z-index: 1000;
  min-width: 140px;
  overflow: hidden;
  margin-top: 8px;
}

.navbar.bs-navbar .lang-options.show{
  display: block;
  animation: bsFadeIn .2s ease;
}

@keyframes bsFadeIn{
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.navbar.bs-navbar .lang-option{
  padding: 12px 16px;
  cursor: pointer;
  transition: background .15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--app-gray-light);
}

.navbar.bs-navbar .lang-option:last-child{ border-bottom: none; }

.navbar.bs-navbar .lang-option:hover{ background-color: var(--app-gray-light); }

.navbar.bs-navbar .lang-option.active{
  background-color: rgba(74, 110, 224, 0.06);
  color: var(--app-primary);
  font-weight: 700;
}

.navbar.bs-navbar .lang-option .fa-check{
  width: 16px;
  visibility: hidden;
}

.navbar.bs-navbar .lang-option.active .fa-check{ visibility: visible; }

/* ===== Responsive tweaks ===== */
@media (max-width: 991.98px){
  .navbar.bs-navbar .navbar-nav{ align-items: stretch; }
  .navbar.bs-navbar .navbar-nav .nav-link{ margin: 6px 0; }
  .navbar.bs-navbar .lang-toggle{ margin: 10px 0; }
  .navbar.bs-navbar .btn.bs-nav-btn{ width: 100%; text-align:center; }
}