/* Estilos dos formulários de resources/views/includes/forms (.site-form).
   Inclui o que era util do antigo carpediemparkhotel/assets/css/includes/forms.css
   (removido do template - datepicker, validacao de campo, pill dos inputs),
   trazido pra dentro do escopo .site-form, mais ajustes de layout inspirados
   na tela de login (painel/login.css: campo em pill, foco destacado, botao
   full-width arredondado) no que fez sentido sem mudar o HTML dos forms. */

.site-form {

}

/* ============================================================ */
/* ---------------- mensagens de validação dos campos ----------- */

.site-form .error-message,
.site-form .error-obs,
.site-form .error-tel-obs,
.site-form .success-message,
.site-form .success-tel {
    position: absolute;
    top: 0;
    left: 120px;
    display: none;
}

.site-form .error-obs,
.site-form .error-tel-obs {
    color: #f0ad4e;
}

.site-form .success-message,
.site-form .success-tel {
    color: green;
    left: 120px;
}

.site-form .error-message {
    color: red;
}

/* ---------------- mensagens de validação dos campos ----------- */
/* ============================================================ */


/* ============================================================ */
/* ---------------- has-feedback / layout dos campos ------------ */

.site-form .form-group {
    display: block;
    width: 100%;
    margin-bottom: 18px;
}

.site-form .has-feedback {
    position: relative;
    margin-top: 7.5px;
}

.site-form .has-feedback label {
    font-size: 10px;
    padding-left: 11px;
    color: #000000;
}

.site-form .has-feedback label i {
    padding-left: 10px;
    padding-top: 2.5px;
}

.site-form .has-feedback.has-success label i.success {
    display: block !important;
    visibility: visible !important;
    float: right;
}

.site-form .has-feedback.has-success .text-success {
    display: block !important;
    visibility: visible !important;
}

.site-form .has-feedback.has-error label i.erro {
    display: block !important;
    visibility: visible !important;
    float: right;
}

.site-form .has-feedback.has-error .text-danger {
    display: block !important;
    visibility: visible !important;
}

.site-form .has-feedback.has-error em.msg {
    display: block !important;
    visibility: visible !important;
    position: absolute;
    bottom: 0;
    left: 15px;
    font-size: 10px;
}

/* Campo em pill (igual painel-login-field-input), com o icone reordenado
   pra esquerda via flex (sem mudar o HTML, que tem input antes do addon)
   e destaque de foco na cor do site, igual o :focus-within do login. */
.site-form .input-group {
    display: flex;
    align-items: stretch;
    border-radius: 30px;
    transition: box-shadow 0.2s ease-in-out;
}

