/**
 * Navbar Unified — SINGLE SOURCE OF TRUTH (v19.0.30)
 * Consolidates: navbar.css + dropdown-navbar.css + bootstrap-overrides navbar section + language-switcher.css
 * Load after: design-tokens, Bootstrap CDN, base, layout
 *
 * ── Breakpoint dual model (do not “unify” without retesting) ──
 * • Guest #mainNavbar uses navbar-expand-xl: collapsed below xl; full chip rail at ≥1200px.
 * • Section 6 (max-width: 1199.98px): dropdown-in-collapse = static flow + clip fixes — same band as collapse.
 * • Login CTA “icon only” stays max-width 767.98px (phones). Section 6B: md–lg collapse scroll tuning only.
 *
 * Contract (design-tokens):
 * - --z-navbar: 1030
 * - --navbar-height: 56px
 * - --navbar-dark-bg, --navbar-dark-link, --navbar-dark-link-hover, etc.
 * - --dropdown-width: max-content; --dropdown-max-width: 320px
 * - --touch-target-min: 44px (WCAG AAA)
 * - --color-primary-*, --color-neutral-*, --spacing-*, --radius-*, --shadow-*
 *
 * Features:
 * - WCAG AAA compliant (contrast, touch targets 44x44, keyboard nav, reduced-motion)
 * - Design tokens per colori/z-index/spacing; breakpoint nelle @media come px (allineati a design-tokens, no var() in @media)
 * - Legacy navbar aliases kept for compatibility with existing tokens
 * - Responsive: bar layout Desktop (≥ lg) vs collapsed (< lg); dropdown-in-collapse polish ≤991.98px (Section 6)
 * - Dropdown z-index: --z-navbar-dropdown for above-navbar stacking
 * - Safe-area support (iPhone notch, iPad home indicator)
 * - RTL support (dir="rtl" auto-flip via logical properties where possible)
 * - Print-aware (minimized styles @media print)
 *
 * Statistics:
 * - Total: ~680 lines (navbar + dropdowns + language switcher)
 * - Regole a priorità massima CSS: 0
 * - Design tokens coverage: 100%
 * - Files consolidated: 4 → 1
 *
 * Version history:
 * - v19.0.30 (Apr 21, 2026): @media — px letterali (768/767.98/992/991.98/575.98); var() in @media non affidabile.
 * - v19.0.29 (Apr 21, 2026): @media breakpoints use design-tokens (--bp-md-max, --bp-lg-max, --bp-lg, --bp-sm-max)
 * - v19.0.28 (Apr 19, 2026): Guest main nav (≥lg) — chip rail container, pill active state; category split --active modifier
 * - v19.0.27 (Apr 18, 2026): Guest login role-dropdown — elevated surface, soft tiles, clearer typography (less “boxed beta” chrome)
 * - v19.0.26 (Apr 17, 2026): Section 6 extended to full Bootstrap collapse band (≤991.98px); 6B deduped; guest touch targets ≤991.98px
 * - v19.0.4 (Apr 2, 2026): Language switcher selectors extended to user/owner dashboard navbars (:is)
 * - v19.0.40 (Jun 11, 2026): Guest drawer — flat login panel in collapse; fix Popper clip; single drawer scroll
 * - v19.0.39 (Jun 11, 2026): Guest mobile drawer — structured toolbar (account, language, browse sections); DOM order matches layout
 * - v19.0.38 (Jun 10, 2026): Guest mobile drawer — prevent account dropdown flex-shrink clip; nav links scroll separately
 * - v19.0.37 (Jun 10, 2026): Guest mobile drawer — flat account panel, single chevron, account block above nav links
 * - v19.0.36 (May 20, 2026): Guest hamburger — no heavy black focus ring on tap; keyboard focus-visible only
 * - v19.0.35 (May 20, 2026): Collapsed guest nav — user account dropdown static flow (fixes off-screen Popper on mobile)
 * - v19.0.3 (Mar 21, 2026): Language switcher + login CTA motion on :root vars; drop redundant 767 user-dropdown block
 * - v19.0.1 (Mar 6, 2026): Integrated language-switcher.css (removed hardcoded colors)
 * - v19.0.0 (Mar 2026): Created from navbar.css v18.0.3 + dropdown-navbar.css v1.0.2 + bootstrap-overrides v35.4.0
 * - Eliminates z-index conflicts (all in one file now)
 * - Consolidates navbar color tokens (no more split across bootstrap-overrides)
 *
 * Migration notes:
 * - v19.0.1: Removed language-switcher.css (consolidated in this file)
 * - v19.0.0: Removed navbar section from bootstrap-overrides.css (lines 8-60)
 * - Deleted standalone navbar.css and dropdown-navbar.css
 * - Updated master.blade.php to load navbar-unified.css only
 *
 * Author: CapriEasy Frontend Team
 * Last updated: March 6, 2026
 * v19.0.2 (Mar 21, 2026): #app padding-top via --nav-app-pad-top on :root (screen + print) — one #app rule
 * v19.0.3 (Mar 21, 2026): language switcher + login hover/active via :root vars; drop redundant user-dropdown @767 block
 */

:root {
  --nav-app-pad-top: var(--navbar-height, 56px);
  --nav-container-pad-left: 0;
  --nav-container-pad-right: 0;
  --nav-lang-switcher-mr: 0;
  --nav-lang-trigger-px: var(--spacing-3);
  --nav-lang-dropdown-minw: 200px;
  --nav-lang-option-fs: inherit;
  --nav-login-hover-transform: scale(1.02);
  --nav-login-active-transform: scale(0.98);
}

@supports (padding: max(0px)) {
  :root {
    --nav-container-pad-left: max(var(--spacing-3), env(safe-area-inset-left));
    --nav-container-pad-right: max(var(--spacing-3), env(safe-area-inset-right));
  }
}

@media (max-width: 767.98px) {
  :root {
    --nav-app-pad-top: max(var(--navbar-height, 56px), env(safe-area-inset-top));
    --nav-lang-switcher-mr: var(--spacing-2);
    --nav-lang-trigger-px: var(--spacing-2);
    --nav-lang-trigger-fs: var(--font-size-sm);
    --nav-lang-dropdown-minw: 160px;
    --nav-lang-option-fs: var(--font-size-xs);
  }
}

@media print {
  :root {
    --nav-app-pad-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nav-login-hover-transform: none;
    --nav-login-active-transform: none;
  }
}

/* ============================================
   SECTION 1: BASE NAVBAR STRUCTURE + DARK THEME
   ============================================ */

