/**
 * Bohio MAG — header-modern.css
 * Design inspired by BuyMore with Bohio-MAG colors
 * Palette: Yellow #FFD700 · Black #000000 · Accent #FFEE00
 */

/* ════════════════════════════════════════════════════════════════════════════════
   VARIABLES
   ════════════════════════════════════════════════════════════════════════════════ */
:root {
  --bohio-primary:       #FFD700;        /* Bohio yellow */
  --bohio-accent:        #FFEE00;        /* Lighter yellow */
  --bohio-dark:          #1a1a1a;        /* Near-black */
  --bohio-dark2:         #0a0a0a;        /* Darker black */
  --bohio-dark3:         #141414;        /* Very dark */
  --bohio-text:          #e8e8e8;        /* Light text */
  --bohio-text-muted:    #888888;        /* Muted text */
  --bohio-border:        #333333;        /* Borders */
  --bohio-light:         #f9fafb;        /* Light gray */
  --bohio-radius:        8px;            /* Border radius */
  --bohio-shadow:        0 4px 24px rgba(255, 215, 0, 0.15);
  --bohio-font:          'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ════════════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Page surface is light (yellow-on-white). The navbar and mobile panel below
   keep their dark treatment via the --bohio-dark* tokens. */
body {
  font-family: var(--bohio-font);
  color: var(--text-primary, #241C15);
  line-height: 1.6;

  /* Dark surface with two soft accent glows bleeding down from the top and a
     faint grain. Stops the page reading as a flat slab of charcoal, and costs
     nothing extra — all CSS gradients, no image request. */
  background-color: var(--bg-primary, #121013);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.022) 1px, transparent 0),
    radial-gradient(900px 460px at 8% -10%, rgba(244, 197, 66, 0.10), transparent 64%),
    radial-gradient(760px 420px at 100% 0%, rgba(244, 197, 66, 0.06), transparent 62%);
  background-size: 22px 22px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
}

/* ════════════════════════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════════════════════════ */
.bohio-navbar {
  background: linear-gradient(135deg, var(--bohio-dark2) 0%, #0f0f0f 100%);
  border-bottom: 3px solid var(--bohio-primary);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 2px 20px rgba(255, 215, 0, 0.15);
}

.bohio-navbar .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.8rem;
  font-weight: 900;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════════════════
   SEARCH BAR
   ════════════════════════════════════════════════════════════════════════════════ */
.bohio-search-form {
  flex: 0 1 400px;
  max-width: 100%;
  position: relative;
  margin-right: 1rem;
}

.bohio-search-form form {
  display: flex;
  width: 100%;
}

.bohio-search-input {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 1px solid var(--bohio-border);
  border-radius: 8px 0 0 8px;
  background: var(--bohio-dark3);
  color: var(--bohio-text);
  font-size: 0.9rem;
  outline: none;
}

.bohio-search-input::placeholder {
  color: var(--bohio-text-muted);
}

.bohio-search-input:focus {
  background: var(--bohio-dark3);
  border-color: var(--bohio-primary);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}

.btn-search {
  padding: 0.6rem 1rem;
  background: var(--bohio-primary);
  color: black;
  border: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  font-weight: 700;
  transition: background 0.2s;
}

.btn-search:hover {
  background: var(--bohio-accent);
}

/* Autocomplete dropdown */
.bohio-ac-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin-top: 0;
  background: var(--bohio-dark2);
  border: 1px solid var(--bohio-border);
  border-radius: 12px;
  z-index: 2100;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 10px 32px rgba(255, 215, 0, 0.15);
}

.bohio-ac-dropdown.open {
  display: block;
}

.bohio-ac-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  color: var(--bohio-text);
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.bohio-ac-item:last-child {
  border-bottom: none;
}

.bohio-ac-item:hover,
.bohio-ac-item.focused {
  background: rgba(255, 215, 0, 0.08);
  color: var(--bohio-primary);
}

.bohio-ac-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: var(--bohio-dark3);
  border-radius: 6px;
  flex-shrink: 0;
  padding: 3px;
}

.bohio-ac-img-placeholder {
  width: 40px;
  height: 40px;
  background: var(--bohio-dark3);
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--bohio-text-muted);
}

.bohio-ac-info {
  flex: 1;
  min-width: 0;
}

.bohio-ac-name {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bohio-ac-author {
  font-size: 0.72rem;
  color: var(--bohio-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.bohio-ac-footer {
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  color: var(--bohio-text-muted);
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}

.bohio-ac-footer:hover {
  background: rgba(255, 215, 0, 0.08);
  color: var(--bohio-primary);
}

.bohio-ac-empty {
  padding: 0.75rem 0.85rem;
  font-size: 0.83rem;
  color: var(--bohio-text-muted);
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════════════════ */
.btn-primary {
  background: var(--bohio-primary);
  color: black;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-primary:hover {
  background: var(--bohio-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--bohio-primary);
  border: 2px solid var(--bohio-primary);
  border-radius: 8px;
  padding: 0.45rem 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-outline:hover {
  background: var(--bohio-primary);
  color: black;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* ════════════════════════════════════════════════════════════════════════════════
   NAVIGATION LINKS
   ════════════════════════════════════════════════════════════════════════════════ */
.nav-link {
  color: var(--bohio-text);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  display: flex;
  align-items: center;
  transition: color 0.2s, background 0.2s;
  border-radius: var(--bohio-radius);
}

.nav-link:hover {
  color: var(--bohio-primary);
}

.notif-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--bohio-primary);
  color: black;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ════════════════════════════════════════════════════════════════════════════════
   DESKTOP NAV
   ════════════════════════════════════════════════════════════════════════════════ */
#bohio-nav-desktop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

#bohio-nav-mobile {
  display: none;
  margin-left: auto;
}

/* ════════════════════════════════════════════════════════════════════════════════
   USER DROPDOWN
   ════════════════════════════════════════════════════════════════════════════════ */
#user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: var(--bohio-dark2);
  border: 1px solid var(--bohio-border);
  border-radius: 12px;
  z-index: 2000;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);   /* was a yellow glow */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
}

#user-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.25rem;
  color: var(--bohio-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.15s;
}

.sidebar-link:hover {
  background: rgba(255, 215, 0, 0.1);
  color: var(--bohio-primary);
  padding-left: 1.5rem;
}

.sidebar-link i {
  font-size: 1rem;
  width: 18px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════════════
   CATEGORIES & NAV CHIPS
   ════════════════════════════════════════════════════════════════════════════════ */
#bohio-nav-cats {
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--bohio-border);
}

#bohio-nav-cats .container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.5rem 1rem;
  align-items: center;
  scroll-behavior: smooth;
}

.nav-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: var(--bohio-primary);
  /* Dark ink on the yellow chip — white text on #FFD700 is a 1.4:1 contrast */
  color: #111111;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.85rem;
  border: 1px solid var(--bohio-primary);
  transition: all 0.2s;
  font-weight: 600;
}

.nav-chip:hover {
  background: var(--bohio-accent);
  border-color: var(--bohio-accent);
  color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2);
}

