/* =========================
   MOBILE STICKY CTA
========================= */

#mobileStickyCTA{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999999;

    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(18px);

    border-top: 1px solid rgba(255,255,255,0.08);

    padding:
        10px
        14px
        calc(10px + env(safe-area-inset-bottom));

    box-sizing: border-box;

    font-family: Arial, sans-serif;
}

/* DESKTOP */
@media(min-width:768px){
    #mobileStickyCTA{
        display:none;
    }
}

.cta-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:10px;
}

#urgencyText{
    color:#ffffff;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.3px;
}

#countdown{
    color:#00ff95;
    font-size:13px;
    font-weight:800;
    font-family: monospace;
}

.cta-bottom{
    display:grid;
    grid-template-columns: 38% 1fr;
    gap:10px;
}

#distanceSelect{
    height:52px;

    background:#1b1b1b;
    color:#fff;

    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;

    padding:0 14px;

    font-size:15px;
    font-weight:700;

    outline:none;
}

#ctaButton{
    height:52px;

    background:#00ff95;
    color:#000;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    font-size:15px;
    font-weight:900;

    letter-spacing:0.4px;

    transition:0.2s ease;

    box-shadow:
        0 0 20px rgba(0,255,149,0.25);
}

#ctaButton:active{
    transform:scale(0.98);
}

/* URGÊNCIA */

.warning #countdown{
    color:#ffd000;
}

.warning #ctaButton{
    background:#ffd000;
    box-shadow:
        0 0 20px rgba(255,208,0,0.35);
}

.danger #countdown{
    color:#ff5e5e;
}

.danger #ctaButton{
    background:#ff5e5e;
    color:#fff;

    animation:pulse 1s infinite;

    box-shadow:
        0 0 22px rgba(255,94,94,0.45);
}

@keyframes pulse{
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }
}
/* esconder sticky quando modal abrir */
body.modal-open #mobileStickyCTA {
  display: none;
}


/* =========================================================
   AJUSTE MOBILE — ORDEM DOS HOTÉIS
   Nome do hotel → fotos → demais informações
========================================================= */
@media (max-width: 640px) {

  /* O card passa a controlar a ordem de todos os elementos */
  #modalHospedagens .hotel-card {
    display: flex !important;
    flex-direction: column !important;
  }

  /*
    Libera os filhos de .hotel-content para participarem
    diretamente da ordenação do card.
  */
  #modalHospedagens .hotel-content {
    display: contents !important;
  }

  /* 1. Nome, localização e benefício */
  #modalHospedagens .hotel-heading {
    order: 1;
    padding: 21px 17px 14px;
    margin: 0;
    background: #fff;
  }

  /* 2. Fotos */
  #modalHospedagens .hotel-gallery {
    order: 2;
    width: 100%;
    padding: 9px;
  }

  /* 3. Todo o restante do conteúdo */
  #modalHospedagens .hotel-content > *:not(.hotel-heading) {
    order: 3;
    margin-left: 17px;
    margin-right: 17px;
  }

  /* Primeiro texto depois das fotos */
  #modalHospedagens .hotel-gallery + .hotel-content > .hotel-description:first-of-type {
    margin-top: 20px;
  }

  /* Espaço inferior do último elemento do hotel */
  #modalHospedagens .hotel-content > *:last-child {
    margin-bottom: 21px;
  }

  /* Título mais destacado no celular */
  #modalHospedagens .hotel-heading h3 {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.15;
  }

  /* Badge abaixo do nome, ocupando a largura disponível */
  #modalHospedagens .hotel-discount-badge {
    width: 100%;
    margin-top: 4px;
  }

  /* Mantém os blocos internos ajustados no mobile */
  #modalHospedagens .hotel-benefit-box,
  #modalHospedagens .hotel-contact-grid {
    grid-template-columns: 1fr;
  }

  #modalHospedagens .hotel-actions {
    flex-direction: column;
  }

  #modalHospedagens .hotel-action,
  #modalHospedagens .hotel-coupon {
    width: 100%;
    min-width: 0;
  }
}