:root {
  --brand-color: #ff355a;
  --text-color: rgba(64, 64, 64, 1);
  --secondary-color: #22252C;
  --sub-color: #999999;
  --border-color: #e5e5e5;
  --secondary-border-color: #f5f6f6;

  --border-radius: 10px;
  --text-align: center;
}

@media (max-width: 425px) {
  :root {
    --border-radius: 3px;
    --text-align: left;
  }
}

@font-face {
  font-family: 'Roboto';
  src: url(/hc/theming_assets/01HZH6R7D6C9MJPT30Y933SC4G);
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto';
  src: url(/hc/theming_assets/01HZH6R5DERK4Y466SR2JJ9CYD);
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url(/hc/theming_assets/01HZH6R68FFQ12X43D9AE16BYR);
  font-weight: 900;
}

@font-face {
  font-family: 'Dotties Vanilla';
  src: url("DottiesVanilla-Black.otf");
  font-weight: 900;
}

* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

html {
  scroll-behavior: smooth;
}

section,
header,
footer {
  width: 85%;
  max-width: 1140px;
  margin: 0 auto;
}

section {
  padding-block: 3rem;
}

img {
  max-width: 100%;
}

header h1 {
  font-family: "Roboto";
  font-weight: 900;
}

button,
input,
textarea {
  border: 0;
  outline: none;
}

a {
  text-decoration: none;
  color: currentColor;
  text-underline-offset: 2px;
}

li {
  list-style: none;
}

.article-vote.up::before,
.article-vote.down::before,
i {
  content: '';
  display: block;
  aspect-ratio: 1;
  min-height: .75rem;
  min-width: .75rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all .25s;
}

.article-vote.up::before {
  background-image: url(/hc/theming_assets/01HZH6R4N79SG6D0KGWHGWF7GF);
}

.article-vote.down::before {
  background-image: url(/hc/theming_assets/01HZH6R56J2S3S5Z305YP7AAJ2);
}

.search-form {
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  height: 2.5rem;
  max-width: 768px;
}

.search-form.home {
  border-radius: var(--border-radius);
  width: 100%;
}

.search-form.global {
  flex: 1;
  min-width: 50%;
  max-width: 480px;
  border-radius: 50px;
}

.search-form [type="search"] {
  padding-left: 2rem;
  background-image: url(/hc/theming_assets/01HZH6R73BANRFV0CW83XNJ315);
  background-position: .5rem;
  background-repeat: no-repeat;
  background-size: 1rem;
  flex: 2;
}

.search-form [type="search"]::placeholder {
  color: #00000050;
}

.search-form [type="submit"] {
  font-weight: 900;
  max-width: 120px;
  color: #fff;
  background-color: var(--brand-color);
  cursor: pointer;
  flex: 1;
}

