/* ============================================================================
 * SMASH BURGER -- top-bar.css  ·  the single unified header (dropdown style)
 * Always dark surface for one consistent look. Language + profile are dropdowns.
 * =========================================================================== */
:root { --smash-topbar-h: 56px; }

#smash-top-bar {
  position: -webkit-sticky; position: sticky; top: 0; left: 0; right: 0;
  z-index: 240; height: var(--smash-topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 14px; box-sizing: border-box;
  background: rgba(12, 8, 6, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 244, 220, 0.12);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.34);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* ---- brand ---- */
.smash-tb-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.smash-tb-brand img { height: 30px; width: auto; display: block; }
.smash-tb-brand strong { font-weight: 900; font-size: 15px; letter-spacing: 0.02em; white-space: nowrap; color: #fff4dc; }

/* ---- right cluster ---- */
.smash-tb-actions { display: inline-flex; align-items: center; gap: 8px; }

/* ---- generic dropdown (details/summary) ---- */
.smash-tb-menu { position: relative; }
.smash-tb-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.smash-tb-menu > summary::-webkit-details-marker { display: none; }
.smash-tb-caret { transition: transform 0.18s ease; opacity: 0.8; }
.smash-tb-menu[open] > summary .smash-tb-caret { transform: rotate(180deg); }

.smash-tb-panel {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 196px;
  background: #2a1c12; border: 1px solid rgba(255, 220, 160, 0.26); border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6); padding: 7px; z-index: 260;
  display: flex; flex-direction: column; gap: 3px;
  animation: smashTbIn 0.14s ease;
}
@keyframes smashTbIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- language dropdown ---- */
.smash-tb-langmenu > summary {
  font-weight: 800; font-size: 12px; letter-spacing: 0.04em; color: #fff4dc;
  padding: 7px 10px; border-radius: 999px; background: rgba(255, 244, 220, 0.1);
}
.smash-tb-langcur { line-height: 1; }
.smash-tb-langitem {
  appearance: none; border: 0; background: rgba(255, 244, 220, 0.06); cursor: pointer; text-align: left;
  font-family: inherit; font-weight: 700; font-size: 15px; color: #fff7ea;
  padding: 11px 13px; border-radius: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.smash-tb-langitem span { font-size: 11px; font-weight: 800; color: #ffd27b; }
.smash-tb-langitem:hover { background: rgba(255, 210, 123, 0.18); color: #fff; }
.smash-tb-langitem.is-active { background: #ffd27b; color: #1a0f06; }
.smash-tb-langitem.is-active span { color: #6b4a10; }

/* ---- profile dropdown ---- */
.smash-tb-profmenu > summary { border-radius: 50%; }
.smash-tb-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f05a1a 0%, #d9480f 55%, #9f2e07 100%); color: #fff;
  box-shadow: 0 4px 14px rgba(217, 72, 15, 0.34); overflow: hidden; position: relative;
}
.smash-tb-avatar svg { width: 20px; height: 20px; display: block; }
.smash-tb-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.smash-tb-profmenu[data-signed="true"] > summary .smash-tb-avatar::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%;
  background: #34d058; border: 2px solid #1a120c;
}
.smash-tb-profpanel { min-width: 196px; }
.smash-tb-pname {
  padding: 8px 12px 6px; font-size: 12px; font-weight: 800; color: #ffd27b;
  border-bottom: 1px solid rgba(255, 244, 220, 0.12); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smash-tb-mi {
  appearance: none; border: 0; background: rgba(255, 244, 220, 0.06); cursor: pointer; text-align: left; text-decoration: none;
  font-family: inherit; font-weight: 700; font-size: 15px; color: #fff7ea;
  padding: 12px 13px; border-radius: 9px; display: block; width: 100%; box-sizing: border-box;
}
.smash-tb-mi:hover { background: rgba(255, 210, 123, 0.18); color: #fff; }
.smash-tb-cta { background: #e8521f; color: #fff; text-align: center; font-weight: 900; letter-spacing: 0.02em; }
.smash-tb-cta:hover { background: #f0641f; color: #fff; }

/* signed-in / signed-out visibility */
.smash-tb-profmenu[data-signed="true"] .smash-tb-when-out { display: none; }
.smash-tb-profmenu[data-signed="false"] .smash-tb-when-in { display: none; }
.smash-tb-profmenu[data-signed="false"] .smash-tb-pname { display: none; }

.smash-tb-hidden { display: none !important; }

@media (max-width: 380px) {
  .smash-tb-brand strong { font-size: 13px; }
  .smash-tb-brand img { height: 26px; }
  .smash-tb-langmenu > summary { padding: 6px 8px; }
}