/* ════════════════════════════════════════════════════════════════════════════════
   HAMBURGER BUTTON
   ════════════════════════════════════════════════════════════════════════════════ */
.navbar-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--bohio-border);
  color: var(--bohio-text);
  border-radius: var(--bohio-radius);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.navbar-toggle:hover {
  background: var(--bohio-primary);
  color: black;
  border-color: var(--bohio-primary);
}

/* ════════════════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION OVERLAY
   ════════════════════════════════════════════════════════════════════════════════ */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1045;
}

.mobile-nav-overlay.open {
  display: block;
}

.mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 88vw);
  height: 100%;
  background: var(--bohio-dark2);
  border-left: 1px solid var(--bohio-border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.mobile-nav-overlay.open .mobile-nav-panel {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(1rem + 10px) 1.25rem 1rem;
  border-bottom: 1px solid var(--bohio-border);
  flex-shrink: 0;
}

.mobile-nav-close {
  background: transparent;
  border: 1px solid var(--bohio-border);
  color: var(--bohio-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bohio-radius);
  transition: color 0.2s, background 0.2s;
}

.mobile-nav-close:hover {
  color: var(--bohio-primary);
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--bohio-primary);
}

.mobile-nav-divider {
  border: none;
  border-top: 1px solid var(--bohio-border);
  margin: 0.4rem 0;
}

.mobile-nav-section {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bohio-text-muted);
  padding: 0.9rem 1.25rem 0.3rem;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.25rem;
  color: var(--bohio-text);
  font-size: 0.92rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.18s;
  text-decoration: none;
}

.mobile-nav-link i {
  width: 18px;
  text-align: center;
  font-size: 1rem;
}

.mobile-nav-link:hover {
  color: var(--bohio-primary);
  background: rgba(255, 215, 0, 0.06);
  border-left-color: var(--bohio-primary);
}

