/* Resort108 BBB V167: clean header/footer, synced to Landing Builder primary color. */
:root { --r108-bar-primary: #2563a6; }

.topbar {
  border-top: 4px solid var(--r108-bar-primary) !important;
  border-bottom: 1px solid #e3eaf2 !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .07) !important;
  color: #172033 !important;
  backdrop-filter: blur(16px) saturate(145%);
}
.topbar .nav { min-height: 70px; padding-top: 10px; padding-bottom: 10px; }
.topbar .brand { color: #172033 !important; }
.topbar .brand-mark {
  border-radius: 14px !important;
  background: var(--r108-bar-primary) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--r108-bar-primary) 25%, transparent) !important;
  color: #fff !important;
}
.topbar .brand-text strong { color: #172033 !important; font-weight: 800 !important; }
.topbar .brand-text span { color: #728096 !important; font-weight: 500 !important; }
.topbar .menu { gap: 4px !important; }
.topbar .menu a {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #4f5e73 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.2;
  padding: 9px 11px !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.topbar .menu a:hover,
.topbar .menu a.active {
  border-color: color-mix(in srgb, var(--r108-bar-primary) 20%, #fff) !important;
  background: color-mix(in srgb, var(--r108-bar-primary) 9%, #fff) !important;
  color: var(--r108-bar-primary) !important;
  transform: translateY(-1px);
}
.topbar .nav-actions .btn {
  min-height: 42px;
  border: 1px solid var(--r108-bar-primary) !important;
  border-radius: 12px !important;
  background: var(--r108-bar-primary) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--r108-bar-primary) 23%, transparent) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  padding: 10px 16px !important;
}
.topbar .nav-actions .btn.ghost {
  background: #fff !important;
  box-shadow: none !important;
  color: var(--r108-bar-primary) !important;
}
.topbar .nav-actions .btn:hover { filter: brightness(.96); transform: translateY(-1px); }

.site-footer {
  min-height: 82px;
  border: 1px solid #dde5ee !important;
  border-top: 3px solid var(--r108-bar-primary) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
  color: #172033 !important;
  padding: 18px 20px !important;
}
.site-footer strong { color: #172033 !important; font-size: 16px !important; font-weight: 800 !important; }
.site-footer span { color: #77859a !important; font-size: 12px !important; font-weight: 500 !important; }
.site-footer .footer-links { align-items: center; gap: 8px !important; }
.site-footer .footer-links a {
  border: 1px solid #dbe3ec !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: 0 3px 9px rgba(15, 23, 42, .04);
  color: #344256 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  padding: 10px 13px !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.site-footer .footer-links a:hover {
  border-color: color-mix(in srgb, var(--r108-bar-primary) 28%, #fff) !important;
  background: color-mix(in srgb, var(--r108-bar-primary) 7%, #fff) !important;
  color: var(--r108-bar-primary) !important;
  transform: translateY(-1px);
}
.site-footer .footer-links a.login-link {
  border-color: color-mix(in srgb, var(--r108-bar-primary) 22%, #fff) !important;
  background: color-mix(in srgb, var(--r108-bar-primary) 9%, #fff) !important;
  color: var(--r108-bar-primary) !important;
}

@media (max-width: 900px) {
  .topbar .nav { min-height: 62px; }
  .topbar .menu { scrollbar-width: none; }
  .topbar .menu::-webkit-scrollbar { display: none; }
}
@media (max-width: 700px) {
  .topbar { border-top-width: 3px !important; }
  .topbar .nav { padding: 8px 12px !important; }
  .topbar .brand-mark { width: 40px; height: 40px; }
  .topbar .brand-text strong { font-size: 15px !important; }
  .topbar .brand-text span { display: none !important; }
  .topbar .menu a { font-size: 13px !important; padding: 8px 10px !important; }
  .topbar .nav-actions .btn { min-height: 38px; padding: 8px 12px !important; }
  .site-footer { align-items: flex-start; border-radius: 18px !important; padding: 16px !important; }
  .site-footer > div:first-child { width: 100%; }
  .site-footer .footer-links { width: 100%; }
  .site-footer .footer-links a { flex: 1 1 auto; text-align: center; }
}