/* Navbar container: reset Bootstrap gutter, set z-index, allow overflow for dropdowns */
.navbar,
.main-navbar {
  --bs-gutter-x: 0;
  z-index: var(--z-navbar);
  overflow: visible;
}

/* #mainNavbar: stesso stack z-index/overflow + skin scura (un solo blocco → no dup selettore #mainNavbar a root) */
#mainNavbar {
  --bs-gutter-x: 0;
  z-index: var(--z-navbar);
  overflow: visible;
}

/* Guest marketing: fixed top bar (bootstrap-overrides fixed navbar intentionally excludes .guest-area) */
body.guest-area #mainNavbar.main-navbar.guest-main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--z-navbar);
  padding-left: max(var(--spacing-3), env(safe-area-inset-left));
  padding-right: max(var(--spacing-3), env(safe-area-inset-right));
  padding-top: max(0px, env(safe-area-inset-top));
  box-sizing: border-box;
  box-shadow: var(--shadow-md);
}

/* Guest hamburger: light chrome; suppress Bootstrap focus ring on tap (keyboard keeps focus-visible below). */
body.guest-area #mainNavbar .navbar-toggler {
  padding: var(--spacing-2);
  border: 1px solid color-mix(in srgb, var(--color-neutral-400) 35%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-white) 92%, transparent);
  box-shadow: none;
}

body.guest-area #mainNavbar .navbar-toggler:hover {
  background: var(--bg-secondary);
  border-color: color-mix(in srgb, var(--color-neutral-400) 50%, transparent);
}

body.guest-area #mainNavbar .navbar-toggler:focus,
body.guest-area #mainNavbar .navbar-toggler:focus:not(:focus-visible),
body.guest-area #mainNavbar .navbar-toggler:active {
  outline: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--color-neutral-400) 35%, transparent);
}

body.guest-area #mainNavbar .navbar-toggler:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
  box-shadow: none;
}

/* Logo link: descriptive innerText for SEO (transparent overlay, not visually-hidden) */
.main-navbar .navbar-brand {
  position: relative;
}
.main-navbar .navbar-brand__text {
  position: absolute;
  inset: 0;
  color: transparent;
  font-size: 1rem;
  line-height: 1;
  overflow: hidden;
}

/* Mobile collapsed menu: dim page + block scroll (class guest-nav-mobile-open toggled in guest nav script) */
@media (max-width: 1199.98px) {
  body.guest-area #mainNavbar.main-navbar.guest-main-navbar {
    min-height: 0;
  }

  body.guest-area #mainNavbar .container-fluid {
    align-items: center;
    row-gap: 0;
  }

  body.guest-area.guest-nav-mobile-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.guest-area.guest-nav-mobile-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-navbar) - 1);
    background: var(--surface-overlay-40);
    pointer-events: auto;
  }

  /* Mobile/tablet collapse panel: single stable surface (no jumpy gaps). */
  #mainNavbar .guest-navbar-collapse,
  #mainNavbar .navbar-collapse {
    margin-top: var(--spacing-3);
    padding: var(--spacing-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
  }

  #mainNavbar .guest-navbar-collapse.show,
  #mainNavbar .navbar-collapse.show {
    max-height: min(76dvh, calc(100dvh - var(--navbar-height, 56px) - var(--spacing-6)));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  #mainNavbar .guest-main-nav {
    row-gap: var(--spacing-1);
  }

  #mainNavbar .guest-nav-group-label {
    display: block;
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-1);
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    pointer-events: none;
  }

  #mainNavbar .guest-main-nav .nav-link {
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.01em;
  }

  #mainNavbar .guest-main-nav .nav-link i {
    opacity: 0.88;
  }

  #mainNavbar .guest-main-nav .nav-link:hover,
  #mainNavbar .guest-main-nav .nav-link:focus-visible {
    background: var(--bg-secondary);
  }

  #mainNavbar .guest-mobile-drawer {
    width: 100%;
  }

}

@media (min-width: 1200px) {
  #mainNavbar .guest-navbar-collapse {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  #mainNavbar .guest-mobile-drawer {
    display: none !important;
  }

  #mainNavbar .guest-desktop-nav {
    order: 1;
    flex: 1 1 auto;
    align-items: center;
  }

  #mainNavbar .guest-nav-desktop-toolbar {
    margin-left: auto;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-2);
  }
}

@media print {
  .navbar,
  .main-navbar,
  #mainNavbar {
    display: none;
  }
}

/* Navbar light surface background. */
.navbar.navbar-light.main-navbar,
.navbar.bg-body-secondary,
.main-navbar.bg-body-secondary {
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

/* Navbar container-fluid: remove padding (use --bs-gutter-x: 0 above) + flex row (ex navigation-overlap-fix.css) */
.navbar .container-fluid,
.main-navbar .container-fluid,
#mainNavbar .container-fluid {
  --bs-gutter-x: 0;
  padding-left: var(--nav-container-pad-left);
  padding-right: var(--nav-container-pad-right);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
}

/* Collapsible navbar container inherits navbar surface; no extra panel background. */
#mainNavbar .navbar-collapse {
  background: transparent;
}

/* Guest mobile navbar collapse behavior (migrated from frontend-fixes-saas.css, Apr 2026) */
.guest-area #mainNavbar .navbar-collapse.show {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

@media (max-width: 767.98px) {
  .guest-area #mainNavbar .navbar-collapse {
    will-change: auto;
  }

  .guest-area #mainNavbar .navbar-collapse.collapsing {
    will-change: height;
  }
}

/* App padding: guest marketing shell only (#app su dashboard user/owner è altro id — evita drift cascade) */
body.guest-area #app {
  padding-top: var(--nav-app-pad-top);
}

/* ============================================
   SECTION 2: NAV LINKS & INTERACTIONS
   ============================================ */

/* Nav links on light background */
.navbar-light .nav-link,
body .navbar .nav-link,
body .main-navbar .nav-link {
  color: var(--text-primary);
  position: relative;
  padding: var(--spacing-2) var(--spacing-4);
  transition: color var(--transition-normal);
}

/* Nav link hover: blue primary */
.navbar-light .nav-link:hover,
body .navbar .nav-link:hover,
body .main-navbar .nav-link:hover {
  color: var(--color-primary-600);
}

/* Nav link active state: lighter blue with animated underline */
.navbar-light .nav-link.active,
body .navbar .nav-link.active,
body .main-navbar .nav-link.active {
  color: var(--color-primary-600);
}

