/*
 * Cotação form (geral) — CSS ported verbatim from client SFMC Cloud Page.
 * NOTE: contains GLOBAL rules (e.g. * { margin:0 }) as delivered by client.
 * Enqueued ONLY on cotacao-de-seguros to limit leakage. Restyle to DS later.
 */
    .cotacao-form-scope {
      margin: 0;
      box-sizing: border-box;
    }

    .cotacao-form-scope .header {
      margin-top: 0;
      padding-top: 1px;
      display: flow-root;
    }

    .cotacao-form-scope .text-header h1 {
      margin-top: 0;
    }

    .cotacao-form-scope {
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .cotacao-form-scope {
      font-family: var(--font-family), sans-serif !important;
    }


    .cotacao-form-scope .header {
      background: linear-gradient(to bottom,
          rgb(6, 61, 76),
          rgb(8, 97, 98),
          rgb(10, 132, 120));

      display: flex;
      justify-content: center;
      flex-direction: column;
    }


    .cotacao-form-scope .text-header {
      h1 {
        display: block;
        color: #A3D063;
        font-weight: 700;
        font-size: 50px;
        line-height: 1.2;
        margin-left: 9.5%;
        margin-bottom: 0;

      }

      p {
        display: block;
        color: white;
        font-weight: 400;
        margin-left: 9.5%;

        padding-bottom: 45px;
      }
    }

    .cotacao-form-scope .content-form {
      padding-top: 7%;
    }

    .cotacao-form-scope h2 {
      color: #08392e;
      font-size: 40px;
      padding-bottom: 14px;
    }

    .cotacao-form-scope .error-text-email, .cotacao-form-scope .error-text-modelo, .cotacao-form-scope .error-text-veiculo {
      color: #d93025;
      display: none;

    }

    .cotacao-form-scope .error-text-pg2 {
      color: #d93025;

    }

    .cotacao-form-scope p {
      color: #08392e;
      font-weight: 700;
      font-size: 20px;
      padding-bottom: 7px;
    }

    .cotacao-form-scope .veiculos {
      display: flex;
      gap: 41px;
      width: 55%;
    }

    .cotacao-form-scope .veiculos>div {
      flex: 1 1 0;
      border: 1px solid var(--color-border-default);
      border-radius: 6px;

      b {
        font-size: 20px;
        margin-top: 5px;
        font-weight: 600px;
      }

      box-sizing: border-box;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    /* Ícone */
    .cotacao-form-scope .veiculos img {
      max-width: 48px;
      height: auto;
      margin-bottom: 8px;
    }

    .cotacao-form-scope .Seguro-moto, .cotacao-form-scope .Seguro-caminhao, .cotacao-form-scope .Seguro-carro {
      flex: 1 1 0;
      min-width: 0;
      color: #08392e;
      border: 1px solid var(--color-border-default);
      border-radius: 12px;
      padding: 26px 0px 14px 6px;
      box-sizing: border-box;
      text-align: center;

    }

    /* Texto */
    .cotacao-form-scope .veiculos span, .cotacao-form-scope .veiculos b, .cotacao-form-scope .veiculos p {
      font-size: 14px;
      line-height: 1.2;
    }

    @media (max-width: 500px) {
      .cotacao-form-scope .veiculos {
        gap: 5px;
        width: 100%;
      }

      .cotacao-form-scope .veiculos>div {
        width: 100%;
      }

      .cotacao-form-scope .veiculos img {
        max-width: 36px;
      }

      .cotacao-form-scope .veiculos span, .cotacao-form-scope .veiculos b, .cotacao-form-scope .veiculos p {
        font-size: 13px;
      }
    }

    @media screen and (max-width: 1199px) {

      .cotacao-form-scope .input-text, .cotacao-form-scope .veiculos {
        width: 90% !important;
        gap: 5px;
      }

      .cotacao-form-scope h2 {
        color: #08392e;
        font-size: 26px;
        padding-bottom: 14px;
      }
    }

    @media screen and (max-width: 1199px) {

      .cotacao-form-scope .dados, .cotacao-form-scope .endereco {
        display: flex !important;
        flex-direction: column !important;
        width: 83% !important;
      }
    }

    @media screen and (max-width: 1199px) {
      .cotacao-form-scope .btn-avancar {
        width: 90% !important;
        gap: 5px;
        /* align-items: center; */
        margin-left: 0px !important;
      }
    }

    @media screen and (max-width: 1199px) {
      .cotacao-form-scope .btns {
        align-items: center !important;
        font-family: sans-serif !important;

        .btn-voltar {
          padding: 10px 10px 10px;
          font-family: sans-serif !important;


        }

        .btn-enviar {
          padding: 10px 10px 10px;
          font-family: sans-serif !important;

        }
      }
    }

    .cotacao-form-scope .no-vehicle {
      accent-color: #78be20;
    }

    .cotacao-form-scope .optin {
      accent-color: #78be20;
    }

    .cotacao-form-scope label {
      color: #4D5653;
      font-size: 18px;

    }

    .cotacao-form-scope .Seguro-moto, .cotacao-form-scope .Seguro-carro, .cotacao-form-scope .Seguro-caminhao {
      cursor: pointer;
      transition: all 0.25s ease;
      background-color: #ffffff;
    }

    .cotacao-form-scope .Seguro-moto:hover, .cotacao-form-scope .Seguro-carro:hover, .cotacao-form-scope .Seguro-caminhao:hover {
      background-color: #f3f3f3;
      border-color: #cfe6d5;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .cotacao-form-scope .veiculo-ativo {
      background-color: #f3f3f3;
      border-color: #cfe6d5;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    .cotacao-form-scope .label-title {
      font-weight: bold;
      display: block;
      font-size: 20px;
      margin: 45px 0 3px 0;
      color: #08392e;
    }

    .cotacao-form-scope .label-title-2 {
      display: block;
      font-size: 20px;
      font-family: var(--font-family), sans-serif !important;
      margin: 20px 0 3px 0;
      color: #495057 !important;
    }


    .cotacao-form-scope .input-text {
      width: 28%;
      padding: 14px;
      border: 1px solid var(--color-border-default);
      border-radius: 7px;
      font-family: var(--font-family), sans-serif !important;

      color: #4D5653;
      font-size: max(16px, .8rem);

      margin-bottom: 5px;
    }

    .cotacao-form-scope select.input-text, .cotacao-form-scope select.input-text2 {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: #fff;
      background-image: none !important;
      font-family: var(--font-family), sans-serif !important;
      background-color: #4D5653;
      padding: 14px;
      border: 1px solid var(--color-border-default);
      border-radius: 4px;
      color: #4D5653;
      font-size: max(16px, .8rem);
      margin-bottom: 5px;
    }

    .cotacao-form-scope .input-text:focus, .cotacao-form-scope .input-dados:focus, .cotacao-form-scope .input-text2:focus, .cotacao-form-scope select.input-text:focus, .cotacao-form-scope select.input-text2:focus {
      outline: none !important;
      border: 1px solid #78be20 !important;
      background-color: #fff;
    }

    .cotacao-form-scope #placa {
      box-shadow: 0 1.5px 0px #004a44;
    }

    .cotacao-form-scope .input-text2 {
      width: 83%;
      padding: 14px !important;
      font-family: var(--font-family), sans-serif !important;
      font-size: max(16px, .8rem);
      border: 1px solid var(--color-border-default);
      border-radius: 4px;
      margin-bottom: 5px;
    }

    .cotacao-form-scope .dados {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      width: 85%;
    }

    .cotacao-form-scope .endereco {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      width: 85%;
    }

    .cotacao-form-scope .input-dados {
      width: 100%;
      padding: 14px !important;
      border: 1px solid var(--color-border-default);
      border-radius: 4px;

      color: #4D5653;
      font-family: var(--font-family), sans-serif !important;
      font-size: max(16px, .8rem);
      margin-bottom: 5px;
      box-sizing: border-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: #fff;
      background-image: none !important;


    }

    @media (max-width: 1024px) {
      .cotacao-form-scope .dados {
        grid-template-columns: repeat(2, 1fr);
      }

      .cotacao-form-scope .text-header {
        h1 {
          display: block;
          color: #A3D063;
          font-weight: 700;
          font-size: 32px;
          line-height: 1.2;
          margin-left: 9.5%;
          margin-bottom: 0;
        }

        p {
          font-size: 19px;
        }
      }
    }

    @media (max-width: 1024px) {
      .cotacao-form-scope .selectable-box {
        padding: 15px 15px;
        border: 1px solid var(--color-border-default);
        border-radius: 12px;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s;
        background-color: #fff;
        font-size: 17px;
        color: #495057;
        width: 90%;
      }
    }

    @media (max-width: 600px) {
      .cotacao-form-scope .dados {
        grid-template-columns: 1fr;
      }
    }

    .cotacao-form-scope .options-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 5px;
    }


    .cotacao-form-scope .selectable-box {
      padding: 15px 15px;
      border: 1px solid var(--color-border-default);
      border-radius: 12px;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s;
      background-color: #fff;
      font-size: 17px;
      color: #495057;
    }

    .cotacao-form-scope .selectable-box:hover {
      background-color: #f0f0f0;
    }

    .cotacao-form-scope .selectable-box.active, .cotacao-form-scope #veiculos>div.active {
      border: 1px solid #6EAD2E !important;
      box-shadow: 0 0 5px rgba(0, 0, 50, 0.4) !important;
      border-radius: 8px;
      background-color: #f0f0f0 !important;
    }

    .cotacao-form-scope .error-text {
      color: #d93025;
      font-size: 15px;
      margin-top: 4px;
    }

    .cotacao-form-scope .btn-avancar {
      background-color: #68b445;
      color: white;
      padding: 12px 107px;
      border: none;
      font-size: 18px;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 30px;
      display: block;
      margin-left: 30%;
      margin-right: auto;
    }

    .cotacao-form-scope .footer-warning {
      border: 1px solid #f9a825;
      background-color: #fffdf0;
      padding: 10px;
      text-align: center;
      margin-top: 20px;
      font-size: 16px;
    }

    .cotacao-form-scope .step-info {
      color: #888;
      font-size: 14px;
      font-weight: 100;
      margin-top: 18px;
      margin-left: 38.5%;
    }

    .cotacao-form-scope .form-step {
      display: none;
    }

    .cotacao-form-scope .form-step.active {
      display: block;
    }

    .cotacao-form-scope .btn-voltar {
      background-color: #888;
      color: white;
      padding: 12px 107px;
      font-size: 18px;
      border: none;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 30px;
    }

    .cotacao-form-scope .btn-enviar {
      background-color: #78be20;
      color: white;
      font-size: 18px;
      padding: 12px 104px;
      border: none;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 30px;
    }

    .cotacao-form-scope .btns {
      display: flex;
      flex-direction: row-reverse;
      justify-content: center;
      gap: 15px;
      width: 100%;
    }

    .cotacao-form-scope .btn-enviar:hover, .cotacao-form-scope .btn-voltar:hover, .cotacao-form-scope .btn-avancar:hover {
      background-color: #08392e;
      color: white;
    }

    @media (max-width: 768px) {
      .cotacao-form-scope .text-header {
        display: flex;

        flex-direction: column;
        overflow: hidden;
      }

      .cotacao-form-scope .step-info {
        color: #888;
        font-size: 14px;
        font-weight: 100;
        margin-top: 18px;
        margin-left: 35%;
      }

      .cotacao-form-scope .text-header {
        margin-left: 0;
      }

      .cotacao-form-scope .text-header svg {
        width: 100%;
        height: auto;
        max-width: 400px;
        display: block;
      }
    }

    .cotacao-form-scope .nome {
      box-shadow: 0 1.5px 0px #004a44;
    }

    .cotacao-form-scope select.input-text, .cotacao-form-scope select.input-text2, .cotacao-form-scope select.input-dados {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: #ffffff;

      border-radius: 4px;
      opacity: 1;
    }

    /* CPF */
    .cotacao-form-scope .error-text-cp {
      display: none;
      color: red;
    }

    /* Celular */
    .cotacao-form-scope .error-text-cel {
      color: red;
    }

    /* Data de nascimento */
    .cotacao-form-scope .error-text-dt {
      display: none;
      color: red;
    }

    /* CEP */
    .cotacao-form-scope .error-text-ce {
      display: none;
      color: red;
    }

    /* Estado */
    .cotacao-form-scope .error-text-es {
      display: none;
      color: red;
    }

    .cotacao-form-scope .error-text-nm {
      display: none;
      color: red;
    }

    .cotacao-form-scope .error-text-sx {
      display: none;
      color: red;
    }

    .cotacao-form-scope .error-text-ec {
      display: none;
      color: red;
    }


    .cotacao-form-scope select {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 30px;
    }

    .cotacao-form-scope .error-text, .cotacao-form-scope .footer-warning {
      display: none;
    }