.search-form button {
  display: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.pagination{
  margin-top: 3rem;
}

.breadcrumbs,
.pagination-list {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  max-width: 80%;
}

.breadcrumbs li {
  font-size: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs li:not(:first-child)::before {
  content: '› ';
  font-weight: bold;
  font-size: .8rem;
}

.bread-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 0;
}

.return-top::after,
.article-nav p::after {
  background-image: url(/hc/theming_assets/01HZH6R4CR7V3X2C27Y5S8860K);
}

i.person {
  background-image: url(/hc/theming_assets/01HZH6R5NMKZHW0NHVA2BD6XCR);
}

i.chevron {
  background-image: url(/hc/theming_assets/01HZH6R4CR7V3X2C27Y5S8860K);
}

i.chat {
  background-image: url(/hc/theming_assets/01HZH6R4SPV1Y8GSGXSW6A0RQN);
}

i.emergency {
  background-image: url(/hc/theming_assets/01HZH6R4YGJXMF4YX0WPNX3FW3);
}

i.instagram {
  background-image: url(/hc/theming_assets/01HZH6R77G5DY77WENXCDX7AY4);
}

i.facebook {
  background-image: url(/hc/theming_assets/01HZH6R6H4A09SRFZ8WA5XNHYN);
}

i.youtube {
  background-image: url(/hc/theming_assets/01HZH6R6D357DAAN1ZVCBP6E41);
}

i.twitter {
  background-image: url(/hc/theming_assets/01HZH6R6TACMZXR1HWHAKVGY1Q);
}

/* =========================================================================
   KOVI AJUDA LOJA - quiosque de tablet + formulario de solicitacao
   Apendar no FINAL do style.css do tema.
   Guide admin > Customize design > Customize [tema] > Edit code > style.css
   Nada acima no arquivo precisa ser alterado.

   Dois escopos, nenhum global:
     html.kovi-loja .......... modo quiosque (so na URL do tablet)
     #main-content.form /
     .request-form ........... estilo do formulario (vale tambem no help center)
     .nesty-panel ............ painel de lista, que o JS injeta em <body>

   O que este bloco corrige (medido no DOM real do formulario):
     - reset do tema: `* { padding: 0 }` e
       `button, input, textarea { border: 0; outline: none }` deixam os campos
       sem borda e sem padding
     - #request_subject: border 0, padding 0, font-size 13.33px, altura 16px
     - .form-field: margin 0, ou seja, todos os campos colados
     - --text-align: center do tema centraliza os labels
     - input[type=submit]: 36x16px com o cinza #f0f0f0 default do browser
   ========================================================================= */

/* --- Tokens locais -------------------------------------------------------
   Prefixo --rf-* para nao colidir com os tokens do tema.
   O rosa vem de var(--brand-color) de proposito: o tema usa #ff355a e o DS
   Kovi usa #FF3355. Usar o token evita dois rosas na mesma tela. Para alinhar
   ao DS, o certo e corrigir --brand-color no :root do tema - nao aqui.     */
html.kovi-loja,
#main-content.form,
.request-form,
.nesty-panel {
  --rf-pink: var(--brand-color, #ff355a);
  --rf-ink: #22252c;
  --rf-muted: #6b7075;
  --rf-line: #dcdcd6;
  --rf-bg: #f6f5f0;
  --rf-card: #ffffff;
  --rf-radius: 12px;
  --rf-radius-card: 16px;
  --rf-field-h: 52px;
  --rf-ok: #0d9659;
  --rf-warn: #b45309;
  /* fallbacks; o @supports abaixo substitui onde color-mix existe */
  --rf-ring: rgba(255, 51, 85, 0.22);
  --rf-tint: #fff2f4;
}

@supports (color: color-mix(in srgb, red 50%, white)) {
  html.kovi-loja,
  #main-content.form,
  .request-form,
  .nesty-panel {
    --rf-ring: color-mix(in srgb, var(--rf-pink) 24%, transparent);
    --rf-tint: color-mix(in srgb, var(--rf-pink) 8%, #fff);
  }
}

/* =========================================================================
   1. MODO QUIOSQUE - somente sob html.kovi-loja
   A classe e aplicada por T1 (document_head.hbs) antes do primeiro paint.
   ========================================================================= */

/* 1.1 Saidas do quiosque. Cada seletor abaixo e um caminho pelo qual o cliente
   sairia do formulario e cairia no help center:
     body > header ....... logo dentro de <a href="/hc">
     .sub-nav ............ breadcrumbs (link para /hc/pt-br) + campo de busca
     body > footer ....... links de Instagram, Facebook, YouTube e Twitter
     pbr-whatsapp-fab .... botao flutuante de WhatsApp (custom element)
     .suggestion-list .... artigos sugeridos conforme o cliente digita o
                           assunto; cada sugestao e um link para fora
     .container-divider .. sobra visual, sem sentido sem o header           */
html.kovi-loja body > header,
html.kovi-loja .sub-nav,
html.kovi-loja body > footer,
html.kovi-loja pbr-whatsapp-fab,
html.kovi-loja .suggestion-list,
html.kovi-loja .container-divider {
  display: none;
}

/* 1.2 O tema deixa <body> e #main-content transparentes; o quiosque precisa de
   fundo proprio. Creme do DS Kovi, nunca escuro. */
html.kovi-loja,
html.kovi-loja body {
  background: var(--rf-bg);
}

html.kovi-loja body > main {
  padding: 24px 16px 48px;
}

/* 1.3 Sem o header, a marca volta como faixa no topo do card. E texto, nao
   link: no quiosque nao pode existir nada clicavel que saia da pagina. */
html.kovi-loja #main-content.form::before {
  content: "Kovi";
  display: block;
  padding: 18px 28px;
  background: var(--rf-pink);
  color: #fff;
  font-size: 22px;
  font-weight: 900; /* o tema carrega Roboto 300/400/900 */
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* 1.4 Seletor de formulario fora da tela.
   O <select id="request_issue_type_select"> permanece no DOM e continua
   submetendo request[ticket_form_id]=48285304987405 - verificado com FormData
   no formulario real, com o select ja em display:none. O autofocus no select
   oculto e ignorado pelo browser, sem erro de console. */
html.kovi-loja .request-form .request_ticket_form_id {
  display: none;
}

/* 1.5 Barra de formatacao do editor fora. Negrito, citacao e bloco de codigo
   nao servem para um cliente descrevendo um problema num tablet, e a barra
   custa 70px de altura util: 35px da toolbar mais 35px do container vazio do
   dialogo de link. Fora do quiosque a toolbar continua funcionando. */
html.kovi-loja .request-form #hc-wysiwyg > div[role="toolbar"],
html.kovi-loja .request-form #hc-wysiwyg > div[role="form"] {
  display: none;
}

/* =========================================================================
   2. FORMULARIO
   Vale no quiosque e tambem para quem abrir um formulario pelo help center.
   ========================================================================= */

#main-content.form {
  max-width: 720px;
  margin: 0 auto;
  padding: 0; /* o padding fica no .request-form, para a faixa 1.3 ir de ponta a ponta */
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(34, 37, 44, 0.04), 0 10px 30px rgba(34, 37, 44, 0.06);
}

.request-form {
  padding: 28px;
  color: var(--rf-ink);
  text-align: left; /* o tema define --text-align: center neste viewport */
}

/* --- Campos e labels ---------------------------------------------------- */

.request-form .form-field {
  display: block;
  margin: 0 0 20px; /* o tema deixa margin: 0 e os campos ficam colados */
}

.request-form .form-field > label {
  display: block; /* o tema deixa display: inline */
  margin: 0 0 8px;
  color: var(--rf-ink);
  font-size: 15px;
  font-weight: 400; /* nao usar 500: o tema so carrega Roboto 300/400/900 */
  line-height: 1.35;
}

/* Asterisco somente nos obrigatorios. O content vazio no .optional garante o
   resultado mesmo se a ordem das regras mudar num merge futuro. */
.request-form .form-field.required > label::after {
  content: " *";
  color: var(--rf-pink);
}

.request-form .form-field.optional > label::after {
  content: "";
}

.request-form .form-field > label .optional {
  color: var(--rf-muted);
  font-size: 13px;
  font-weight: 400;
}

/* Repoe borda, padding e anel de foco que o reset do tema remove.
   `* { padding: 0 }` tem especificidade 0 e `button, input, textarea` tem
   0,0,1 - qualquer regra abaixo vence sem precisar de !important. */
.request-form input[type="text"],
.request-form input[type="email"],
.request-form input[type="tel"],
.request-form input[type="number"],
.request-form input[type="date"],
.request-form input[type="password"],
.request-form select,
.request-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--rf-field-h); /* alvo de toque confortavel no tablet */
  padding: 13px 14px;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius);
  background: #fff;
  color: var(--rf-ink);
  font-family: inherit;
  font-size: 17px; /* acima de 16px evita o zoom automatico do iOS ao focar */
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.request-form textarea {
  min-height: 160px;
  resize: vertical;
}

