/* home-top-bar.css
 * ---------------------------------------------------------------------------
 * Index globe top bar. The CHROME (fixed glass header, left/centre/right slots)
 * is the shared `.create-listing-topbar` component from create-listing-topbar.css
 * — same markup, same CSS, no duplication. This file only styles the page-specific
 * contents of each slot:
 *   - a "+" create shortcut pinned top-left  (MOBILE ONLY, like the IG story +)
 *   - a centred "Arrendar / Comprar" mode switcher with a down caret (all
 *     viewports); "Comprar" is flagged "Em breve" and cannot be selected yet.
 * Loaded BEFORE create-listing-topbar.css so the shared component wins the cascade.
 * ------------------------------------------------------------------------- */

/* ---- shared glass button base ------------------------------------------- */
body.index-page .home-topbar-create,
body.index-page .home-mode__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--liquid-glass-border);
  background: var(--liquid-glass-surface);
  box-shadow: var(--liquid-glass-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  backdrop-filter: blur(26px) saturate(1.28);
  isolation: isolate;
  color: #172230;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, box-shadow .16s ease;
}
:root[data-theme=night] body.index-page .home-topbar-create,
:root[data-theme=night] body.index-page .home-mode__toggle {
  color: #eef4fb;
}

/* ---- create "+" (top-left, MOBILE ONLY) ---------------------------------
 * Hidden on desktop: the left sidebar already carries a "Criar" entry.
 * It keeps its flex slot via visibility (not display) so the centred mode
 * switch stays perfectly centred on every viewport. The circle chrome comes
 * from the shared `.create-listing-topbar__button--glass` class. */
body.index-page .home-topbar-create {
  visibility: hidden;
}
@media (max-width: 900.98px) {
  body.index-page .home-topbar-create {
    visibility: visible;
  }
}
body.index-page .home-topbar-create__icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 25px;
  height: 25px;
}
body.index-page .home-topbar-create:active {
  transform: scale(.94);
}

/* ---- mode switcher (centre slot of the shared topbar) -------------------
 * In-flow between "+" and the bell, so the header's space-between keeps it
 * centred. The dropdown menu is absolutely anchored under the toggle. */
body.index-page .home-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;               /* only the button + menu capture clicks */
}
body.index-page .home-mode__toggle {
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
}
body.index-page .home-mode__toggle:active { transform: scale(.97); }
body.index-page .home-mode__label { position: relative; z-index: 1; }
body.index-page .home-mode__caret {
  position: relative;
  z-index: 1;
  transition: transform .22s ease;
}
body.index-page .home-mode__toggle[aria-expanded="true"] .home-mode__caret {
  transform: rotate(180deg);
}

/* ---- dropdown menu ------------------------------------------------------- */
body.index-page .home-mode__menu {
  pointer-events: auto;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid var(--liquid-glass-border);
  background: var(--liquid-glass-surface);
  box-shadow: var(--liquid-glass-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  backdrop-filter: blur(26px) saturate(1.28);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform-origin: top center;
  animation: home-mode-in .18s cubic-bezier(.22, 1, .36, 1) both;
}
body.index-page .home-mode__menu[hidden] { display: none; }
@keyframes home-mode-in {
  from { opacity: 0; transform: translate(-50%, -6px) scale(.97); }
  to   { opacity: 1; transform: translateX(-50%); }
}

body.index-page .home-mode__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--theme-text, #172230);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
body.index-page .home-mode__option:hover:not([disabled]),
body.index-page .home-mode__option:focus-visible {
  background: var(--liquid-glass-item-active-bg, rgba(120, 130, 148, .14));
}
body.index-page .home-mode__option.is-active { font-weight: 700; }
body.index-page .home-mode__check { flex: 0 0 auto; color: #e61e4d; }

/* "Comprar" — coming soon, not selectable */
body.index-page .home-mode__option--soon {
  cursor: not-allowed;
  color: var(--theme-text-muted, #8a94a3);
}
body.index-page .home-mode__soon {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(230, 30, 77, .12);
  color: #e61e4d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}