/* ===== Suhai overrides (visual review) ===== */
/* Client request: hide vehicle icons (cannot be matched to the site's icon
   standard), keep only the labels. The icons are inline <svg> followed by a
   <br>; hide both so the label centers cleanly. */
/* NOTE: every override below is prefixed with .cotacao-form-scope so it matches
   or beats the (now scoped) client rules' specificity. */
.cotacao-form-scope .veiculos > div svg {
  display: none;
}

/* Client request: the 3 vehicle cards must fill the full width, side by side.
   Client CSS had .veiculos at width: 55% with a 41px gap. */
.cotacao-form-scope .veiculos {
  width: 100%;
  gap: 16px;
}
.cotacao-form-scope .veiculos > div {
  flex: 1 1 0;
}
/* Icons removed, so the tall padding (26px/14px) that made room for them now
   leaves the cards over-tall. Trim to a compact label-only height. */
.cotacao-form-scope .veiculos .Seguro-moto,
.cotacao-form-scope .veiculos .Seguro-caminhao,
.cotacao-form-scope .veiculos .Seguro-carro {
  padding: 16px 8px;
}
/* The label div carried a top padding that added height. */
.cotacao-form-scope .veiculos > div > div[style] {
  padding-top: 0 !important;
}

/* Client request: "Placa" and "Seu veículo é" on the same row, 2 columns.
   Placa and vehicle-use are each wrapped in .col-2col inside a .row-2col flex
   row (wrappers added to the embed; all field id/name/class kept intact so the
   submit JS is unaffected). */
