/* ==========================================================================
   LAVRE — pedir coleta (pedir-coleta.html) e obrigado (obrigado.html)
   Cores, fonte e peças compartilhadas ficam no base.css.
   1. Página   2. Cabeçalho dos passos   3. Campos   4. Rodapé do cartão
   5. Obrigado   6. Celular

   São páginas comuns, que rolam normalmente. Nada fica preso por cima do
   conteúdo além do cabeçalho, para o teclado do celular não atrapalhar.
   ========================================================================== */

/* 1. Página ---------------------------------------------------------------- */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #E9EDF5; }
h2 { margin: 0; }

.order-top { width: 100%; max-width: 560px; margin: 0 auto; padding: 28px 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-top img { height: 24px; width: auto; display: block; }
.order-top__back { --i: 16px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.order-top__back .icon { transform: rotate(180deg); stroke-width: 2.2; }

.order { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 20px 24px 48px; }
.order__card { width: 100%; max-width: 560px; display: flex; flex-direction: column; background: var(--bg); border-radius: 30px; box-shadow: 0 24px 60px rgba(14,30,70,0.14); overflow: hidden; }
.order__body { padding: 26px 26px 22px; }

/* 2. Cabeçalho dos passos -------------------------------------------------- */
.wiz { position: relative; flex: none; padding: 16px 16px 20px; color: #fff; background: radial-gradient(120% 150% at 100% 0%, rgba(255,255,255,0.20), transparent 55%), var(--grad-blue); }
.wiz--done { background: radial-gradient(120% 150% at 100% 0%, rgba(255,255,255,0.22), transparent 55%), var(--grad-teal); }
.wiz__bar { display: flex; align-items: center; gap: 12px; }
.wiz__btn { --i: 18px; flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.18); transition: background .2s, opacity .25s; }
.wiz__btn, .wiz__btn:hover { color: #fff; }
.wiz__btn:hover { background: rgba(255,255,255,0.30); }
.wiz__btn .icon { stroke-width: 2.2; }
.wiz__btn.is-off { opacity: 0; pointer-events: none; }
.wiz__back { transform: rotate(180deg); }
.wiz__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.wiz__titles h1, .wiz__titles strong { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.wiz__titles span { font-size: 12.5px; font-weight: 600; opacity: 0.85; }
.wiz__progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.wiz__progress span { position: relative; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.28); overflow: hidden; }
.wiz__progress span::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.wiz__progress span.is-on::after { transform: scaleX(1); }

/* 3. Campos ---------------------------------------------------------------- */
.step__title { font-size: 26px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); text-wrap: balance; }
.step__lead { margin: 8px 0 22px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.step__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 13px; font-weight: 700; color: var(--ink); }
/* Rua e número lado a lado, com o número mais estreito */
.street { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 12px; }
.field__box { --i: 19px; display: flex; align-items: center; gap: 11px; padding: 0 16px; height: 56px; border-radius: 18px; background: #fff; border: 1.5px solid var(--field-border); box-shadow: 0 1px 3px rgba(22,44,96,0.04); transition: border-color .2s, box-shadow .2s; }
.field__box > .icon { color: var(--faint); transition: color .2s; }
.field__box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(11,85,227,0.12); }
.field__box:focus-within > .icon { color: var(--blue); }
.field__box input, .field__box textarea { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: var(--ink); }
.field__box input { height: 100%; }
.field__box input::placeholder, .field__box textarea::placeholder { color: #8A93A8; }
.field__box--area { align-items: stretch; height: auto; padding: 15px 16px; }
.field__box textarea { resize: none; line-height: 1.4; }
.field__error { display: none; font-size: 12px; font-weight: 600; color: var(--red); }
.field.has-error .field__box { border-color: var(--red); box-shadow: 0 0 0 4px rgba(224,41,77,0.10); }
.field.has-error .field__error { display: block; }
.field__count { align-self: flex-end; font-size: 12px; color: var(--muted); }

/* Indicador ao lado do CEP: girando enquanto busca, visto verde quando acha */
.field__status { --i: 12px; flex: none; width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center; justify-content: center; color: #fff; }
.field__status .icon { stroke-width: 3; }
.is-loading .field__status { display: flex; border: 2.5px solid var(--blue-soft); border-top-color: var(--blue); animation: spin .7s linear infinite; }
.is-loading .field__status .icon { display: none; }
.is-ok .field__status { display: flex; background: var(--teal); animation: pop .4s cubic-bezier(.34,1.6,.64,1); }
.cep-found { --i: 16px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 14px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-ink); font-size: 13px; line-height: 1.35; font-weight: 600; animation: rise .4s cubic-bezier(.2,.8,.2,1); }
.cep-found .icon { stroke-width: 2.6; }

.city { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 5px; height: 56px; border-radius: 18px; background: #fff; border: 1.5px solid var(--field-border); box-shadow: 0 1px 3px rgba(22,44,96,0.04); }
.city__btn { border: none; border-radius: 13px; cursor: pointer; font-size: 15px; font-weight: 700; background: transparent; color: var(--muted); transition: all .25s; }
.city__btn.is-active { background: var(--grad-blue); color: #fff; box-shadow: 0 4px 10px rgba(11,82,224,0.20); }

/* Lembrete do serviço no primeiro passo */
.perks { list-style: none; margin: 6px 0 0; padding: 6px 16px; border-radius: 20px; display: flex; flex-direction: column; }
.perks li { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.perks li + li { border-top: 1.5px dashed var(--line); }
.perks .orb { --d: 38px; --i: 19px; }
.perks strong { display: block; font-size: 14.5px; color: var(--ink); }

.form__hint { display: flex; align-items: flex-end; min-width: 0; }
.note { --i: 18px; width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: 13px; }
.note--teal { background: var(--teal-soft); color: var(--teal-ink); line-height: 1.4; font-weight: 600; text-align: left; }
.note--blue { align-items: flex-start; background: var(--blue-soft); color: var(--ink); line-height: 1.45; }
.note--blue .icon { color: var(--blue); }

/* 4. Rodapé do cartão ------------------------------------------------------- */
.order__foot { display: flex; flex-direction: column; gap: 10px; padding: 14px 26px 20px; border-top: 1px solid var(--field-border); background: var(--surface); }
.order__prices { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cta--step { --d: 44px; --i: 22px; padding: 7px 22px 7px 7px; min-height: 58px; transition: transform .15s; }
.cta--step:active { transform: scale(0.98); }
.cta--step .cta__icon { box-shadow: none; }
.cta--step .cta__icon .icon { stroke-width: 2.2; }
.cta--step .cta__label { font-size: 17px; }

/* 5. Obrigado ---------------------------------------------------------------- */
.done { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 14px 0 4px; text-align: center; }
.done__ok { --i: 44px; position: relative; width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--grad-teal); box-shadow: 0 0 0 10px var(--teal-soft), 0 14px 30px rgba(20,177,155,0.30); color: #fff; }
.done__ok .icon { stroke-width: 2.6; }
.done__ok::before, .done__ok::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; }
.done__ok::before { animation: ring 1.4s ease-out .25s 2; }
.done__ok::after { animation: ring 1.4s ease-out .6s 2; }
.done__text { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.done__title { font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); }
.done__text p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.done__summary { width: 100%; padding: 6px 18px; border-radius: 22px; display: flex; flex-direction: column; text-align: left; }
.done__row { --i: 20px; display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.done__row + .done__row { border-top: 1.5px dashed var(--line); }
.done__row .icon { color: var(--blue); }
.done__row div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.done__row span { font-size: 12px; color: var(--muted); }
.done__row strong { font-size: 15px; color: var(--ink); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ring { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2); opacity: 0; } }

/* 6. Celular ------------------------------------------------------------------
   O cartão vira a página inteira. O cabeçalho dos passos acompanha a rolagem. */
@media (max-width: 699.98px) {
  body { background: var(--bg); }
  .order-top { display: none; }
  .order { padding: 0; align-items: stretch; }
  .order__card { max-width: none; border-radius: 0; box-shadow: none; overflow: visible; }
  .wiz { position: sticky; top: 0; z-index: 2; padding: 12px 12px 16px; }
  .order__body { flex: 1; padding: 22px 18px 20px; }
  .step__title { font-size: 24px; }
  .step__lead { margin-bottom: 18px; font-size: 14.5px; }
  .step__fields { grid-template-columns: minmax(0, 1fr); }
  .order__foot { padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); }
  .cta--step { min-height: 56px; }
}