/* ============================================================
   POLIMENTO DA PAGINA DE HOTEL — tarefa #25
   Correcoes de alinhamento, simetria e alvos de toque apontadas
   na auditoria de UI/UX. Carrega por ultimo no header.php.

   Escopo deliberadamente estreito: so o que e inequivoco
   (mesmo papel = mesmo estilo, alvo de toque grande o bastante,
   espacamento previsivel). Nao redesenha nenhuma secao.
   ============================================================ */

:root {
  /* eram 8 cinzas de borda quase iguais espalhados por 9 arquivos
     (#E2E6EA, #e0e0e0, #e4e4e4, #E7E7E7, #e1e1e1, #e7ecf1, #e4e8ec, #d5e3ef)
     e 6 fundos claros diferentes — daqui pra frente, estes: */
  --border: #E2E6EA;
  --surface: #F6F8FA;
  --surface-blue: #EEF4F9;
  --radius-card: 8px;
}

/* ============================================================
   1) ABAS DE SECAO (.single-tabs)
   As abas rolam junto com a pagina — nada fixo aqui. O unico
   elemento fixo do site continua sendo o #header (56px).
   ============================================================ */
/* aba da secao visivel */
body.single-hotel .single-tabs nav li a.active { font-weight: 900; text-decoration: underline; }

/* as ancoras param abaixo do #header, em vez de colar no topo da tela e
   ficarem escondidas atras dele */
body.single-hotel #descricao,
body.single-hotel #servicos,
body.single-hotel #localizacao,
body.single-hotel #proximidades,
body.single-hotel #promocoes,
body.single-hotel #suites,
body.single-hotel #avaliacoes,
body.single-hotel #regras,
body.single-hotel #faq { scroll-margin-top: 90px; }

/* ============================================================
   1b) BLOCO "POR QUE RESERVAR EM NOSSO SITE?" (.reserva-extra nav)
   Herdava color:#fff de quando o #reserva era uma caixa azul. Como
   agora so o form tem fundo azul, o texto ficava BRANCO SOBRE BRANCO:
   um bloco alto e vazio logo abaixo de "Cancele sua reserva
   gratuitamente". Recolorido para o texto do tema.
   ============================================================ */
body.single-hotel #reserva .reserva-extra nav { margin-top: 22px; }
body.single-hotel #reserva .reserva-extra nav strong {
  margin-bottom: 14px; font-size: 15px; color: var(--darkblue);
}
body.single-hotel #reserva .reserva-extra nav li { color: var(--black); }
body.single-hotel #reserva .reserva-extra nav li::before { background-color: var(--blue); }
body.single-hotel #reserva .reserva-extra nav p,
body.single-hotel #reserva .reserva-extra nav span { color: var(--black); }

/* ============================================================
   2) STEPPERS DE OCUPACAO (+/-)
   Mediam 14x10px no desktop e 10x7px no mobile, contra os 44x44
   recomendados. Continuam <b> (trocar a tag mexeria no handler do
   core.js), mas agora com area de toque de verdade.
   ============================================================ */
#reserva section form label span.qtd b {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 22px; right: 4px; cursor: pointer;
}
#reserva section form label span.qtd b.menos { top: 0; }
#reserva section form label span.qtd b.mais  { top: 23px; }
#reserva section form label span.qtd b:hover { background: rgba(0,0,0,.05); border-radius: 3px; }
/* no limite (min/max) o botao esmaece — a classe vem do core.js */
#reserva section form label span.qtd b.qs-limite { opacity: .3; cursor: default; }
#reserva section form label span.qtd b.qs-limite:hover { background: none; }

@media (max-width: 680px) {
  #reserva section form label span.qtd b { width: 34px; height: 22px; right: 2px; }
}

/* foco de teclado visivel: o input de datas tem opacity:0 por cima dos chips,
   entao quem chega nele por Tab nao via foco nenhum no campo mais importante */
