/* ============================================================
   FACA LOGIN E ECONOMIZE — aviso de desconto para hospede
   cadastrado (parts/login-economize.php), estilo Genius do
   Booking.com. Carregado via inc/login-economize.php
   (wp_enqueue_style), so nas paginas do CPT hotel.
   ============================================================ */

.qs-login-economize { padding: 30px 0px 40px 0px; background-color: #fff; }
.qs-login-economize .container { position: relative; }

.qs-le-box {
  display: flex; align-items: center; gap: 22px; padding: 24px 28px;
  background-color: #eef4f9; border: 1px solid #d5e3ef; border-radius: 10px;
}

.qs-le-icone {
  display: flex; flex: 0 0 52px; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background-color: #fff; color: var(--blue); font-size: 22px;
}

.qs-le-texto { flex: 1 1 auto; min-width: 0px; }
.qs-le-rotulo {
  display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 12px;
  background-color: var(--yellow); color: var(--darkblue);
  font: 700 11px/1 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .04em;
}
.qs-le-texto strong { display: block; margin-bottom: 6px; font: 700 20px/1.3 'Montserrat', sans-serif; color: var(--darkblue); }
.qs-le-texto p { font-size: 14px; line-height: 1.5; color: var(--gray); }
.qs-le-rodape { margin-top: 8px; font-size: 12px; line-height: 1.5; color: #7b8697; }

.qs-le-acoes { display: flex; flex: 0 0 auto; gap: 10px; }
.qs-le-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0px 22px; border-radius: 8px; white-space: nowrap;
  font: 700 14px/1 'Montserrat', sans-serif; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.qs-le-btn--out    { background-color: transparent; border: 1px solid var(--blue); color: var(--blue); }
.qs-le-btn--out:hover    { background-color: rgba(0,81,144,.08); }
.qs-le-btn--solid  { background-color: var(--blue); border: 1px solid var(--blue); color: #fff; }
.qs-le-btn--solid:hover  { background-color: var(--darkblue); border-color: var(--darkblue); }

/* ============================================================
   RESPONSIVO — breakpoints do tema (1220 / 970 / 680)
   ============================================================ */

/* Havia aqui um "padding-right:340px" reservando espaco para o #reserva, que
   era uma coluna pinada a direita. O #reserva virou uma barra horizontal acima
   deste bloco (ver reserva-horizontal.css), entao a reserva de espaco saiu. */

@media (max-width: 970px) {
  .qs-login-economize { padding: 24px 0px 32px 0px; }
  .qs-le-box { padding: 20px; }
}

@media (max-width: 680px) {
  .qs-le-box { flex-wrap: wrap; padding: 18px; }
  .qs-le-icone { width: 44px; height: 44px; font-size: 18px; }
  .qs-le-texto strong { font-size: 18px; }
  .qs-le-acoes { flex: 1 1 100%; flex-direction: column; }
  .qs-le-btn { width: 100%; }
}