/* =========================
   LISTA DE ANIMES (template_listas.php)
   Escopo: .rl-list-page
========================= */

.rl-list-page{
  font-family: var(--rl-font);
}

.rl-list-header{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin: 10px 0 18px;
}

.rl-list-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.rl-list-filters{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

.rl-dd{
  position:relative;
  min-width: 170px;
}

.rl-dd__btn{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--rl-border);
  background: var(--rl-surface);
  color: var(--rl-text);
  transition: background var(--rl-fast), border-color var(--rl-fast);
}

.rl-dd__btn:hover{
  background: var(--rl-surface-2);
}

.rl-dd__label{
  font-size:12px;
  color: var(--rl-muted);
  line-height:1;
}

.rl-dd__value{
  font-size:14px;
  font-weight:700;
  line-height:1.1;
}

.rl-dd__menu{
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  width: 260px;
  max-height: 300px;
  overflow:auto;
  border-radius: 14px;
  border:1px solid var(--rl-border);
  background: var(--rl-panel);
  box-shadow: var(--rl-shadow);
  padding:8px;
  display:none;
  z-index: 50;
}

.rl-dd.is-open .rl-dd__menu{
  display:block;
}

.rl-dd__item{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius:12px;
  border:0;
  background: var(--rl-surface);
  color: var(--rl-text);
  font-weight:600;
  transition: background var(--rl-fast);
}

.rl-dd__item:hover{
  background: var(--rl-hover);
}

.rl-apply{
  height:44px;
  padding:0 18px;
  border-radius:999px;
  border:0;
  background: var(--rl-accent);
  color:#fff;
  font-weight:800;
  transition: background var(--rl-fast), transform var(--rl-fast);
}

.rl-apply:hover{
  background: var(--rl-accent-hover);
}

.rl-apply:active{
  transform: translateY(1px);
}

.rl-list-search{
  flex: 1;
  min-width: 220px;
  display:flex;
  justify-content:flex-end;
}

.rl-search{
  width: min(420px, 100%);
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--rl-border);
  background: var(--rl-search-bg);
  color: var(--rl-text);
  display:flex;
  align-items:center;
  gap:10px;
}

.rl-search input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color: var(--rl-text);
  font-size:14px;
}

.rl-search input::placeholder{
  color: var(--rl-placeholder);
}

/* =========================
   A–Z BAR (sem transparências / padronizado)
========================= */
.rl-azbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin: 10px 0 18px;
}

/* pill padrão: tamanho fixo e texto centralizado */
.rl-az-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  height: 36px;
  min-width: 44px;          /* garante que A/B/C não fiquem “miúdos” */
  padding: 0 14px;          /* largura consistente */
  border-radius: 12px;

  border: 1px solid #2a2a2a;      /* sem rgba */
  background: var(--rl-surface);  /* sólido */
  color: var(--rl-text);

  font-size: 13px;
  font-weight: 900;
  text-decoration:none;

  transition: background var(--rl-fast), transform var(--rl-fast), border-color var(--rl-fast);
  user-select:none;
}

/* hover sólido */
.rl-az-btn:hover{
  background: var(--rl-surface-2);
  border-color: #3a3a3a;     /* sem rgba */
  transform: translateY(-1px);
}
.rl-az-btn:active{
  transform: translateY(0);
}

/* ativo (All / letra selecionada) */
.rl-az-btn.is-active{
  background: var(--rl-accent);
  border-color: var(--rl-accent);
  color:#fff;
}

/* “Letras” (label): parece botão, mas sem comportamento de hover agressivo */
.rl-az-btn--label{
  cursor: default;
}

/* ícone do Letras */
.rl-az-ico{
  display:inline-block;
  flex: 0 0 auto;
}

/* evita que o label “Letras” fique estreito demais */
.rl-az-btn--label{
  min-width: 88px;
  padding: 0 16px;
}

/* =========================
   GRID DOS CARDS
========================= */
.rl-list-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* ===== FIX: alinhar Lista com o header (evita colar nas bordas) ===== */
.rl-list-page{
  padding-left: 16px;
  padding-right: 16px;
}

/* centraliza os blocos principais da página */
.rl-list-page .rl-list-header,
.rl-list-page .rl-azbar,
.rl-list-page .rl-list-grid,
.rl-list-page .rl-list-pagination{
  width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   PAGINAÇÃO (estilo A–Z, sem transparências)
========================= */

.rl-list-pagination .page-numbers{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  margin:0;
  justify-content:center;
}

/* links e current como “pills” iguais A–Z */
.rl-list-pagination .page-numbers a,
.rl-list-pagination .page-numbers span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 36px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 12px;

  border: 1px solid #2a2a2a;         /* sólido, sem rgba */
  background: var(--rl-surface);     /* sólido */
  color: var(--rl-text);

  font-size: 13px;
  font-weight: 900;
  text-decoration:none;

  transition: background var(--rl-fast), transform var(--rl-fast), border-color var(--rl-fast);
  user-select:none;
}

