/**
 * Site público: botão "Cancelamento", controle "Quantidade de bebês", bloco do segundo
 * bebê e mensagens do formulário de reserva.
 *
 * Só usa tokens do :root (global.css). Mobile-first: base 390px, tablet 768px, desktop 1280px.
 * Movimento fica por conta do Anime.js (ver assets/js/reserva-publica.js); aqui só há estilo de estado.
 */

/* ============================================
   BOTÃO FLUTUANTE "CANCELAMENTO"
   ============================================ */

.flutuantes {
    position: fixed;
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-float);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-flutuante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-cancelamento {
    background: var(--float-bg);
    color: var(--float-fg);
}

/* "Dúvidas": fundo vermelho, texto branco (contraste 5,9:1) nos dois temas */
.btn-duvidas {
    background: #c62828;
    color: #fff;
}

.btn-flutuante:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* Lista de dúvidas (modal do botão e bloco dentro do modal da data) */
.duvidas-lista {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.duvida-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-3) var(--space-4);
}

.duvida-item summary {
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
}

.duvida-item p {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Folga no fim da página: o botão fixo nunca cobre o último conteúdo */
.rodape-folga {
    height: calc(var(--touch-min) + var(--space-6) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    .flutuantes {
        right: var(--space-5);
        bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================
   MENSAGENS E DICAS
   ============================================ */

.mensagem-pagina {
    max-width: 600px;
    margin: 0 auto var(--space-6);
}

.mensagem-pagina:empty {
    display: none;
}

.form-mensagem[hidden] {
    display: none;
}

.form-dica {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.form-dica:empty {
    display: none;
}

select option:disabled {
    color: var(--text-muted);
}

/* ============================================
   MODAL DE CANCELAMENTO
   ============================================ */

.modal--compacto {
    max-width: 480px;
}

/* No celular, a regra genérica "button { padding: 12px 20px }" (calendar.css) espremia o
   ícone do X até 0px. Padding zero e alvo de toque de 44px devolvem o botão de fechar. */
.modal-close {
    flex-shrink: 0;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
}

/* Seletor com .modal-header para vencer a regra ".modal-header p" de calendar.css */
.modal-header .modal__subtitulo {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

.modal-body--sem-rodape .modal-footer {
    padding: 0;
    margin-top: var(--space-2);
    border-top: 0;
}

/* ============================================
   QUANTIDADE DE BEBÊS (radios reais, estilizados)
   ============================================ */

.segmentado {
    min-width: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
    border: 0;
}

.segmentado__legenda {
    margin-bottom: var(--space-2);
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

.segmentado__trilho {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--space-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-input);
}

/* Peça que desliza sob a opção escolhida (movida pelo Anime.js) */
.segmentado__indicador {
    position: absolute;
    top: var(--space-1);
    bottom: var(--space-1);
    left: var(--space-1);
    width: calc((100% - var(--space-2)) / 2);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}

/* O radio continua no DOM e no foco do teclado; só fica visualmente fora do caminho */
.segmentado__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.segmentado__rotulo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    margin: 0;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-align: center;
    cursor: pointer;
}

.segmentado__input:checked + .segmentado__rotulo {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.segmentado__input:focus-visible + .segmentado__rotulo {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   BLOCOS "BEBÊ 1" / "BEBÊ 2"
   ============================================ */

.bebe-bloco[hidden] {
    display: none;
}

/* O respiro fica dentro do bloco: assim a animação de altura leva o espaço junto */
.bebe-bloco__conteudo {
    padding-bottom: var(--space-6);
}

/* Aplicada só durante a animação de altura, para o conteúdo não vazar */
.bebe-bloco--animando {
    overflow: hidden;
}

.bebe-bloco__titulo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.bebe-bloco__titulo svg {
    width: 20px;
    height: 20px;
    fill: var(--color-primary);
}