/* ===================================================================== styleResponsiveBase.css Camada responsiva compartilhada do mainGateway. COMO FUNCIONA ------------- Este arquivo é o ÚLTIMO stylesheet do documento (ver o fim do em templates/index.html). Os CSS por tela (styleRegisterVehicles.css, styleLoyalty.css, styleCRM.css, ...) foram escritos desktop-first e repetem entre si os mesmos blocos de layout com larguras/colunas fixas. Corrigir tela a tela significaria replicar a mesma correção em ~25 arquivos e continuar divergindo a cada tela nova. Então a estratégia é: manter o desktop EXATAMENTE como está e adicionar aqui, por cima, o comportamento mobile-first que falta. Todas as regras visuais vivem dentro de media queries `max-width`, portanto acima de 1200px este arquivo praticamente não existe. ESCALA DE DISPOSITIVOS ---------------------- <=340 celular muito pequeno (Galaxy Fold fechado, iPhone SE 1ª ger.) <=380 celular pequeno (iPhone SE/8/12 mini, Android 5") <=480 celular <=767 celular grande / phablet <=991 tablet retrato (iPad 768, iPad Air 820) <=1199 tablet paisagem / notebook pequeno >=1200 notebook / PC -> layout original preservado Além disso: - (orientation: landscape) and (max-height: 500px) celular deitado - (hover: none) and (pointer: coarse) dispositivo de toque O `!important` aqui é intencional e necessário: os CSS por página usam `!important` de forma extensiva nos próprios blocos responsivos. ===================================================================== */ /* ===================================================================== 1. BASE — vale em qualquer largura, sem efeito visual no desktop ===================================================================== */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { /* impede o Safari/iOS de reescalar o texto ao girar o aparelho */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { max-width: 100%; } /* O corte de overflow fica no body (e não no html) para não transformar o em contexto de rolagem, o que quebraria `position: sticky`. `clip` é preferível a `hidden` porque não cria scroll container. */ body { overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } } /* Mídia nunca estoura o container. */ img, video, svg, canvas, iframe, embed, object { max-width: 100%; } img, video { height: auto; } /* Sticky com prefixo -webkit- (Safari < 13). */ .sticky-top, .sticky-header, [data-sticky] { position: -webkit-sticky; position: sticky; } /* Momentum scrolling no iOS em áreas roláveis. */ .offcanvas-menu-wrapper, .table-responsive, .table-container, .scrollable, .mtm-chat-body { -webkit-overflow-scrolling: touch; } /* Trava a rolagem do body enquanto o menu offcanvas está aberto. */ body.offcanvas-open { overflow: hidden; } /* CAUSA-RAIZ Nº 1 DE SCROLL HORIZONTAL NO MOBILE ----------------------------------------------- `.form-wrapper-custom` é o cartão branco de praticamente todos os formulários (register*, survey*, centerHelper, CRM, loyalty, viewAll...) e está declarado como: max-width: 850px; min-width: 850px; em 18 arquivos CSS diferentes. Os blocos responsivos desses arquivos ajustam `width: 90%` mas nunca o `min-width`, então em qualquer aparelho com menos de 850px o cartão continuava com 850px e empurrava a página. Zerar o min-width não muda nada no desktop: sendo um elemento de bloco, a largura continua sendo `auto` limitada pelo `max-width: 850px`. */ .form-wrapper-custom { min-width: 0 !important; } /* Mesmo problema, em menor escala: .error-container min-width: 600px (userPayments, userAddresses) .faq-header width: 753px + margin-left: 110px (centerHelperFaq) .suggestions-list width: 650px (autocomplete de endereço) Em todos, o valor original passa a ser teto em vez de piso — o desktop continua idêntico porque o max-width mantém a medida original. */ .error-container { min-width: 0 !important; max-width: 100%; } .faq-header { width: 100% !important; max-width: 753px; } .suggestions-list { width: 100% !important; max-width: 650px; } /* Alturas de viewport estáveis no Safari/iOS (a barra de endereço some e reaparece, fazendo o 100vh "pular"). `dvh` resolve; `vh` fica de fallback. */ .main-container-index, .full-height, .min-vh-100 { min-height: 100vh; min-height: 100dvh; } /* Palavras longas (e-mails, URLs, IDs) não podem furar o layout. */ .form-wrapper-custom, .card, .modal-content, .hc-content, .data-table, .helper-text, .title-custom { overflow-wrap: break-word; word-wrap: break-word; } /* O break-word acima serve para textos longos (e-mails/URLs/IDs), mas é herdado pelos rótulos curtos dos formulários. Dentro dos grids apertados (.fields de 8 colunas em register* + viewFullItem + updateItem) ele deixava a coluna encolher a ~1 caractere e o label quebrava letra-a-letra ("Parking Spaces" com cada letra numa linha). Rótulos e opções voltam a quebrar apenas entre palavras, o que também garante uma largura mínima de coluna. */ .form-wrapper-custom label, .input-field label, .checkbox-item label, .checkbox-item-features label, .radio-option { overflow-wrap: normal; word-wrap: normal; word-break: keep-all; } /* Tabelas: rolagem horizontal contida no próprio wrapper, nunca na página. */ .table-container, .table-responsive { overflow-x: auto; max-width: 100%; } /*

ignora a largura do container e usa o atributo `cols` (padrão 20
   caracteres ~ 464px na fonte do projeto). Isso furava o layout em qualquer
   celular na tela de pesquisa de satisfação.
   <input type="file"> tem largura intrínseca grande (~350px, definida pelo
   texto do botão nativo + nome do arquivo) e estourava as telas de envio de
   documentos. */
textarea,
input[type="file"] {
    max-width: 100%;
}

/* `.body-container` das telas de seleção (tipo de item / tipo de profissional)
   é um flex row de cartões de 150px com `flex-shrink: 0`. Com 7-8 cartões a
   linha passava de 1100px e estourava até em notebook (1024/1280).
   Permitir a quebra não altera nada onde a linha já cabe. */
