/* Painel de reserva (hospedes + calendario).
   Celular: ocupa a tela toda. Desktop: modal centrado sobre fundo escuro.
   Aberto pelo campo de data (celular) ou pelos botoes "Fazer uma cotação". */

.rsv-fs{position:fixed;inset:0;z-index:99999;display:flex;
        font-family:'Rubik',Arial,sans-serif;overscroll-behavior:contain}
.rsv-fs[hidden]{display:none}
.rsv-fs-box{display:flex;flex-direction:column;background:#fff;width:100%;min-height:0}

.rsv-fs-top{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px 16px;
            background:#2c3e50;color:#fff}
.rsv-fs-title{font-size:17px;font-weight:600;letter-spacing:.01em}
.rsv-fs-close{margin-left:auto;background:none;border:0;color:#fff;font-size:30px;line-height:1;
              padding:0 4px;cursor:pointer}

/* hospedes — no topo */
.rsv-fs-hosp{flex:0 0 auto;padding:6px 16px 14px;border-bottom:1px solid #e6e6e6;background:#fff}
.rsv-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.rsv-row + .rsv-row{border-top:1px solid #f0f0f0}
.rsv-row > span{flex:0 1 auto;min-width:0;font-size:16px;color:#2c3e50;font-weight:500;
                display:flex;flex-direction:column}
.rsv-row > span small{font-size:12px;color:#8a8a8a;font-weight:400;margin-top:2px}

/* idades: mesma linha, entre o rotulo e o contador (no maximo 2 criancas) */
.rsv-idades{display:flex;gap:6px;margin:0 8px 0 auto;flex:0 1 auto}
.rsv-idades:empty{display:none}
.rsv-idade{height:38px;border:1px solid #cfd8dc;border-radius:6px;background:#fff;
           color:#2c3e50;font-size:14px;padding:0 4px;max-width:78px}

.rsv-step{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.rsv-step button{width:38px;height:38px;border-radius:50%;border:1px solid #39b6d8;background:#fff;
                 color:#39b6d8;font-size:22px;line-height:1;cursor:pointer;
                 display:flex;align-items:center;justify-content:center;padding:0}
.rsv-step button:disabled{opacity:.3;cursor:default}
.rsv-step b{min-width:34px;text-align:center;font-size:17px;color:#2c3e50}

/* calendario — abaixo, rolando */
.rsv-fs-cal{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;min-height:0}
.rsv-fs-cal .flatpickr-calendar{width:100%!important;max-width:none;box-shadow:none;border:0;margin:0}
.rsv-fs-cal .flatpickr-months{display:none}
.rsv-fs-cal .flatpickr-innerContainer,
.rsv-fs-cal .flatpickr-rContainer,
.rsv-fs-cal .flatpickr-days{width:100%!important;max-width:none;display:block}

/* com showMonths:12 a faixa de dias da semana se repete 12x lado a lado:
   mostra so a primeira, em grade de 7 colunas, grudada no topo */
.rsv-fs-cal .flatpickr-weekdays{position:sticky;top:0;z-index:3;background:#fff;height:34px;
                                display:block;padding:0 8px;box-shadow:0 1px 0 #ececec}
.rsv-fs-cal .flatpickr-weekdaycontainer{display:grid;grid-template-columns:repeat(7,1fr);width:100%}
.rsv-fs-cal .flatpickr-weekdaycontainer:not(:first-child){display:none}
.rsv-fs-cal .flatpickr-weekday{font-size:12px;color:#8a8a8a;font-weight:600}

/* nome do mes: gruda abaixo da faixa ao rolar, para sempre saber onde se esta */
.rsv-fs-cal .rsv-mes{position:sticky;top:34px;z-index:2;background:#fff;
                     padding:14px 12px 8px;font-size:15px;font-weight:700;color:#2c3e50;
                     text-transform:capitalize;box-shadow:0 1px 0 #f0f0f0}

.rsv-fs-cal .dayContainer{width:100%!important;min-width:0;max-width:none;
                          display:grid;grid-template-columns:repeat(7,1fr);padding:0 8px 18px}
.rsv-fs-cal .flatpickr-day{max-width:none;width:100%;height:42px;line-height:42px;border-radius:0;
                           border:0;font-size:15px;color:#2c3e50}
.rsv-fs-cal .flatpickr-day.flatpickr-disabled,
.rsv-fs-cal .flatpickr-day.prevMonthDay,
.rsv-fs-cal .flatpickr-day.nextMonthDay{color:#d6d6d6}
.rsv-fs-cal .flatpickr-day.inRange{background:#e3f4fa;box-shadow:-5px 0 0 #e3f4fa,5px 0 0 #e3f4fa}
.rsv-fs-cal .flatpickr-day.selected,
.rsv-fs-cal .flatpickr-day.startRange,
.rsv-fs-cal .flatpickr-day.endRange{background:#39b6d8;border-color:#39b6d8;color:#fff;font-weight:600}
.rsv-fs-cal .flatpickr-day.startRange{border-radius:50% 0 0 50%}
.rsv-fs-cal .flatpickr-day.endRange{border-radius:0 50% 50% 0}

/* barra de acao */
.rsv-fs-bar{flex:0 0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
            border-top:1px solid #e6e6e6;background:#fff;display:flex;align-items:center;gap:12px}
.rsv-resumo{flex:1 1 auto;font-size:13.5px;color:#6a6a6a;line-height:1.3}
.rsv-resumo b{display:block;color:#2c3e50;font-size:15px}
.rsv-ok{flex:0 0 auto;background:#39b6d8;color:#fff;border:0;border-radius:4px;
        padding:14px 20px;font-size:15px;font-weight:600;cursor:pointer}
.rsv-ok:disabled{background:#c7c7c7;cursor:default}

body.rsv-aberto{overflow:hidden}

/* botao "Fazer uma cotação" nos cards de acomodacao */
.btn-cotacao{background:#39b6d8;border:1px solid #39b6d8;color:#fff;border-radius:4px;
             padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;margin-left:8px}
.btn-cotacao:hover{background:#2fa5c6;border-color:#2fa5c6;color:#fff}

/* ---------- celular: tela cheia ---------- */
@media (max-width: 767px){
  .rsv-fs-box{flex:1 1 auto}
  .btn-cotacao{margin:8px 0 0;display:block;width:100%;padding:10px}
}

/* ---------- desktop: modal centrado ---------- */
@media (min-width: 768px){
  .rsv-fs{background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:24px}
  .rsv-fs-box{max-width:460px;max-height:88vh;border-radius:10px;overflow:hidden;
              box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
}

/* preco e minimo de noites dentro de cada dia do calendario */
.rsv-fs-cal .flatpickr-day{height:52px;line-height:1.1;display:flex;flex-direction:column;
                           align-items:center;justify-content:center;gap:2px;padding-top:4px}
.rsv-fs-cal .rsv-dia-info{font-size:9.5px;font-weight:600;color:#6a8a96;letter-spacing:-.2px;
                          white-space:nowrap}
.rsv-fs-cal .flatpickr-day.selected .rsv-dia-info,
.rsv-fs-cal .flatpickr-day.startRange .rsv-dia-info,
.rsv-fs-cal .flatpickr-day.endRange .rsv-dia-info{color:#eaf8fd}
.rsv-fs-cal .flatpickr-day.prevMonthDay .rsv-dia-info,
.rsv-fs-cal .flatpickr-day.nextMonthDay .rsv-dia-info,
.rsv-fs-cal .flatpickr-day.flatpickr-disabled .rsv-dia-info{display:none}

/* etiqueta de minimo de noites, abaixo do preco */
.rsv-fs-cal .flatpickr-day{height:58px}
.rsv-fs-cal .rsv-dia-min{font-size:9px;font-weight:700;line-height:1;letter-spacing:-.2px;
                         background:#fff3e0;color:#b26a00;border-radius:3px;padding:2px 4px;
                         white-space:nowrap}
.rsv-fs-cal .flatpickr-day.selected .rsv-dia-min,
.rsv-fs-cal .flatpickr-day.startRange .rsv-dia-min,
.rsv-fs-cal .flatpickr-day.endRange .rsv-dia-min{background:rgba(255,255,255,.9);color:#b26a00}
.rsv-fs-cal .flatpickr-day.prevMonthDay .rsv-dia-min,
.rsv-fs-cal .flatpickr-day.nextMonthDay .rsv-dia-min,
.rsv-fs-cal .flatpickr-day.flatpickr-disabled .rsv-dia-min{display:none}

/* aviso de periodo com minimo nao atingido */
.rsv-resumo .rsv-alerta{display:block;text-decoration:none;color:#b26a00;font-weight:600}

/* ---- botoes dos cards de acomodacao ----
   Ver detalhes = azul (secundario), Fazer cotacao = verde (acao principal).
   !important porque o tema aplica cor propria em .btn/.btn-outline-secondary. */
.btn-group .btn-detalhes,
.btn-group .btn-cotacao{display:inline-block;border-radius:4px;padding:8px 16px;
                        font-size:13.5px;font-weight:600;line-height:1.2;cursor:pointer;
                        border:1px solid transparent!important;color:#fff!important;
                        transition:background .15s}
.btn-group .btn-detalhes{background:#2f80b5!important}
.btn-group .btn-detalhes:hover,
.btn-group .btn-detalhes:focus{background:#276d9b!important;color:#fff!important}
.btn-group .btn-cotacao{background:#22a35a!important;margin-left:8px}
.btn-group .btn-cotacao:hover,
.btn-group .btn-cotacao:focus{background:#1c8c4d!important;color:#fff!important}

/* o modal antigo de hospedes nao e mais usado: fica so como campo do formulario */
#exampleModal{display:none!important}

@media (max-width: 767px){
  .btn-group .btn-detalhes,
  .btn-group .btn-cotacao{display:block;width:100%;text-align:center;padding:11px}
  .btn-group .btn-cotacao{margin:8px 0 0}
}

/* o .btn-group do Bootstrap zera o canto esquerdo do 2o botao */
.btn-group > .btn-detalhes,
.btn-group > .btn-cotacao,
.btn-group > .btn-detalhes:not(:first-child),
.btn-group > .btn-cotacao:not(:first-child){border-radius:4px!important}

/* O .btn-group do Bootstrap 3 usa float:left nos filhos .btn. Como o "Ver
   detalhes" vem embrulhado num <a> (que nao e .btn), ele nao flutuava e o
   botao verde pulava na frente. Flex resolve e respeita a ordem do HTML. */
.btn-group{display:inline-flex!important;align-items:center;gap:8px;float:none!important}
.btn-group > *{float:none!important}
.btn-group > a{display:inline-flex}
.btn-group .btn-cotacao{margin-left:0!important}
@media (max-width: 767px){
  .btn-group{display:flex!important;flex-direction:column;align-items:stretch;width:100%}
  .btn-group > a{display:block;width:100%}
}