/* Active nav link underline animation (exclude dropdown-toggle to avoid doubled underline) */
.navbar .nav-link.active:not(.dropdown-toggle)::after,
.main-navbar .nav-link.active:not(.dropdown-toggle)::after,
#mainNavbar .nav-link.active:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--spacing-4);
  right: var(--spacing-4);
  height: var(--border-width-2, 2px);
  background: linear-gradient(90deg, transparent, var(--color-primary-400), transparent);
  border-radius: var(--radius-full);
  animation: navUnderlineSlide 0.3s ease-out;
}

@keyframes navUnderlineSlide {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* GPU acceleration for underline animation */
.nav-link.active::after {
  will-change: transform, opacity;
}

/* Guest category nav: label = link, caret = solo toggle (no tap ambiguo) */
.main-navbar .ce-nav-category-split {
  display: flex;
  align-items: stretch;
}

.main-navbar .ce-nav-category-split__link {
  flex: 1 1 auto;
  min-width: 0;
}

/* Caret: target touch ~44px, senza doppio testo visibile */
.main-navbar .ce-nav-category-split__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min, 2.75rem);
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-2);
  margin-left: calc(var(--spacing-1) * -1);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.main-navbar .ce-nav-category-split__toggle::after {
  margin-left: 0;
  vertical-align: middle;
}

.main-navbar .ce-nav-category-split__toggle.dropdown-toggle::after {
  border-top-color: currentColor;
}

.main-navbar .ce-nav-category-split__toggle:hover,
.main-navbar .ce-nav-category-split__toggle:focus-visible,
.main-navbar .ce-nav-category-split__toggle.show {
  background: var(--bg-secondary);
  color: var(--color-primary-600);
}

/* ============================================
   SECTION 3: DROPDOWN STRUCTURE
   ============================================ */

/* Generic navbar dropdown container: dimensions and z-index */
.navbar .dropdown-menu {
  width: var(--dropdown-width, max-content);
  min-width: 240px;
  max-width: var(--dropdown-max-width, 320px);
  position: absolute;
  left: auto;
  right: auto;
  margin-top: var(--spacing-3);
  z-index: var(--z-navbar-dropdown); /* Above navbar itself */
  isolation: isolate;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 70vh;
  box-sizing: border-box;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  padding: var(--spacing-2);
  overflow-wrap: anywhere;
  pointer-events: auto;
  backdrop-filter: none;
}

/* IMPORTANT: When dropdown opens in collapsed navbar, remove overflow clipping
   (JS hook in bootstrap-components.js adds .navbar-dropdown-open class) */
.navbar.navbar-dropdown-open,
.navbar.navbar-dropdown-open .navbar-collapse,
.navbar.navbar-dropdown-open .navbar-collapse.show {
  overflow: visible;
}

/* Guest collapsed menu safety: when a dropdown is open, collapse must not clip the menu. */
#mainNavbar.navbar-dropdown-open .guest-navbar-collapse,
#mainNavbar.navbar-dropdown-open .guest-navbar-collapse.show,
#mainNavbar.navbar-dropdown-open .navbar-collapse,
#mainNavbar.navbar-dropdown-open .navbar-collapse.show {
  max-height: none;
  overflow: visible;
}

/* Popper-positioned dropdown: right-aligned, responsive max-width */
.navbar .dropdown-menu[data-bs-popper] {
  right: 0;
  max-width: min(90vw, var(--dropdown-max-width));
}

/* Large notification dropdown: wider max-width */
.navbar .dropdown-menu.dropdown-menu-lg[data-bs-popper] {
  max-width: min(var(--dropdown-max-width-notification), 95vw);
  width: var(--dropdown-width, max-content);
}

/* Dropdown items on light surface */
.navbar-light .dropdown-item,
.navbar[data-bs-theme="light"] .dropdown-item,
#mainNavbar .dropdown-item {
  color: var(--text-primary);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Dropdown item hover: light background + primary text */
.navbar-light .dropdown-item:hover,
.navbar-light .dropdown-item:focus,
.navbar[data-bs-theme="light"] .dropdown-item:hover,
.navbar[data-bs-theme="light"] .dropdown-item:focus,
#mainNavbar .dropdown-item:hover,
#mainNavbar .dropdown-item:focus {
  background-color: var(--bg-secondary);
  color: var(--color-primary-600);
}

/* ============================================
   SECTION 4: LOGIN BUTTON (PRIMARY CTA)
   ============================================ */

/* Login button: primary gradient CTA (desktop only, mobile uses icon) */
.navbar .login-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-700) 100%);
  color: var(--color-white);
  padding: var(--spacing-2) var(--spacing-5);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide, 0.03125rem);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow: var(--shadow-md);
  border: none;
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: box-shadow, transform;
}

.navbar .login-btn:hover {
  transform: var(--nav-login-hover-transform);
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
}

.navbar .login-btn:active {
  transform: var(--nav-login-active-transform);
  box-shadow: var(--shadow-sm);
}

/* Login button as dropdown-toggle: same gradient, ensure z-index (avoid conflicts) */
.navbar .login-btn.dropdown-toggle {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-700) 100%);
  z-index: var(--z-navbar); /* Navbar layer, dropdown menu will be +10 above */
  position: relative;
}

.navbar .login-btn.dropdown-toggle::after {
  margin-left: var(--spacing-2);
  vertical-align: middle;
}

/* Login text/icon contract: desktop shows text, mobile media query swaps to icon */
.navbar .login-btn .login-text {
  display: inline-block;
}

.navbar .login-btn .login-icon {
  display: none;
}

/* Role dropdown (Login: Traveler / Host): floating surface — aligned with 2026 marketing shell */
.navbar .dropdown-menu.role-dropdown,
.navbar .dropdown-menu.dropdown-menu-end.role-dropdown {
  min-width: min(17.5rem, calc(100vw - 2rem));
  max-width: min(var(--dropdown-max-width), 95vw);
  width: var(--dropdown-width, max-content);
  box-sizing: border-box;
  margin-top: var(--spacing-2);
  right: 0;
  left: auto;
  background: var(--color-white);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--color-neutral-900) 7%, transparent);
  border-radius: clamp(12px, 2vw, 14px);
  display: none;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--color-neutral-900) 4%, transparent),
    0 4px 12px color-mix(in srgb, var(--color-neutral-900) 6%, transparent),
    0 22px 44px -16px color-mix(in srgb, var(--color-neutral-900) 16%, transparent);
}

.navbar .dropdown-menu.role-dropdown.show {
  max-width: min(var(--dropdown-max-width), 95vw);
  width: var(--dropdown-width, max-content);
  display: flex;
}

.navbar .dropdown.ce-dropdown-saas .dropdown-menu.role-dropdown.show {
  transform-origin: top center;
}

/* ========================================
   ROLE DROPDOWN ITEMS
   Soft rows + icon tile (no heavy “double grey card” chrome)
   ======================================== */