.cotacao-form-scope .row-2col {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cotacao-form-scope .row-2col > .col-2col {
  min-width: 0;
}
/* Placa column is narrow (the plate field is short); the vehicle-use column
   takes the rest. */
.cotacao-form-scope .row-2col > .col-placa {
  flex: 0 0 200px;
}
.cotacao-form-scope .row-2col > .col-veiculo {
  flex: 1 1 0;
}
/* Modelo / Ano row (#extra-veiculo): Modelo fills the remaining space, Ano is a
   narrow fixed column (year is short). */
.cotacao-form-scope #extra-veiculo > .col-2col:first-child {
  flex: 1 1 0;
}
.cotacao-form-scope #extra-veiculo > .col-2col:last-child {
  flex: 0 0 160px;
}
/* Fields inside these columns must fill their column (client CSS sets
   .input-text width:28%). */
.cotacao-form-scope .row-2col .col-placa #placa,
.cotacao-form-scope .row-2col .col-veiculo #veiculo {
  width: 100%;
}
/* All selects share the same dropdown style as "Seu veículo é": white
   background (client CSS painted some dark grey) + a chevron indicator (client
   CSS used appearance:none + background-image:none). Applies to every <select>
   in the form (Seu veículo é, Tipo de contratação, Estado, Sexo, Estado Civil),
   whose client classes are inconsistent (input-text / input-text2 / input-dados). */
