/**
 * Calendário de embarques — Barra Beach Seixas
 *
 * O menu suspenso só some quando o JS assume; sem JS, a loja segue como antes.
 *
 * As medidas são por @container e não por @media: a coluna do produto é
 * col-md-6, então entre 768px e 991px ela tem ~330px — mais estreita que a
 * de qualquer celular (375px de tela dão ~345px). Medir a viewport erraria
 * justamente aí. Navegador sem @container fica no degrau compacto, que é
 * legível em qualquer largura.
 */

.bb-ativo .form-control-select,
.bb-ativo select[name^="group["] {
  display: none;
}

.bb-ativo .control-label {
  display: block;
  margin-bottom: .15rem;
  font-weight: 700;
}

.bb-cal {
  /* o mar, o sol e a areia do Seixas */
  --bb-mar: #0d4d73;
  --bb-mar-claro: #e7f0f6;
  --bb-mar-linha: #b9d2e2;
  --bb-sol: #bd640d;
  --bb-sol-claro: #fcf1e1;
  --bb-sol-linha: #ecd3ae;
  --bb-borda: #d7e2e8;
  --bb-tinta: #14303d;
  --bb-fraco: #5f7d8a;
  --bb-areia: #f4f8fa;

  container-type: inline-size;
  container-name: bbcal;
  max-width: 520px;
  margin-top: .75rem;
  color: var(--bb-tinta);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* Meses: só entram os que têm embarque, então ninguém cai num vazio  */
/* ---------------------------------------------------------------- */

.bb-meses {
  display: flex;
  gap: .3rem;
  margin-bottom: .7rem;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bb-meses::-webkit-scrollbar { display: none; }

.bb-mes {
  flex: 1 1 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: .42rem .6rem;
  font: inherit;
  line-height: 1.15;
  white-space: nowrap;
  border: 1px solid var(--bb-borda);
  border-radius: 999px;
  background: #fff;
  color: var(--bb-fraco);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.bb-mes:hover { border-color: var(--bb-mar-linha); color: var(--bb-mar); }

.bb-mes[aria-pressed="true"] {
  background: var(--bb-mar);
  border-color: var(--bb-mar);
  color: #fff;
}

.bb-mes-nome {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: capitalize;
}

.bb-mes-qtd {
  display: block;
  font-size: .66rem;
  font-weight: 400;
  opacity: .8;
}

/* ---------------------------------------------------------------- */
/* Grade                                                              */
/* ---------------------------------------------------------------- */

.bb-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.bb-dows { margin-bottom: 4px; }

.bb-dow {
  text-align: center;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bb-fraco);
}

/* a altura da linha é o degrau que os @container ajustam */
.bb-dias { grid-auto-rows: minmax(56px, auto); }

.bb-dia {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border-radius: 8px;
  background: var(--bb-areia);
}

/* dias de outro mês não existem; dias sem passeio recuam para o fundo */
.bb-dia.bb-fora { background: none; }
.bb-dia.bb-passado { background: none; }
.bb-dia.bb-passado .bb-num { opacity: .45; }
.bb-dia.bb-tem { padding: 0; background: none; }

.bb-dia.bb-hoje { box-shadow: inset 0 0 0 1px var(--bb-mar-linha); }
/* se hoje tem embarque o próprio botão já se destaca; anel aqui apagaria o
   brilho da seleção, que tem especificidade menor */
.bb-dia.bb-hoje.bb-tem { box-shadow: none; }

.bb-num {
  font-size: .7rem;
  line-height: 1.1;
  text-align: center;
  color: var(--bb-fraco);
}

/* ---------------------------------------------------------------- */
/* O dia com embarque é um botão só, do tamanho da célula             */
/* ---------------------------------------------------------------- */

.bb-slot {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 4px 2px;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-align: center;
  border: 1px solid var(--bb-mar-linha);
  border-radius: 8px;
  background: var(--bb-mar-claro);
  color: var(--bb-mar);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.bb-slot:hover:not(:disabled) {
  background: #fff;
  border-color: var(--bb-mar);
  box-shadow: 0 2px 7px rgba(13, 77, 115, .18);
  transform: translateY(-1px);
}

.bb-slot .bb-num { color: inherit; opacity: .75; }

.bb-slot.bb-escolhido {
  background: var(--bb-sol);
  border-color: var(--bb-sol);
  color: #fff;
  box-shadow: 0 2px 9px rgba(189, 100, 13, .32);
}

.bb-slot.bb-escolhido .bb-num { opacity: .85; }
.bb-slot.bb-escolhido .bb-info { color: #fff; opacity: .9; }

.bb-slot.bb-esgotado {
  background: #eef1f2;
  border-color: var(--bb-borda);
  color: var(--bb-fraco);
  cursor: not-allowed;
  box-shadow: none;
}

.bb-slot.bb-esgotado .bb-hora { text-decoration: line-through; }

.bb-hora {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* a maré cabe a partir do degrau seguinte; no resumo ela aparece sempre */
.bb-info {
  display: none;
  font-size: .62rem;
  color: var(--bb-fraco);
}

.bb-mes:focus-visible,
.bb-slot:focus-visible {
  outline: 2px solid var(--bb-sol);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* Resumo da escolha                                                  */
/* ---------------------------------------------------------------- */

.bb-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .7rem;
  padding: .55rem .7rem;
  font-size: .8rem;
  line-height: 1.3;
  border: 1px solid var(--bb-sol-linha);
  border-radius: 8px;
  background: var(--bb-sol-claro);
}

.bb-resumo-vazio {
  justify-content: flex-start;
  border-color: var(--bb-borda);
  background: var(--bb-areia);
  color: var(--bb-fraco);
}

.bb-resumo-data {
  display: block;
  font-weight: 700;
  text-transform: capitalize;
}

.bb-resumo-det { display: block; color: #7a5a30; }

.bb-resumo-vagas {
  flex: none;
  padding: .2rem .45rem;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--bb-sol);
  color: #fff;
}

.bb-vazio {
  margin: 0;
  padding: 1.4rem .5rem;
  text-align: center;
  color: var(--bb-fraco);
  background: var(--bb-areia);
  border: 1px solid var(--bb-borda);
  border-radius: 8px;
}

/* ---------------------------------------------------------------- */
/* Degraus por largura da caixa, não da tela                          */
/* ---------------------------------------------------------------- */

@container bbcal (min-width: 340px) {
  .bb-grade { gap: 5px; }
  .bb-dows { margin-bottom: 5px; }
  .bb-dias { grid-auto-rows: minmax(64px, auto); }
  .bb-info { display: block; }
  .bb-hora { font-size: .82rem; }
  .bb-num { font-size: .72rem; }
}

@container bbcal (min-width: 400px) {
  .bb-grade { gap: 6px; }
  .bb-dows { margin-bottom: 6px; }
  .bb-dias { grid-auto-rows: minmax(72px, auto); }
  .bb-slot { padding: 6px 3px; gap: 2px; }
  .bb-hora { font-size: .92rem; }
  .bb-num { font-size: .76rem; }
  .bb-info { font-size: .66rem; }
  .bb-dow { font-size: .68rem; }
  .bb-resumo { font-size: .84rem; padding: .65rem .8rem; }
}

@container bbcal (min-width: 470px) {
  .bb-dias { grid-auto-rows: minmax(80px, auto); }
  .bb-hora { font-size: 1rem; }
  .bb-num { font-size: .8rem; }
  .bb-info { font-size: .7rem; }
  .bb-mes-nome { font-size: .86rem; }
  .bb-mes { padding: .5rem .7rem; }
}

/* Safari 15 e anteriores não têm @container: dá o degrau médio no desktop */
@supports not (container-type: inline-size) {
  @media (min-width: 992px) {
    .bb-grade { gap: 6px; }
    .bb-dias { grid-auto-rows: minmax(72px, auto); }
    .bb-info { display: block; }
    .bb-hora { font-size: .92rem; }
    .bb-num { font-size: .76rem; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-mes,
  .bb-slot { transition: none; }
  .bb-slot:hover:not(:disabled) { transform: none; }
}