.body-container {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Nas telas de listagem de itens (/search-results, /itemTypes) o
   `.form-wrapper-custom` (cartão branco) ficava sempre com até 850px de
   largura mesmo quando a grade de cards dentro dele tinha só 1-2
   resultados — sobrava um espaço em branco enorme do lado dos cards.
   `:has(> .body-container)` identifica só essas duas telas (é a única
   estrutura de página com esse filho direto), sem tocar nos outros ~140
   formulários que reusam a mesma classe. */
.form-wrapper-custom:has(> .body-container) {
    width: fit-content !important;
    max-width: 100% !important;
}

/* A própria grade (`.container`, dentro do wrapper) também precisa
   encolher para o conteúdo — sem isso ela ficava esticada até o
   max-width:1200px definido nela, e o wrapper acima herdava essa largura
   mesmo tendo poucos cards. */
.form-wrapper-custom .container {
    width: fit-content;
}

/* `.admin-container` (loyalty admin) é flex row com sidebar fixa + main
   `flex: 1`. Um item flex tem `min-width: auto` por padrão, então o main
   nunca encolhia abaixo do próprio min-content e o painel furava a tela já
   a partir de 1024px. */
.admin-container {
    max-width: 100%;
}

.admin-container > *,
.admin-main {
    min-width: 0;
}

/* `.main-container-index` é `display: flex`; seus filhos (normalmente um
   <form> ou o cartão branco) herdam `min-width: auto` e por isso nunca
   encolhiam abaixo do próprio min-content — a tela de endereço, por exemplo,
   vazava 37px num iPad Air (820px). */
.main-container-index > * {
    min-width: 0;
    max-width: 100%;
}

/* SP20-MOB 10.2: NENHUM CONTROLE ULTRAPASSA O CARTÃO QUE O CONTÉM
   ---------------------------------------------------------------
   Os CSS por tela dimensionam campos com largura fixa, e o atributo `size`
   do HTML dá ao <input> uma largura intrínseca de ~215px que ignora o
   container. Em /searchRentalItem isso fazia os campos vazarem a borda do
   .form-wrapper-custom no iPhone.

Só teto (`max-width`), nunca medida (`width`): onde o campo já cabia nada
   muda, então o desktop segue idêntico. Também não usa `width: 100%` de
   propósito — isso quebraria checkbox e radio, que têm regra própria no fim
   deste arquivo devolvendo `width: auto`. */
.form-wrapper-custom input,
.form-wrapper-custom select,
.form-wrapper-custom textarea,
.form-wrapper-custom .input-field,
.form-wrapper-custom .container-rowRentItem,
.form-wrapper-custom .container-searchRating {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Cards de endereço/pagamento têm `min-width: 300px` no CSS das telas de
   /addresses e /payments. Num iPhone SE sobram ~295px de conteúdo útil
   dentro do cartão: o card vazava alguns pixels. Piso vira teto. */
.address-card,
.payment-card {
    min-width: 0 !important;
}

/* SP20-MOB 6.3: ALTURA DOS MODAIS NO SAFARI iOS
   ---------------------------------------------
   `vh` no Safari é calculado com a barra de endereço RECOLHIDA. Com ela
   visível (que é o estado ao abrir a página), 85vh é mais alto que a área
   real e o botão de confirmar do modal ficava fora de alcance no iPhone.
   `dvh` acompanha a barra. A linha `vh` fica ANTES como fallback para
   navegadores sem suporte a `dvh` — a ordem importa.

FICA DENTRO DE `(hover: none) and (pointer: coarse)` DE PROPÓSITO: no
   desktop nenhum modal tem teto de altura hoje, e impor um aqui criaria
   barra de rolagem interna em telas que nunca precisaram dela — mudança de
   comportamento fora do escopo desta entrega. O problema do `vh` é do
   Safari de iPhone/iPad, então a correção mora onde o problema existe. */
@media (hover: none) and (pointer: coarse) {
    .mtm-modal__content,
    .modal-content,
    .custom-modal-content {
        max-height: 85vh;
        max-height: 85dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================================
   2. NOTEBOOK PEQUENO / TABLET PAISAGEM  (<=1199px)
   ===================================================================== */
@media only screen and (max-width: 1199px) {

.main-container-index {
        padding: 16px;
    }

/* Grids administrativos de 3+ colunas ficam apertados abaixo de 1200. */
    .campaign-metrics,
    .campaign-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =====================================================================
   3. TABLET RETRATO  (<=991px)
   ===================================================================== */
@media only screen and (max-width: 991px) {

.main-container-index {
        padding: 16px 14px;
        /* o cartão passa a poder crescer/encolher com a tela */
        align-items: flex-start;
    }

.form-wrapper-custom {
        width: 100% !important;
        max-width: 850px;
        margin: 24px auto !important;
        padding: 24px !important;
    }

/* --- grid de 8 colunas dos formulários --------------------------
       `.fields` é `repeat(8, 1fr)` e os templates aplicam
       `style="grid-column: span N"` inline em cada campo (N de 1 a 8).
       Em 8 colunas isso funciona; ao reduzir o número de trilhas, um
       `span 8` cria trilhas implícitas e estoura a largura.
       Por isso o span também precisa ser reduzido, e como ele vem inline
       só um `!important` de folha de estilo consegue sobrepor. */
    .fields {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

.fields > [style*="span 8"],
    .fields > [style*="span 7"],
    .fields > [style*="span 6"],
    .fields > [style*="span 5"],
    .fields > [style*="span 4"] {
        grid-column: span 4 !important;
    }

.fields > [style*="span 3"] {
        grid-column: span 2 !important;
    }

/* Blocos de 3 colunas (registerAllocated / CRM) viram 2. */
    .block-address-info,
    .block-emergency-contact,
    .block-professional-info,
    .block-recent-employer,
    .form-wrapper-custom .input-group-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

.form-grid-span-3 {
        grid-column: span 2 !important;
    }

/* Dashboards / relatórios */
    .admin-container,
    .summary-grid,
    .charts-grid,
    .tour__grid,
    .contact-form-grid,
    .hc-content {
        grid-template-columns: minmax(0, 1fr) !important;
    }

.checkbox-group-features {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

/* Recuos fixos pensados para 1200px+ que sobram no tablet. */
    .faq-header,
    .hc-header,
    .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

.vehicle-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

/* `.quarter-width` (endereço) é `flex: 1` com `min-width: 200px`: quatro
       campos numa linha exigiam 800px e estouravam já num iPad Air (820px).
       Aqui viram dois por linha; abaixo de 768px o CSS da tela já empilha. */
    .quarter-width {
        min-width: 0 !important;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 45%;
        flex: 1 1 45% !important;
    }

/* Grades `repeat(auto-fill/auto-fit, minmax(280-400px, 1fr))`: o minmax
       fixo é um piso, então em telas menores que ele a coluna continua com a
       medida original e vaza. `min(100%, X)` mantém o comportamento no
       desktop e deixa encolher no tablet/celular. */
    .addresses-list,
    .addresses-grid,
    .payment-methods-grid,
    .calendars-container,
    .grid-layout,
    .type-selection,
    .rewards-grid,
    .rewards-grid-admin,
    .dashboard-stats,
    .form-grid,
    .campaigns-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
    }
}

/* =====================================================================
   4. CELULAR GRANDE / PHABLET  (<=767px)
   Aqui tudo passa a ser coluna única. É o ponto em que o layout deixa de
   ser "desktop apertado" e vira layout de celular de fato.
   ===================================================================== */
@media only screen and (max-width: 767px) {

/* =================================================================
       GRADE DE ITENS — DOIS CARDS VERTICAIS POR LINHA
       -----------------------------------------------------------------
       Vale para /search-results e para as demais listagens de item
       (allUserItems, rentalItemList_*), que compartilham a mesma
       marcação `.body-container > .container > .card`.

O card tem `width: 180px` FIXO (styleDefault.css). Numa tela de
       360px cabiam dois com uma sobra grande à direita, e em 400px
       ainda dois — a grade nunca acompanhava a largura disponível e o
       resultado parecia uma coluna torta encostada à esquerda.
       Com 50% os dois cards dividem a linha inteira.

O seletor precisa do `.body-container >`: `.container` sozinho é
       TAMBÉM o container do Bootstrap, usado pelo header e pelo rodapé
       — mexer nele aqui quebraria as duas coisas.
       ================================================================= */
    .body-container > .container {
        width: 100%;
    }

.body-container > .container > .card {
        /* o gap do container é 16px, então cada card cede 8px */
        width: calc(50% - 8px);
        min-width: 0;
    }

.main-container-index {
        padding: 12px;
        display: block;
    }

/* `max-width: 100%` fazia o cartão medir exatamente a largura do
       conteúdo do container. Com o padding do container caindo para 10px em
       telas pequenas, o cartão ficava praticamente encostado nas duas bordas
       e parecia ter a largura da tela (reportado no /searchRentalItem).
       Uma calha própria resolve, sem depender do padding do container. */
    .form-wrapper-custom {
        width: auto !important;
        max-width: 100% !important;
        margin: 16px 12px !important;
        padding: 20px 16px !important;
        border-radius: 10px;
    }

/* --- formulários: coluna única --------------------------------
       `minmax(0, 1fr)` em vez de `1fr`: `1fr` é atalho de
       `minmax(auto, 1fr)` e o `auto` impede a trilha de encolher abaixo do
       min-content do conteúdo. Com um checkbox de rótulo longo ou um
       <textarea> dentro, a trilha "inchava" e a página ganhava scroll
       horizontal mesmo com a grade já em 1 coluna. */
    .fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

/* qualquer span vira largura total... */
    .fields > * {
        grid-column: span 2 !important;
    }

/* ...exceto os campos curtos (número, cidade, estado, CEP), que ficam
       lado a lado em 2 colunas — melhor uso da tela que empilhar tudo. */
    .fields > [style*="span 2"],
    .fields > [style*="span 1"] {
        grid-column: span 1 !important;
    }

.section-custom,
    .section-custom-two,
    .grid-container,
    .body-container,
    .form-row,
    .block-general-info,
    .block-address-info,
    .block-government-id,
    .block-emergency-contact,
    .block-professional-info,
    .block-certifications,
    .block-language-fluency,
    .block-professional-references,
    .block-recent-employer,
    .campaign-meta,
    .campaign-metrics,
    .campaign-stats-grid,
    .summary-grid,
    .charts-grid,
    .admin-container,
    .form-wrapper-custom .input-group-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }

/* Alguns campos trazem `style="grid-column: span 8"` inline mesmo dentro
       de grades de 1 coluna (ex.: "Items Included" em updateItem /
       viewFullItem). Em 1 trilha explícita, o span cria 7 trilhas implícitas
       `auto` que seguram o min-content e estouram a largura. */
    .section-custom > [style*="grid-column"],
    .section-custom-two > [style*="grid-column"],
    .grid-container > [style*="grid-column"],
    .input-group-container > [style*="grid-column"] {
        grid-column: 1 / -1 !important;
    }

/* Itens de grade/flex precisam poder encolher (o padrão é
       min-width: auto = min-content). */
    .fields > *,
    .section-custom > *,
    .section-custom-two > *,
    .grid-container > *,
    .checkbox-group-features > *,
    .vehicle-photo-grid > *,
    .admin-container > *,
    .input-group-container > * {
        min-width: 0 !important;
    }

.form-grid-span-2,
    .form-grid-span-3,
    .form-grid-col-span-2,
    .form-grid-col.span-2 {
        grid-column: span 1 !important;
    }

.checkbox-group-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

.addresses-list,
    .addresses-grid,
    .payment-methods-grid,
    .calendars-container,
    .grid-layout,
    .type-selection,
    .rewards-grid,
    .rewards-grid-admin,
    .dashboard-stats,
    .form-grid,
    .campaigns-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

/* SP20-MOB 3.3: GRID DE FOTOS DO ITEM NO iPHONE
       --------------------------------------------
       `.vehicle-photo-grid` SAIU da lista de uma coluna acima. Com os 6
       slots empilhados, o passo de fotos passava de 3 telas de rolagem num
       iPhone SE e o contador "0 of 6 required photos" saía de vista — o
       usuário perdia a referência de quantas fotos ainda faltam.

Duas colunas cortam a rolagem pela metade e o slot ainda fica com
       ~160px de lado num iPhone 12/13/14/15 — confortável para o dedo.
       Abaixo de 360px volta a uma coluna (bloco próprio mais adiante).
       `.doc-slot-grid` (envio de documentos) recebe o mesmo tratamento: o
       styleRegisterSubmitPhoto.css o força a 1 coluna, e como esta folha é
       a última do documento, o `!important` daqui vence sem editar o
       arquivo de origem. */
    .vehicle-photo-grid,
    .doc-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

/* O contador acompanha a rolagem, para o usuário sempre ver quantas
       fotos ainda faltam.
       `sticky` funciona aqui porque o contexto de rolagem é o próprio
       documento: o corte de overflow-x está no <body> como `clip`, que
       (diferente de `hidden`) NÃO cria um scroll container.

O fundo branco é necessário — sem ele o conteúdo rolaria POR BAIXO do
       texto e os dois ficariam sobrepostos e ilegíveis.

A `.progress-indicator` fica DE FORA de propósito: ela é a própria
       trilha cinza da barra de progresso, e pintá-la de branco apagaria a
       barra (foi o que aconteceu na primeira versão desta regra). Como ela
       fica logo acima do contador, prendê-la também faria as duas
       disputarem o mesmo `top: 0`. */
    .photo-counter {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        padding-top: 8px;
        padding-bottom: 8px;
    }

/* SP20-MOB 3.4: BARRA DE AÇÃO FIXA NAS TELAS DE FOTO
       -------------------------------------------------
       Back/Next ficavam abaixo dos 6 slots: era preciso rolar tudo só para
       descobrir se dá para avançar.

O `:has()` restringe a regra aos formulários que REALMENTE têm grid
       de fotos — os outros ~140 formulários usam a mesma classe
       `.button-group-custom` e não podem ser afetados. Safari 15.4+ (mar/
       2022) suporta `:has`; onde não houver suporte o seletor inteiro é
       ignorado e a tela fica como é hoje. Degradação segura.

O `margin` negativo compensa o padding lateral do cartão, para a
       barra encostar nas bordas. */
    form:has(.vehicle-photo-grid) .button-group-custom,
    form:has(.photos-grid) .button-group-custom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        background: #fff;
        -webkit-box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
        padding: 12px 16px;
        /* iPHONE COM NOTCH: sem isto a barra fica sob o indicador de home. */
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -16px;
        z-index: 6;
    }

/* SP20-MOB 5.1: SUGESTÕES DE ENDEREÇO COM O TECLADO ABERTO
       -------------------------------------------------------
       No iPhone o teclado ocupa ~45% da tela: a lista de sugestões do
       autocomplete abria por baixo dele e as opções ficavam inalcançáveis.
       Teto de altura + rolagem interna resolvem.

`position: fixed` NÃO serve aqui: no Safari iOS o elemento fixo se
       desloca junto com o zoom do foco. */
    .suggestions-list {
        max-height: 40vh;
        max-height: 40dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

/* Endereços são linhas longas e próximas: cada sugestão precisa de alvo
       de toque confortável para não selecionar a de cima por engano. */
    .suggestions-list li,
    .suggestions-list .suggestion-item {
        min-height: 44px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px 12px;
    }

/* SP20-MOB 10.1: RATING DO /searchRentalItem SÓ COM ESTRELAS
       ---------------------------------------------------------
       O campo `#input-searchRating` é `readonly` e existe apenas para
       carregar o valor que o toque nas estrelas grava — o usuário nunca
       digita nele. No mobile ele tomava metade da linha e empurrava as
       estrelas para fora do cartão.

ATENÇÃO: NÃO usar `display: none` nem o atributo `hidden`. O input é
       `required`, e um campo obrigatório não-focável faz o Chrome abortar o
       submit com "An invalid form control is not focusable" — sem mensagem
       nenhuma para o usuário. A técnica de clip abaixo tira o campo da
       vista mantendo-o focável e no fluxo do formulário. */
    #container-searchRating .container-searchRating > label,
    #container-searchRating #input-searchRating {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0);
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
        white-space: nowrap !important;
        border: 0 !important;
    }

#container-searchRating {
        position: relative;   /* âncora do campo clipado acima */
        gap: 6px;
    }

/* Com o rótulo e o campo clipados, o `.input-field` que os embrulha vira
       uma caixa vazia — mas continua sendo um item de flex e ainda consumia
       o `gap` da linha, deixando as estrelas desalinhadas dos demais campos
       do formulário. `display: contents` remove a caixa sem remover os
       filhos (que já estão fora do fluxo, por serem absolutos). */
    #container-searchRating .container-searchRating {
        display: contents;
    }

/* Estrela com alvo de toque de 44px sem aumentar o glifo. */
    #container-searchRating .star {
        min-width: 44px;
        min-height: 44px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

/* `.input-group-container` posiciona campos com `grid-column: span 2`
       via CSS. Com a grade já em 1 coluna, o span cria trilha implícita. */
    .input-group-container > * {
        grid-column: 1 / -1 !important;
    }

/* --- painel administrativo do Loyalty --------------------------
       sidebar fixa de 250-280px + conteúdo lado a lado não cabe no celular. */
    .admin-container {
        display: block !important;
        min-height: 0 !important;
    }

.admin-sidebar {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        padding: 12px 0 !important;
    }

.admin-main {
        padding: 1rem !important;
    }

/* --- página de erro (#cardError) --------------------------------
       flex row com `gap: 70px` e logo de 240px ao lado do texto. */
    #cardError {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column !important;
        gap: 24px !important;
        margin: 40px auto !important;
        padding: 24px !important;
        text-align: center !important;
    }

#cardError .logo-side,
    #cardError .logo-side img {
        max-width: 160px !important;
        width: 100% !important;
    }

/* --- verificação de código / recuperação de senha ---------------
       `.main-container` (style.css) é flex row: o <h1> e o <form> ficavam
       lado a lado e o form saía da tela. */
    .main-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column !important;
        padding: 16px 12px !important;
    }

