/* Category drawer — mirrors Dubla Filmes Android CategorySideMenu */

.dubla-cat-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.dubla-cat-menu-btn:hover,
.dubla-cat-menu-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.dubla-cat-menu-btn svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* Mobile header: menu | logo | search */
@media (max-width: 767px) {
  .shell-top-mobile.dubla-cat-enhanced {
    display: grid !important;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center;
    justify-content: initial;
    gap: 0.5rem;
  }

  .shell-top-mobile.dubla-cat-enhanced > a:first-of-type,
  .shell-top-mobile.dubla-cat-enhanced .brand-logo {
    justify-self: center;
  }

  .shell-top-mobile.dubla-cat-enhanced > a.icon-btn,
  .shell-top-mobile.dubla-cat-enhanced > a[aria-label="Buscar"] {
    justify-self: end;
  }
}

.shell-top-desktop-inner.dubla-cat-enhanced {
  gap: 1rem;
}

.shell-top-desktop-inner.dubla-cat-enhanced .dubla-cat-menu-btn {
  order: -1;
}

/* Hide horizontal chips — categories live in the drawer */
.app-shell .chip-row {
  display: none !important;
}

.dubla-cat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.dubla-cat-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.dubla-cat-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 90;
  width: min(78vw, 20rem);
  background: #0c0c10;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55);
  transform: translateX(-105%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.dubla-cat-drawer.is-open {
  transform: translateX(0);
}

.dubla-cat-drawer-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1rem 0.85rem;
  flex-shrink: 0;
}

.dubla-cat-drawer-header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
}

.dubla-cat-drawer-header button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dubla-cat-drawer-header h2 {
  margin: 0;
  font-family: var(--font-body, "Source Sans 3", system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.dubla-cat-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.65rem 1.5rem;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dubla-cat-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.dubla-cat-list li {
  margin: 0;
}

.dubla-cat-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0.55rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body, "Source Sans 3", system-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.85rem 0.9rem 0.85rem 1rem;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}

.dubla-cat-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.dubla-cat-item.is-active {
  color: #fff;
  background: #3a1016;
}

.dubla-cat-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--brand, #e02735);
}

body.dubla-cat-open {
  overflow: hidden;
}

/* Page heading mirrors app: FILMES | CATEGORIA */
.page-heading.dubla-cat-heading {
  font-size: clamp(1.55rem, 5vw, 2.25rem);
}

/* Campo "Buscar em …" ancorado no header. As medidas vêm do JS, que mede o
   espaço livre entre o menu e os ícones; sem espaço, o campo volta ao corpo.
   !important: alguns filtros/extensões do Brave sobrescrevem position. */
body.dubla-search-docked .app-shell .search-field {
  position: fixed !important;
  top: var(--dubla-search-top, 0.85rem) !important;
  left: var(--dubla-search-left, 50%) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--dubla-search-width, 22rem) !important;
  max-width: none !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0.6rem 0.95rem;
  font-size: 0.95rem;
  z-index: 45;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

/* No mobile o campo ocupa a faixa do logo. */
body.dubla-search-takeover .shell-top-mobile .brand-logo {
  visibility: hidden;
}

/* Some com o drawer aberto para nao ficar por cima do menu. */
body.dubla-cat-open .app-shell .search-field {
  opacity: 0;
  pointer-events: none;
}