.mobile-nav-link.danger {
  color: #f87d87;
}

.mobile-nav-link.danger:hover {
  background: rgba(220, 53, 69, 0.07);
  border-left-color: #dc3545;
  color: #dc3545;
}

/* ════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════════════════════ */

/* 1024px - Laptop / Tablet Landscape */
@media (max-width: 1024px) {
  #bohio-nav-search {
    max-width: 300px;
  }
}

/* 992px - Tablet Portrait */
@media (max-width: 992px) {
  .nav-chip {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
}

/* 768px - Mobile / Small Tablet (MAIN MOBILE BREAKPOINT) */
@media (max-width: 768px) {
  /* Hide desktop elements */
  #bohio-nav-search {
    display: none !important;
  }

  #bohio-nav-desktop {
    display: none !important;
  }

  /* Show mobile elements */
  #bohio-nav-mobile {
    display: flex !important;
  }

  #bohio-nav-cats {
    display: none !important;
  }

  /* Show hamburger */
  .navbar-toggle {
    display: flex;
  }

  .bohio-navbar .container {
    flex-wrap: nowrap !important;
  }

  .navbar-brand {
    font-size: 1.4rem;
  }

  /* Mobile nav panel full-height */
  .mobile-nav-panel {
    width: min(320px, 85vw);
  }

  .nav-chip {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
  }
}

/* 576px - Small Phone */
@media (max-width: 576px) {
  .navbar-brand {
    font-size: 1.2rem;
  }

  .bohio-search-input {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }

  .btn-search {
    padding: 0.5rem 0.8rem;
  }

  #bohio-nav-mobile {
    gap: 0.3rem;
  }

  .navbar-toggle {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .mobile-nav-panel {
    width: min(280px, 90vw);
  }

  .mobile-nav-link {
    font-size: 0.88rem;
    padding: 0.65rem 1rem;
  }

  .mobile-nav-section {
    padding: 0.75rem 1rem 0.25rem;
  }
}

/* 400px - Very Small Phone */
@media (max-width: 400px) {
  .navbar-brand {
    font-size: 1rem;
  }

  .bohio-search-input {
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem;
  }

  .btn-search {
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
  }

  .mobile-nav-panel {
    width: 100vw;
  }
}

/* ════════════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS
   ════════════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .btn-primary,
  .btn-outline,
  .navbar-toggle {
    min-height: 44px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .navbar-toggle {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVBAR v2 — single slim row
   Replaces the two-row navbar (brand+search row, then a category chip bar).
   Appended last so it wins the cascade over the older rules above.
   ══════════════════════════════════════════════════════════════════════════ */

.bohio-navbar {
  background: #0d0d0d;
  border-bottom: 1px solid #232323;
  box-shadow: 0 1px 12px rgba(0, 0, 0, .35);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1050;
  transition: transform .28s ease;
  will-change: transform;
}

/* Slides out of the way when scrolling down and returns on the way back up,
   so a phone screen is not giving 60px to the bar while reading. */
.bohio-navbar.is-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .bohio-navbar { transition: none; }
}

.bohio-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 60px;
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.bohio-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: .75rem;
}

.bohio-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: block;
}

.bohio-brand-text {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #ffffff;
  white-space: nowrap;
}

.bohio-brand-text span {
  color: var(--bohio-primary);
}

/* ── Primary links ─────────────────────────────────────────────────────── */
.bohio-nav-links {
  display: flex;
  align-items: center;
  gap: .15rem;
  min-width: 0;
}

.bohio-nav-link {
  display: inline-flex;
  align-items: center;
  padding: .5rem .75rem;
  border-radius: 6px;
  color: #c9c9c9;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}

.bohio-nav-link:hover,
.bohio-nav-link:focus-visible {
  color: var(--bohio-primary);
  background: rgba(255, 215, 0, .08);
}

.bohio-nav-spacer {
  flex: 1 1 auto;
}

/* Compact tab row used only when the full desktop navigation is hidden. */
.bohio-mobile-tabs {
  display: none;
}

.bohio-mobile-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .45rem 1rem;
  border-bottom: 2px solid transparent;
  color: #c9c9c9;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.bohio-mobile-tab:hover,
.bohio-mobile-tab:focus-visible,
.bohio-mobile-tab.is-active {
  color: var(--bohio-primary);
  background: rgba(255, 215, 0, .06);
  border-bottom-color: var(--bohio-primary);
}

/* ── Icon buttons (search, bell) ───────────────────────────────────────── */
.bohio-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d5d5d5;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}