.site-form .input-group:focus-within {
    box-shadow: 0 0 0 2px var(--thm-base, #2c7872);
    border-radius: 30px;
}

.site-form .input-group .input-group-addon {
    order: -1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 50px;
    box-sizing: border-box;
    padding: 15px !important;
    background-color: #fff;
    border-top: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    border-right: none;
    border-radius: 30px 0 0 30px !important;
}

.site-form .input-group .form-control {
    border-left: none;
    border-radius: 0 30px 30px 0 !important;
}

.site-form .has-feedback .form-control {
    padding: 7px 5px 7px 20px !important;
    height: 50px !important;
    background-color: #fff;
    border-top: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-radius: 30px;
    font-size: 14px;
    box-sizing: border-box;
}

/* form.js injeta um <span class="char-count"> em qualquer campo
   com maxlength (ex: telefone) - nesses forms isso nunca foi pra aparecer,
   só era usado no SEO do painel. */
.site-form .char-count {
    display: none !important;
}

.site-form select {
    box-shadow: none;
}

.site-form textarea {
    border-right: none;
    box-shadow: none;
}

/* ---------------- has-feedback / layout dos campos ------------ */
/* ============================================================ */


/* ============================================================ */
/* ---------------- botão de enviar (pill full-width, igual login) */

.site-form .btn-success {
    border-radius: 30px;
    font-weight: 600;
    background-color: var(--thm-base, #2c7872);
    border-color: var(--thm-base, #2c7872);
    transition: filter 0.2s ease-in-out;
}

.site-form .btn-success:hover {
    filter: brightness(0.92);
    background-color: var(--thm-base, #2c7872);
    border-color: var(--thm-base, #2c7872);
}

/* ---------------- botão de enviar (pill full-width, igual login) */
/* ============================================================ */


/* ============================================================ */
/* ---------------- datepicker (bootstrap-datepicker: date_checkin/checkout) */

.datepicker {
    padding: 4px;
    border-radius: 4px;
    direction: ltr;
}

.datepicker-inline {
    width: 220px;
}

.datepicker-dropdown {
    top: 0;
    left: 0;
}

.datepicker-dropdown:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-top: 0;
    border-bottom-color: rgba(0, 0, 0, .2);
    position: absolute;
}

.datepicker-dropdown:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-top: 0;
    position: absolute;
}

.datepicker-dropdown.datepicker-orient-left:before { left: 6px; }
.datepicker-dropdown.datepicker-orient-left:after { left: 7px; }
.datepicker-dropdown.datepicker-orient-right:before { right: 6px; }
.datepicker-dropdown.datepicker-orient-right:after { right: 7px; }
.datepicker-dropdown.datepicker-orient-top:before { top: -7px; }
.datepicker-dropdown.datepicker-orient-top:after { top: -6px; }

.datepicker-dropdown.datepicker-orient-bottom:before {
    bottom: -7px;
    border-bottom: 0;
    border-top: 7px solid #999;
}

.datepicker-dropdown.datepicker-orient-bottom:after {
    bottom: -6px;
    border-bottom: 0;
    border-top: 6px solid #fff;
}

.datepicker > div { display: none; }

.datepicker.days .datepicker-days,
.datepicker.months .datepicker-months,
.datepicker.years .datepicker-years {
    display: block;
}

.datepicker table {
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.datepicker table tr td,
.datepicker table tr th {
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    border: none;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background: #eee;
    cursor: pointer;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #999;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: 0 0;
    color: #999;
    cursor: default;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    color: #000;
    background-color: #ffdb99;
    border-color: #ffb733;
}

.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
    background: #eee;
    border-radius: 0;
}

.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
    color: #fff;
    background-color: #999;
    border-color: #555;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    color: #fff;
    background-color: var(--thm-base, #2c7872);
    border-color: var(--thm-base, #2c7872);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

.datepicker table tr td span {
    display: block;
    width: 23%;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 1%;
    cursor: pointer;
    border-radius: 4px;
}

.datepicker table tr td span:hover {
    background: #eee;
}

.datepicker table tr td span.active {
    color: #fff;
    background-color: var(--thm-base, #2c7872);
    border-color: var(--thm-base, #2c7872);
}

.datepicker .datepicker-switch {
    width: 145px;
}

.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
    cursor: pointer;
}

.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
    background: #eee;
}

.datepicker .cw {
    font-size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical-align: middle;
}

.datepicker.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    background-clip: padding-box;
    color: #333;
    font-size: 13px;
    line-height: 1.42857143;
}

.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
    padding: 20px 15px;
}

@media screen and (max-width: 1024px) {
    .datepicker.dropdown-menu th,
    .datepicker.datepicker-inline th,
    .datepicker.dropdown-menu td,
    .datepicker.datepicker-inline td {
        padding: 15px 10px;
    }

    .datepicker table tr td,
    .datepicker table tr th {
        width: 40px;
        height: 40px;
    }
}

/* ---------------- datepicker (bootstrap-datepicker: date_checkin/checkout) */
/* ============================================================ */


/* ============================================================ */
/* ---------------- utilidades gerais (usadas pelo form_button.js) */

.scroll-lock {
    overflow: hidden;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

/* ---------------- utilidades gerais (usadas pelo form_button.js) */
/* ============================================================ */


/* Contador de pessoas (pes_adultos/pes_colos/pes_chds) - substitui os <select> antigos */
.site-stepper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 55px;
    padding: 0 0;
    border: 1px solid #ccc;
    border-radius: 30px;
    background-color: #fff;
    overflow: hidden;
}

/* fundo pontilhado decorativo atras do numero, só CSS (sem imagem) */
.site-stepper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: 10px 10px;
    pointer-events: none;
    z-index: 0;
}

.site-stepper-btn,
.site-stepper-numero {
    position: relative;
    z-index: 1;
}

.site-stepper-btn {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background-color: var(--thm-base, #2c7872);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.site-stepper-btn:hover,
.site-stepper-btn:focus {
    filter: brightness(0.9);
    color: #fff;
}

.site-stepper-numero {
    min-width: 24px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* pes_adultos / pes_colos / pes_chds em row unica no desktop (col-md-4) e
   empilhado com respiro no mobile */
@media screen and (max-width: 1024px) {
    .row.hospedes > [class*="col-"] {
        margin-bottom: 15px;
    }

    .row.hospedes > [class*="col-"]:last-child {
        margin-bottom: 0;
    }
}