/* VetCuritiba — formulários (contato, cadastro, Área do anunciante, painel). Mobile primeiro. */
.form-main { padding-bottom: 80px}
.vp-form, .vp-wrap { max-width: 640px; margin: 0 auto}
.vp-form { display: flex; flex-direction: column; gap: 16px}
.vp-wrap--wide { max-width: 860px}
.vp-form-intro { font-size: 14px; line-height: 1.55; color: #566883; margin: 0}

/* campos */
.vp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0}
.vp-field > label { font-size: 13px; font-weight: 700; color: #0b1220}
.vp-field > label small, .vp-fs-t small { font-weight: 500; color: #566883; font-size: 12px}
.req { color: #dc2626}
.vp-input {
  width: 100%; min-width: 0; padding: 13px 14px; border: 1.5px solid #d8dfee; border-radius: 12px; background: #ffffff;
  font-family: inherit; font-size: 16px; color: #0b1220; outline: none; transition: border-color .2s, box-shadow .2s}
.vp-input:focus { border-color: #0b1220; box-shadow: 0 0 0 3px rgba(11,18,32,0.1)}
.vp-input::placeholder { color: #566883}
.vp-input:disabled { background: #e7ecf6; color: #566883}
textarea.vp-input { resize: vertical; min-height: 84px; line-height: 1.5}
select.vp-input { appearance: none; -webkit-appearance: none; padding-right: 38px; background: #ffffff 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 1l5 5 5-5' fill='none' stroke='%231b3b64' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center}
.vp-hint { font-size: 12px; color: #566883; line-height: 1.45}
.vp-count { font-size: 11px; color: #566883; text-align: right}
.vp-field.has-error > .vp-input, .vp-field.has-error .vp-input { border-color: #dc2626}
.vp-field.has-error > label { color: #dc2626}
.vp-field.has-error .vp-chipset { outline: 2px solid rgba(220,38,38,0.35); outline-offset: 4px; border-radius: 12px}
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none}

.vp-row { display: grid; grid-template-columns: 1fr; gap: 14px}
@media (min-width: 520px) {
  .vp-row { grid-template-columns: 1fr 1fr}
  .vp-row--addr { grid-template-columns: 1fr 120px}
  .vp-row--cep { grid-template-columns: 200px 1fr}
  .vp-row--city { grid-template-columns: 1fr 100px}
}
.vp-fs { border: 1px solid #d8dfee; border-radius: 18px; padding: 16px; background: #ffffff; display: flex; flex-direction: column; gap: 14px; min-width: 0; box-shadow: 0 3px 12px rgba(11,18,32,0.03)}
.vp-fs-t { margin: 0 0 2px; padding: 0 0 12px; border-bottom: 1px solid #d8dfee; font-size: 15.5px; line-height: 1.3; font-weight: 800; color: #0b1220; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px}
.vp-fs-t small { font-size: 12.5px; line-height: 1.35}
.vp-fs.is-off .vp-hours, .vp-fs.is-off #af_copyhor { opacity: .4; pointer-events: none}
.vp-fs--admin { border-color: #e8b923; background: #f8f9fd}

/* chips */
.vp-chipset { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px}
.vp-chip-filter + .vp-chipset, .vp-chipset.is-scroll { max-height: 220px; overflow-y: auto; padding: 10px; border: 1px solid #d8dfee; border-radius: 12px; background: #f8f9fd; overscroll-behavior: contain}
/* Chips do formulário: estilo próprio (o Painel não carrega o site-extra.css) */
.vp-chipset .vp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d8dfee; background: #ffffff; color: #0b1220; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; padding: 8px 14px; border-radius: 20px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; -webkit-tap-highlight-color: transparent}
.vp-chipset .vp-chip:hover { border-color: #2c9a4a}
.vp-chipset .vp-chip:focus-visible, .vp-sel-pill:focus-visible { outline: 2px solid #0b1220; outline-offset: 2px}
.vp-chipset .vp-chip.is-on { background: #5c9247; border-color: #2c9a4a; color: #ffffff}
.vp-chipset .vp-chip.is-on::before { content: "\2713"; font-weight: 800; font-size: 12px}
.vp-chip--custom { padding-right: 8px !important}
.vp-chip-x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 2px; border-radius: 50%; background: rgba(255,255,255,0.28); font-size: 16px; line-height: 1; font-weight: 700}
.vp-chip-x:hover { background: rgba(11,18,32,0.25)}
/* resumo "Marcadas" */
.vp-sel { margin-top: 10px; padding: 10px 12px; border: 1px dashed #d8dfee; border-radius: 12px; background: #f8f9fd}
.vp-sel-h { font-size: 12.5px; font-weight: 700; color: #566883; margin-bottom: 6px}
.vp-sel-h b { color: #1f7a37}
.vp-sel-e { font-size: 12.5px; color: #566883}
.vp-sel-l { display: flex; flex-wrap: wrap; gap: 6px}
.vp-sel-pill { display: inline-flex; align-items: center; gap: 6px; border: 0; background: #17233f; color: #ffffff; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 6px 5px 11px; border-radius: 999px; cursor: pointer}
.vp-sel-pill i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.25); font-size: 14px; line-height: 1}
.vp-sel-pill:hover i { background: #dc2626}
.vp-addtag--adm { margin-top: 8px}
.vp-check--sm { font-size: 12.5px; color: #566883; margin-top: 2px}
.vp-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: #0b1220; text-decoration: underline; cursor: pointer}
.vp-chip.shake { animation: vpShake .35s}
@keyframes vpShake { 25% { transform: translateX(-4px)} 75% { transform: translateX(4px)} }
.vp-chip-filter { margin-bottom: 6px; padding: 10px 12px; font-size: 14px}
.vp-addtag { display: flex; gap: 8px}
.vp-addtag .vp-input { flex: 1}
.vp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #0b1220; line-height: 1.45; cursor: pointer}
.vp-check input { width: 19px; height: 19px; margin-top: 1px; accent-color: #17233f; flex-shrink: 0}

/* horários */
.vp-hours { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px}
.vp-hrow { display: grid; grid-template-columns: 78px auto 1fr auto 1fr; align-items: center; gap: 8px}
.vp-hday { font-size: 13px; font-weight: 700; color: #0b1220}
.vp-hclosed { font-size: 12px; color: #566883; display: flex; gap: 5px; align-items: center; white-space: nowrap}
.vp-hrow .vp-input { padding: 9px 8px; font-size: 14px}
.vp-hsep { font-size: 12px; color: #566883}
@media (max-width: 460px) {
  .vp-hrow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); row-gap: 6px}
  .vp-hday { grid-column: 1}
  .vp-hclosed { grid-column: 2 / 4; justify-self: end}
  .vp-hrow .ha { grid-column: 1}
  .vp-hsep { grid-column: 2}
  .vp-hrow .hf { grid-column: 3}
  .vp-hrow .vp-input { min-width: 0; width: 100%; box-sizing: border-box}
}

/* foto */
.vp-photo { display: flex; gap: 14px; align-items: center}
.vp-photo-prev { width: 96px; height: 96px; border-radius: 16px; background: #ebeff8; display: flex; align-items: center; justify-content: center; color: #566883; font-size: 32px; overflow: hidden; flex-shrink: 0}
.vp-photo-prev img { width: 100%; height: 100%; object-fit: cover}
.vp-photo-act { display: flex; flex-direction: column; gap: 8px; align-items: flex-start}

/* botões */
.vp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: none; border-radius: 14px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .1s, filter .2s; text-align: center}
.vp-btn:active { transform: scale(.98)}
.vp-btn[disabled] { opacity: .6; cursor: default}
.vp-btn--primary { background: #e8b923; color:#0b1220; box-shadow: 0 6px 16px rgba(232,185,35,0.28)}
.vp-btn--green { background: #5c9247; color: #ffffff}
.vp-btn--blue { background: #17233f; color: #ffffff}
.vp-btn--ghost { background: #ffffff; color: #0b1220; border: 1.5px solid #d8dfee}
.vp-btn--danger { background: #ffffff; color: #b91c1c; border: 1.5px solid #fde5e1}
.vp-btn--sm { min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: 11px}
.vp-btn--block { width: 100%}
.vp-actions { display: flex; gap: 10px}
.vp-actions .vp-btn { flex: 1}

/* alertas e sucesso */
.vp-alert { padding: 12px 14px; border-radius: 12px; background: #f8f9fd; color: #b91c1c; font-size: 13.5px; line-height: 1.45; border: 1px solid #fde5e1}
.vp-alert--ok { background: #d9f6e8; color: #1f7a37; border-color: #d9f6e8}
.vp-alert--info { background: #e3ebfd; color: #2f55c8; border-color: #e3ebfd}
.vp-alert--warn { background: #fbf0c8; color: #9a3412; border-color: #fbf0c8}
.vp-alert[hidden] { display: none}
.vp-success { text-align: center; padding: 28px 8px; max-width: 520px; margin: 0 auto}
.vp-success h2 { color: #0b1220; font-size: 22px; margin: 12px 0 6px}
.vp-success p { color: #566883; font-size: 14.5px; line-height: 1.55; margin-bottom: 18px}
.vp-success-ic { width: 72px; height: 72px; border-radius: 50%; background: #5c9247; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 36px}
.vp-success[hidden] { display: none}

/* passos */
.wiz-steps { display: flex; gap: 6px; max-width: 640px; margin: 0 auto 22px}
.wiz-step { flex: 1; height: 5px; border-radius: 4px; background: #dce3f1; transition: background .3s}
.wiz-step.is-on { background: #5c9247}
.wiz-title { max-width: 640px; margin: 0 auto 4px; font-size: 20px; font-weight: 800; color: #0b1220}
.wiz-sub { max-width: 640px; margin: 0 auto 18px; font-size: 14px; color: #566883; line-height: 1.5}
.wiz-pane[hidden] { display: none}
.type-group { max-width: 640px; margin: 0 auto 18px}
.type-group h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #566883; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center}
.type-group h3 b { color: #1f7a37; font-size: 13px; text-transform: none; letter-spacing: 0}
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px}
@media (min-width: 560px) { .type-grid { grid-template-columns: repeat(3, 1fr)} }
.type-card { background: #ffffff; border: 1.5px solid #d8dfee; border-radius: 16px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; text-align: center; transition: border-color .2s, transform .1s, box-shadow .2s}
.type-card:hover { border-color: #2c9a4a}
.type-card:active { transform: scale(.97)}
.type-card.is-on { border-color: #2c9a4a; box-shadow: 0 0 0 3px rgba(92,146,71,0.18)}
.type-card i { font-size: 30px; color: #0b1220}
.type-card b { font-size: 14px; color: #0b1220; line-height: 1.25}
.type-card span { font-size: 12px; font-weight: 700; color: #1f7a37}

.plan-box { background: #17233f; color: #ffffff; border-radius: 18px; padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px}
.plan-box b { font-size: 15px}
.plan-box small { display: block; font-size: 12px; opacity: .8; margin-top: 2px; font-weight: 500}
.plan-box strong { font-size: 24px; white-space: nowrap}
.plan-box strong small { display: inline; font-size: 12px; font-weight: 600; opacity: .8}

/* painel de pagamento (cadastro / área do anunciante) */
.pay-card { background: #ffffff; border: 1px solid #d8dfee; border-radius: 18px; padding: 18px; text-align: left; box-shadow: 0 4px 16px rgba(11,18,32,0.04)}
.pay-card + .pay-card { margin-top: 12px}
.pay-total { font-size: 28px; font-weight: 800; color: #1f7a37; text-align: center; margin-bottom: 8px}
.pay-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 4px 0; color: #0b1220}
.pay-line b { color: #0b1220; text-align: right}
.pay-code { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; padding: 10px; border: 1px dashed #b6c1cf; border-radius: 10px; background: #f8f9fd; color: #0b1220; resize: none; height: 78px; word-break: break-all; margin: 8px 0}
.pay-help { font-size: 12.5px; color: #566883; line-height: 1.5; margin: 8px 0 0}
.pay-card .vp-btn { width: 100%; margin-top: 8px}

/* Área do anunciante */
.ad-hello { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px}
.ad-hello h2 { font-size: 19px; color: #0b1220}
.ad-hello small { display: block; color: #566883; font-size: 12.5px; font-weight: 500}
.ad-tabs { display: flex; gap: 6px; background: #ebeff8; padding: 4px; border-radius: 14px; margin-bottom: 18px; overflow-x: auto}
.ad-tabs button { flex: 1; white-space: nowrap; border: none; background: transparent; padding: 10px 14px; border-radius: 11px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #566883; cursor: pointer}
.ad-tabs button.is-on { background: #ffffff; color: #0b1220; box-shadow: 0 2px 8px rgba(11,18,32,0.08)}
.ad-card { background: #ffffff; border-radius: 18px; padding: 18px; margin-bottom: 14px; border: 1px solid #d8dfee; box-shadow: 0 4px 16px rgba(11,18,32,0.04)}
.ad-card-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between}
.ad-card h3 { font-size: 16px; color: #0b1220; line-height: 1.3}
.ad-card .ad-kind { font-size: 12px; color: #566883; font-weight: 600}
.ad-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 20px; white-space: nowrap}
.ad-status.ok { background: #d9f6e8; color: #1f7a37}
.ad-status.wait { background: #fbf0c8; color: #8a6400}
.ad-status.off { background: #fde5e1; color: #991b1b}
.ad-status.pause { background: #ebeff8; color: #0b1220}
.ad-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; font-size: 12.5px; color: #566883}
.ad-meta b { color: #0b1220}
.ad-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px}
.ad-empty { text-align: center; padding: 34px 16px; color: #566883; font-size: 14px}
.ad-empty h3 { color: #0b1220; margin-bottom: 6px}
.ad-hist { margin-top: 10px; border-top: 1px solid #d8dfee; padding-top: 8px; font-size: 12.5px; color: #566883}
.ad-modal { position: fixed; inset: 0; z-index: 90; background: rgba(11,18,32,0.6); display: flex; align-items: flex-end; justify-content: center}
.ad-modal[hidden] { display: none}
.ad-sheet { background: #e7ecf6; width: 100%; max-width: 680px; max-height: 94vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 20px 16px 30px; -webkit-overflow-scrolling: touch}
.ad-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px}
.ad-sheet-head h3 { color: #0b1220; font-size: 18px}
.ad-sheet-head button { border: none; background: #ebeff8; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; color: #566883}
@media (min-width: 760px) { .ad-modal { align-items: center} .ad-sheet { border-radius: 24px; padding: 24px} }

/* login box */
.vp-card { background: #ffffff; border-radius: 22px; padding: 22px 18px; box-shadow: 0 10px 30px rgba(11,18,32,0.08); max-width: 440px; margin: 0 auto}
.vp-card h2 { color: #0b1220; font-size: 20px; margin-bottom: 4px}
.vp-card > p { font-size: 13.5px; color: #566883; margin-bottom: 16px; line-height: 1.5}
.vp-link { border: none; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 700; color: #0b1220; cursor: pointer; text-decoration: underline}

.vp-formroot { display: flex; flex-direction: column; gap: 16px}

/* ===== Login da Área do Anunciante ===== */
.lg { width: 100%; padding: 4px 0 24px}
.lg[hidden] { display: none}
.lg-card { background: #ffffff; border-radius: 24px; padding: 28px 22px 24px; max-width: 440px; margin: 0 auto; box-shadow: 0 12px 36px rgba(11,18,32,0.1); border: 1px solid #d8dfee}
.lg-head { text-align: center; margin-bottom: 22px}
.lg-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; background: #e3ebfd; color: #0b1220; font-size: 28px; margin-bottom: 12px}
.lg-head h2 { font-size: 21px; color: #0b1220; line-height: 1.25; margin: 0 0 6px}
.lg-head p { font-size: 13.5px; color: #566883; line-height: 1.5; margin: 0}
.lg-msg { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; font-weight: 600; background: #fde5e1; color: #991b1b}
.lg-msg--ok { background: #d9f6e8; color: #1f7a37}
.lg-msg[hidden] { display: none}
.lg-form { display: flex; flex-direction: column; gap: 18px}
.lg-form[hidden], #fg1[hidden], #fg2[hidden], #lgMain[hidden] { display: none}
.lg-group { display: flex; flex-direction: column; gap: 8px; min-width: 0}
.lg-group label, .lg-labelrow label { font-size: 13.5px; font-weight: 700; color: #0b1220}
.lg-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 10px}
.lg-eye { border: none; background: none; font: inherit; font-size: 13px; font-weight: 700; color: #8a6400; cursor: pointer; padding: 4px 0; min-height: 28px}
.lg-input { width: 100%; box-sizing: border-box; height: 50px; padding: 0 14px; border: 1.5px solid #d8dfee; border-radius: 14px; font: inherit; font-size: 16px; color: #0b1220; background: #ffffff; outline: none; transition: border-color .15s, box-shadow .15s}
.lg-input::placeholder { color: #566883}
.lg-input:focus { border-color: #0b1220; box-shadow: 0 0 0 4px rgba(11,18,32,0.12)}
.lg-code { text-align: center; letter-spacing: .5em; font-weight: 800; font-size: 22px}
.lg-submit { height: 50px; margin-top: 2px; font-size: 15.5px}
.lg-forgot { align-self: center; border: none; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: #0b1220; text-decoration: underline; cursor: pointer; padding: 6px 4px}
.lg-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: #566883; font-size: 12.5px; font-weight: 600; text-align: center}
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: #ebeff8}
.lg-step { align-self: flex-start; background: #e3ebfd; color: #0b1220; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 20px}
.lg-sub { font-size: 18px; color: #0b1220; margin: -4px 0 0}
.lg-hint { font-size: 13.5px; color: #566883; line-height: 1.55; margin: 0}
.lg .vp-btn--block { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%}
@media (min-width: 640px) { .lg { padding-top: 18px} .lg-card { padding: 34px 32px 28px} }
@media (max-width: 360px) { .lg-card { padding: 22px 16px 20px; border-radius: 20px} .lg-code { letter-spacing: .3em} }

/* cartões de tipo como link (página pública "Cadastrar meu negócio") */
a.type-card { text-decoration: none; color: inherit}
a.type-card span { display: inline-flex; align-items: center; gap: 4px}
/* Área do anunciante: criar conta e novo cadastro */
.lg-two { display: grid; grid-template-columns: 1fr; gap: 12px}
@media (min-width: 520px) { .lg-two { grid-template-columns: 1fr 1fr} }
.lg-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: #566883; line-height: 1.45}
.lg-check input { margin-top: 3px; flex: none}
.nw-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px}
.nw-note { background: #e3ebfd; border: 1px solid #e3ebfd; color: #0b1220; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.45; margin-bottom: 14px}
.nw-price { display: block; margin-top: 2px; font-size: 14px; font-weight: 800; color: #1f7a37}
.nw-calc { margin-top: 6px}

/* Mensagem pronta do WhatsApp (cadastro) */
.vp-wapre { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #d9f6e8; border: 1px solid #d9f6e8; color: #1f7a37; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line}
.vp-wareset { margin-top: 8px; align-self: flex-start; font-size: 13px; padding: 7px 12px}

/* V98 — Contato, assunto "Formata.IA Estudante (desconto)": caixa explicativa (sem ícones) */
.fi-box { border: 1.5px solid #e8b923; background: #f8f9fd; border-radius: 18px; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 12px}
.fi-box[hidden] { display: none}
.fi-tit { margin: 0; font-size: 15.5px; line-height: 1.3; color: #0b1220; font-weight: 800}
.fi-ex { margin: -4px 0 0; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a6400}
.fi-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px}
.fi-p { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 12px; border-radius: 14px; background: #ffffff; border: 1px solid #d8dfee; min-width: 0}
.fi-p small { font-size: 11px; font-weight: 700; color: #566883; line-height: 1.25}
.fi-p s { font-size: 20px; font-weight: 800; color: #566883; line-height: 1.2}
.fi-p b { font-size: 24px; font-weight: 800; color: #ffffff; line-height: 1.15}
.fi-p span { font-size: 11.5px; color: #566883}
.fi-p--on { background: #17233f; border-color: #0b1220}
.fi-p--on small { color: #8a6400}
.fi-p--on span { color: #d6e0ee}
.fi-both { margin: 0; font-size: 13.5px; line-height: 1.5; color: #0b1220}
.fi-both strong { color: #0b1220}
.fi-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: fi}
.fi-steps li { position: relative; padding-left: 34px; font-size: 13.5px; line-height: 1.5; color: #0b1220; counter-increment: fi}
.fi-steps li::before { content: counter(fi); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: #e8b923; color:#0b1220; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center}
.fi-steps strong { color: #0b1220}
@media (max-width: 340px) { .fi-prices { grid-template-columns: 1fr} }