.rl-list-pagination .page-numbers a:hover{
  background: var(--rl-surface-2);
  border-color: #3a3a3a;             /* sólido */
  transform: translateY(-1px);
}

.rl-list-pagination .page-numbers a:active{
  transform: translateY(0);
}

/* página atual */
.rl-list-pagination .page-numbers .current{
  background: var(--rl-accent);
  border-color: var(--rl-accent);
  color:#fff;
}

/* “…” do paginate_links */
.rl-list-pagination .page-numbers .dots{
  cursor: default;
  opacity: 1; /* sem transparência */
}

/* =================================================
   BLINDAGEM ANTI-TEXTURA (noise/riscos) — A–Z + Paginação
   Objetivo: fundo totalmente liso, sem heranças de overlay.
================================================= */

/* 1) Container liso atrás da barra A–Z e da paginação */
.rl-azbar,
.rl-list-pagination{
  position: relative;
  z-index: 2;
  background: #0f0f0f;          /* liso, “mata” a textura atrás */
  border-radius: 14px;
  padding: 10px;
}

/* 2) Botões/pills totalmente lisos */
.rl-az-btn,
.rl-list-pagination .page-numbers a,
.rl-list-pagination .page-numbers span{
  opacity: 1 !important;

  background-color: #1b1b1b !important;  /* liso */
  background-image: none !important;
  box-shadow: none !important;

  border: 1px solid #333333 !important;

  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

/* hover sólido */
.rl-az-btn:hover,
.rl-list-pagination .page-numbers a:hover{
  background-color: rgb(255 124 33) !important;
  border-color: #3c3c3c !important;
  color: var(--rl-text);
}

/* ativos */
.rl-az-btn.is-active,
.rl-list-pagination .page-numbers .current{
  background-color: var(--rl-accent) !important;
  border-color: var(--rl-accent) !important;
}

/* “…” do paginate_links */
.rl-list-pagination .page-numbers .dots{
  background-color: #1b1b1b !important;
}

/* =========================
   Scrollbar (dropdown menus)
   Chrome/Edge/Safari + Firefox
========================= */

/* Chrome / Edge / Safari */
.rl-dd__menu::-webkit-scrollbar{
  width: 10px;
}

.rl-dd__menu::-webkit-scrollbar-track{
  background: #101010;       /* trilho sólido */
  border-left: 1px solid #222;
  border-radius: 12px;
}

.rl-dd__menu::-webkit-scrollbar-thumb{
  background: #2a2a2a;       /* “puxador” sólido */
  border-radius: 12px;
  border: 2px solid #101010; /* cria um “gap” sem transparência */
}

.rl-dd__menu::-webkit-scrollbar-thumb:hover{
  background: #3a3a3a;
}

/* Firefox */
.rl-dd__menu{
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a #101010; /* thumb track */
}

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 1180px){
  .rl-list-grid{ grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 980px){
  .rl-list-top{
    flex-direction:column;
    align-items:stretch;
  }

  .rl-list-search{
    justify-content:flex-start;
  }

  .rl-dd{
    min-width: 160px;
  }

  .rl-list-grid{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px){
  .rl-list-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px){
  .rl-list-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* em telas grandes, dá um respiro um pouco maior */
@media (min-width: 1200px){
  .rl-list-page{
    padding-left: 22px;
    padding-right: 22px;
  }
}


/* =================================================
   CALENDÁRIO (page-calendario.php) — estilo padronizado (label + value)
   Sem transparência (anti-textura)
================================================= */
.rl-cal-page{
  padding-left: 16px;
  padding-right: 16px;
  color: var(--rl-text);
  font-family: var(--rl-font);
}

.rl-cal-wrap{
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 18px 0 28px;
}

.rl-cal-header{
  margin: 6px 0 14px;
}

.rl-cal-title{
  position: relative;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.rl-cal-title::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 220px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--rl-muted), rgba(181, 181, 190, .55) 35%, rgba(181, 181, 190, 0) 100%);
    pointer-events: none;
}

.rl-cal-subtitle{
  margin: 6px 0 0;
  color: var(--rl-muted);
  font-size: 14px;
}

/* Tabs no estilo “capsule card” */
.rl-cal-tabs{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin: 14px 0 18px;

  /* blindagem contra textura atrás */
  background: #0f0f0f;
  border-radius: 14px;
  padding: 10px;
  z-index: 1;
}

.rl-cal-tab{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap: 6px;

  min-width: 170px;
  height: 56px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2a2a2a;
  background: #1b1b1b;       /* sólido, sem mistura com textura */
  background-image: none !important;
  box-shadow: none !important;
  text-decoration:none;
  color: var(--rl-text);
  transition: background var(--rl-fast), transform var(--rl-fast), border-color var(--rl-fast);
  z-index: 1;
}

.rl-cal-tab:hover{
  background: #242424;
  border-color: #3a3a3a;
  transform: translateY(-1px);
  color: var(--rl-text);
}

.rl-cal-tab:active{
  transform: translateY(0);
}

.rl-cal-tab__label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--rl-muted);
  line-height: 1;
}