.main-container > h1,
    .main-container > form {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
    }

/* --- caixa de busca do Help Center ------------------------------ */
    .search-box {
        min-width: 0 !important;
    }

.search-box input {
        min-width: 0 !important;
    }

/* --- cartões de endereço / pagamento -----------------------------
       `.address-card` declara `min-width: 300px`, maior que a tela de um
       Galaxy Fold fechado; e `.payment-header` é flex row (título +
       botões de ação) que não quebrava. */
    .address-card,
    .payment-card {
        min-width: 0 !important;
    }

.payment-header,
    .address-header {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap !important;
        gap: 8px;
    }

.payment-actions,
    .address-actions {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap !important;
    }

.vehicle-photo-slot {
        min-height: 150px !important;
    }

.slot-preview {
        height: 160px !important;
    }

/* --- botões: empilhados e de largura total --------------------- */
    .button-group-custom {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column !important;
        gap: 10px !important;
        padding-top: 1.25rem !important;
        margin-top: 1.25rem !important;
    }

.button-group-custom > * {
        width: 100% !important;
    }

.submit-btn-custom,
    .back-btn-custom,
    .backBtn,
    .nextBtn {
        width: 100% !important;
        text-align: center !important;
    }

/* --- linhas horizontais que precisam quebrar -------------------
       `:not(.top-right--carousel)` deixa de fora a fila do carrossel do
       /searchRentalItem: lá `< [itens] >` tem de continuar numa linha só,
       e este `!important` era o que empurrava as duas setas para fora
       dela. As demais telas de cadastro seguem quebrando como antes. */
    .flex-container,
    .top-right:not(.top-right--carousel),
    .checkbox-group,
    .checkbox-group-history,
    .table-header,
    .table-actions {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap !important;
    }