.bohio-icon-btn:hover,
.bohio-icon-btn:focus-visible {
  color: var(--bohio-primary);
  background: rgba(255, 255, 255, .07);
}

.bohio-icon-btn.bohio-mobile-explore-btn {
  display: none;
}

.bohio-icon-btn .notif-badge {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: #dc3545;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ── Hamburger ─────────────────────────────────────────────────────────── */
.bohio-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: .1rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e8e8e8;
  font-size: 1.35rem;
  cursor: pointer;
}

.bohio-burger:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--bohio-primary);
}

/* ── Search overlay ────────────────────────────────────────────────────── */
/* Shown/hidden with `display`, not a transition on `visibility`: an animated
   visibility can stay pinned at its start value if the transition never ticks
   (backgrounded tab, reduced motion, throttled compositor), leaving the overlay
   permanently invisible while still carrying the .open class. */
.bohio-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px);
  padding: 12vh 1rem 1rem;
}

.bohio-search-overlay.open {
  display: block;
}

.bohio-search-box {
  max-width: 620px;
  margin: 0 auto;
  position: relative;
}

.bohio-search-overlay .bohio-search-form {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem .35rem .9rem;
  background: #ffffff;
  border: 2px solid var(--bohio-primary);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  /* neutralise the older .bohio-search-form rules further up this file */
  flex: none;
  max-width: none;
  margin-right: 0;
  position: static;
}

.bohio-search-icon {
  color: #6B7280;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.bohio-search-overlay .bohio-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font-size: 1.05rem;
  padding: .6rem 0;
  border-radius: 0;
}

.bohio-search-overlay .bohio-search-input::placeholder {
  color: #9CA3AF;
}

.bohio-search-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #F3F4F6;
  color: #4B5563;
  cursor: pointer;
}

.bohio-search-close:hover {
  background: #E5E7EB;
  color: #111827;
}

.bohio-search-overlay .bohio-ac-dropdown {
  position: static;
  margin-top: .6rem;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 12px;
}

/* ── Search inside the mobile panel ────────────────────────────────────── */
.mobile-nav-search {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .85rem 1.25rem .25rem;
  padding: .55rem .8rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--bohio-border);
  border-radius: 10px;
}

.mobile-nav-search i {
  color: var(--bohio-text-muted);
  flex-shrink: 0;
}

.mobile-nav-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bohio-text);
  font-size: .9rem;
}

.mobile-nav-search input::placeholder {
  color: var(--bohio-text-muted);
}

/* ── Breakpoints ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bohio-nav-links { display: none; }
  .bohio-burger    { display: inline-flex; }
  .bohio-icon-btn.bohio-mobile-explore-btn { display: inline-flex; }
  .bohio-mobile-tabs {
    display: flex;
    align-items: stretch;
    justify-content: center;
    border-top: 1px solid #1d1d1d;
  }
}

@media (max-width: 768px) {
  /* Account controls live in the slide-out panel at this size, but search and
     notifications stay on the bar — they were unreachable on mobile before. */
  #bohio-nav-desktop { display: none !important; }
  .bohio-nav-inner   { height: 56px; padding: 0 .65rem; }
  .bohio-brand-mark  { width: 30px; height: 30px; }
  .bohio-brand-text  { font-size: 1.05rem; }
  .bohio-search-overlay { padding-top: 6vh; }
}

@media (max-width: 400px) {
  .bohio-brand-text { display: none; }
}

/* ── Avatar button in the always-visible icon group ─────────────────────────
   #user-menu-wrap sits outside #bohio-nav-desktop so the profile picture stays
   in the header at every width. Below 480px only the avatar shows — the name
   and chevron would crowd the burger, logo, search and bell. */
#user-menu-wrap {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    #user-menu-btn span,
    #user-menu-btn .bi-chevron-down {
        display: none;
    }

    /* Collapse to just the avatar: drop the yellow pill fill and the 2px
       border, leaving a hairline outline instead of a thick ring. */
    #user-menu-btn {
        padding: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: 1px solid rgba(255, 215, 0, .55) !important;
        box-shadow: none !important;
    }

    #user-menu-btn img {
        width: 30px !important;
        height: 30px !important;
        border: 0 !important;
    }

    /* Keep the dropdown inside the viewport on small screens */
    #user-dropdown {
        min-width: min(280px, calc(100vw - 1.5rem)) !important;
        right: 0;
    }
}

/* ── "Mon espace" button ────────────────────────────────────────────────────
   Sits in the always-visible icon group, so it stays in the header on mobile.
   Collapses to an icon-only pill on narrow screens. */