#reserva .reserva-dates input[name=dates]:focus-visible { outline: none; }
#reserva .reserva-dates:focus-within .reserva-dates-chips {
  outline: 3px solid var(--yellow); outline-offset: 2px;
}

/* ============================================================
   3) TITULOS DE SECAO
   O espaco entre titulo e conteudo variava de 26px a 80px, e o
   bloco de suites era o unico centralizado.
   ============================================================ */
body.single-hotel .head strong,
body.single-hotel .head h2.strong { margin-bottom: 26px; }
body.single-hotel .block-suites .head { text-align: left; }
body.single-hotel .block-suites .head h2.strong { text-align: left; }

/* subtitulo de secao: eram 3 estilos (16/700/azul, 15/700/#1A1A1A,
   16/700/uppercase/#444) para o mesmo nivel */
body.single-hotel .block-regras h3,
body.single-hotel .block-proximidades h3,
body.single-hotel .av-sub { color: var(--blue); font-size: 16px; font-weight: 700; text-transform: none; }

/* ============================================================
   4) BOTOES
   O mesmo papel (CTA primario) aparecia com 7 raios e 10 alturas
   diferentes. Aqui so se padroniza o raio e a altura minima —
   as cores de cada contexto continuam como estao.
   ============================================================ */
body.single-hotel .block-suites section article span.bt a,
body.single-hotel .block-outro article small a,
body.single-hotel .av-rodape a,
body.single-hotel .loc-link a,
body.single-hotel .no-promo a {
  border-radius: var(--radius-card);
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
/* "Saiba mais" aparecia com font-weight 900 nas suites e 700 no outro hotel */
body.single-hotel .block-outro article small a { font-weight: 900; }

/* "Clique aqui" (secao Promocoes sem promocao ativa): no CSS antigo o botao
   era position:absolute com left:50% + translateX(-50%). O style inline do
   template (position:inherit) desliga so o absolute — o translate continua
   valendo e puxava o botao 106px para a esquerda, desalinhado do texto
   centralizado logo acima. Sem absolute, quem centraliza e o text-align
   center do .no-promo. */
body.single-hotel .no-promo a { position: static; left: auto; transform: none; }

/* ============================================================
   5) RAIO DE CARD
   .com-cat e .hero-cell usavam 8px; .av-item, slide de suite e
   .qs-le-box usavam 10px; .prox-rodape 4px; regras e FAQ 0.
   ============================================================ */
body.single-hotel .av-item,
body.single-hotel .qs-le-box,
body.single-hotel .prox-rodape,
body.single-hotel .block-suites section article figure { border-radius: var(--radius-card); }

/* ============================================================
   6) COMODIDADES — cards de altura livre deixavam a borda de baixo
   serrilhada em cada linha do grid
   ============================================================ */
body.single-hotel .com-grid { align-items: stretch; }
body.single-hotel .com-cat { height: 100%; }

/* ============================================================
   7) ATALHOS SOBRE A GALERIA no mobile
   Viravam bolinhas de ~30px sem rotulo (o <span> do texto sumia),
   justamente os dois cliques que mais pesam na decisao.
   ============================================================ */
@media (max-width: 680px) {
  body.single-hotel .single-picture .hero-nav { position: static; margin: 10px 0 0; }
  body.single-hotel .single-picture .hero-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.single-hotel .single-picture .hero-nav li a {
    justify-content: center; min-height: 44px; padding: 10px 12px; font-size: 13px;
    border: 1px solid var(--border); box-shadow: none;
    /* abaixo de 430px o hero-booking.css poe border-radius:50% (pensado pra
       botao circular so-icone) e gap:0 — como o rotulo fica visivel aqui
       (regra logo abaixo), a caixa nunca fica quadrada e o 50% vira uma
       ELIPSE (raio de 50% cabe no eixo curto mas estica no eixo largo).
       Pilula de verdade = raio fixo, nao percentual. */
    border-radius: 22px; gap: 8px;
  }
  body.single-hotel .single-picture .hero-nav li a span { display: inline !important; }
}