/* =====================================================================
   OrderStraight — Stage 11.1 Mobile Header Fit (v3)
   * Talabat-style header on mobile (round account icon, hide bell <380px)
   * Language switcher INLINE in topbar, styled as a small ghost text
     button matching the bell — no more detached white floating pill.
   * Pure additive CSS — overrides existing inline rules with !important.
   *
   * Stage 14.2 ADDITIONS (appended at the bottom):
   *   - Hide the OrderStraight logo on the topbar (cleaner, more space).
   *   - Slim the topbar height down so it only fits the action row.
   ===================================================================== */

/* --- 1. Topbar layout: location pill takes all remaining space ---------- */
.os-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
}
.os-topbar > .spacer { display: none !important; }
.os-topbar .os-location {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: flex-start !important;
}

/* --- 2. Hide bell icon on small phones --------------------------------- */
@media (max-width: 380px) {
  .os-topbar #osBellBtn { display: none !important; }
  .os-topbar .os-location { font-size: 13px !important; }
}

/* --- 3. Language switcher: inline ghost pill (matches bell theme) ------ */
.os-topbar #osLangBtn {
  flex-shrink: 0 !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  min-height: 28px !important;
  letter-spacing: .3px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background .15s ease;
}
.os-topbar #osLangBtn:hover,
.os-topbar #osLangBtn:focus-visible {
  background: rgba(255,255,255,.20) !important;
  outline: none !important;
}
@media (min-width: 600px) {
  .os-topbar #osLangBtn {
    padding: 6px 14px !important;
    font-size: 13px !important;
    min-height: 32px !important;
  }
}

/* --- 4. Sign in button → round account icon on mobile ------------------ */
@media (max-width: 599px) {
  .os-topbar #osLoginBtn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    color: transparent !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }
  .os-topbar #osLoginBtn::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.418 3.582-7 8-7s8 2.582 8 7'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
  }
  .os-topbar #osAccountBtn {
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    flex-shrink: 0 !important;
  }
}

/* =====================================================================
   Stage 14.2 — Hide topbar logo + slim header.
   These rules override the inline <style> block in index.php that pushed
   the topbar to 84-96px tall to host an 84px logo. With the logo hidden,
   the bar only needs to fit the action-row controls (~36-40px), so we
   collapse min-height + padding back down. Selectors target the logo
   anchor, the plate wrapper, AND the <img> itself so the entire branch
   is removed from layout (no leftover gap, no aria-busy whitespace).
   ===================================================================== */

/* Hide the entire logo branch — anchor, plate wrapper, and img.
   IMPORTANT: scoped to the logo's specific anchor `href="/"` so it does
   NOT match other topbar anchors with aria-label (e.g. the Stage 13
   Favorites heart `<a id="osFavBtn" href="/favorites.php" aria-label="…">`,
   which would otherwise be hidden too). */
.os-topbar > a[href="/"],
.os-topbar .os-logo-plate,
.os-topbar .os-logo {
  display: none !important;
}

/* Slim the bar — only needs to fit the 36-40px control row + padding */
.os-topbar {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Desktop tablet: keep the same slim bar (no logo there either) */
@media (min-width: 720px) {
  .os-topbar {
    min-height: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}