.request-form input::placeholder,
.request-form textarea::placeholder {
  color: var(--rf-muted);
}

.request-form input[type="text"]:focus,
.request-form input[type="email"]:focus,
.request-form input[type="tel"]:focus,
.request-form input[type="number"]:focus,
.request-form input[type="date"]:focus,
.request-form input[type="password"]:focus,
.request-form select:focus,
.request-form textarea:focus {
  border-color: var(--rf-pink);
  box-shadow: 0 0 0 4px var(--rf-ring);
  outline: none; /* substituido pelo box-shadow acima, que respeita o radius */
}

.request-form .form-field p,
.request-form #request_description_hint {
  margin: 6px 0 0;
  color: var(--rf-muted);
  font-size: 13px;
  line-height: 1.45;
}

/* --- Campos de escolha (defensivo) --------------------------------------
   O formulario da Loja hoje nao tem checkbox, radio nem data. Estas regras
   existem para o dia em que entrarem os campos de cidade e de loja: sem elas,
   o reset do tema entrega o mesmo resultado quebrado dos inputs de texto.  */
.request-form .form-field.checkbox,
.request-form .form-field.radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.request-form .form-field.checkbox > label,
.request-form .form-field.radio > label {
  margin: 0;
  font-size: 16px;
}

.request-form input[type="checkbox"],
.request-form input[type="radio"] {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--rf-pink);
}