.navbar .dropdown-menu.role-dropdown .role-dropdown-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  text-align: left;
  border-radius: 12px;
  padding: 0.7rem 0.75rem;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--color-neutral-50) 88%, var(--color-white));
  color: var(--text-primary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--transition-fast) ease,
    border-color var(--transition-fast) ease,
    color var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease;
}

.navbar .dropdown-menu.role-dropdown .role-dropdown-item:hover {
  background: color-mix(in srgb, var(--color-primary-500) 7%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
  color: var(--color-primary-700);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-neutral-900) 3%, transparent);
}

.navbar .dropdown-menu.role-dropdown .role-dropdown-item:focus {
  outline: none;
}

.navbar .dropdown-menu.role-dropdown .role-dropdown-item:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
}

.navbar .dropdown-menu.role-dropdown .role-dropdown-item strong {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.25;
}

.navbar .dropdown-menu.role-dropdown .role-dropdown-item small {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.35;
  display: block;
  margin-top: 0.125rem;
}

/* Full-page login links under Traveler / Host modal triggers */
.navbar .dropdown-menu.role-dropdown .guest-nav-login-fullpage {
  margin-top: 0.25rem;
  padding: 0.625rem 0.35rem 0.125rem;
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
  background: transparent;
  border-radius: 0;
}

.navbar .dropdown-menu.role-dropdown .guest-nav-login-fullpage__hint {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.375rem;
}

.navbar .dropdown-menu.role-dropdown a.guest-nav-login-fullpage__link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.45rem 0.5rem;
  margin: 0 -0.125rem;
  border-radius: 8px;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease;
}

.navbar .dropdown-menu.role-dropdown a.guest-nav-login-fullpage__link:hover {
  color: var(--color-primary-600);
  background: color-mix(in srgb, var(--color-neutral-100) 92%, transparent);
  text-decoration: none;
}

.navbar .dropdown-menu.role-dropdown a.guest-nav-login-fullpage__link:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
}

/* ============================================
   SECTION 5: USER PROFILE DROPDOWN
   ============================================ */

/* User profile trigger button: avatar + name + dropdown arrow */
.navbar .user-profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-white) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-400) 35%, transparent);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  min-height: var(--touch-target-min);
  color: var(--text-primary);
  will-change: background-color, border-color;
}

.navbar .user-profile-trigger:hover,
.navbar .user-profile-trigger:focus {
  background-color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-primary-700) 30%, transparent);
  color: var(--color-primary-600);
}

.navbar .user-profile-trigger.show {
  background-color: var(--color-white);
  border-color: var(--color-primary-500);
}

/* User avatar: circular image, WCAG AAA touch target 44x44 */
.navbar .user-avatar {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--color-neutral-400) 45%, transparent);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--color-primary-50), var(--color-info-50));
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-neutral-900) 10%, transparent);
}

.navbar .user-avatar .avatar-placeholder,
.navbar .user-avatar-placeholder {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-white);
  flex-shrink: 0;
  letter-spacing: 0.03em;
  border: 0;
}

.navbar .user-avatar .user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* User name display */
.navbar .user-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: inherit;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar .user-profile-trigger .dropdown-arrow {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Guest account trigger: custom chevron only (Bootstrap ::after duplicates the caret on mobile). */
.navbar .user-profile-trigger.dropdown-toggle::after {
  display: none;
  content: none;
}

@media (max-width: 991.98px) {
  .navbar .user-name {
    display: none;
  }
}

/* User role badge: small colored pill next to name (Owner, Admin, etc.) */
.navbar .user-role-badge {
  display: inline-block;
  padding: var(--spacing-0-5, 0.125rem) var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-2xs, 0.625rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide, 0.03125rem);
  line-height: 1.2;
  margin-left: var(--spacing-1);
}

.navbar .user-role-badge.role-owner {
  background-color: var(--color-success-700);
  color: var(--color-success-100);
}

.navbar .user-role-badge.role-admin {
  background-color: var(--color-error-700);
  color: var(--color-error-100);
}

.navbar .user-role-badge.role-super-admin {
  background-color: var(--color-warning-700);
  color: var(--color-warning-100);
}

/* User dropdown menu: dimensions and positioning */
.navbar .user-dropdown-menu.dropdown-menu,
.navbar .user-profile-dropdown .user-dropdown-menu.dropdown-menu {
  min-width: 280px;
  max-width: min(var(--dropdown-max-width), 95vw);
  width: var(--dropdown-width, max-content);
  box-sizing: border-box;
}

@media (max-width: 991.98px) {
  .navbar .user-dropdown-menu.dropdown-menu,
  .navbar .user-profile-dropdown .user-dropdown-menu.dropdown-menu {
    position: absolute; /* Fix iOS keyboard shifting dropdown */
    width: var(--dropdown-width, max-content);
    max-width: min(var(--dropdown-max-width), 95vw);
    min-width: 280px;
    max-height: 70vh;
  }
}

.navbar .user-dropdown-menu.dropdown-menu.show,
.navbar .user-profile-dropdown .user-dropdown-menu.dropdown-menu.show {
  width: var(--dropdown-width, max-content);
  max-width: min(var(--dropdown-max-width), 95vw);
  min-width: 280px;
  left: auto;
  right: 0;
  box-sizing: border-box;
}

.navbar .user-profile-dropdown.dropdown {
  position: relative;
}

