/* ReservasBrasil — ajustes próprios sobre o template Vilena */

/* a logo (1774x887px) não tinha tamanho definido em nenhum CSS do template
   e aparecia em tamanho real dentro do menu, estourando o cabeçalho */
.navbar-brand { padding-top: 0; padding-bottom: 0; }
.nav-logo { max-height: 92px; width: auto; }
.footer-logo .logo-bottom { max-height: 60px; width: auto; }

/* ~2 linhas de respiro entre o banner azul e o início do conteúdo — em toda página
   que começa com <section class="full-row bg-white"> logo depois do cabeçalho.
   É sempre essa seção (confirmado: só existe 1 "full-row bg-white" por página).
   O ".full-row" do template já vem com padding-top:80px — aqui é SOBRESCRITO
   (não somado), senão o espaço dobra. */
.full-row.bg-white { padding-top: 3rem; margin-top: 0; }

/* texto de abertura do início do site, com destaque */
.rb-texto-destaque { font-size: 22px; font-weight: 500; }

/* o template desenha uma linha embaixo do cabeçalho (.header-1{border-bottom:1px solid})
   em toda página — some com ela */
.header-1 { border-bottom: none; }

/* todos os passos ficam na mesma tela, um abaixo do outro; só os ainda não
   alcançados começam escondidos (rb-step-oculto), revelados conforme o
   visitante avança. Não existe mais "tela" separada por passo, então não
   precisa de botão Voltar: é só rolar pra cima e escolher outra opção. */
.rb-step-oculto { display: none; }
.rb-step { padding: 25px 0; border-bottom: 1px solid var(--light-gray-color); }
.rb-step:last-child { border-bottom: 0; padding-bottom: 0; }

.rb-progress { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0 0 10px; position: sticky; top: 0; background: #fff; z-index: 5; }
.rb-progress li { flex: 1 1 auto; text-align: center; padding: 10px 5px; font-size: 13px; color: var(--dark-text-color); border-bottom: 3px solid var(--light-gray-color); }
.rb-progress li.done { color: var(--secondery-theme-color); border-color: var(--secondery-theme-color); cursor: pointer; }
.rb-progress li .num { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background: var(--light-gray-color); color: #fff; font-size: 12px; margin-right: 6px; }
.rb-progress li.done .num { background: var(--secondery-theme-color); }
@media (max-width: 600px){ .rb-progress li .lbl { display: none; } /* só o número, cabe na tela do celular */ }

.rb-cards { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.rb-card { width: calc(33.333% - 20px); margin: 0 10px 20px; padding: 20px; background: #fff; border: 2px solid var(--light-gray-color); border-radius: 4px; cursor: pointer; transition: all .15s ease; }
.rb-card:hover { border-color: var(--primary-theme-color); box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.rb-card.selected { border-color: var(--secondery-theme-color); background: #f5f8ff; }
.rb-card h5 { margin-bottom: 6px; }
.rb-card .rb-card-sub { color: var(--body-text-color); font-size: 13px; margin-bottom: 8px; }
.rb-card .rb-card-preco { color: var(--secondery-theme-color); font-weight: 700; }
.rb-card .rb-card-obs { color: var(--body-text-color); font-size: 11px; opacity: .75; margin-top: 2px; }
@media (max-width: 768px){ .rb-card { width: calc(50% - 20px); } }
@media (max-width: 500px){ .rb-card { width: calc(100% - 20px); } }

.rb-vazio { padding: 30px; text-align: center; color: var(--body-text-color); background: var(--gray-color); border-radius: 4px; }

.rb-resumo-item { padding: 10px 0; border-bottom: 1px solid var(--light-gray-color); }
.rb-resumo-item .label { color: var(--body-text-color); font-size: 13px; }

/* Reserva de mais de um quarto na mesma solicitação: cada rodada mostra só os dados
   do quarto recém escolhido, com um aviso de quantos outros já foram incluídos antes. */
.rb-resumo-aviso-extra { color: var(--secondery-theme-color); font-size: 13px; font-weight: 600; margin-bottom: 10px; }

.rb-botoes-final { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rb-btn-mais-quarto { color: var(--secondery-theme-color); background: transparent; border: 2px solid var(--secondery-theme-color); }
.rb-btn-mais-quarto:hover { color: #fff; background: var(--secondery-theme-color); }

.rb-hospede-bloco { border: 1px solid var(--light-gray-color); border-radius: 4px; padding: 15px; margin-bottom: 15px; }
.rb-hospede-bloco h6 { color: var(--secondery-theme-color); }

.rb-loading { padding: 30px; text-align: center; color: var(--body-text-color); }

.rb-msg { padding: 12px 15px; border-radius: 4px; margin-bottom: 20px; }
.rb-msg-erro { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6cb; }
.rb-msg-ok { background: #eaf7ec; color: #1e7e34; border: 1px solid #c3e6cb; }

.hero-simple { background: linear-gradient(rgba(2,39,98,.75), rgba(2,39,98,.75)), url(/img/bg/hero.jpg) center/cover no-repeat; padding: 90px 0 60px;
  display: flex; align-items: center; }
.hero-simple h1 { color: #fff; }
.hero-simple p { color: #fff; opacity: .9; font-size: 18px; }
/* sem isso, o .container (margin:auto) ficaria centralizado dentro do flex; queremos
   só centralizar na vertical e deixar a logo encostada na borda esquerda do container */
.hero-simple .container { width: 100%; }

/* logo dentro do banner azul do cabeçalho, alinhada à esquerda, centralizada na altura.
   !important porque o template tem "img{width:100%}" global — a especificidade da
   classe já devia vencer sozinha, mas isso blinda contra cache de uma versão velha
   deste arquivo ainda sendo servida */
.logo-banner { max-height: 110px !important; width: auto !important; height: auto !important; max-width: 90% !important; }