/* ===================================================================
   LARGURA PADRÃO DO CARTÃO  (.form-wrapper-custom)
   -------------------------------------------------------------------
   Cada tela declarava a sua própria largura: havia `min-content`,
   `fit-content`, 800px, 820px, 850px, 900px e telas sem nenhuma regra,
   espalhados por 38 folhas. O resultado era um cartão de tamanho
   diferente a cada passo do mesmo fluxo.

   A medida de referência é a do /searchRentalItem, que renderiza 653px
   no desktop e, no celular, ocupa a largura da tela menos a margem do
   container. É o que este arquivo generaliza — com o teto de desktop
   ampliado em 33% (653 -> 868px), para aproveitar melhor a tela grande
   sem deixar a linha de texto longa demais.

   Carregado por ÚLTIMO no index.html, depois até do styleResponsiveBase,
   porque precisa vencer os `!important` que as folhas de tela usam. E é
   incluído condicionalmente: login, signup, código de verificação e erro
   são propositalmente menores e ficam de fora.
   =================================================================== */

.form-wrapper-custom {
    width: 100% !important;
    /* Teto no desktop. 868px = os 653px de referência do /searchRentalItem
       mais 33%: dá mais respiro aos formulários de várias colunas (os três
       slots de documento, a linha de quatro campos do endereço) sem que a
       linha de texto fique cansativa de ler. */
    max-width: 868px !important;
    margin: 24px auto !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    /* Herdado de algumas folhas; com width/max-width acima, um piso de
       largura só serve para furar o layout em tela estreita. */
    min-width: 0 !important;
}

/* O styleResponsiveBase aplica `width: fit-content` quando o cartão tem
   uma `.body-container` como filha direta (telas de listagem e de escolha
   de perfil). Isso faz a largura depender do conteúdo — justamente o que
   esta padronização remove. */
.form-wrapper-custom:has(> .body-container) {
    width: 100% !important;
    max-width: 868px !important;
}

/* No celular o cartão usa a largura toda; a margem vem do padding do
   .main-container-index, que já reserva a folga lateral. Reduz-se o
   padding interno para não comer a área útil dos campos. */
@media (max-width: 700px) {
    .form-wrapper-custom {
        max-width: 100% !important;
        padding: 18px !important;
        margin: 16px auto !important;
    }
}

/* ===================================================================
   GRADE DE ITENS: LARGURA TOTAL E FLUXO DA ESQUERDA PARA A DIREITA
   -------------------------------------------------------------------
   O styleResponsiveBase dá `width: fit-content` à `.container` e à
   `.body-container` das listagens. Com o cartão padronizado em 868px isso
   produzia dois problemas de uma vez: a grade encolhia até o conteúdo e,
   como bloco estreito, encostava à esquerda — toda a folga sobrava do lado
   direito, deixando o espaçamento assimétrico.

   Dar largura total resolve os dois: as margens do cartão ficam iguais dos
   dois lados (são o padding dele) e os itens passam a ocupar a linha
   naturalmente. Com `flex-start`, um item sozinho fica à esquerda e os
   seguintes preenchem para a direita até a linha acabar, recomeçando à
   esquerda na linha de baixo — em vez de ficarem centralizados no meio.
   =================================================================== */

.form-wrapper-custom > .container,
.form-wrapper-custom > .body-container,
.form-wrapper-custom .body-container > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
}

/* Respiro maior acima do bloco Description: colado no conteúdo anterior
   ele parecia continuação do formulário, e não um bloco à parte. */
.bodyFormCard {
    margin-top: 32px !important;
}

/* ===================================================================
   EXCEÇÃO: CARTÃO DE DETALHE DO ITEM
   -------------------------------------------------------------------
   O teto de 868px é pensado para formulários, onde a linha de texto
   longa cansa. O detalhe do item não é um formulário: é uma galeria de
   fotos, duas colunas de conteúdo (descrição + cartão de reserva de
   400px) e grades de duas colunas dentro da coluna da esquerda. Com
   868px sobravam cerca de 340px para a coluna de conteúdo — estreito
   demais para as duas colunas de especificações e amenidades.

   O `:has(.photo-gallery)` casa só com esta tela — as outras telas de
   duas colunas (checkout, pagamento) seguem com o padrão.
   =================================================================== */
.form-wrapper-custom:has(.photo-gallery) {
    max-width: 1180px !important;
}