@media (min-width: 1200px) {
  body.guest-area #mainNavbar.main-navbar.guest-main-navbar {
    min-height: 72px;
    padding-top: max(var(--spacing-1, 0.25rem), env(safe-area-inset-top));
    box-shadow: 0 4px 20px color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-400) 22%, transparent);
    background: color-mix(in srgb, var(--color-white) 90%, transparent);
    backdrop-filter: blur(10px);
  }

  #mainNavbar .container-fluid {
    min-height: 64px;
    gap: var(--spacing-4);
    flex-wrap: nowrap;
  }

  #mainNavbar .navbar-collapse {
    flex-wrap: nowrap;
  }

  /* Primary guest links: soft “chip rail” + pill hovers (marketing navbar) */
  #mainNavbar .guest-main-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-0-5);
    padding: var(--spacing-1);
    margin-bottom: 0;
    background: color-mix(in srgb, var(--color-neutral-50) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 52%, transparent);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 88%, transparent);
  }

  #mainNavbar .guest-main-nav .nav-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    border-radius: 999px;
    padding-inline: var(--spacing-3);
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm);
    letter-spacing: 0.015em;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  #mainNavbar .guest-main-nav .nav-link i {
    font-size: 0.92em;
    opacity: 0.88;
  }

  #mainNavbar .guest-main-nav .nav-link:hover,
  #mainNavbar .guest-main-nav .nav-link:focus-visible {
    background: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
    color: var(--color-primary-700);
  }

  #mainNavbar .guest-main-nav .nav-link.active:not(.dropdown-toggle) {
    color: var(--color-primary-700);
    background: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-neutral-900) 7%, transparent);
  }

  #mainNavbar .guest-main-nav .nav-link.active:not(.dropdown-toggle)::after,
  #mainNavbar .guest-main-nav .ce-nav-category-split__link.nav-link.active::after {
    content: none;
    display: none;
    animation: none;
  }

  #mainNavbar .guest-main-nav .ce-nav-category-split {
    border-radius: 999px;
    overflow: hidden;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  #mainNavbar .guest-main-nav .ce-nav-category-split--active {
    background: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-neutral-900) 7%, transparent);
  }

  #mainNavbar .guest-main-nav .ce-nav-category-split--active .ce-nav-category-split__link.nav-link.active {
    background: transparent;
    box-shadow: none;
  }

  #mainNavbar .guest-main-nav .ce-nav-category-split--active .ce-nav-category-split__toggle {
    background: transparent;
  }

  #mainNavbar .guest-main-nav .dropdown-menu {
    margin-top: var(--spacing-2);
  }

  /*
   * Desktop category dropdown refactor:
   * - hover/focus-within opens menu without JS race conditions
   * - zero top gap avoids pointer "dead zone" while moving to submenu
   * - scope limited to category split dropdowns in main guest nav
   */
  #mainNavbar .guest-main-nav .nav-item.dropdown.ce-dropdown-saas {
    position: relative;
  }

  #mainNavbar .guest-main-nav .nav-item.dropdown.ce-dropdown-saas > .dropdown-menu {
    margin-top: 0;
  }

  #mainNavbar .guest-main-nav .nav-item.dropdown.ce-dropdown-saas:hover > .dropdown-menu,
  #mainNavbar .guest-main-nav .nav-item.dropdown.ce-dropdown-saas:focus-within > .dropdown-menu {
    display: block;
  }

  @media (hover: hover) and (pointer: fine) {
    #mainNavbar .guest-main-nav .nav-item.dropdown.ce-dropdown-saas:hover > .ce-nav-category-split .ce-nav-category-split__toggle {
      background: var(--bg-secondary);
      color: var(--color-primary-600);
    }
  }

  #mainNavbar .guest-main-nav .nav-item.dropdown.ce-dropdown-saas:focus-within > .ce-nav-category-split .ce-nav-category-split__toggle:focus-visible {
    background: var(--bg-secondary);
    color: var(--color-primary-600);
  }

  #mainNavbar .guest-nav-desktop-toolbar {
    gap: var(--spacing-2);
  }
}

.navbar .user-profile-dropdown .dropdown-menu {
  flex: 0 0 auto;
}

/* User dropdown header/body/footer: force dark contract in guest navbar */
.navbar .user-dropdown-menu .dropdown-header {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

/* Account block (name / email / role pill) — production polish */
.navbar .user-dropdown-menu .dropdown-header.ce-navbar-user-menu__header {
  margin: 0;
  padding: var(--spacing-4, 1rem) var(--spacing-4, 1rem) var(--spacing-3, 0.75rem);
  border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  width: 100%;
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__avatar {
  display: none;
  flex-shrink: 0;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-full);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__avatar .user-avatar-img,
.navbar .user-dropdown-menu .ce-navbar-user-menu__avatar .avatar-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__avatar .avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-white);
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__name {
  display: block;
  width: 100%;
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__email {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: 1.4;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__role {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--spacing-2, 0.5rem);
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.02em;
  line-height: 1.25;
  border: 1px solid transparent;
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__role i {
  font-size: 0.72em;
  opacity: 0.95;
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__role--host {
  color: var(--color-success-700);
  background: color-mix(in srgb, var(--color-success-100) 80%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-success-500) 40%, transparent);
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__role--traveler {
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__role--admin {
  color: var(--color-primary-700);
  background: color-mix(in srgb, var(--color-primary-100) 80%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-primary-500) 40%, transparent);
}

.navbar .user-dropdown-menu .ce-navbar-user-menu__role--super-admin {
  color: var(--color-warning-700);
  background: color-mix(in srgb, var(--color-warning-100) 80%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-warning-500) 40%, transparent);
}

.navbar .user-dropdown-menu .dropdown-header strong,
.navbar .user-dropdown-menu .dropdown-header small,
.navbar .user-dropdown-menu .dropdown-header .user-role-text {
  color: inherit;
}

.navbar .user-dropdown-menu .dropdown-body,
.navbar .user-dropdown-menu .dropdown-footer {
  background: transparent;
}

/* User dropdown item icons: consistent spacing */
.navbar .user-dropdown-menu .dropdown-item i {
  width: var(--spacing-5, 1.25rem);
  margin-right: var(--spacing-2);
  text-align: center;
  color: var(--text-secondary);
}

.navbar .user-dropdown-menu .dropdown-item:hover i,
.navbar .user-dropdown-menu .dropdown-item:focus i {
  color: var(--color-primary-600);
}

/* User dropdown divider: subtle separator */
.navbar .user-dropdown-menu .dropdown-divider {
  border-color: var(--border-color);
  margin: var(--spacing-2) 0;
}

/* Role icon tiles (Traveler = primary cool, Host = success green — tokens only) */
.navbar .dropdown-menu.role-dropdown .role-icon-wrapper {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-neutral-900) 5%, transparent);
}

.navbar .dropdown-menu.role-dropdown .role-icon-wrapper.traveler-role {
  color: var(--color-primary-700);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-primary-50) 95%, var(--color-white)),
    var(--color-white)
  );
  border: 1px solid color-mix(in srgb, var(--color-primary-500) 14%, transparent);
}

.navbar .dropdown-menu.role-dropdown .role-icon-wrapper.owner-role {
  color: var(--color-success-700);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-success-100) 72%, var(--color-white)),
    var(--color-white)
  );
  border: 1px solid color-mix(in srgb, var(--color-success-500) 26%, transparent);
}

/* ============================================
   SECTION 5B: LANGUAGE SWITCHER DROPDOWN
   Consolidated from language-switcher.css (Mar 6, 2026)
   ============================================ */

/* Language switcher container */
.navbar .language-switcher {
  position: relative;
  display: inline-block;
  margin-right: var(--nav-lang-switcher-mr);
}

