/*============================================================================*/
/*------------------------------ whatsapp_checkin -----------------------------*/
/* includes/forms/whatsapp_checkin.blade.php - estilos próprios do form
   (herda .site-form/.site-stepper de form.css) - a diferença dele pros
   outros forms (ex: hospedagem.blade.php) é os campos ficarem TODOS numa
   linha só no desktop (nowrap - cada campo encolhe pra caber; se a janela
   for estreita demais mesmo assim, a linha ganha scroll horizontal em vez de
   quebrar), em vez de divididos em várias linhas col-md-*. */
.site-form-whatsapp-checkin-linha {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    background: rgb(255 255 255 / 58%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgb(255 255 255);
    border-radius: 80px;
    padding: 15px 80px 30px 60px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    overflow-x: auto;
}

.site-form-whatsapp-checkin-linha > .col {
    flex: 1 1 0;
    min-width: 110px;
    padding-right: 10px;
}

/* Separador sutil entre os campos (menos o botão Enviar), pra marcar as
   "seções" da barra sem caixinha em volta de cada campo. */
.site-form-whatsapp-checkin-linha > .col:not(.site-form-whatsapp-checkin-enviar):not(:last-of-type) {
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.site-form-whatsapp-checkin-linha .form-group {
    margin-bottom: 0;
}

/* Efeito "vidro" limpo: tira o fundo branco/borda de input-group, addon,
   input e stepper (form.css os deixa como caixinha branca sólida por
   padrão) - tudo fica transparente, direto sobre o vidro embaçado do
   container acima (sem pill escuro em volta de cada campo). O contraste vem
   do texto escuro (não do fundo do campo) - o próprio vidro (fundo branco
   58% + blur) já clareia o vídeo por baixo o suficiente pra texto escuro
   sempre ler bem, não depende da cor do vídeo naquele momento. */
.site-form-whatsapp-checkin-linha .input-group,
.site-form-whatsapp-checkin-linha .input-group-addon,
.site-form-whatsapp-checkin-linha .form-control,
.site-form-whatsapp-checkin-linha .has-feedback .form-control,
.site-form-whatsapp-checkin-linha .site-stepper {
    background: transparent !important;
    box-shadow: none !important;
}

.site-form-whatsapp-checkin-linha .control-label {
    color: #333;
    font-size: 13px;
}

.site-form-whatsapp-checkin-linha .form-control {
    color: #222;
}

.site-form-whatsapp-checkin-linha .form-control::placeholder {
    color: #666;
}

.site-form-whatsapp-checkin-linha select.form-control option {
    /* <option> do select nativo não herda estilo de vidro (é renderizado
       pelo sistema) - garante legibilidade normal na lista aberta. */
    color: #333;
    background: #fff;
}

.site-form-whatsapp-checkin-linha .input-group-addon,
.site-form-whatsapp-checkin-linha .input-group-addon i,
.site-form-whatsapp-checkin-linha .site-stepper-numero {
    color: var(--thm-base, #2c7872);
}

.site-form-whatsapp-checkin-enviar {
    flex: 0 0 130px;
    min-width: 130px;
}

.site-form-whatsapp-checkin-enviar label {
    /* Só existe pra manter a mesma altura de rótulo dos outros campos da
       linha (alinha o botão com os inputs) - texto some visualmente. */
    visibility: hidden;
    display: block;
    margin-bottom: 5px;
}

.site-form-whatsapp-checkin-enviar .btn i {
    /* Reserva o espaço do ícone (fab fa-whatsapp) mesmo antes do webfont do
       FontAwesome carregar (é assíncrono, pode demorar alguns segundos) -
       sem isso o glifo nasce com largura 0, o texto "Enviar mensagem" quebra
       diferente, e quando o ícone aparece o botão cresce (~30px, medido com
       Playwright) e empurra o resto do header. */
    display: inline-block;
    min-width: 18px;
    min-height: 20px;
}

@media screen and (max-width: 1024px) {
    .site-form-whatsapp-checkin-linha {
        flex-wrap: wrap;
        align-items: stretch;
        padding: 15px 15px 30px 15px;
        border-radius: 16px;
    }

    /* Padrão: cada campo ocupa a linha inteira (hotel, enviar) */
    .site-form-whatsapp-checkin-linha > .col {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        margin-top: 15px;
    }

    /* Check-in/Check-out dividem uma linha (metade cada). */
    .site-form-whatsapp-checkin-linha > .col.date_checkin,
    .site-form-whatsapp-checkin-linha > .col.date_checkout {
        flex: 1 1 calc(50% - 5px);
        width: calc(50% - 5px);
    }

    /* Adultos + Criança de 0 a 12 anos dividem outra linha, metade cada. */
    .site-form-whatsapp-checkin-linha > .col.pes_adultos,
    .site-form-whatsapp-checkin-linha > .col.pes_chds {
        flex: 1 1 calc(50% - 5px);
        width: calc(50% - 5px);
    }

    .site-form-whatsapp-checkin-enviar label {
        display: none;
    }

    /* Inputs, select e stepper 20% menores no mobile (form.css usa altura/
       fonte fixas - 50px/54px/14px - precisa sobrescrever aqui, inclusive
       o !important que o form.css já usa em alguns desses). */
    .site-form-whatsapp-checkin-linha .input-group-addon,
    .site-form-whatsapp-checkin-linha .form-control,
    .site-form-whatsapp-checkin-linha .has-feedback .form-control {
        height: 40px !important;
        font-size: 11px !important;
        padding: 6px 4px 6px 16px !important;
    }

    .site-form-whatsapp-checkin-linha .input-group-addon {
        padding: 12px !important;
    }

    .site-form-whatsapp-checkin-linha .site-stepper {
        height: 44px;
    }

    .site-form-whatsapp-checkin-linha .site-stepper-btn {
        width: 43px;
        height: 43px;
        font-size: 11px;
    }

    .site-form-whatsapp-checkin-linha .site-stepper-numero {
        font-size: 14px;
    }

    .site-form-whatsapp-checkin-enviar .btn {
        padding: 8px 13px;
        font-size: 14px;
    }
}
/*------------------------------ whatsapp_checkin -----------------------------*/
/*============================================================================*/