.cotacao-form-scope select,
.cotacao-form-scope select.input-text,
.cotacao-form-scope select.input-text2,
.cotacao-form-scope select.input-dados {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234D5653' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding: 14px !important;
  padding-right: 36px !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-md) !important;
  color: #4D5653 !important;
  cursor: pointer;
}
/* Align the two columns' fields at the top, and avoid double spacing: the row
   itself already carries the 20px group gap (margin-top), so the labels INSIDE
   the row must have margin-top:0 — otherwise the generic label rule's 20px
   stacks on top of the row's 20px (= 40px). Needs !important to beat that rule. */
.cotacao-form-scope .row-2col .col-placa > label.label-title,
.cotacao-form-scope .row-2col .col-veiculo > label.label-title-2,
.cotacao-form-scope #extra-veiculo > .col-2col > label.label-title-2 {
  margin-top: 0 !important;
}
/* Inline styles removed from the embed (visual only) — moved here as classes.
   .erro-msg standardises the red error text that was inline color:red;font-size.
   (.placa-checkbox-row spacing is set in the group-spacing block above.) */
.cotacao-form-scope .col-placa .erro-msg {
  color: red;
  font-size: 15px;
}

/* Standardise ALL labels: bold, 16px, DS text colour. The client HTML is
   inconsistent — field labels come from 3 sources: .label-title (green),
   .label-title-2 (grey), bare <label> (checkboxes), and even a <p> ("Qual o
   seu veículo") styled like a label. Unify all of them. Colour uses the design
   system token --color-text-primary instead of the client's hardcoded hexes. */
