/* ============================================================
   "COBRIMOS O MENOR PRECO" — selo do topo + painel da politica
   Marcacao em parts/menor-preco.php
   Comportamento em assets/js/menor-preco.js
   Carregado no header.php logo apos map-modal.css
   ============================================================ */

/* ---------- selo ao lado do titulo do hotel ---------- */
/* o .title .container e um bloco simples com o h1; o selo flutua na
   direita, como no Booking, e volta para o fluxo no mobile */
.title .container { position: relative; }
.qs-mp-badge { float: right; margin: 6px 0 0 20px; }

.qs-mp-badge button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid #f0d9a8; border-radius: 20px;
  background: #fff8ea; color: var(--darkblue);
  font: 700 14px/1 'Montserrat', sans-serif; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.qs-mp-badge button:hover { background: #fdeecd; border-color: #e6c47a; }
.qs-mp-badge button i { font-size: 14px; color: var(--yellow); }

/* ---------- painel ---------- */
.qs-mp {
  position: fixed; z-index: 10001; inset: 0;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  font: normal 16px 'Montserrat', sans-serif; color: var(--black);
}
.qs-mp.is-open { display: flex; }
body.qs-mp-open { overflow: hidden; }
/* o widget de contato (WhatsApp) usa z-index 1000000 e ficaria por cima */
body.qs-mp-open #arcontactus { display: none !important; }

.qs-mp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }

.qs-mp-dialog {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 720px; max-height: 100%;
  border-radius: 10px; background: #fff; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

.qs-mp-head {
  flex: 0 0 auto; position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 20px 56px 20px 24px; border-bottom: 1px solid #e4e8ec;
}
.qs-mp-head h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--darkblue);
}
.qs-mp-head h2 i { font-size: 18px; color: var(--yellow); }

.qs-mp-close {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--gray); font-size: 20px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.qs-mp-close:hover { background: #eef2f6; color: var(--blue); }

.qs-mp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 24px 26px; }
.qs-mp-body p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--black); }
.qs-mp-lead { font-weight: 700; font-size: 16px !important; color: var(--darkblue) !important; }
.qs-mp-body h3 {
  margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid #eef1f4;
  font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--darkblue);
}

.qs-mp-lista li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; list-style: none; font-size: 14.5px; line-height: 1.55;
}
.qs-mp-lista i { flex: 0 0 auto; margin-top: 4px; font-size: 13px; }
.qs-mp-sim i { color: #2e8b57; }
.qs-mp-nao i { color: #c0392b; }

.qs-mp-passos { margin: 0; padding-left: 22px; }
.qs-mp-passos li { padding: 7px 0; font-size: 14.5px; line-height: 1.55; list-style: decimal; }

.qs-mp-contato {
  margin-top: 22px; padding: 16px 18px;
  border: 1px solid #cfe3f5; border-radius: 8px; background: #eef6fd;
}
.qs-mp-contato strong { display: block; font-weight: 700; font-size: 15px; color: var(--darkblue); }
.qs-mp-contato p { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; }
.qs-mp-contato a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--blue); }
.qs-mp-contato a:hover { text-decoration: underline; }

.qs-mp-nota { margin-top: 18px !important; font-size: 12.5px !important; line-height: 1.55; color: var(--gray) !important; }

/* ============================================================
   RESPONSIVO — breakpoints alinhados aos do tema (1220 / 970 / 680)
   ============================================================ */
@media (max-width: 970px) {
  .qs-mp { padding: 0; }
  .qs-mp-dialog { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

@media (max-width: 680px) {
  /* no mobile o selo volta para o fluxo, como uma tarja acima do titulo */
  .qs-mp-badge { float: none; display: block; margin: 0 0 12px; }
  .qs-mp-badge button { font-size: 13px; padding: 9px 13px; }

  .qs-mp-head { padding: 16px 50px 16px 16px; }
  .qs-mp-head h2 { font-size: 18px; }
  .qs-mp-body { padding: 18px 16px 24px; }
  .qs-mp-body p, .qs-mp-lista li, .qs-mp-passos li { font-size: 14px; }
}