/* ==========================================================================
   Mobile bottom navigation bar (includes/layout/mobile-nav.php)
   Visible below 992px (Bootstrap `lg`, aligned with `.d-lg-none`), so mobile
   and tablet share the fixed bottom bar and there is no hybrid zone at
   768px. Desktop (>=992px) layout is untouched. (S1-06)

   S1-06E: redesigned as a floating glass pill (semi-transparent, blurred,
   centered, lifted off the bottom edge) per the homepage mobile redesign
   task. This component is shared by every page that renders it (index.php,
   event.php, place.php, saved.php, more.php), and the task explicitly
   authorizes this visual change to propagate everywhere as the approved
   global bottom-nav — only the 4-vs-5-item logic ($hideMore in
   mobile-nav.php) stays homepage-only.
   ========================================================================== */

:root {
  /* Local layout variables for the mobile bottom bars. Used consistently
     below at `bottom`, `padding-bottom` and toast positioning so the fixed
     bars (global nav + event ticket bar) stack without overlaps or gaps.
     `--mobile-safe-bottom` is the single place env() is read; every other
     rule below references the variable instead of calling env() again.
       - --mobile-nav-height: the pill's own content height (icons+labels+
         internal padding), unrelated to its distance from the viewport edge.
       - --mobile-nav-float-gap: distance between the pill's bottom edge and
         the true viewport bottom (the "floating" lift), applied once here;
         the pill's own padding no longer duplicates the safe-area inset. */
  --mobile-nav-height: 54px;
  --mobile-nav-float-gap: 10px;
  --mobile-ticket-bar-height: 64px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-floating-pill-bottom: calc(var(--mobile-nav-float-gap) + var(--mobile-safe-bottom, 0px));
  /* Paginile individuale folosesc scrollul documentului, deci viewportul lor
     vizual se poate mări când browserul își retrage bara de navigare. Fallbackul
     rămâne identic cu meniul principal pe browserele fără unități dinamice. */
  --mobile-browser-toolbar-offset: 0px;
  --mobile-detail-floating-pill-bottom: var(--mobile-floating-pill-bottom);
  /* Contract vizual comun pentru toate barele mobile plutitoare: meniul din
     feeduri și barele CTA ale paginilor individuale trebuie să arate ca
     aceeași familie de componente, inclusiv peste imagini contrastante. */
  --mobile-floating-pill-background:
    linear-gradient(
      108deg,
      rgba(224, 231, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.98) 44%,
      rgba(255, 255, 255, 0.97) 58%,
      rgba(252, 231, 243, 0.96) 100%
    );
  --mobile-floating-pill-filter: blur(18px) saturate(128%);
  --mobile-floating-pill-border: 1px solid rgba(139, 92, 246, 0.3);
  --mobile-floating-pill-shadow:
    0 10px 26px rgba(76, 29, 149, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  --mobile-floating-pill-fallback: linear-gradient(108deg, #eeedff 0%, #ffffff 50%, #fff0f7 100%);
}

@supports (height: 100dvh) and (height: 100svh) {
  :root {
    /* Compensează exact diferența dintre viewportul curent și viewportul mic,
       astfel încât CTA-ul individual să nu coboare odată cu bara browserului. */
    --mobile-browser-toolbar-offset: max(0px, calc(100dvh - 100svh));
    --mobile-detail-floating-pill-bottom:
      calc(var(--mobile-floating-pill-bottom) + var(--mobile-browser-toolbar-offset));
  }
}

.mobile-nav-bar {
  display: none;
}

@media (max-width: 991.98px) {
  body {
    background-attachment: scroll;
  }

  .mobile-nav-bar {
    display: flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--mobile-floating-pill-bottom);
    width: calc(100% - 24px);
    max-width: 540px;
    z-index: 1030;
    background: var(--mobile-floating-pill-background);
    backdrop-filter: var(--mobile-floating-pill-filter);
    -webkit-backdrop-filter: var(--mobile-floating-pill-filter);
    border: var(--mobile-floating-pill-border);
    border-radius: 999px;
    box-shadow: var(--mobile-floating-pill-shadow);
    padding: 3px 6px;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  @media (min-width: 768px) and (max-width: 991.98px) {
    .mobile-nav-bar {
      max-width: 640px !important;
    }
  }

  /* În aplicația instalată, meniul principal este ridicat cu 6px față de
     poziția anterioară: intră numai 12px în safe-area și păstrează minimum
     10px pe dispozitivele cu inset mic sau nul. Barele CTA ale paginilor
     individuale își păstrează poziția existentă. */
  @media (display-mode: standalone) {
    :root {
      --mobile-floating-pill-bottom: max(4px, calc(var(--mobile-safe-bottom, 0px) - 18px));
    }
    .mobile-nav-bar {
      bottom: max(10px, calc(var(--mobile-safe-bottom, 0px) - 12px));
    }
  }

  .navbar-glass .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  @media (max-width: 767.98px) {
    .navbar-glass .container {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
  }

  /* Legible fallback where backdrop-filter isn't supported */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-nav-bar {
      background: var(--mobile-floating-pill-fallback);
    }
  }

  .mobile-nav-item {
    position: relative;
    isolation: isolate;
    flex: 1 1 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    min-height: 44px;
    /* 24px icon + 3px gap + 13px label + 6px padding = aceiași 46px.
       Paddingul vertical mai mic compensează line-height-ul etichetei, deci
       pastila nu-și schimbă geometria când descendenții primesc spațiu. */
    padding: 3px 2px;
    text-decoration: none;
    color: var(--color-text-secondary, #64748b);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 999px;
    cursor: pointer;
    transition: color 100ms ease;
  }

  .mobile-nav-item::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 1px;
    border-radius: 999px;
    background: rgba(91, 79, 233, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.82);
    transition: opacity 80ms ease, transform 100ms cubic-bezier(.2, .8, .2, 1);
  }

  .mobile-nav-item > * {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  .mobile-nav-item:active .mobile-nav-icon-wrap,
  .mobile-nav-item.is-pressing .mobile-nav-icon-wrap,
  .mobile-nav-item.is-navigating .mobile-nav-icon-wrap {
    color: var(--color-brand-identity, #6d4ce8);
  }

  .mobile-nav-item:active::before,
  .mobile-nav-item.is-pressing::before {
    opacity: 1;
    transform: scale(1);
  }

  .mobile-nav-item.is-navigating::before {
    opacity: .72;
    transform: scale(1);
  }

  .mobile-nav-item .mobile-nav-icon-wrap {
    transition: transform 90ms ease, color 90ms ease, opacity 90ms ease;
  }

  .mobile-nav-item .mobile-nav-label {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mobile-nav-item:active .mobile-nav-icon-wrap,
  .mobile-nav-item.is-pressing .mobile-nav-icon-wrap {
    transform: translateY(1px) scale(0.88);
  }

  .mobile-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav-icon {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
  }

  .mobile-nav-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 10px; /* Smaller, sharper text */
    /* Fontul sistem iOS are descendenți mai adânci decât cutia de 11px
       folosită anterior. 13px păstrează integral `g`, `ș` și `ț`. */
    line-height: 1.3;
    font-weight: 500;
    white-space: nowrap;
  }

  .mobile-nav-item.active {
    color: var(--color-brand-identity, #4f46e5);
  }

  .mobile-nav-item.active::before {
    background: rgba(99, 102, 241, 0.12);
    opacity: 1;
    transform: scale(1);
  }

  .mobile-nav-item.active:active::before,
  .mobile-nav-item.active.is-pressing::before,
  .mobile-nav-item.active.is-navigating::before {
    background: rgba(99, 102, 241, 0.2);
  }

  .mobile-nav-item.active .mobile-nav-icon {
    stroke-width: 2px;
    color: currentColor;
    stroke: currentColor;
    fill: none !important;
  }

  .mobile-nav-item.active .mobile-nav-label {
    font-weight: 500;
    color: currentColor;
  }

  /* Teme cromatice individuale pentru pastila activă din navigația de jos (sincronizate 1:1 cu antetul) */
  /* 1. Acasă — Indigo Brand */
  .mobile-nav-item.active:nth-child(1) { color: #4f46e5; }
  .mobile-nav-item.active:nth-child(1)::before { background: rgba(99, 102, 241, 0.12); }
  .mobile-nav-item.active:nth-child(1) .mobile-nav-icon { color: #4f46e5; stroke: #4f46e5; }
  .mobile-nav-item.active:nth-child(1) .mobile-nav-label { color: #4f46e5; }

  /* 2. Evenimente — Violet */
  .mobile-nav-item.active:nth-child(2) { color: #7c3aed; }
  .mobile-nav-item.active:nth-child(2)::before { background: rgba(139, 92, 246, 0.12); }
  .mobile-nav-item.active:nth-child(2) .mobile-nav-icon { color: #7c3aed; stroke: #7c3aed; }
  .mobile-nav-item.active:nth-child(2) .mobile-nav-label { color: #7c3aed; }

  /* 3. Unde ieșim — Smarald/Verde */
  .mobile-nav-item.active:nth-child(3) { color: #059669; }
  .mobile-nav-item.active:nth-child(3)::before { background: rgba(16, 185, 129, 0.12); }
  .mobile-nav-item.active:nth-child(3) .mobile-nav-icon { color: #059669; stroke: #059669; }
  .mobile-nav-item.active:nth-child(3) .mobile-nav-label { color: #059669; }

  /* 4. Shop&Life — Roz/Rose */
  .mobile-nav-item.active:nth-child(4) { color: #db2777; }
  .mobile-nav-item.active:nth-child(4)::before { background: rgba(236, 72, 153, 0.12); }
  .mobile-nav-item.active:nth-child(4) .mobile-nav-icon { color: #db2777; stroke: #db2777; }
  .mobile-nav-item.active:nth-child(4) .mobile-nav-label { color: #db2777; }

  /* 5. Promoții — Chihlimbar/Gold */
  .mobile-nav-item.active:nth-child(5) { color: #d97706; }
  .mobile-nav-item.active:nth-child(5)::before { background: rgba(245, 158, 11, 0.12); }
  .mobile-nav-item.active:nth-child(5) .mobile-nav-icon { color: #d97706; stroke: #d97706; }
  .mobile-nav-item.active:nth-child(5) .mobile-nav-label { color: #d97706; }

  .mobile-nav-item:focus-visible {
    outline: 2px solid var(--primary-color, #6366f1);
    outline-offset: -2px;
    background: rgba(0, 0, 0, 0.05);
  }

  /* Wordmark in the mobile header is the "Acasă" link (see B in
     S1-05C task); keep its focus state visible without altering the
     brand's graphic identity. */
  .navbar-brand:focus-visible {
    outline: 2px solid var(--primary-color, #6366f1);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* "Salvate" indicator dot: plain pink dot, no count, shown only when the
     page explicitly requests it via $mobileNavConfig['show_saved_indicator']. */
  .mobile-nav-dot {
    position: absolute;
    top: -1px;
    right: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary-color, #f43f5e);
    border: 1.5px solid #ffffff;
  }

  /* Extra compact spacing for very small mobile screens (e.g. iPhone SE / 320px width) */
  @media (max-width: 340px) {
    .mobile-nav-bar {
      padding: 4px 2px calc(4px + var(--mobile-safe-bottom, 0px));
    }
    .mobile-nav-label {
      font-size: 8.5px;
    }
    .mobile-nav-item {
      min-width: 38px;
      padding: 3px 1px;
    }
  }

  /* Rezerva pentru bara fixă aparține footerului, nu corpului paginii.
     Altfel Chrome expune după footer o zonă goală care poate fi trasă repetat
     prin overscroll. Footerul rămâne ultimul element vizual al documentului. */
  /* Componenta este sursa de adevăr. Clasa veche rămâne fallback pentru
     browsere fără :has(), dar paginile noi nu trebuie să-și mai sincronizeze
     manual body_class cu randarea barei. */
  body:is(.has-mobile-nav, :has(> .mobile-nav-bar)) {
    padding-bottom: 0;
  }

  body:is(.has-mobile-nav, :has(> .mobile-nav-bar)) .home-footer {
    padding-bottom: calc(24px + var(--mobile-nav-height) + var(--mobile-nav-float-gap) + var(--mobile-safe-bottom));
  }

  body:is(.has-mobile-nav, :has(> .mobile-nav-bar)) .btn-admin-float {
    bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 12px) !important;
  }

  /* Global toast notifications: keep them clear of the bar instead of
     sitting flush against it. */
  body:is(.has-mobile-nav, :has(> .mobile-nav-bar)) .toast-container {
    bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 8px) !important;
  }

  /* ==========================================================================
     Sistem Unitar de Ierarhie Tipografică pe Mobil (Shared/Global Fallback)
     Clase de importanță: Nivel 1 -> Nivel 6 + Acțiuni
     ========================================================================== */

  .evt-typo-h1 {
    font-size: clamp(1.25rem, 5.5vw, 1.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
  }

  .evt-typo-h2 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
    margin-bottom: 0.75rem !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .evt-typo-h3 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #1e293b !important;
  }

  .evt-typo-body {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    color: #334155 !important;
  }

  .evt-typo-caption {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    color: #64748b !important;
  }

  .evt-typo-eyebrow {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
  }

  .evt-typo-btn-sm {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
  }

  /* Optimizări pentru ecrane foarte înguste (320px - 360px) */
  @media (max-width: 360px) {
    .saved-card {
      border-radius: 12px !important;
    }
    .saved-card-main {
      padding: 8px 10px !important;
      gap: 10px !important;
    }
    .saved-card-img {
      width: 56px !important;
      height: 56px !important;
      flex: 0 0 56px !important;
    }
    .saved-card-title {
      font-size: 0.88rem !important;
    }
    .saved-card-remove {
      flex: 0 0 40px !important;
      width: 40px !important;
    }
    #savedTabPills button {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
  }

  /* Ajustare tab pills pentru scroll orizontal fără scrollbar vizibil */
  #savedTabPills {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #savedTabPills::-webkit-scrollbar {
    display: none !important;
  }
}

/* ==========================================================================
   "Salvate" shell page (saved.php)
   ========================================================================== */

body.saved-page {
  background: #f2f2f7 !important;
}

body[data-bs-theme="dark"].saved-page {
  background: #000000 !important;
}

.saved-page-main {
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: 85px !important;
}

.saved-empty-state {
  background: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
}

.saved-empty-icon {
  width: 48px;
  height: 48px;
  color: #94a3b8;
  margin-bottom: 12px;
}

/* Lista salvate (S1-06G) — randată client-side de assets/js/saves.js. */
.saved-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saved-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
}

.saved-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
}

.saved-card-main:focus-visible {
  outline: 2px solid var(--primary-color, #6366f1);
  outline-offset: -2px;
}

.saved-card-img {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 12px;
  object-fit: cover;
}

.saved-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.saved-card-type {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary-color, #6366f1);
}

.saved-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary, #1e293b);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-card-meta {
  font-size: 0.82rem;
  color: var(--color-text-secondary, #475569);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-card-remove {
  flex: 0 0 48px;
  width: 48px;
  border: none;
  border-left: 1px solid var(--color-border, rgba(226, 232, 240, 0.8));
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.saved-card-remove:hover,
.saved-card-remove:focus-visible {
  color: var(--secondary-color, #f43f5e);
}

.saved-card-remove:focus-visible {
  outline: 2px solid var(--primary-color, #6366f1);
  outline-offset: -2px;
}

.saved-card-remove .lucide {
  width: 18px;
  height: 18px;
}