:root{
  /* ===== VIPPER HOTEL — paleta da marca ===== */
  --vipper-red:#B12C31; --vipper-red-d:#8E1F24; --vipper-red-l:#D34249;
  --vipper-red-soft:#F7E7E8;
  --vipper-graphite:#3A3B3F; --vipper-graphite-2:#6B6B6B;
  --vipper-steel:#96979C; --vipper-silver:#D2D3D7;

  /* aliases do padrao MAPP Group (o CSS usa estes nomes) */
  --deep:#241416;
  --green:#B12C31;
  --green-d:#8E1F24;
  --teal:#D34249;
  --teal-d:#A02429;
  --blue:#B12C31;
  --blue-d:#8E1F24;
  --sky:#96979C;
  --sand:#F6F5F3;
  --cloud:#FFFFFF;
  --ink:#1D1E21;
  --muted:#5F6066;
  --line:rgba(29,30,33,.12);
  --gold:#B12C31;
  --r-lg:28px; --r-md:20px; --r-sm:14px; --r-pill:999px;
  --shadow:0 24px 60px rgba(29,30,33,.10);
  --shadow-lg:0 34px 80px rgba(29,30,33,.16);
  --maxw:1200px;
  --font-h:'Sora',ui-sans-serif,system-ui,sans-serif;
  --font-b:'Inter',ui-sans-serif,system-ui,sans-serif;
}
/* ==========================================================================
   EcoMAPP — card de resultado da verificação de disponibilidade
   Mesmo design do MAPP (card branco, faixa lateral, chips), paleta verde.
   ========================================================================== */

/* loading (3 bolinhas) */
.res-loading{display:flex;gap:8px;margin-top:12px}
.res-loading i{width:10px;height:10px;border-radius:50%;background:#721C21;display:block;
  animation:ecoBounce 1.15s ease-in-out infinite}
.res-loading i:nth-child(2){background:#D3434A;animation-delay:.16s}
.res-loading i:nth-child(3){background:#B12C31;animation-delay:.32s}
@keyframes ecoBounce{0%,80%,100%{transform:scale(.55);opacity:.45}40%{transform:scale(1);opacity:1}}

/* card */
#bkAlert{margin-top:18px;background:linear-gradient(135deg,#ffffff 0%,#F6F5F3 100%);
  border:1px solid rgba(53,51,54,.14);border-radius:22px;padding:22px 24px;
  box-shadow:0 18px 46px rgba(41,28,31,.16);display:flex;flex-direction:column;gap:6px;
  position:relative;overflow:hidden;text-align:left}
#bkAlert[hidden]{display:none !important}
#bkAlert:empty{display:none !important}
#bkAlert::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,#721C21,#D3434A)}

#bkAlert strong{font-size:16px;color:#353336;font-weight:800;display:block;line-height:1.32;
  font-family:inherit}
#bkAlert strong.res-ok{color:#6D1C20}
#bkAlert strong.res-erro{color:#353336}
#bkAlert > span{display:block;font-size:13.5px;color:#731C21;line-height:1.55;margin-top:2px}
#bkAlert > span b{color:#353336;font-weight:800}

/* chips (botões do resultado) */
#bkAlert .res-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#bkAlert .res-chip{background:linear-gradient(135deg,#353336,#721C21);color:#fff !important;
  border:0;border-radius:999px;padding:12px 24px;font-size:13px;font-weight:800;cursor:pointer;
  transition:.22s;text-decoration:none;display:inline-flex;align-items:center;
  box-shadow:0 8px 22px rgba(53,51,54,.28);font-family:inherit}
#bkAlert .res-chip:hover{background:linear-gradient(135deg,#721C21,#9F252A);
  box-shadow:0 12px 28px rgba(53,51,54,.34);transform:translateY(-1px)}
#bkAlert .res-chip.out{background:#fff;color:#353336 !important;border:1.5px solid #EFEDED;
  box-shadow:0 4px 12px rgba(53,51,54,.10)}
#bkAlert .res-chip.out:hover{background:#F7F3EA;border-color:#D3434A;transform:translateY(-1px)}

/* seção dos hotéis do grupo */
#bkAlert .res-gsec{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(53,51,54,.22)}
#bkAlert .res-gtitle{display:block;font-size:13px;font-weight:800;color:#353336;margin-bottom:10px}
#bkAlert .res-grupo{display:grid;gap:10px}
#bkAlert .res-gitem{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  background:#fff;border:1.5px solid #EFEDED;border-radius:16px;padding:14px 18px;cursor:pointer;
  transition:.22s}
#bkAlert .res-gitem:hover{border-color:#D3434A;box-shadow:0 12px 30px rgba(114,28,33,.18);
  transform:translateY(-2px)}
#bkAlert .res-ginfo{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#bkAlert .res-ginfo strong{font-size:15px;color:#353336;font-weight:800}
#bkAlert .res-ginfo small{font-size:12px;color:#731C21;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#bkAlert .res-gpreco{font-size:18px;font-weight:800;color:#353336;flex:none;white-space:nowrap;
  text-align:right;min-width:104px}
#bkAlert .res-gpreco small{font-size:10px;color:#7A8873;font-weight:700}
#bkAlert .res-gpreco .res-gtot{display:block;margin-top:2px;font-size:11px;color:#721C21;font-weight:800}
#bkAlert .res-glogo{width:52px;height:52px;border-radius:12px;object-fit:contain;flex:none;
  background:#fff;border:1px solid #EFEDED;padding:4px;box-shadow:0 3px 10px rgba(53,51,54,.10)}

/* mobile */
@media(max-width:760px){
  #bkAlert{padding:18px 18px;border-radius:18px}
  #bkAlert strong{font-size:15px}
  #bkAlert > span{font-size:13px}
  #bkAlert .res-chip{padding:11px 20px;font-size:12.5px}
  #bkAlert .res-gpreco{font-size:16px;min-width:88px}
  #bkAlert .res-ginfo small{white-space:normal}
}