.cotacao-form-scope label,
.cotacao-form-scope .label-title,
.cotacao-form-scope .label-title-2,
.cotacao-form-scope #step-1 > p:not(.cotacao-form-title) {
  font-weight: bold;
  font-size: 16px;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  padding-bottom: 10px !important; /* same 10px label→field gap (this <p> labels the vehicle cards) */
}

/* Form title: not a heading tag (a <p> with DS .text-title-lg .font-bold), with
   30px below it before the fields. Override the client's generic `p` rule
   (font-size:20px etc.) which would otherwise win on specificity. */
.cotacao-form-scope .cotacao-form-title {
  font-size: 2rem !important;       /* DS --text-title-lg */
  line-height: 2.5rem !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-text-primary) !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
}

/* Selectable option boxes (residência/faculdade/trabalho choices): 14px. */
.cotacao-form-scope .selectable-box {
  font-size: 14px;
}

/* Single source of vertical spacing: the LABEL owns it (20px top between groups,
   10px bottom to its input). Inputs carry NO margin, so values don't stack
   (client had margin-bottom:5px on inputs, which added to the next label's 20px
   and produced 25px between groups). */
.cotacao-form-scope .label-title,
.cotacao-form-scope .label-title-2 {
  margin: 20px 0 10px 0 !important;
}
.cotacao-form-scope .input-text,
.cotacao-form-scope .input-text2,
.cotacao-form-scope .input-dados,
.cotacao-form-scope select {
  margin-bottom: 0 !important;
}
/* The 2-col row (Placa / Seu veículo é) and the contratação group are whole
   groups — give them the 20px top gap too. (Labels inside the row keep their
   margin-top:0 from the alignment rule below.) */