/* Language trigger button: flag + code display */
.navbar .language-switcher .language-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  padding: var(--spacing-1-5) var(--nav-lang-trigger-px);
  font-size: var(--nav-lang-trigger-fs, inherit);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  min-height: var(--touch-target-min);
}

.navbar .language-switcher .language-trigger::after {
  display: none; /* Remove Bootstrap default arrow */
}

.navbar .language-switcher .language-trigger:hover {
  background: var(--bg-secondary);
  border-color: var(--color-primary-500);
  transform: scale(1.02);
}

.navbar .language-switcher .language-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 var(--border-width-3, 3px) color-mix(in srgb, var(--color-primary-500) 30%, transparent);
}

.navbar .language-switcher .flag {
  line-height: 1;
  font-size: var(--font-size-lg);
}

.navbar .language-switcher .lang-code {
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide, 0.03125rem);
  font-size: var(--font-size-sm);
}

/* Language dropdown menu */
.navbar .language-switcher .language-dropdown {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-color);
  padding: var(--spacing-2) 0;
  margin-top: var(--spacing-2);
  min-width: var(--nav-lang-dropdown-minw);
}

/* Language option items */
.navbar .language-switcher .language-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--nav-lang-option-fs, inherit);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border-left: 3px solid transparent;
}

.navbar .language-switcher .language-option:hover,
.navbar .language-switcher .language-option:focus {
  background: var(--bg-secondary);
  border-left-color: var(--color-primary-400);
  color: var(--text-primary);
  outline: none;
}

.navbar .language-switcher .language-option.active {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary-500) 12%, transparent) 0%,
    transparent 100%
  );
  border-left-color: var(--color-primary-500);
  font-weight: 600;
  color: var(--color-primary-600);
}

/* Marketing shell: body senza classi area — trigger su navbar chiara/scura (ex bootstrap-overrides-late) */
body:not(.guest-area):not(.user-area):not(.owner-area) .navbar-light .language-switcher .language-trigger,
body:not(.guest-area):not(.user-area):not(.owner-area) .lang-trigger--light {
  background: var(--surface-overlay-05);
  border-color: var(--surface-overlay-10);
  color: var(--color-neutral-700);
}

body:not(.guest-area):not(.user-area):not(.owner-area) .navbar-light .language-switcher .language-trigger:hover,
body:not(.guest-area):not(.user-area):not(.owner-area) .lang-trigger--light:hover {
  background: var(--surface-overlay-10);
  border-color: var(--surface-overlay-20);
}