/* SP20-064: `.checkbox-group` é `justify-content: space-around` em 10 CSS
       diferentes (styleDefault, styleRegisterResidentialProperty,
       styleRegisterProperty, styleItemDetails, styleViewAll...). Com os itens
       quebrando em uma linha cada, o space-around centraliza CADA item pela
       sua própria largura — então "Pool", "Grill", "Balcony", "Garden" e
       "Fireplace" ficavam cada um numa posição horizontal diferente, sem
       nenhum alinhamento com a coluna dos checkboxes.
       Alinhar ao início devolve a coluna. */
    .checkbox-group,
    .checkbox-group-history {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start !important;
    }

/* Cada opção ocupa a linha inteira, com o checkbox colado ao rótulo. */
    .checkbox-group > .checkbox-item {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    }

/* Model + Year: empilha em coluna.
       ATENÇÃO: `flex-wrap: wrap` NÃO pode ser usado aqui. Vários CSS de tela
       já colocam este container em `flex-direction: column` no mobile; com
       wrap ligado e itens de base 100%, o flexbox quebra em NOVAS COLUNAS
       (não em novas linhas) e joga o campo Year para fora da tela. */
    .model-year-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column !important;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap !important;
    }

.model-year-container > * {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100%;
    }

/* Itens de flex também precisam poder encolher. */
    .flex-container > *,
    .top-right > *,
    .checkbox-item > *,
    .checkbox-item-features > * {
        min-width: 0;
    }

/* `.checkbox-item` tem `white-space: nowrap` em parte dos CSS; em telas
       estreitas isso estoura a linha em vez de quebrar o rótulo. */
    .checkbox-item,
    .checkbox-item-features,
    .checkbox-item-history,
    .checkbox-option {
        white-space: normal !important;
    }

.helper-text {
        text-align: left !important;
    }

