/**
 * Aretê Hotel - Formulário Brevo no bloco de Reservas
 *
 * POR QUE ESTE ARQUIVO
 * O HTML do formulário vem pronto da Brevo (construtor deles), com classes
 * .sib-*, .entry__* e vários style="" inline. Para o formulário parecer o
 * mesmo que estava no ar antes, este arquivo sobrescreve o CSS deles com o
 * design da casa: rótulo em caixa alta, campo só com a linha de baixo,
 * botão gradiente navy.
 *
 * POR QUE TODA REGRA COMEÇA COM ".reservations-form-wrap #sib-container"
 * O sib-styles.css da Brevo não usa só classes: tem id no meio do caminho,
 * por exemplo `#sib-form .entry__choice label { display: unset }`, que tem
 * especificidade (1,1,1) e vira qualquer regra de classe. prefixar com
 * #sib-container sobe cada uma das regras daqui para (1,N,0) ou mais, e a
 * da Brevo perde em todas. As poucas regras deles que usam id no primeiro
 * lugar (#sib-container, #sib-form) empatam em (1,0,0), aí entra o
 * !important, marcado abaixo.
 *
 * O !important também é o que vence os style="" inline do HTML colado.
 *
 * @package AretêHotel
 */

/* ---------- Base fornecida pela Brevo (mantida do código original) ---------- */

:where(.sib-form-message-panel) {
  display: none;
}

:where(.sib-form-message-panel .sib-notification__icon) {
  width: 20px;
  height: 20px;
}

/* ---------- Envelope ---------- */

.reservations-form-wrap .sib-form {
  background: transparent !important;
  text-align: left !important;
}

.reservations-form-wrap #sib-form-container {
  width: 100%;
  max-width: 100%;
}

.reservations-form-wrap #sib-container {
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  direction: ltr;
  text-align: left !important;
}

/* ---------- Grade: mesma leitura do formulário antigo ----------
   Linha 1  Nome
   Linha 2  E-mail | Telefone
   Linha 3  Check-in | Check-out
   Linha 4  Mensagem
   Linha 5  Opt-in
   Linha 6  Aviso da Brevo
   Linha 7  Botão
   Os blocos são divs irmãos na ordem em que a Brevo os entregou; a posição
   depende dessa ordem (nth-of-type), então trocar campos lá no construtor
   exige revisar estas regras. */

.reservations-form-wrap #sib-container #sib-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 30px 32px;
}

.reservations-form-wrap #sib-container #sib-form > div {
  padding: 0 !important;
}

.reservations-form-wrap #sib-container #sib-form .sib-form-block {
  padding: 0 !important;
}

/* Nome, Mensagem, Opt-in, aviso e botão ocupam a linha inteira. */
.reservations-form-wrap #sib-container #sib-form > div:nth-of-type(1),
.reservations-form-wrap #sib-container #sib-form > div:nth-of-type(6),
.reservations-form-wrap #sib-container #sib-form > div:nth-of-type(7),
.reservations-form-wrap #sib-container #sib-form > div:nth-of-type(8),
.reservations-form-wrap #sib-container #sib-form > div:nth-of-type(9) {
  grid-column: 1 / -1;
}

/* Campos técnicos da Brevo fora da grade. */
.reservations-form-wrap #sib-container #sib-form > .input--hidden,
.reservations-form-wrap #sib-container #sib-form > input[type="hidden"] {
  display: none !important;
}

/* ---------- Rótulos ---------- */

.reservations-form-wrap #sib-container .form__label-row {
  display: block;
}

.reservations-form-wrap #sib-container .entry__label {
  display: block;
  width: 100%;
  margin: 0 0 8px !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.2;
  text-transform: uppercase !important;
  text-align: left !important;
  color: #0F274A !important;
}

/* A Brevo injeta o asterisco com ::after a partir do data-required e pinta
   com a cor do rótulo. No site ele era vermelho. */
.reservations-form-wrap #sib-container .entry__label::after {
  color: #c0392b;
}

/* ---------- Campos ---------- */

.reservations-form-wrap #sib-container .entry__field {
  display: block;
  width: 100%;
}

/* A Brevo dimensiona o campo em calc(100% - 1rem), o que faz a linha de
   baixo parar 16px antes do fim. Aqui vai de ponta a ponta. */
.reservations-form-wrap #sib-container .input {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 10px 6px 10px 8px !important;
  /* Sem linha de baixo: era o border-bottom que o desenho antigo usava e
     que a Brevo pinta de vermelho quando o campo dá erro. Para trazê-la de
     volta, é desfazer esta linha e as duas regras de :focus e de :has()
     mais abaixo. */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.3;
  color: #0F274A !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s ease;
}