/* --- Widget de lista (nesty) --------------------------------------------
   O tema deriva do Copenhagen antigo: todo <select> visivel e substituido por
   um `a.nesty-input` mais um `div.nesty-panel` que o JS injeta como filho
   direto de <body>. Hoje aparece como link cru, sem moldura.
   Vale para o seletor de formulario e para qualquer campo de lista futuro. */
.request-form a.nesty-input {
  display: block;
  box-sizing: border-box;
  min-height: var(--rf-field-h);
  padding: 13px 42px 13px 14px; /* espaco a direita para o chevron */
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7075' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  color: var(--rf-ink);
  font-size: 17px;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.request-form a.nesty-input:hover {
  border-color: var(--rf-muted);
}

.request-form a.nesty-input:focus {
  border-color: var(--rf-pink);
  box-shadow: 0 0 0 4px var(--rf-ring);
  outline: none;
}

/* O painel e injetado em <body>, por isso fica fora do escopo .request-form.
   position, top e left vem inline do JS e NAO sao tocados aqui. */
.nesty-panel {
  z-index: 60;
  box-sizing: border-box;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius);
  background: #fff;
  box-shadow: 0 12px 32px rgba(34, 37, 44, 0.14);
}

.nesty-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nesty-panel li {
  margin: 0;
}

.nesty-panel li a,
.nesty-panel .nesty-item {
  display: block;
  padding: 13px 12px; /* alvo de toque */
  border-radius: 8px;
  color: var(--rf-ink);
  font-size: 16px;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
}

.nesty-panel li a:hover,
.nesty-panel .nesty-item:hover,
.nesty-panel .nesty-item.selected {
  background: var(--rf-tint);
  color: var(--rf-pink);
}

/* --- Editor de descricao (TinyMCE dentro de #hc-wysiwyg) -----------------
   Os filhos de #hc-wysiwyg nao tem classe, so atributo role - por isso os
   seletores usam role. Nada de .wysiwyg-icon-* nem de [role="menu"] e tocado:
   background-image e display desses vem do application.css do Zendesk e
   mexer neles quebra os icones e o menu de estilos.                       */
.request-form #hc-wysiwyg {
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* O conteudo do editor fica num <iframe>; :focus-within acompanha o foco do
   iframe no Chrome e no Safari. Se algum browser nao propagar, a perda e so
   visual - a digitacao nao e afetada. */
.request-form #hc-wysiwyg:focus-within {
  border-color: var(--rf-pink);
  box-shadow: 0 0 0 4px var(--rf-ring);
}

.request-form #hc-wysiwyg > div[role="toolbar"] {
  padding: 6px 10px;
  border-bottom: 1px solid var(--rf-line);
  background: #fbfaf7;
}

.request-form #hc-wysiwyg iframe {
  display: block;
  width: 100%;
  min-height: 180px;
  border: 0;
}