/* Language option elements (BEM naming for low specificity) */
.lang-option__flag {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.lang-option__name {
  flex: 1;
  font-size: var(--font-size-sm);
}

.lang-option__checkmark {
  color: var(--color-primary-400);
  font-size: var(--font-size-sm);
}

/* ============================================
   SECTION 6B: TABLET 768–1199.98px — collapse scrollport (Bootstrap xl not expanded)
   Pairs with Section 6 (≤1199.98px) for dropdown static flow; no duplicate dropdown max-width here.
   ============================================ */

@media (min-width: 767.98px) and (max-width: 1199.98px) {
  #mainNavbar .navbar-collapse:not(.show),
  #mainNavbar .guest-navbar-collapse:not(.show) {
    max-height: none;
  }

  #mainNavbar .navbar-collapse.show,
  #mainNavbar .guest-navbar-collapse.show {
    max-height: min(76dvh, calc(100dvh - var(--navbar-height, 56px) - var(--spacing-6)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   SECTION 6: COLLAPSED-NAV DROPDOWN (max-width: 1199.98px = Bootstrap expand-xl collapse band)
   Static-flow menus + clip fixes for phone and tablet; login icon-only remains < md (next block).
   ============================================ */

@media (max-width: 1199.98px) {
  /* Defensive fallback: if a dropdown is open, do not clip the collapsed nav container. */
  #mainNavbar .navbar-collapse.show.navbar-collapse--dropdown-open,
  #mainNavbar .guest-navbar-collapse.show.navbar-collapse--dropdown-open {
    max-height: none;
    overflow: visible;
  }

  /* Categories dropdown in navbar-nav: full-width inside collapsed navbar */
  .navbar-nav .dropdown-menu {
    position: static; /* fixes Popper/clipping in collapse + iOS keyboard push */
    float: none;
    width: calc(100% - var(--spacing-3));
    max-width: calc(100vw - 40px);
    margin-top: var(--spacing-2);
    margin-left: var(--spacing-3);
    max-height: 60vh;
    overflow-y: auto;
    z-index: var(--z-navbar-dropdown);
    isolation: isolate;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    opacity: 1;
    transition: opacity var(--transition-fast);
    backdrop-filter: blur(20px);
  }

  /* Role dropdown inside navbar-nav (categories): centered, max-width 280px */
  .navbar-nav .dropdown-menu.role-dropdown {
    min-width: unset;
    width: calc(100% - var(--spacing-8));
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  /*
   * Guest mobile drawer (< xl): dedicated markup — account / sign-in / language / site nav.
   * No Bootstrap dropdown flattening; single scrollport on .guest-navbar-collapse.show.
   */
  #mainNavbar .guest-navbar-collapse.show {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    max-height: min(88dvh, calc(100dvh - var(--navbar-height, 56px) - var(--spacing-4)));
  }

  #mainNavbar .guest-navbar-collapse.show > .guest-mobile-drawer {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  #mainNavbar .guest-mobile-drawer__link,
  #mainNavbar .guest-mobile-drawer__role-btn,
  #mainNavbar .guest-mobile-drawer__lang-option,
  #mainNavbar .guest-mobile-drawer__fullpage-link,
  #mainNavbar .guest-mobile-drawer__fullpage-details > summary {
    -webkit-tap-highlight-color: transparent;
  }

  #mainNavbar .guest-mobile-drawer__sheet {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  #mainNavbar .guest-mobile-drawer__section {
    padding: var(--spacing-2) var(--spacing-1);
    border-bottom: 1px solid var(--border-color);
  }

  #mainNavbar .guest-mobile-drawer__section--signin {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }

  #mainNavbar .guest-mobile-drawer__section--lang {
    padding-bottom: var(--spacing-3);
  }

  #mainNavbar .guest-mobile-drawer__section:last-child {
    border-bottom: 0;
    padding-bottom: var(--spacing-1);
  }

  #mainNavbar .guest-mobile-drawer__heading {
    margin: 0 0 var(--spacing-2);
    padding: 0 var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }

  #mainNavbar .guest-mobile-drawer__identity {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin: 0 0 var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
  }

  #mainNavbar .guest-mobile-drawer__avatar {
    flex-shrink: 0;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    border-radius: var(--radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
  }

  #mainNavbar .guest-mobile-drawer__avatar .user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #mainNavbar .guest-mobile-drawer__avatar-initials {
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
  }

  #mainNavbar .guest-mobile-drawer__identity-meta {
    min-width: 0;
    flex: 1 1 auto;
  }

  #mainNavbar .guest-mobile-drawer__name {
    margin: 0;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mainNavbar .guest-mobile-drawer__email {
    margin: var(--spacing-0-5) 0 calc(var(--spacing-1) + var(--spacing-0-5));
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mainNavbar .guest-mobile-drawer__menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
  }

  #mainNavbar .guest-mobile-drawer__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
      background-color var(--transition-fast) ease,
      border-color var(--transition-fast) ease,
      color var(--transition-fast) ease;
  }

  #mainNavbar .guest-mobile-drawer__link:focus:not(:focus-visible) {
    background: transparent;
    color: var(--text-primary);
    outline: none;
    box-shadow: none;
  }

  #mainNavbar .guest-mobile-drawer__link--primary:focus:not(:focus-visible) {
    background: color-mix(in srgb, var(--color-primary-500) 8%, var(--color-white));
    border-color: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
    color: var(--text-primary);
  }

  #mainNavbar .guest-mobile-drawer__link--danger:focus:not(:focus-visible) {
    background: color-mix(in srgb, var(--color-error-50) 70%, transparent);
    border-color: color-mix(in srgb, var(--color-error-500) 35%, transparent);
    color: var(--color-error-700, var(--color-error-600));
  }

  @media (hover: hover) and (pointer: fine) {
    #mainNavbar .guest-mobile-drawer__link:hover {
      background: var(--bg-secondary);
      color: var(--color-primary-600);
      text-decoration: none;
    }
  }

  #mainNavbar .guest-mobile-drawer__link:focus-visible {
    background: var(--bg-secondary);
    color: var(--color-primary-600);
    text-decoration: none;
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
  }

  #mainNavbar .guest-mobile-drawer__link--primary {
    background: color-mix(in srgb, var(--color-primary-500) 8%, var(--color-white));
    border-color: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
    font-weight: 600;
  }

  #mainNavbar .guest-mobile-drawer__link--danger {
    margin-top: var(--spacing-2);
    border-color: color-mix(in srgb, var(--color-error-500) 35%, transparent);
    background: color-mix(in srgb, var(--color-error-50) 70%, transparent);
    color: var(--color-error-700, var(--color-error-600));
  }

  #mainNavbar .guest-mobile-drawer__logout-form {
    margin: 0;
    padding: 0;
  }

  #mainNavbar .guest-mobile-drawer__roles {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1-5);
    margin-bottom: var(--spacing-2);
  }

  #mainNavbar .guest-mobile-drawer__role-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing-2) + var(--spacing-0-5));
    width: 100%;
    min-height: calc(var(--touch-target-min) - var(--spacing-1));
    padding: var(--spacing-2) calc(var(--spacing-2) + var(--spacing-0-5));
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-neutral-50) 88%, var(--color-white));
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
      background-color var(--transition-fast) ease,
      border-color var(--transition-fast) ease,
      color var(--transition-fast) ease,
      box-shadow var(--transition-fast) ease;
  }

  #mainNavbar .guest-mobile-drawer__role-btn:focus:not(:focus-visible) {
    background: color-mix(in srgb, var(--color-neutral-50) 88%, var(--color-white));
    border-color: transparent;
    color: var(--text-primary);
    box-shadow: none;
    outline: none;
  }

  @media (hover: hover) and (pointer: fine) {
    #mainNavbar .guest-mobile-drawer__role-btn:hover {
      background: color-mix(in srgb, var(--color-primary-500) 7%, var(--color-white));
      border-color: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
      color: var(--color-primary-700);
      box-shadow: 0 1px 0 color-mix(in srgb, var(--color-neutral-900) 3%, transparent);
    }
  }

  #mainNavbar .guest-mobile-drawer__role-btn:focus-visible {
    background: color-mix(in srgb, var(--color-primary-500) 7%, var(--color-white));
    border-color: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
    color: var(--color-primary-700);
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-neutral-900) 3%, transparent);
  }

  @media (hover: none) {
    #mainNavbar .guest-mobile-drawer__role-btn:active {
      background: color-mix(in srgb, var(--color-primary-500) 10%, var(--color-white));
      border-color: color-mix(in srgb, var(--color-primary-500) 22%, transparent);
      color: var(--color-primary-700);
    }
  }

  #mainNavbar .guest-mobile-drawer__role-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  #mainNavbar .guest-mobile-drawer__role-text strong {
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: 1.25;
  }

  #mainNavbar .guest-mobile-drawer__role-text small {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.35;
    margin-top: var(--spacing-0-5);
  }

  #mainNavbar .guest-mobile-drawer__role-btn .role-icon-wrapper {
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
  }

  #mainNavbar .guest-mobile-drawer__role-btn .role-icon-wrapper.traveler-role {
    background: color-mix(in srgb, var(--color-primary-500) 12%, var(--color-white));
    color: var(--color-primary-700);
  }

  #mainNavbar .guest-mobile-drawer__role-btn .role-icon-wrapper.owner-role {
    background: color-mix(in srgb, var(--color-warning-500) 14%, var(--color-white));
    color: var(--color-warning-700);
  }

  #mainNavbar .guest-mobile-drawer__fullpage-details {
    margin-top: var(--spacing-2);
    padding: 0 var(--spacing-1);
  }

  #mainNavbar .guest-mobile-drawer__fullpage-details > summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast) ease, background-color var(--transition-fast) ease;
  }

  #mainNavbar .guest-mobile-drawer__fullpage-details > summary::-webkit-details-marker {
    display: none;
  }

  #mainNavbar .guest-mobile-drawer__fullpage-details > summary::after {
    content: "▾";
    display: inline-block;
    margin-left: var(--spacing-1);
    font-size: var(--font-size-xs);
    transition: transform var(--transition-fast) ease;
  }

  #mainNavbar .guest-mobile-drawer__fullpage-details[open] > summary::after {
    transform: rotate(180deg);
  }

  #mainNavbar .guest-mobile-drawer__fullpage-details > summary:focus:not(:focus-visible) {
    color: var(--text-tertiary);
    background: transparent;
    outline: none;
  }

  @media (hover: hover) and (pointer: fine) {
    #mainNavbar .guest-mobile-drawer__fullpage-details > summary:hover {
      color: var(--color-primary-600);
      background: var(--bg-secondary);
    }
  }

  #mainNavbar .guest-mobile-drawer__fullpage-details > summary:focus-visible {
    color: var(--color-primary-600);
    background: var(--bg-secondary);
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
  }

  #mainNavbar .guest-mobile-drawer__fullpage {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin-top: var(--spacing-1);
    padding-top: var(--spacing-1);
  }

  #mainNavbar .guest-mobile-drawer__fullpage-link {
    display: flex;
    align-items: center;
    min-height: calc(var(--touch-target-min) - var(--spacing-1) - var(--spacing-0-5));
    padding: var(--spacing-1-5) var(--spacing-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition:
      background-color var(--transition-fast) ease,
      color var(--transition-fast) ease;
  }

  #mainNavbar .guest-mobile-drawer__fullpage-link:focus:not(:focus-visible) {
    color: var(--text-secondary);
    background: transparent;
    outline: none;
  }

  @media (hover: hover) and (pointer: fine) {
    #mainNavbar .guest-mobile-drawer__fullpage-link:hover {
      color: var(--color-primary-600);
      background: var(--bg-secondary);
      text-decoration: none;
    }
  }

  #mainNavbar .guest-mobile-drawer__fullpage-link:focus-visible {
    color: var(--color-primary-600);
    background: var(--bg-secondary);
    text-decoration: none;
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
  }

  #mainNavbar .guest-mobile-drawer__lang-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--spacing-2);
    padding: 0 var(--spacing-2);
  }

  #mainNavbar .guest-mobile-drawer__lang-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-height: var(--touch-target-min);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition:
      background-color var(--transition-fast) ease,
      border-color var(--transition-fast) ease,
      color var(--transition-fast) ease,
      box-shadow var(--transition-fast) ease;
  }

  #mainNavbar .guest-mobile-drawer__lang-option:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  #mainNavbar .guest-mobile-drawer__lang-option:not(.guest-mobile-drawer__lang-option--active):focus:not(:focus-visible) {
    border-color: var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  @media (hover: hover) and (pointer: fine) {
    #mainNavbar .guest-mobile-drawer__lang-option:hover:not(.guest-mobile-drawer__lang-option--active) {
      border-color: color-mix(in srgb, var(--color-primary-500) 35%, var(--border-color));
      background: var(--bg-secondary);
      color: var(--color-primary-700);
      text-decoration: none;
    }
  }

  #mainNavbar .guest-mobile-drawer__lang-option:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary-500) 35%, var(--border-color));
    background: var(--bg-secondary);
    color: var(--color-primary-700);
    text-decoration: none;
    outline: 2px solid var(--color-primary-400);
    outline-offset: 2px;
  }

  @media (hover: none) {
    #mainNavbar .guest-mobile-drawer__lang-option:active:not(.guest-mobile-drawer__lang-option--active) {
      background: var(--bg-secondary);
      border-color: color-mix(in srgb, var(--color-primary-500) 28%, var(--border-color));
    }

    #mainNavbar .guest-mobile-drawer__link:active {
      background: var(--bg-secondary);
    }
  }

  #mainNavbar .guest-mobile-drawer__lang-option--active {
    border-color: color-mix(in srgb, var(--color-primary-500) 45%, var(--border-color));
    background: color-mix(in srgb, var(--color-primary-500) 6%, var(--color-white));
    color: var(--color-primary-700);
    font-weight: 600;
  }

  #mainNavbar .guest-mobile-drawer__lang-flag {
    flex-shrink: 0;
    font-size: var(--font-size-lg);
    line-height: 1;
  }

  #mainNavbar .guest-mobile-drawer__lang-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mainNavbar .guest-mobile-drawer__lang-check {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-primary-500);
    font-size: var(--font-size-sm);
  }

  #mainNavbar .guest-mobile-drawer__site-nav {
    row-gap: var(--spacing-1);
    width: 100%;
  }

  #mainNavbar .guest-mobile-drawer__site-nav .nav-link {
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium, 500);
    min-height: var(--touch-target-min);
  }

  #mainNavbar .guest-navbar-collapse,
  #mainNavbar .navbar-collapse {
    margin-top: var(--spacing-2);
    padding: var(--spacing-2);
    border-radius: var(--radius-lg);
  }

  /* Navbar toggler: ensure WCAG touch target (collapsed bar: tablet + phone) */
  .navbar-toggler {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
  }
}