.reservations-form-wrap #sib-container .input::placeholder {
  font-family: var(--sans) !important;
  color: #b0b8c4 !important;
}

/* Foco sem moldura nenhuma. A regra anterior usava :focus-visible achando
   que ele só dispara por teclado, mas em campo de texto o Chrome o aplica
   também no clique do mouse — daí a borda escura ao clicar. Aqui o foco é
   indicado só pela cor do texto, que não levanta nenhuma moldura. */
.reservations-form-wrap #sib-container .input:focus,
.reservations-form-wrap #sib-container .input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

.reservations-form-wrap #sib-container .input:focus {
  color: #0a1e3d;
}

.reservations-form-wrap #sib-container textarea.input {
  min-height: 56px;
  resize: vertical;
}

/* Seletor de país + telefone na mesma linha. */
.reservations-form-wrap #sib-container .sib-sms-input-wrapper {
  display: block;
  position: static;
}

.reservations-form-wrap #sib-container .sib-sms-input {
  display: flex !important;
  gap: 12px;
  align-items: flex-end;
}

/* O script da Brevo pode embrulhar o <select> e limar a largura dele.
   Sem esta trava, o seletor vira uma caixa branca de 70px no meio do campo. */
.reservations-form-wrap #sib-container .sib-sms-input .sib-smscode-select,
.reservations-form-wrap #sib-container .sib-sms-input > .entry__field:first-child {
  flex: 0 0 92px !important;
  width: 92px !important;
  max-width: 92px !important;
  margin-right: 0 !important;
}

.reservations-form-wrap #sib-container .sib-sms-input .entry__field:last-child,
.reservations-form-wrap #sib-container .sib-sms-input > .entry__field:last-child {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

.reservations-form-wrap #sib-container select.input {
  font-size: 14px !important;
  padding-right: 18px !important;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #8a96a5 50%),
    linear-gradient(135deg, #8a96a5 50%, transparent 50%) !important;
  background-position:
    calc(100% - 11px) calc(50% + 1px),
    calc(100% - 6px) calc(50% + 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

/* Balão "?" da Brevo: escondido por incompatibilidade com a linha de baixo. */
.reservations-form-wrap #sib-container .sib-sms-tooltip {
  display: none !important;
}

/* Calendário nativo nos campos de data. */
.reservations-form-wrap #sib-container input[data-type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.reservations-form-wrap #sib-container input[data-type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: 0.9;
}

/* ---------- Erro de campo e dica ---------- */

.reservations-form-wrap #sib-container .entry__error {
  margin: 6px 0 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  line-height: 1.3;
  color: #c0392b !important;
}

/* A Brevo escreve a mensagem dentro do label de erro; vazio = sem erro. */
.reservations-form-wrap #sib-container .entry__error:not(:empty) {
  display: block !important;
}

.reservations-form-wrap #sib-container .entry__specification {
  display: block;
  margin: 6px 0 0 !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  line-height: 1.4;
  color: #9aa4b2 !important;
  text-align: left !important;
}

/* Sem borda não há o que pintar de vermelho. O aviso de erro continua
   aparecendo no texto em .entry__error, logo abaixo do campo. */

/* ---------- Opt-in ----------
   O label é .arete-optin, uma classe nossa, e não o <label> solto que veio
   da Brevo. Isso corta de vez o conflito com
   `#sib-form .entry__choice label { display: unset }`, que é id e vira
   qualquer seletor de classe. O input mantém name/id/value/required, que é
   o que o script da Brevo lê para validar e para montar o POST. */

.reservations-form-wrap #sib-container .entry__choice {
  display: block;
  width: 100%;
  margin: 0;
  font-family: var(--sans) !important;
}

/* O quadrado agora É o input nativo, estilizado por nós. Não existe mais o
   <span class="checkbox"> da Brevo: ele era display:inline-block com
   tamanho em 1em, e o main.js mexia na posição dele em tempo de execução.

   Aqui não há grade nem flex: o quadrado é posicionado em absoluto a 2px da
   esquerda do label, e o texto recua 30px de padding-left. A separação vem
   do padding, não de duas colunas, então nada de terceiros consegue fazer
   o texto voltar para cima do quadrado. O label tem position:relative para
   servir de âncora. */
.reservations-form-wrap #sib-container .arete-optin {
  display: block !important;
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 30px !important;
  width: 100%;
  cursor: pointer;
}