.cotacao-form-scope .row-2col {
  margin-top: 20px;
}
.cotacao-form-scope #contratacao {
  margin-top: 0;
}
/* The checkbox row under Placa carried a large 34px bottom margin — normalise. */
.cotacao-form-scope .placa-checkbox-row {
  margin: 5px 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* the label carries its own default spacing inside the flex row — reset it */
.cotacao-form-scope .placa-checkbox-row label {
  margin: 0;
}
.cotacao-form-scope .placa-checkbox-row .no-vehicle {
  margin: 0;
  flex: 0 0 auto;
}

/* "Não possuo veículo ainda" checkbox label: small, regular weight, light grey
   (it's a secondary option, not a field title). */
.cotacao-form-scope .placa-checkbox-row label {
  font-size: 12px;
  font-weight: normal;
  color: var(--color-text-secondary) !important;
  line-height: 1;       /* shrink the line box so the text centres with the checkbox */
  margin: 0 !important; /* kill any inherited label spacing */
  padding: 0 !important; /* a padding-bottom was offsetting the text upward */
}

/* Use the site font (DS --font-family: 'ES Build'), not the client's imported
   "Branding". The client forces font-family: 'Branding' !important in many
   rules, so override the whole form scope (and inputs, which UAs don't inherit
   font by default) with the DS token. */
.cotacao-form-scope,
.cotacao-form-scope *,
.cotacao-form-scope input,
.cotacao-form-scope select,
.cotacao-form-scope textarea,
.cotacao-form-scope button {
  font-family: var(--font-family) !important;
}

/* ===== DS alignment ===== */
/* Border-radius: match the site CTA radius (--radius-md = 8px) across buttons,
   selects, selectable cards/boxes and inputs. The client used a mix of
   4/6/7/8/12px. Selectors include the client classes to beat their specificity. */
.cotacao-form-scope .btn-avancar,
.cotacao-form-scope .btn-enviar,
.cotacao-form-scope .btn-voltar,
.cotacao-form-scope select,
.cotacao-form-scope select.input-text,
.cotacao-form-scope select.input-text2,
.cotacao-form-scope select.input-dados,
.cotacao-form-scope .selectable-box,
.cotacao-form-scope .veiculos > div,
.cotacao-form-scope .Seguro-moto,
.cotacao-form-scope .Seguro-caminhao,
.cotacao-form-scope .Seguro-carro,
.cotacao-form-scope .input-text,
.cotacao-form-scope .input-text2,
.cotacao-form-scope .input-dados {
  border-radius: var(--radius-md) !important;
}

/* Full-width fields. The client limited several step-2 widths (.input-text2 83%,
   .dados / .endereco grids 85%) and .input-text to 28%, leaving fields short.
   Fields fill their container; the .dados/.endereco grids handle the columns. */
.cotacao-form-scope .input-text,
.cotacao-form-scope .input-text2,
.cotacao-form-scope .input-dados,
.cotacao-form-scope .dados,
.cotacao-form-scope .endereco {
  width: 100% !important;
}

/* Remove the client's dark-green underline (box-shadow: 0 1.5px 0 #004a44) from
   ALL text inputs and selects — it was on #placa (step 1) AND .nome (step 2).
   Cover every field so no shadow survives anywhere, in any step. */
.cotacao-form-scope .input-text,
.cotacao-form-scope .input-text2,
.cotacao-form-scope .input-dados,
.cotacao-form-scope select,
.cotacao-form-scope #placa,
.cotacao-form-scope .nome {
  box-shadow: none !important;
}

/* Prevent the hover/selected bold from widening the box (reflow). Reserve the
   bold width up front: an invisible ::after holds the same text in bold, fixing
   the box to its widest state so the visible text can go regular→bold without
   the box growing. Needs data-text="<label>" on each .selectable-box. */
.cotacao-form-scope .selectable-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.cotacao-form-scope .selectable-box::after {
  content: attr(data-text);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* Match the site CTA transition: only colour, fast (client used `all 0.2/0.25s`,
   which also animates geometry and made the hover feel sluggish). */
.cotacao-form-scope .selectable-box,
.cotacao-form-scope .veiculos > div,
.cotacao-form-scope .Seguro-moto,
.cotacao-form-scope .Seguro-caminhao,
.cotacao-form-scope .Seguro-carro {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* Hover on the selectable "button-like" options: light-green background +
   dark-green text. NOTE: the option boxes (.selectable-box) keep REGULAR weight
   on hover (bold is reserved for the selected state) so the box never reflows on
   every mouse-over. Vehicle cards use <b>, already bold, so no reflow there. */
.cotacao-form-scope .selectable-box:hover,
.cotacao-form-scope .veiculos > div:hover,
.cotacao-form-scope .Seguro-moto:hover,
.cotacao-form-scope .Seguro-caminhao:hover,
.cotacao-form-scope .Seguro-carro:hover {
  background-color: var(--color-bg-highlight) !important;
  border-color: var(--color-bg-highlight) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: none !important;
}
/* The vehicle card label sits in a nested <b>/<div>; force the colour there too. */
.cotacao-form-scope .veiculos > div:hover b,
.cotacao-form-scope .veiculos > div:hover div {
  color: var(--color-text-inverse) !important;
}

/* Selected state: same as the CTA, but the background is the CTA's *hover*
   colour (one shade darker) so a picked item reads above the hover state.
   The client JS marks selection with .active / .selected. NOTE: the client has
   a high-specificity rule `#veiculos > div.active { background:#f0f0f0 }` (ID +
   !important) that beats a class selector — so we match with #veiculos here too. */
.cotacao-form-scope .selectable-box.active,
.cotacao-form-scope .selectable-box.selected,
.cotacao-form-scope #veiculos > div.active,
.cotacao-form-scope #veiculos > div.selected,
.cotacao-form-scope #veiculos > div.veiculo-ativo,
.cotacao-form-scope .veiculos > div.veiculo-ativo {
  background-color: color-mix(in srgb, var(--color-bg-highlight) 90%, black) !important;
  border: 1px solid color-mix(in srgb, var(--color-bg-highlight) 90%, black) !important;
  color: var(--color-text-inverse) !important;
  font-weight: bold !important;
  box-shadow: none !important;
}
.cotacao-form-scope #veiculos > div.active b,
.cotacao-form-scope #veiculos > div.active div,
.cotacao-form-scope #veiculos > div.selected b,
.cotacao-form-scope #veiculos > div.selected div,
.cotacao-form-scope #veiculos > div.veiculo-ativo b,
.cotacao-form-scope #veiculos > div.veiculo-ativo div {
  color: var(--color-text-inverse) !important;
}

/* Step footer: "Passo X de Y" on the left, action buttons on the right, same
   row. (Wrappers .step-footer / .step-actions added to the embed.) */
.cotacao-form-scope .step-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.cotacao-form-scope .step-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Footer buttons follow the DS .btn component. Client classes map to variants:
   AVANÇAR / Enviar -> primary green (.btn--green); Voltar -> white (.btn--white).
   We replicate the DS .btn base + variant here because the markup keeps the
   client class names. */
.cotacao-form-scope .step-actions .btn-avancar,
.cotacao-form-scope .step-actions .btn-enviar,
.cotacao-form-scope .step-actions .btn-voltar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: fit-content !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-height: var(--btn-min-height-md) !important;
  padding: var(--space-md) var(--space-xl) !important;
  border-radius: var(--radius-md) !important;
  margin: 0 !important;
  font-weight: var(--font-weight-semibold) !important;
  transition: background-color 0.15s ease !important;
}
/* Primary green: AVANÇAR / Enviar */
.cotacao-form-scope .step-actions .btn-avancar,
.cotacao-form-scope .step-actions .btn-enviar {
  background-color: var(--color-bg-highlight) !important;
  color: var(--color-text-inverse) !important;
}
.cotacao-form-scope .step-actions .btn-avancar:hover,
.cotacao-form-scope .step-actions .btn-enviar:hover {
  background-color: color-mix(in srgb, var(--color-bg-highlight) 90%, black) !important;
}
.cotacao-form-scope .step-actions .btn-avancar:active,
.cotacao-form-scope .step-actions .btn-enviar:active {
  background-color: color-mix(in srgb, var(--color-bg-highlight) 80%, black) !important;
}
/* White: Voltar */
.cotacao-form-scope .step-actions .btn-voltar {
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-inverse) !important;
}
.cotacao-form-scope .step-actions .btn-voltar:hover {
  background-color: color-mix(in srgb, var(--color-bg-primary) 90%, black) !important;
}
.cotacao-form-scope .step-actions .btn-voltar:active {
  background-color: color-mix(in srgb, var(--color-bg-primary) 80%, black) !important;
}
.cotacao-form-scope .step-footer .step-info {
  margin: 0;
}