/* --- mapa (Leaflet) -------------------------------------------- */
    #map,
    .map-container,
    [id^="map"] {
        height: 200px !important;
        max-height: 45vh;
    }

/* --- busca em overlay (`.search-model-form`) --------------------
       Declarada com `width: 500px; font-size: 40px` em ~40 CSS. */
    .search-model-form input {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 24px !important;
    }

/* --- galeria de itens da home (Swiper) --------------------------
       Abaixo de 768px o swiper-init.js usa `slidesPerView: 'auto'`, ou
       seja, respeita a largura do CSS. Como `.swiper-slide` é `width: 20%`,
       o celular mostrava 5 cartões de ~70px, ilegíveis. */
    .swiper-slide {
        width: 72% !important;
        height: 360px !important;
    }

.hero__form {
        padding: 28px 18px 24px !important;
    }

.hero__form form .input-list {
        margin-right: 0 !important;
    }

.hero__form form .input-list .input-list-item {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }

/* --- modais ----------------------------------------------------- */
    .modal-content {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        max-height: 88vh;
        max-height: 88dvh;
        overflow-y: auto;
        padding: 20px 16px !important;
    }

/* --- rodapé ------------------------------------------------------ */
    .footer__widget,
    .footer__about {
        margin-bottom: 26px;
    }

/* A logo tinha largura e altura FIXAS (262x86 em style.css). Numa viewport
       de 320px ela sozinha estoura a linha depois do padding do container, e o
       rodapé passa a rolar na horizontal. Agora ela encolhe até caber,
       mantendo a proporção. */
    .footer__logo a img {
        width: auto !important;
        max-width: min(262px, 70vw) !important;
        height: auto !important;
    }

.footer__logo,
    .footer__about {
        text-align: center;
    }

/* Os links do copyright são <li> inline-block com `margin-right: 45px` e um
       separador desenhado por ::after em `right: -28px`. Quando a lista quebra
       em várias linhas — o que sempre acontece no celular — o separador do
       último item de cada linha fica solto no vazio, e a margem de 45px joga o
       conteúdo para fora. Empilhado e centrado, sem separadores. */
    .footer__copyright__links {
        padding-left: 0;
        margin-bottom: 12px;
        text-align: center;
    }

.footer__copyright__links li {
        display: block;
        margin-right: 0;
        margin-bottom: 8px;
        /* alvo de toque: os links tinham 20px de altura de linha */
        line-height: 28px;
    }

.footer__copyright__links li:after {
        display: none;
    }

/* `text-align: right` só faz sentido quando o bloco divide a linha com os
       links; empilhado, ele ficava jogado no canto oposto ao resto. */
    .footer__copyright__text,
    .footer__copyright__text p {
        text-align: center;
    }

.footer__copyright {
        margin-top: 12px;
        padding: 14px 0 12px;
    }

/* O endereço traz textos longos (e-mail, telefone) que não quebram sozinhos
       e alargavam o rodapé além da viewport. */
    .footer__widget--address p,
    .footer__widget--address li {
        overflow-wrap: break-word;
        word-break: break-word;
    }

/* --- títulos sem estilo próprio ----------------------------------
       Títulos que caem no padrão do Bootstrap (h1 = 2.5rem) não cabem numa
       linha de 320px: "Verification" na tela de código, por exemplo, saía
       da tela. Sem `!important` de propósito — qualquer regra de página
       (`.title-custom`, `.auth-title`, ...) continua tendo precedência. */
    h1 {
        font-size: clamp(22px, 7vw, 34px);
    }

h2 {
        font-size: clamp(20px, 6vw, 28px);
    }

h3 {
        font-size: clamp(17px, 5vw, 22px);
    }