.bohio-space-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    padding: .38rem .75rem;
    border: 1px solid transparent;   /* the yellow hairline read as template chrome */
    border-radius: 999px;
    background: rgba(255, 215, 0, .12);
    color: var(--bohio-primary);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.bohio-space-btn:hover,
.bohio-space-btn:focus-visible {
    background: var(--bohio-primary);
    border-color: var(--bohio-primary);
    color: #111;
}

.bohio-space-btn .bi { font-size: .95rem; }

/* Icon only once space gets tight */
@media (max-width: 900px) {
    .bohio-space-btn span { display: none; }
    .bohio-space-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
    }
    .bohio-space-btn .bi { font-size: 1.05rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   ANNOUNCEMENTS — strip under the header, and pop-up
   ═══════════════════════════════════════════════════════════════════ */

.announce-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 3rem .7rem 1.25rem;   /* right padding clears the close button */
    font-size: .9rem;
    line-height: 1.45;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: opacity .2s ease, transform .2s ease;
}

.announce-strip.is-closing { opacity: 0; transform: translateY(-6px); }

.announce-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.announce-strip .bi { font-size: 1rem; flex-shrink: 0; }
.announce-strip-text { min-width: 0; }

/* The call to action is a chip, not a link in a sentence: at this size an
   underlined link is easy to miss and hard to hit on a phone. */
.announce-strip-cta {
    display: inline-block;
    padding: .28rem .85rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
    color: inherit;
    font-weight: 700;
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease;
}
.announce-strip-cta:hover { background: rgba(0, 0, 0, .45); color: inherit; }

.announce-dismiss {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    opacity: .65;
    cursor: pointer;
    padding: .35rem;
    line-height: 1;
    font-size: .8rem;
    border-radius: 50%;
    transition: opacity .2s ease, background .2s ease;
}
.announce-dismiss:hover { opacity: 1; background: rgba(0, 0, 0, .2); }

/* ---- Tones. Solid fills, because the strip sits against the dark nav and a
        translucent tint would read as part of it. ---- */