/* Checkbox desenhado à mão. appearance:none tira o desenho nativo do
   navegador; o !important é contra o CSS deles, que mexe nesta classe.

   O opacity:1 e o z-index:0 não são decoração: o sib-styles.css tem
   `.sib-form .input_replaced { opacity:0; position:absolute; z-index:-1 }`,
   que existe para esconder o input nativo quando o quadrado visível é um
   <span> ao lado. Como aqui o input É o quadrado, sem desfazer isso ele
   fica invisível. A classe não pode ser removida do HTML porque é por ela
   que o script da Brevo encontra o campo para validar. */
.reservations-form-wrap #sib-container .arete-optin__box {
  position: absolute;
  left: 2px;
  top: 1px;
  opacity: 1 !important;
  z-index: auto !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #b0b8c4 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
}

/* Marca do check: SVG em background, não ::after, porque ::after não
   renderiza em input substituído. */
.reservations-form-wrap #sib-container .arete-optin__box:checked {
  background-color: #0F274A !important;
  border-color: #0F274A !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='square' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") !important;
  background-position: center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

.reservations-form-wrap #sib-container .arete-optin__text {
  display: block;
  min-width: 0;
  margin: 0 !important;
  padding-left: 20px;
  /*padding: 0 !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  text-align: left;
  color: #6b7686 !important;
}

/* ---------- Aviso legal da Brevo ---------- */

.reservations-form-wrap #sib-container .sib-form__declaration {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0 !important;
}

.reservations-form-wrap #sib-container .sib-form__declaration .declaration-block-icon {
  display: flex;
  padding: 0;
  margin: 0;
  flex: 0 0 30px;
}

/* A Brevo força 65px pelo seletor [class^=svgIcon]. */
.reservations-form-wrap #sib-container .sib-form__declaration [class^="svgIcon"] {
  flex: 0 0 30px;
  width: 30px !important;
  height: 30px !important;
}

.reservations-form-wrap #sib-container .sib-form__declaration p {
  margin: 0;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  color: #8a96a5 !important;
}

.reservations-form-wrap #sib-container .sib-form__declaration a {
  color: #4a7fb5;
}

/* ---------- Botão ---------- */

.reservations-form-wrap #sib-container .sib-form-block__button {
  display: inline-block;
  width: auto;
  margin-top: 0 !important;
  padding: 18px 40px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #0a1e3d !important;
  background-image: linear-gradient(135deg, #0a1e3d 0%, #132d54 100%) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #fff !important;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.reservations-form-wrap #sib-container .sib-form-block__button:hover {
  background-image: linear-gradient(135deg, #132d54 0%, #1c3d6a 100%) !important;
  transform: translateY(-1px);
}

.reservations-form-wrap #sib-container .sib-form-block__button:active {
  transform: translateY(0);
}

.reservations-form-wrap #sib-container .sib-form-block__button:disabled,
.reservations-form-wrap #sib-container .sib-form-block__button.sib-form-block__button-disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* ---------- Painéis de erro e de sucesso ---------- */

/* display NÃO é tocado na regra base: quem mostra/esconde é o script da
   Brevo, via .sib-form-message-panel--active. É só na variante ativa que
   a gente repinta e estica. */

.reservations-form-wrap .sib-form-message-panel--active,
.reservations-form-wrap .sib-form-message-panel--active {
  display: block !important;
  width: 100%;
  margin: 0 0 32px !important;
  padding: 22px 26px !important;
  max-width: 100% !important;
  border-width: 0 0 0 3px !important;
  border-style: solid !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  line-height: 1.6;
  text-align: left !important;
}

.reservations-form-wrap .sib-form-message-panel {
  margin: 0 0 32px !important;
  padding: 22px 26px !important;
  max-width: 100% !important;
  border-width: 0 0 0 3px !important;
  border-style: solid !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  line-height: 1.6;
  text-align: left !important;
}

.reservations-form-wrap .sib-form-message-panel__text {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 !important;
  font-weight: 400;
  text-align: left !important;
}

.reservations-form-wrap .sib-form-message-panel__inner-text {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: inherit !important;
}

.reservations-form-wrap .sib-form-message-panel .sib-notification__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  fill: currentColor;
}

.reservations-form-wrap #error-message {
  border-color: #c0392b !important;
  background-color: #fdf3f2 !important;
  color: #7d2318 !important;
}

.reservations-form-wrap #success-message {
  border-color: #2f9e6a !important;
  background-color: #f0f9f4 !important;
  color: #14532d !important;
}

/* ---------- Telas estreitas ---------- */

@media (max-width: 640px) {
  .reservations-form-wrap #sib-container #sib-form {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .reservations-form-wrap #sib-container #sib-form > div {
    grid-column: 1 / -1;
  }

  .reservations-form-wrap #sib-container .sib-form-block__button {
    width: 100%;
    padding: 18px 24px !important;
  }
}