/* ===== Submit loading / sent state ===== */
/* While the lead is being created, both footer buttons are disabled and the
   submit button shows a spinner + "Enviando...", then a check + "Enviado!". */
.cotacao-form-scope .step-actions button:disabled,
.cotacao-form-scope .step-actions button:disabled:hover {
  opacity: 0.6;
  cursor: not-allowed !important; /* beats the base buttons' cursor:pointer !important */
  pointer-events: none;           /* no hover/click at all while disabled */
}
/* Freeze each variant's surface while disabled (override the :hover darken). */
.cotacao-form-scope .step-actions .btn-enviar:disabled,
.cotacao-form-scope .step-actions .btn-enviar:disabled:hover,
.cotacao-form-scope .step-actions .btn-avancar:disabled,
.cotacao-form-scope .step-actions .btn-avancar:disabled:hover {
  background-color: var(--color-bg-highlight) !important;
}
.cotacao-form-scope .step-actions .btn-voltar:disabled,
.cotacao-form-scope .step-actions .btn-voltar:disabled:hover {
  background-color: var(--color-bg-primary) !important;
}
.cotacao-form-scope .btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid color-mix(in srgb, var(--color-text-inverse) 30%, transparent);
  border-top-color: var(--color-text-inverse);
  border-radius: 50%;
  animation: cotacao-spin 0.6s linear infinite;
  vertical-align: -2px;
}
.cotacao-form-scope .btn-check {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='%231d2d0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
@keyframes cotacao-spin {
  to { transform: rotate(360deg); }
}

/* ── Mobile ───────────────────────────────────────────────────────────────────
   Two layouts in this embed are desktop-only and break on a phone:

   .row-2col is a flex row with .col-placa pinned to 200px, so the plate field
   eats the width and the "Seu veículo é" column collapses to the select's arrow
   with its label wrapping one word per line. Stacking the columns fixes both.

   .veiculos is capped at width:55% and splits what's left three ways. Even at
   full width a phone only affords ~80px per card, and "Caminhão" needs more —
   it gets clipped. The three cards go one per row instead, which is what the
   parking options below them already do.

   768px is the theme's breakpoint. The other queries in this file came over
   with the client's embed and are deliberately left alone. */
@media (max-width: 768px) {
  /* Placa / Seu veículo é — and Modelo / Ano — one under the other, full width. */
  .cotacao-form-scope .row-2col {
    flex-direction: column;
    gap: 20px;
  }
  .cotacao-form-scope .row-2col > .col-placa,
  .cotacao-form-scope .row-2col > .col-veiculo,
  .cotacao-form-scope #extra-veiculo > .col-2col:first-child,
  .cotacao-form-scope #extra-veiculo > .col-2col:last-child {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Vehicle cards: stacked, each on its own row, so no label is ever clipped. */
  .cotacao-form-scope .veiculos {
    width: 100% !important;   /* beats the desktop `width: 55%` */
    flex-direction: column;
    gap: 10px;
  }
  .cotacao-form-scope .veiculos > div {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }
  /* The label wrapper carries a 5px top padding meant to clear the (hidden)
     icon above it — pointless once the card is a single centred row. */
  .cotacao-form-scope .veiculos > div > div {
    padding-top: 0 !important;
  }

  /* Selectable options (where the vehicle is kept, at home / college / work)
     are set to width:90%, which leaves a ragged 26px gutter on the right. On a
     phone they should fill the column like every other field does. */
  .cotacao-form-scope .selectable-box {
    width: 100%;
  }

  /* Step footer. On step 2 there are two buttons — 239px of the 262px column —
     so "Passo 2 de 2" is squeezed into the remaining 35px and wraps to three
     lines. Stack the counter above the buttons instead, and drop the 35% left
     margin the counter carries from the old layout, which now just pushes it
     off-centre. */
  .cotacao-form-scope .step-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cotacao-form-scope .step-info {
    margin-left: 0 !important;
    margin-top: 0 !important;
    text-align: center;
  }
  /* Buttons stay side by side and share the row, but never stretch taller than
     their content. */
  .cotacao-form-scope .step-actions {
    justify-content: center;
  }

  /* Tighten the label→field gap to 6px. The form runs much longer on a phone now
     that the columns stack, so the space under every label adds up.

     Two properties stack to make that gap and both have to be set, which is why
     it looks unchanged if you only touch one: the labels carry padding-bottom
     (10px, from the label-normalising rule) AND margin-bottom (10px, from the
     group-spacing rule, whose higher specificity beats the `margin: 0` in the
     same normalising block). Zero the padding, let the margin own the gap. */
  .cotacao-form-scope label,
  .cotacao-form-scope .label-title,
  .cotacao-form-scope .label-title-2,
  .cotacao-form-scope #step-1 > p:not(.cotacao-form-title) {
    padding-bottom: 0 !important;
    margin-bottom: 6px !important;
  }
}