/* --- Anexos --------------------------------------------------------------
   O <input type=file> recebe do application.css do Zendesk
   position:absolute, opacity:0 e 100% do container. Nenhuma propriedade dele
   e tocada aqui de proposito: mexer em position, width, height ou opacity e
   exatamente o que quebra a abertura da camera no tablet. Crescer o container
   basta - o input acompanha.                                              */
.request-form .upload-dropzone {
  box-sizing: border-box;
  padding: 26px 16px;
  border: 2px dashed var(--rf-line);
  border-radius: var(--rf-radius);
  background: #fbfaf7;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.request-form .upload-dropzone:hover,
.request-form .upload-dropzone:focus-within,
.request-form .upload-dropzone.dragging {
  border-color: var(--rf-pink);
  background: var(--rf-tint);
}

.request-form .upload-dropzone > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rf-muted);
  font-size: 15px;
  line-height: 1.4;
}

/* Clipe de papel via mask, para herdar currentColor e nao precisar de dois
   arquivos de icone entre estado normal e estado ativo. */
.request-form .upload-dropzone > span::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}

.request-form .upload-dropzone > span a {
  color: var(--rf-pink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Lista de anexos enviados. Classes conferidas no <script id="upload-template">
   do proprio formulario: .upload-item, .upload-item-icon, .upload-link,
   .upload-path, .upload-remove, .upload-progress.                          */
.request-form .upload-pool {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.request-form .upload-pool .upload-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

.request-form .upload-pool .upload-item-icon {
  flex: 0 0 12px;
  color: var(--rf-muted);
}

.request-form .upload-pool .upload-link {
  color: var(--rf-ink);
  text-decoration: none;
  word-break: break-all;
}

.request-form .upload-pool .upload-path {
  margin: 0;
  color: var(--rf-muted);
  font-size: 13px;
  white-space: nowrap;
}

.request-form .upload-pool .upload-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  margin-left: auto; /* empurra o X para a direita do item */
  border-radius: 8px;
  color: var(--rf-muted);
  cursor: pointer;
}

.request-form .upload-pool .upload-remove:hover,
.request-form .upload-pool .upload-remove:focus {
  background: var(--rf-tint);
  color: var(--rf-pink);
  outline: none;
}

/* A largura da barra vem inline do JS conforme o upload progride e por isso
   nao e declarada aqui. */
.request-form .upload-pool .upload-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--rf-pink);
}

/* --- Erros e avisos ------------------------------------------------------
   Cores de status do DS Kovi: erro #FF3355 (via --rf-pink), atencao #B45309,
   sucesso #0D9659. Borda esquerda de 4px para o aviso ser reconhecivel de
   longe, que e como se le um tablet apoiado num balcao.                    */
.request-form .form-field.error input[type="text"],
.request-form .form-field.error input[type="email"],
.request-form .form-field.error select,
.request-form .form-field.error textarea,
.request-form .form-field.error a.nesty-input,
.request-form .form-field.error #hc-wysiwyg {
  border-color: var(--rf-pink);
}

.request-form .error-message,
.request-form .form-field.error .error-message {
  display: block;
  margin: 6px 0 0;
  color: var(--rf-pink);
  font-size: 13px;
  line-height: 1.45;
}

.request-form .notification,
.request-form .notification-inline {
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--rf-muted);
  border-radius: 8px;
  background: #f7f7f4;
  color: var(--rf-ink);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.request-form .notification-error {
  border-left-color: var(--rf-pink);
  background: var(--rf-tint);
}

.request-form .notification-alert {
  border-left-color: var(--rf-warn);
  background: #fdf6ec;
}

.request-form .notification-success {
  border-left-color: var(--rf-ok);
  background: #eef8f2;
}

/* O #upload-error nasce com display:none e o JS do Zendesk o revela quando o
   upload falha. display nao e declarado aqui para nao forcar a exibicao. */
.request-form .upload-pool [data-upload-issue] {
  flex: 1 1 100%;
  margin: 6px 0 0;
}