.announce-strip.announce-info    { background: #1E4E6B; color: #EAF4FA; }
.announce-strip.announce-success { background: #14563C; color: #E4F6EE; }
.announce-strip.announce-warning { background: #7A5410; color: #FDF3DF; }
.announce-strip.announce-danger  { background: #7A2020; color: #FDE9E9; }
.announce-strip.announce-promo   { background: linear-gradient(90deg, #7A5F0B, #A57F0D); color: #FFF8E1; }

/* ===== POP-UP ===== */
.announce-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s ease;
}
.announce-modal-overlay.is-open   { opacity: 1; }
.announce-modal-overlay.is-closing { opacity: 0; }
.announce-modal-overlay[hidden]   { display: none; }

.announce-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--bg-card, #201D22);
    border: 1px solid var(--border-color, #322D34);
    border-radius: var(--border-radius-lg, 12px);
    padding: 2rem 1.75rem 1.75rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    transform: translateY(12px) scale(.98);
    transition: transform .22s ease;
}
.announce-modal-overlay.is-open .announce-modal { transform: translateY(0) scale(1); }

/* A coloured hairline carries the tone without tinting the whole dialog. */
.announce-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
}
.announce-modal.announce-info::before    { background: #3E9BD1; }
.announce-modal.announce-success::before { background: #2FA97A; }
.announce-modal.announce-warning::before { background: #D9A216; }
.announce-modal.announce-danger::before  { background: #D95757; }
.announce-modal.announce-promo::before   { background: linear-gradient(90deg, #E6C200, #FFD700); }

/* An uploaded image takes the place of the icon and bleeds to the dialog's
   edges: a framed thumbnail floating in padding looks like a mistake. */
.announce-modal-media {
    margin: -2rem -1.75rem 1.25rem;
    border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
    overflow: hidden;
    background: var(--bg-secondary, #1A171B);
}

.announce-modal-media img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
}

.announce-modal-icon { font-size: 2.4rem; margin-bottom: .75rem; line-height: 1; }
.announce-modal.announce-info    .announce-modal-icon { color: #3E9BD1; }
.announce-modal.announce-success .announce-modal-icon { color: #2FA97A; }
.announce-modal.announce-warning .announce-modal-icon { color: #D9A216; }
.announce-modal.announce-danger  .announce-modal-icon { color: #D95757; }
.announce-modal.announce-promo   .announce-modal-icon { color: var(--primary, #FFD700); }

.announce-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #F3F0EC);
    margin: 0 0 .6rem;
}

.announce-modal-body {
    color: var(--text-secondary, #B8B0A6);
    font-size: .94rem;
    line-height: 1.6;
}

.announce-modal-actions {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.announce-modal-close {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: none;
    border: none;
    color: var(--text-secondary, #B8B0A6);
    cursor: pointer;
    padding: .4rem;
    line-height: 1;
    border-radius: 50%;
    transition: color .2s ease, background .2s ease;
}
.announce-modal-close:hover {
    color: var(--text-primary, #F3F0EC);
    background: rgba(255, 255, 255, .08);
}

@media (max-width: 600px) {
    .announce-strip { font-size: .84rem; padding: .6rem 2.6rem .6rem 1rem; }
    .announce-strip-inner { justify-content: flex-start; }
    .announce-modal { padding: 1.75rem 1.25rem 1.25rem; }
    .announce-modal-actions .btn { width: 100%; justify-content: center; }
}

/* Respect a reduced-motion preference: the pop-up still appears, it just
   does not slide or fade in. */
@media (prefers-reduced-motion: reduce) {
    .announce-strip,
    .announce-modal-overlay,
    .announce-modal { transition: none; }
    .announce-modal { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   POP-UP FORMAT « POSTER »

   Repris de l'ancien includes/popup-poster.php. L'affiche porte le message :
   pas de carte, pas de titre, angles nets, croix décalée hors du cadre et un
   seul bouton pleine largeur. Les proportions d'origine sont conservées
   (380 → 350 → 320 → 280 px) parce qu'elles cadrent une affiche portrait sans
   la rogner sur les petits écrans.
   ═══════════════════════════════════════════════════════════════════ */

.poster-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .65);
    opacity: 0;
    transition: opacity .25s ease;
}
.poster-overlay.is-open    { opacity: 1; }
.poster-overlay.is-closing { opacity: 0; }
.poster-overlay[hidden]    { display: none; }

.poster-content {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: transparent;
    transform: scale(.95);
    transition: transform .25s ease;
}
.poster-overlay.is-open .poster-content { transform: scale(1); }

.poster-close {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    border: 2px solid #fff;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
    transition: all .3s ease;
}
.poster-close:hover { background: #ff4757; transform: rotate(90deg) scale(1.1); }
.poster-close svg   { width: 16px; height: 16px; }

.poster-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.poster-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 14px 20px;
    /* Le doré de l'affiche d'origine, et non --primary : la variable du thème
       vaut #FFD700, un jaune plus vif. Le bouton virait donc au citron alors
       que son halo restait sur l'ancien ton — deux dorés côte à côte. */
    background: #F4C542;
    color: #1a1a2e !important;
    border: none;
    border-radius: 0;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(244, 197, 66, .3);
    transition: all .3s ease;
}
.poster-cta:hover {
    background: #e0b032;
    color: #1a1a2e !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(244, 197, 66, .5);
}
.poster-cta svg { flex-shrink: 0; }

@media (max-width: 1024px) { .poster-content { max-width: 350px; } }

@media (max-width: 768px) {
    .poster-overlay { padding: 12px; }
    .poster-content { max-width: 320px; }
    .poster-cta     { padding: 12px 16px; font-size: .75rem; margin-top: 10px; gap: 8px; }
    .poster-cta svg { width: 16px; height: 16px; }
    .poster-close   { width: 32px; height: 32px; top: -10px; right: -10px; }
    .poster-close svg { width: 14px; height: 14px; }
}

@media (max-width: 420px) {
    .poster-overlay { padding: 8px; }
    .poster-content { max-width: 280px; }
    .poster-cta     { padding: 10px 12px; font-size: .65rem; margin-top: 8px; gap: 6px; letter-spacing: .5px; }
    .poster-cta svg { width: 14px; height: 14px; }
    .poster-close   { width: 28px; height: 28px; top: -8px; right: -8px; border-width: 1.5px; }
    .poster-close svg { width: 12px; height: 12px; }
}

/* Écran très bas (paysage) : l'affiche doit rester entièrement visible. */
@media (max-height: 620px) {
    .poster-image { max-height: 62vh; width: auto; margin: 0 auto; }
    .poster-content { max-width: none; width: auto; display: flex; flex-direction: column; align-items: center; }
    .poster-cta { max-width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
    .poster-overlay, .poster-content, .poster-cta, .poster-close { transition: none; }
    .poster-content { transform: none; }
}