/* ===========================================================
   SHALON — Tela de Agendamento de Coleta (wizard)
   =========================================================== */
.book{
  min-height:100vh; position:relative; overflow:hidden;
  background:linear-gradient(165deg,#2A1311 0%,#3A1A16 55%,#4a201a 100%);
  color:#fff; display:flex; flex-direction:column;
}
.book__glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
.book__glow.g1{ width:560px; height:560px; background:radial-gradient(circle,rgba(200,30,23,.5),transparent 70%); top:-220px; right:-140px; opacity:.7; }
.book__glow.g2{ width:440px; height:440px; background:radial-gradient(circle,rgba(255,138,130,.26),transparent 70%); bottom:-180px; left:-160px; opacity:.6; }

/* topo simples */
.book__top{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:22px 30px; }
.book__top .logo img{ height:48px; }
.book__back{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.8); font-weight:600; font-size:.94rem; }
.book__back svg{ width:18px; height:18px; }
.book__back:hover{ color:#fff; }

.book__wrap{ position:relative; z-index:2; flex:1; width:100%; max-width:640px; margin:0 auto; padding:14px 24px 48px; display:flex; flex-direction:column; }

/* barra de progresso por passos */
.steps-bar{ display:flex; align-items:center; gap:8px; margin:6px 0 30px; }
.steps-bar__item{ flex:1; display:flex; flex-direction:column; gap:8px; }
.steps-bar__track{ height:6px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
.steps-bar__fill{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#FF8A82,var(--red)); transition:width .5s var(--ease); }
.steps-bar__item.done .steps-bar__fill, .steps-bar__item.active .steps-bar__fill{ width:100%; }
.steps-bar__item.active .steps-bar__fill{ width:50%; }
.steps-bar__lbl{ font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.5); transition:color .3s; }
.steps-bar__item.active .steps-bar__lbl, .steps-bar__item.done .steps-bar__lbl{ color:#FF8A82; }

/* card do passo */
.book__card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xl);
  backdrop-filter:blur(10px); padding:38px 36px; box-shadow:0 30px 70px rgba(0,0,0,.35);
  flex:1; display:flex; flex-direction:column;
}
.step-panel{ display:none; flex-direction:column; gap:22px; }
.step-panel.active{ display:flex; opacity:1; transform:none; }
.step-panel.anim-in{ animation:stepIn .5s var(--ease); }
@keyframes stepIn{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
.step-panel.anim-back{ animation:stepInBack .5s var(--ease); }
@keyframes stepInBack{ from{ opacity:0; transform:translateX(-26px); } to{ opacity:1; transform:none; } }

.step-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#FF8A82; }
.step-eyebrow .n{ width:24px; height:24px; border-radius:50%; background:rgba(255,138,130,.18); display:flex; align-items:center; justify-content:center; font-size:.74rem; }
.step-title{ color:#fff; font-size:clamp(1.5rem,3.4vw,2rem); margin:6px 0 0; }
.step-sub{ color:rgba(255,255,255,.66); font-size:1rem; margin-top:-8px; }

/* opções (cards selecionáveis) */
.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.opt{
  position:relative; display:flex; align-items:center; gap:14px; padding:18px 18px; cursor:pointer;
  background:rgba(0,0,0,.18); border:2px solid rgba(255,255,255,.12); border-radius:var(--r-md);
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.opt:hover{ transform:translateY(-3px); border-color:rgba(255,138,130,.5); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt__ic{ width:46px; height:46px; border-radius:12px; background:rgba(255,138,130,.16); color:#FF8A82; display:flex; align-items:center; justify-content:center; flex:none; transition:background .25s,color .25s; }
.opt__ic svg{ width:24px; height:24px; }
.opt__t b{ display:block; font-size:1rem; color:#fff; }
.opt__t span{ font-size:.82rem; color:rgba(255,255,255,.6); }
.opt__check{ position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.5); transition:opacity .25s, transform .25s var(--ease); }
.opt__check svg{ width:14px; height:14px; color:#fff; }
.opt input:checked ~ .opt__check{ opacity:1; transform:scale(1); }
.opt:has(input:checked){ border-color:var(--red); background:rgba(200,30,23,.16); }
.opt:has(input:checked) .opt__ic{ background:var(--red); color:#fff; }

/* campos de texto */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:700; font-size:.9rem; color:rgba(255,255,255,.9); display:flex; align-items:center; gap:8px; }
.field label .req{ color:#FF8A82; }
.field input, .field textarea, .field select{
  width:100%; padding:15px 16px; border-radius:14px; font-family:inherit; font-size:1rem; color:#fff;
  background:rgba(0,0,0,.22); border:2px solid rgba(255,255,255,.14); transition:border-color .25s, background .25s;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:#FF8A82; background:rgba(0,0,0,.3); }
.field select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FF8A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:42px; }
.field select option{ color:#241A18; }
.field__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field .hint{ font-size:.8rem; color:rgba(255,255,255,.5); }
.field.invalid input, .field.invalid textarea, .field.invalid select{ border-color:#ff5b50; }

/* chips de horário */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip-opt{ position:relative; cursor:pointer; }
.chip-opt input{ position:absolute; opacity:0; pointer-events:none; }
.chip-opt span{ display:inline-flex; align-items:center; gap:7px; padding:11px 18px; border-radius:999px; font-weight:600; font-size:.94rem; color:#fff;
  background:rgba(0,0,0,.2); border:2px solid rgba(255,255,255,.14); transition:all .2s; }
.chip-opt span svg{ width:16px; height:16px; color:#FF8A82; }
.chip-opt:hover span{ border-color:rgba(255,138,130,.5); }
.chip-opt input:checked + span{ background:var(--red); border-color:var(--red); }
.chip-opt input:checked + span svg{ color:#fff; }

/* navegação do wizard */
.book__nav{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:30px; }
.book__nav .spacer{ flex:1; }
.btn--back{ background:transparent; color:rgba(255,255,255,.8); border:2px solid rgba(255,255,255,.2); }
.btn--back:hover{ background:rgba(255,255,255,.08); color:#fff; transform:translateY(-2px); }
.btn--next{ background:#fff; color:var(--red); box-shadow:0 12px 28px rgba(0,0,0,.28); }
.btn--next:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(0,0,0,.36); }

/* resumo (passo final) */
.review{ display:grid; gap:12px; }
.review__row{ display:flex; align-items:flex-start; gap:14px; padding:15px 16px; border-radius:14px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.1); }
.review__row svg{ width:20px; height:20px; color:#FF8A82; flex:none; margin-top:2px; }
.review__k{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.5); font-weight:700; }
.review__v{ font-size:1rem; color:#fff; font-weight:500; word-break:break-word; }
.review__edit{ margin-left:auto; color:#FF8A82; font-size:.82rem; font-weight:700; flex:none; }

/* tela de sucesso */
.success{ display:none; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:30px 10px; }
.success.active{ display:flex; }
.success__badge{ width:96px; height:96px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 18px 40px rgba(37,211,102,.45); }
.success__badge svg{ width:48px; height:48px; color:#fff; }
.success__badge::before{ content:""; position:absolute; width:96px; height:96px; border-radius:50%; background:#25D366; opacity:.4; animation:waPulse 2s ease-out infinite; }
.success h2{ color:#fff; font-size:2rem; }
.success p{ color:rgba(255,255,255,.74); font-size:1.06rem; max-width:420px; }
.success .btn{ margin-top:10px; }

@media (max-width:560px){
  .book__card{ padding:28px 22px; }
  .opt-grid{ grid-template-columns:1fr; }
  .field__row{ grid-template-columns:1fr; }
  .book__top{ padding:18px 20px; }
  .steps-bar__lbl{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .step-panel, .success, .success__badge{ animation:none !important; }
  .success__badge::before{ animation:none; display:none; }
}