.rl-cal-tab__value{
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
}

.rl-cal-tab.is-active{
  background: var(--rl-accent);
  border-color: var(--rl-accent);
  color: #fff;
}

.rl-cal-tab.is-active .rl-cal-tab__label{
  color: #fff;
}

/* Ícones do calendário */
.rl-cal-ico{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.rl-cal-tab__value{
  display:flex;
  align-items:center;
  gap: 8px;              /* respiro mais elegante */
  line-height: 1.15;    /* texto mais estável visualmente */
}


/* Mensagens */
.rl-cal-warn,
.rl-cal-empty{
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 14px;
  color: var(--rl-text);
}

.rl-cal-empty strong,
.rl-cal-warn strong{
  font-weight: 900;
}

/* Responsivo */
@media (max-width: 980px){
  .rl-cal-tab{
    min-width: 160px;
  }
}

@media (max-width: 520px){
  .rl-cal-tab{
    min-width: 100%;
  }
}

/* =================================================
   PESQUISA (search.php)
   Usa a base visual da Lista de Animes
================================================= */

.rl-list-page .rl-list-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.rl-search-page{
  font-family: var(--rl-font);
  padding-left: 16px;
  padding-right: 16px;
}

.rl-search-title{
  margin: 6px 0 14px;
  font-size: 22px;
  font-weight: 900;
  color: var(--rl-text);
}

.rl-search-term{
  color: var(--rl-accent);
  word-break: break-word;
}

/* mensagem de “nenhum resultado” */
.rl-search-page .rl-cal-empty{
  margin-top: 16px;
}

/* =================================================
   LISTA DE GÊNEROS (template_genero.php)
   Estilo igual Calendário: caixas sólidas + label + value + ícone
================================================= */

.rl-gen-page{
  font-family: var(--rl-font);
  color: var(--rl-text);
}

.rl-gen-wrap{
  width: min(1200px, 100%);
  margin: 0 auto;
}

/* grid de gêneros */
.rl-gen-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;

  /* blindagem contra textura no “miolo” */
  background: #0f0f0f;
  border-radius: 14px;
  padding: 10px;
}

@media (max-width: 1180px){ .rl-gen-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 980px){  .rl-gen-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px){  .rl-gen-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){  .rl-gen-grid{ grid-template-columns: repeat(2, 1fr); } }

/* card/capsule */
.rl-gen-card{
  display: flex;
  flex-direction: column;
  gap: 6px;

  min-height: 74px;
  padding: 12px;

  border-radius: 14px;
  border: 1px solid #2a2a2a;
  background: #1b1b1b;

  text-decoration: none;
  color: var(--rl-text);

  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;

  transition: background var(--rl-fast), transform var(--rl-fast), border-color var(--rl-fast);
  z-index: 1;
}

.rl-gen-card:hover{
  background: var(--rl-gen-hover-bg, #242424);          /* cor automática */
  border-color: var(--rl-gen-hover-border, #3a3a3a);    /* borda automática */
  transform: translateY(-1px);
  color: var(--rl-text);
}

.rl-gen-card:active{ transform: translateY(0); }

.rl-gen-card__label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--rl-muted);
  line-height: 1;
}

.rl-gen-card__value{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

.rl-gen-ico{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* contador */
.rl-gen-card__count{
  margin-top: 2px;
  font-size: 12px;
  color: var(--rl-muted);
}

@media (max-width: 520px){
  .rl-dd{ min-width: 100%; }

  .rl-dd__menu{
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 520px){
  .rl-azbar,
  .rl-list-pagination{
    padding: 8px;
    border-radius: 12px;
  }
}