h1, h2, h3, h4, h5, p, span, a, label, li, td, th {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* =====================================================================
   5. CELULAR  (<=480px)
   ===================================================================== */
@media only screen and (max-width: 480px) {

/* =================================================================
       GRADE DE ITENS — CARD HORIZONTAL (imagem à esquerda)
       -----------------------------------------------------------------
       Nesta largura dois cards por linha dariam ~150px de largura útil
       cada: a foto vira uma tarja, o título quebra em quatro linhas e o
       preço fica espremido. Em vez de encolher, o card DEITA — foto à
       esquerda, texto à direita, um por linha.

É o formato de lista que a busca pede: o usuário está comparando
       resultados, e ler título+preço numa varredura vertical é mais
       rápido do que em duas colunas estreitas.
       ================================================================= */
    .body-container > .container > .card {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

.body-container > .container > .card .carousel-container {
        /* ALTURA FIXA, não "auto + min-height". A imagem herda altura em
           cascata por porcentagem (.carousel { height:100% } -> .carousel img
           { height:100% }), e porcentagem não resolve contra um ancestral de
           altura automática — cada foto caía no seu próprio aspect ratio
           NATURAL. Como os itens têm fotos de proporções bem diferentes
           (retrato, paisagem, quase quadrada), cada card saía com uma altura
           de imagem diferente e, por `align-items: stretch` no .card, isso se
           propagava para a altura do card inteiro — dois cards vizinhos com
           títulos idênticos ficavam de tamanhos diferentes só por causa da
           foto. Com altura fixa aqui, a cadeia de porcentagem resolve de
           verdade e o `object-fit: cover` (já declarado em .carousel img)
           corta qualquer proporção para caber nesta caixa — mesma altura em
           todos os cards, sempre. */
        flex: 0 0 128px;
        width: 128px;
        height: 112px !important;
        border-radius: 12px 0 0 12px;
    }

.body-container > .container > .card .card-body {
        flex: 1 1 auto;
        min-width: 0;      /* deixa o texto encolher em vez de estourar o card */
        justify-content: center;
        padding: 10px 12px;
    }

/* Título com no máximo duas linhas: sem limite, uma descrição longa
       empurra o preço para fora do campo de visão e o card perde a
       função de comparar rapidamente. */
    .body-container > .container > .card .card-body h5 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* A descrição completa não cabe no formato deitado e empurraria o
       preço; ela já está na tela de detalhe do item. */
    .body-container > .container > .card .card-body > p:not(:last-child) {
        display: none;
    }

/* As setas do carrossel só aparecem no hover — que não existe no
       celular — e sobre 128px de foto virariam obstáculo ao toque que
       abre o item. */
    .body-container > .container > .card .arrow {
        display: none !important;
    }

.main-container-index {
        padding: 10px;
    }

.form-wrapper-custom {
        margin: 12px auto !important;
        padding: 16px 12px !important;
    }

/* Coluna única de verdade: nesta largura dois campos lado a lado já
       não cabem sem cortar rótulo/placeholder. */
    .fields {
        grid-template-columns: 1fr !important;
    }

.fields > *,
    .fields > [style*="span 2"],
    .fields > [style*="span 1"] {
        grid-column: span 1 !important;
    }

.checkbox-group-features {
        grid-template-columns: 1fr !important;
    }

/* (o anti-zoom do iOS — `font-size: 16px` nos campos — saiu daqui para a
       seção 9. Estava restrito a 480px e por isso não valia no iPad nem no
       iPhone em paisagem; agora vale em todo aparelho de toque.) */

/* Alvos de toque com pelo menos ~44px (WCAG 2.5.5). Restrito aos botões
       de ação — botões-ícone pequenos (fechar modal, remover foto) ficam de
       fora de propósito, senão viram blocos gigantes. */
    .btn,
    a.btn,
    .primary-btn,
    .site-btn,
    .submit-btn-custom,
    .back-btn-custom,
    .backBtn,
    .nextBtn,
    button[type="submit"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }

/* Containers Bootstrap sem margens laterais exageradas.
       O `.row` do Bootstrap 4 tem `margin: 0 -15px` e conta com 15px de
       padding no `.container` para compensar. Reduzir só o padding do
       container faz a linha vazar exatamente (15 - padding) px de cada lado —
       era a origem do scroll horizontal residual em TODAS as páginas
       (o rodapé usa .container > .row). Por isso os três valores andam
       sempre juntos. */
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

.row {
        margin-left: -16px;
        margin-right: -16px;
    }

.row > [class*="col-"],
    .row > .col {
        padding-left: 16px;
        padding-right: 16px;
    }

.title-custom {
        font-size: 18px !important;
    }

.swiper-slide {
        width: 84% !important;
        height: 320px !important;
    }

.carousel-container {
        height: 150px !important;
    }

#map,
    .map-container,
    [id^="map"] {
        height: 180px !important;
    }

/* (a largura/animação do menu offcanvas é responsabilidade do
       styleHeader.css, que é a fonte canônica do header) */

.table th,
    .table td {
        padding: 0.6rem 0.5rem !important;
        font-size: 13px !important;
    }
}

/* =====================================================================
   6. CELULAR PEQUENO  (<=380px)
   Faixa que praticamente não existia no projeto (só 3 dos ~25 CSS tinham
   alguma regra abaixo de 480px).
   ===================================================================== */
@media only screen and (max-width: 380px) {

.main-container-index {
        padding: 8px;
    }

.form-wrapper-custom {
        padding: 14px 10px !important;
        border-radius: 8px;
    }

.container,
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

.row {
        margin-left: -12px;
        margin-right: -12px;
    }

.row > [class*="col-"],
    .row > .col {
        padding-left: 12px;
        padding-right: 12px;
    }

.title-custom {
        font-size: 16px !important;
    }

.section-custom h3 {
        font-size: 15px !important;
    }

label,
    .label-custom {
        font-size: 13px !important;
    }

/* Continua 16px (anti-zoom do iOS), só o preenchimento diminui. */
    input,
    select,
    textarea {
        padding: 9px 10px !important;
    }

.swiper-slide {
        width: 88% !important;
        height: 280px !important;
    }

.top-left-icon {
        width: 32px !important;
        height: 32px !important;
    }

.helper-text {
        font-size: 11px !important;
    }

/* O grid em duas colunas que sobrar (marcado no HTML) empilha. */
    .row.force-stack-xs > [class*="col-"] {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =====================================================================
   6b. GRID DE FOTOS EM CELULAR ESTREITO  (<=359px)
   Corte próprio, fora da escala geral: as duas colunas de slots de foto
   definidas no bloco de 767px continuam confortáveis num iPhone 12 mini
   (360px), mas num iPhone SE de 1ª geração / Galaxy Fold fechado (320px)
   cada slot cairia para ~145px e o rótulo do ângulo ("Left Side") não
   caberia. Por isso o limite é 359 e não os 380 da escala.
   ===================================================================== */
@media only screen and (max-width: 359px) {
    .vehicle-photo-grid,
    .doc-slot-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* =====================================================================
   7. CELULAR MUITO PEQUENO  (<=340px)
   Galaxy Fold fechado (280px) e iPhone SE 1ª geração (320px).
   ===================================================================== */
@media only screen and (max-width: 340px) {

.form-wrapper-custom {
        padding: 12px 8px !important;
    }

.container,
    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

.row {
        margin-left: -8px;
        margin-right: -8px;
    }

.row > [class*="col-"],
    .row > .col {
        padding-left: 8px;
        padding-right: 8px;
    }

.title-custom {
        font-size: 15px !important;
    }

.submit-btn-custom,
    .back-btn-custom,
    .backBtn,
    .nextBtn,
    .primary-btn,
    .site-btn {
        font-size: 14px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

.header-logo {
        max-width: 118px !important;
    }

.swiper-slide {
        height: 250px !important;
    }

/* Campo de busca do Help Center: em 280px o botão "Search" sozinho já
       consome quase toda a linha; deixa quebrar em duas linhas. */
    .search-box {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap !important;
    }

.search-box input,
    .search-box button,
    .search-btn {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

/* Cartões de endereço/pagamento: com 15px de recuo de cada lado sobram
       250px de conteúdo num aparelho de 280px. */
    .address-card,
    .payment-card,
    .card {
        padding: 10px !important;
    }

.address-card *,
    .payment-card * {
        min-width: 0 !important;
    }
}

/* =====================================================================
   8. CELULAR DEITADO (paisagem, pouca altura)
   Sem isso, cartões com `min-height: 100vh` e modais com `max-height: 88vh`
   ficam maiores que a tela e cortam os botões de ação.
   ===================================================================== */
@media only screen and (orientation: landscape) and (max-height: 500px) {

.main-container-index {
        min-height: auto;
        padding: 10px;
    }

.form-wrapper-custom {
        margin: 10px auto !important;
    }

.modal-content {
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
    }

.swiper-slide {
        height: 240px !important;
    }

.mtm-chat-body {
        height: 150px !important;
    }
}

/* =====================================================================
   9. DISPOSITIVOS DE TOQUE (sem hover)
   Estados de :hover não existem no toque; o que fica preso é o estado
   "grudado" depois do tap. Aqui neutralizamos os efeitos de elevação.

Esta media query é também onde ficam as correções de iPHONE/iPAD que
   NÃO devem depender da largura da tela: `(hover: none) and (pointer:
   coarse)` casa com qualquer aparelho de toque — iPhone em retrato ou
   paisagem e iPad em qualquer largura — e NUNCA com um desktop, mesmo
   que a janela dele esteja estreita. É a condição certa para tudo que é
   sobre o dedo e o teclado virtual, não sobre o tamanho do layout.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {

.image-container:hover,
    .vehicle-photo-slot:hover,
    .slot-remove-btn:hover,
    .card:hover {
        -webkit-transform: none;
        transform: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

/* O submenu do perfil abre por clique (classe .open) no toque; o
       :hover do desktop já está isolado em @media (hover: hover). */
    .swiper-slide {
        -webkit-tap-highlight-color: transparent;
    }

/* SP20-MOB 2.1: ANTI-ZOOM DO SAFARI (iPHONE **E iPAD**)
       ---------------------------------------------------
       O Safari (iOS e iPadOS) amplia a página ao focar um campo com fonte
       menor que 16px e NÃO desfaz o zoom ao sair do campo — o usuário
       preenche o resto do formulário com a tela deslocada e com rolagem
       horizontal.

A regra existia, mas estava dentro do bloco de `max-width: 480px`:
       não pegava o iPad (768-1024px) nem o iPhone em paisagem — justamente
       as larguras em que o formulário mostra mais campos por linha. Movida
       para cá, vale em todo aparelho de toque e em nenhum desktop.

16px é o limiar exato do Safari: não usar 15.9px, e não usar `1rem`
       (que pode ser reduzido por um `font-size` no <html>).
       Checkbox/radio/range ficam de fora — neles a fonte não abre teclado
       e mexer no tamanho deformaria o controle. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

/* SP20-MOB 5.2: FOLGA AO ROLAR ATÉ O CAMPO FOCADO
       ----------------------------------------------
       Ao avançar de campo pelo botão "próximo" do teclado do iPhone, o
       Safari rola o campo para a BORDA da área visível e o rótulo dele fica
       escondido atrás do header. `scroll-margin` reserva a folga.
       É propriedade de rolagem apenas: não desloca nada no layout. */
    input,
    select,
    textarea {
        scroll-margin-top: 96px;
        scroll-margin-bottom: 24px;
    }

/* SP20-MOB 2.3: <select> E <input type="date"> NATIVOS NO iOS
       ----------------------------------------------------------
       O Safari (iOS/iPadOS) impõe aparência própria nesses controles:
       altura ~34px, fundo cinza e, no `date`, texto alinhado à esquerda.
       O resultado é a linha do formulário desalinhada verticalmente, com
       o select mais baixo que os inputs de texto ao lado.

ESCOPO RESTRITO DE PROPÓSITO: só dentro dos containers de formulário
       do projeto. O `jquery.nice-select` esconde o <select> original e
       desenha um `<div class="nice-select">` no lugar — um seletor global
       `select { appearance: none }` mexeria no elemento escondido e no
       widget desenhado. Com o escopo abaixo, `.nice-select` não é tocado. */
    .form-wrapper-custom select,
    .form-wrapper-custom input[type="date"],
    .form-wrapper-custom input[type="time"],
    .form-wrapper-custom input[type="datetime-local"],
    .txt_field select,
    .txt_field input[type="date"],
    .form-group select,
    .form-group input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        min-height: 44px;
    }

/* Removido o chevron nativo acima, o <select> precisa de uma indicação
       própria de que abre lista. SVG embutido como data URI: não gera
       requisição de rede. */
    .form-wrapper-custom select,
    .txt_field select,
    .form-group select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11 3 6h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px;
        padding-right: 34px;
    }

/* O nice-select desenhado não pode herdar a seta nem o appearance. */
    .nice-select,
    .nice-select .list,
    .nice-select .option {
        -webkit-appearance: auto;
        appearance: auto;
        background-image: none;
    }

/* SP20-MOB 2.4: ÁREA DE TOQUE DOS BOTÕES PEQUENOS
       ----------------------------------------------
       `.slot-remove-btn` tem 32x32px e `.upload-box .remove-btn` 28x28px —
       abaixo do mínimo de 44px do HIG da Apple. No iPhone o dedo escorrega
       para o container do slot e o toque REABRE o seletor de arquivo em vez
       de remover a foto: parece bug para o usuário.

Aumentar o botão deixaria o desenho desproporcional; então cresce só
       a área que responde ao toque, via `::after`. Pseudo-elemento absoluto
       não ocupa espaço no fluxo — nada se desloca no layout. */
    .slot-remove-btn,
    .upload-box .remove-btn,
    .photo-remove-btn,
    .payment-actions button,
    .address-actions button {
        position: relative;
    }

.slot-remove-btn::after,
    .upload-box .remove-btn::after,
    .photo-remove-btn::after,
    .payment-actions button::after,
    .address-actions button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

/* O iOS pinta um flash cinza ao tocar qualquer elemento clicável. Num
       grid de fotos isso dá a impressão de que o card inteiro foi
       selecionado, e não o botão dentro dele. */
    .vehicle-photo-slot,
    .upload-box,
    .payment-card,
    .address-card,
    .star {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

/* SP20-MOB 7.3: FOCO VISÍVEL
       -------------------------
       Em toque não existe hover: o foco é a ÚNICA pista de onde o usuário
       está no formulário. Vários CSS por página zeram o `outline`; aqui ele
       volta, em anel consistente. `:focus-visible` (e não `:focus`) evita
       pintar o campo em toques que não abrem o teclado. */
    .form-wrapper-custom input:focus-visible,
    .form-wrapper-custom select:focus-visible,
    .form-wrapper-custom textarea:focus-visible,
    .txt_field input:focus-visible {
        outline: 2px solid #0b93f2;
        outline-offset: 1px;
    }
}

/* =====================================================================
   10. ÁREA SEGURA DO iPHONE (notch / barra inferior)
   Depende do `viewport-fit=cover` adicionado no fragments/head.html.
   ===================================================================== */
@supports (padding: env(safe-area-inset-bottom)) {

@media only screen and (max-width: 767px) {
        .mtm-fab {
            bottom: calc(12px + env(safe-area-inset-bottom)) !important;
            right: calc(12px + env(safe-area-inset-right)) !important;
        }

.footer {
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
        }

.offcanvas-menu-wrapper {
            padding-bottom: calc(24px + env(safe-area-inset-bottom));
        }
    }
}

/* =====================================================================
   11. MOVIMENTO REDUZIDO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {

*,
    *::before,
    *::after {
        -webkit-animation-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   13. LISTA DE SUGESTÕES DE ENDEREÇO VAZIA  (SP20-063)
   ---------------------------------------------------------------------
   `#suggestions` / `.suggestions-list` recebem `border: 1px solid #ccc`
   (inline, em viewFullItem/updateItem, e via CSS nas telas de endereço).
   Enquanto o usuário não digita nada, o <ul> fica vazio mas continua
   ocupando altura COM a borda visível — é parte do "bloco vazio" entre o
   título Address e o primeiro campo.

`display` não está declarado inline, então esta regra vence sem
   precisar de !important.
   ===================================================================== */
#suggestions:empty,
.suggestions-list:empty {
    display: none;
}

/* O espaçamento do título da seção passa a vir daqui, no lugar dos <br>
   soltos que existiam no HTML. */
.section-custom > h3 {
    margin-bottom: 14px;
}

/* =====================================================================
   14. "I'LL COMPLETE THIS LATER" NO TOPO À DIREITA DO CARD
   ---------------------------------------------------------------------
   O bloco `.section-custom.top-right` abre 58 telas de cadastro. Ele é um
   flex row com `justify-content: flex-end`, e o ícone do step é
   `position: absolute` — logo não reserva espaço. Com isso, tudo o que
   está dentro dele se aglomerava à direita: em registerDetailsAndId o
   link "I'll complete this later" ficava colado em "Validate my
   registration by:", e em telas estreitas os dois chegavam a se sobrepor.

Aqui o bloco passa a ter duas faixas empilhadas:
     linha 1 -> o link, sempre no canto superior DIREITO;
     linha 2 -> o que mais houver (as opções de validação), também à
                direita, logo abaixo do link.

Vale em qualquer largura (não está em media query) e é declarado aqui
   porque styleResponsiveBase.css é o último stylesheet: os 9 CSS de tela
   que redefinem `.section-custom.top-right` seriam mais específicos de
   outra forma.
   ===================================================================== */

.section-custom.top-right {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    row-gap: 8px;
    /* SP20-MOB 10.3: o recuo de 60px saiu daqui.
       Ele existia para reservar espaço ao ícone do step, que é
       `position: absolute` e por isso não reserva largura nenhuma. O preço
       era 60px comidos da largura útil do cartão em TODAS as telas — o que
       no iPhone é ~16% da linha.
       A troca é estrutural, não cosmética: em vez de compensar o ícone com
       padding, o ícone passa a ser um item de flex normal no mobile (regra
       no fim desta seção) e reserva o próprio espaço. No desktop ele segue
       absoluto e o padding não faz falta, porque lá sobra largura. */
    padding-left: 0;
}

/* EXCEÇÃO: a fila do carrossel do /searchRentalItem.
   Ali este bloco não é o cabeçalho de step — é `< [itens] >`, e os três
   PRECISAM ficar na mesma linha. Com o wrap acima e o
   `#rentItemsContainer { width: 100% }` do mobile, o container tomava a
   linha inteira e as duas setas caíam para cima e para baixo dele.

Também não há ícone de step aqui, então os 60px reservados para ele só
   comiam a largura do carrossel. */
.section-custom.top-right--carousel {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* SP20-MOB 10.3: era 10px. Aqui não há ícone de step nenhum para
       compensar — o recuo só encurtava a faixa do carrossel, que é
       justamente o elemento que precisa de largura. */
    padding-left: 0;
    row-gap: 0;
}

/* As setas não podem encolher: quem cede largura é o carrossel, que rola. */
.section-custom.top-right--carousel > .button-swipeItems {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.section-custom.top-right--carousel > #rentItemsContainer {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* Linha própria para o link, alinhado à direita. */
.section-custom.top-right > .text-container {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    /* anula o gap herdado do d-flex flex-column do Bootstrap no HTML */
    row-gap: 0;
}

.section-custom.top-right > .text-container .helper-text {
    white-space: nowrap;
    text-align: right;
}

/* Demais conteúdos do bloco (ex.: "Validate my registration by:") vão para
   a linha de baixo, alinhados à direita — logo abaixo do link. */
.section-custom.top-right > .validation-options {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

/* Quando o rótulo quebra para a própria linha (telas estreitas), ele
   acompanha o alinhamento à direita em vez de voltar para a esquerda. */
.section-custom.top-right > .validation-options .validate {
    text-align: right;
}

/* O ícone do step fica alinhado ao topo, na altura do link. */
.section-custom.top-right > .top-left-icon {
    top: 10px;
}

/* SP20-MOB 10.3: contrapartida da remoção do padding de 60px.
   -----------------------------------------------------------
   Sem o recuo, o ícone do step (que é `position: absolute` e não ocupa
   lugar no fluxo) passaria POR CIMA do link "I'll complete this later" nas
   58 telas de cadastro que usam este bloco.

A correção certa não é devolver o padding, e sim deixar o ícone reservar
   o próprio espaço: como item de flex normal ele empurra o conteúdo em vez
   de sobrepô-lo, e o alinhamento se resolve sozinho em qualquer largura.
   `margin-right: auto` mantém o ícone à esquerda e o link à direita, que é
   o arranjo original.

Restrito ao mobile: no desktop sobra largura e o posicionamento absoluto
   continua sendo o que as 58 telas esperam. */
@media only screen and (max-width: 767px) {
    .section-custom.top-right > .top-left-icon {
        position: static;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-right: auto;
    }
}

@media only screen and (max-width: 480px) {
    /* Em telas muito estreitas o rótulo do link não caberia numa linha só
       ao lado do ícone; deixa quebrar em vez de vazar. */
    .section-custom.top-right > .text-container .helper-text {
        white-space: normal;
    }
}

/* =====================================================================
   Correção de cascata: no bloco de 991px os spans grandes viram
   `span 4` por seletores com atributo (`.fields > [style*="span 8"]`),
   mais específicos que o `.fields > *` do bloco de 767px. Resultado: em
   celular a grade tinha 2 trilhas explícitas mas um filho pedindo 4,
   criando trilhas implícitas — campos sobrepostos e conteúdo (checkboxes
   de "Specific Features") jogado para fora do card. Aqui os mesmos
   seletores são reescritos para a grade de 2 colunas do mobile.
   ===================================================================== */
@media only screen and (max-width: 767px) {
    .fields > [style*="span 8"],
    .fields > [style*="span 7"],
    .fields > [style*="span 6"],
    .fields > [style*="span 5"],
    .fields > [style*="span 4"],
    .fields > [style*="span 3"] {
        grid-column: span 2 !important;
    }
}

/* Checkbox/radio dentro de .checkbox-item herdavam o `width: 100%` (e a
   altura) das regras genéricas de input dos formulários: a caixa ocupava a
   linha inteira e empurrava o rótulo para fora do card. */
.checkbox-item input[type="checkbox"],
.checkbox-item input[type="radio"],
.checkbox-item-features input[type="checkbox"],
.checkbox-item-features input[type="radio"],
.checkbox-item-history input[type="checkbox"],
.checkbox-item-history input[type="radio"] {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}

/* =====================================================================
   15. CAMPOS DE CARTÃO NO CELULAR  (SP20-MOB 4.3 / 4.4)
   ===================================================================== */

@media only screen and (max-width: 480px) {
    /* iPHONE — "4111 1111 1111 1111" são 19 caracteres. Num campo de ~300px
       os últimos dígitos saíam da vista enquanto o usuário digitava, e ele
       não conseguia conferir o número antes de salvar.
       `tabular-nums` dá largura igual a todo dígito (o "1" para de ser mais
       estreito que o "8"), o que sozinho já economiza espaço e estabiliza o
       campo; o letter-spacing menor completa. Nada disso reduz a fonte, que
       precisa continuar em 16px por causa do anti-zoom do iOS. */
    #cardNumber,
    input[name="cardNumber"] {
        letter-spacing: .02em;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }
}

@media only screen and (max-width: 340px) {
    /* iPHONE SE 1ª GERAÇÃO / GALAXY FOLD FECHADO — validade e CVV ficam
       lado a lado (`.card-row` é flex 2:1). Até 360px a linha ainda cabe;
       em 320px cada campo fica com ~140px e o rótulo "Expiry Date (MM/YY)"
       quebra em três linhas, desalinhando a dupla.
       Só aqui os dois empilham. Acima disso continuam na mesma linha de
       propósito: são campos curtos e de preenchimento sequencial. */
    .card-row,
    .expiry-cvv-row,
    .form-row-half {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}