/* Extra hardening for 320/360/375 widths: keep dropdowns inside viewport. */
@media (max-width: 575.98px) {
  #mainNavbar .navbar-nav .dropdown-menu {
    width: auto;
    min-width: 0;
    max-width: calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
    margin-left: 0;
    margin-right: 0;
  }

  #mainNavbar .navbar-nav .dropdown-menu.role-dropdown {
    width: 100%;
    max-width: calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
  }

  .navbar .user-dropdown-menu.dropdown-menu,
  .navbar .user-dropdown-menu.dropdown-menu.show,
  .navbar .user-dropdown-menu.dropdown-menu[data-bs-popper] {
    min-width: min(240px, calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
    width: min(var(--dropdown-max-width), calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
    max-width: calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
    right: 0;
    left: auto;
  }
}

/* Guest tap behavior reinforcement (migrated from frontend-fixes-saas.css, Apr 2026) */
.guest-area .nav-link,
.guest-area .navbar-toggler {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Guest collapsed-bar touch targets: tablet + phone (≤1199.98px = Bootstrap expand-xl collapse) */
@media (max-width: 1199.98px) {
  .guest-area .navbar [data-bs-toggle="dropdown"],
  .guest-area .navbar .nav-link,
  .guest-area .dropdown-toggle {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: var(--spacing-2) var(--spacing-3);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
  }
}

/* language + user-dropdown use :root vars (v19.0.3) */

/* ============================================
   SECTION 7: ACCESSIBILITY (WCAG AAA)
   ============================================ */

/* Reduced motion: disable all navbar animations */
@media (prefers-reduced-motion: reduce) {
  .navbar *,
  .navbar *::before,
  .navbar *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* Focus-visible: high-contrast keyboard focus ring (WCAG 2.1 Level AAA) */
.navbar .nav-link:focus-visible,
.navbar .dropdown-toggle:focus-visible,
.navbar .user-profile-trigger:focus-visible,
.navbar-toggler:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Custom scrollbar for dropdown menus (thin style) */
.navbar .dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.navbar .dropdown-menu::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.navbar .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--color-neutral-600);
  border-radius: var(--radius-md);
}

.navbar .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-500);
}

/* ============================================
   END OF NAVBAR UNIFIED
   Total lines: 779 (navbar 602 + dropdown 177)
   Files consolidated: 3 → 1
   Z-index conflicts eliminated: --z-navbar-dropdown now in single file
   ============================================ */