/* --- Botao Enviar --------------------------------------------------------
   O controle e um <input type="submit" name="commit" value="Enviar">, dentro
   de um <footer> do proprio formulario. Duas heranças precisam ser desfeitas:
     - style.css do tema: `section, header, footer { width: 85%;
       max-width: 1140px; margin: 0 auto }` estreita e centraliza o rodape
     - footer.hbs (bloco <style> inline, que vem DEPOIS do style.css no
       documento): `footer { padding-bottom: 14rem }`, ou seja 224px de vazio
   `.request-form footer` tem especificidade 0,1,1 e vence os dois, que sao
   0,0,1 - sem !important.                                                 */
.request-form footer {
  display: block;
  width: auto;
  max-width: none;
  margin: 24px 0 0;
  padding: 0;
  text-align: left;
}

.request-form footer input[type="submit"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 60px; /* alvo de toque generoso: e o unico botao da tela */
  padding: 16px 24px;
  border: 0;
  border-radius: var(--rf-radius);
  background: var(--rf-pink);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

/* :active e :focus-visible, nao :hover - num tablet nao existe hover. */
.request-form footer input[type="submit"]:active {
  filter: brightness(0.92);
}

.request-form footer input[type="submit"]:focus-visible {
  box-shadow: 0 0 0 4px var(--rf-ring);
  outline: none;
}

.request-form footer input[type="submit"][disabled] {
  background: var(--rf-line);
  color: var(--rf-muted);
  cursor: default;
}

/* =========================================================================
   3. TELA DE CONFIRMACAO (T4)
   Markup montado pelo script.js e inserido dentro de #main-content.form, que
   mantem o card e, no quiosque, a faixa rosa da marca.
   ========================================================================= */

.kovi-confirm {
  padding: 40px 28px 32px;
  color: var(--rf-ink);
  text-align: center;
}

.kovi-confirm-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--rf-ok);
}

.kovi-confirm-badge::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kovi-confirm-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.kovi-confirm-lead {
  margin: 0 auto 24px;
  max-width: 46ch;
  color: var(--rf-muted);
  font-size: 16px;
  line-height: 1.5;
}

.kovi-confirm-email {
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius);
  background: #fbfaf7;
}

.kovi-confirm-email-label {
  display: block;
  margin: 0 0 4px;
  color: var(--rf-muted);
  font-size: 13px;
}

.kovi-confirm-email-value {
  display: block;
  font-size: 19px;
  font-weight: 400;
  word-break: break-all;
}

/* O aviso central do projeto: o acompanhamento e por e-mail, nao pelo tablet.
   Por isso ganha a borda rosa e nao some no meio do texto. */
.kovi-confirm-note {
  margin: 0 0 28px;
  padding: 14px 16px;
  border-left: 4px solid var(--rf-pink);
  border-radius: 8px;
  background: var(--rf-tint);
  color: var(--rf-ink);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.kovi-confirm-reset {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  padding: 16px 24px;
  border: 1px solid var(--rf-ink);
  border-radius: var(--rf-radius);
  background: #fff;
  color: var(--rf-ink);
  font-family: inherit;
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.kovi-confirm-reset:active {
  background: #f2f1ec;
}

.kovi-confirm-reset:focus-visible {
  border-color: var(--rf-pink);
  box-shadow: 0 0 0 4px var(--rf-ring);
  outline: none;
}

/* =========================================================================
   4. VIEWPORTS MENORES (tablet em retrato, celular)
   ========================================================================= */

@media (max-width: 767px) {
  html.kovi-loja body > main {
    padding: 12px 10px 36px;
  }

  #main-content.form {
    border-radius: 12px;
  }

  .request-form {
    padding: 20px 18px;
  }

  html.kovi-loja #main-content.form::before {
    padding: 16px 18px;
    font-size: 20px;
  }

  .kovi-confirm {
    padding: 32px 20px 24px;
  }

  .kovi-confirm-title {
    font-size: 22px;
  }
}

/* Unico !important deste bloco: preferencia de sistema tem de vencer as
   transitions declaradas acima, que estao em regras mais especificas. */
@media (prefers-reduced-motion: reduce) {
  #main-content.form *,
  .nesty-panel * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===================== fim do bloco KOVI AJUDA LOJA ====================== */