/* Horaê — NOVA UI da página de agendamento da cliente. Vem DEPOIS do shared.css.
   Usa as cores do cadastro de cada cliente (aplicarTema → --brand, --brand-2, --brand-deep, --bg, --ink). */
:root{
  --nv-card:rgba(255,255,255,.96);
  --nv-line:color-mix(in srgb,var(--brand-deep) 11%,transparent);
  --nv-tint:color-mix(in srgb,var(--brand-2) 26%,#fff);
  --nv-tint-2:color-mix(in srgb,var(--brand-2) 14%,#fff);
  --nv-shadow:0 8px 28px -14px color-mix(in srgb,var(--brand-deep) 45%,transparent);
  --nv-radius:22px;
}
body.nv-cliente{background:
  radial-gradient(70% 45% at 100% 0%,color-mix(in srgb,var(--brand-2) 30%,transparent),transparent 65%),
  radial-gradient(60% 40% at 0% 100%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%),
  var(--bg);background-attachment:fixed}
.nv-cliente .wrap{width:min(780px,94vw);padding-bottom:6rem}

/* topo */
.nv-cliente .hero-img{width:100%;margin:14px 0 1.2rem;border-radius:var(--nv-radius);box-shadow:var(--nv-shadow)}
.nv-cliente .head{padding:1.6rem 0 1rem}
.nv-cliente .head h1{font-weight:500;color:var(--brand-deep)}
.nv-cliente .head .sub{color:var(--brand)}
.nv-cliente.has-hero .head{border-radius:var(--nv-radius);margin:14px 0 1.2rem}

/* cartões */
.nv-cliente .card{background:var(--nv-card);border:0;border-radius:var(--nv-radius);box-shadow:var(--nv-shadow);padding:1.5rem}
.nv-cliente .card h2{font-size:1.55rem;font-weight:500;color:var(--brand-deep)}
.nv-cliente .kicker{color:var(--brand);letter-spacing:.18em}
.nv-cliente .hint{color:var(--muted)}
.nv-cliente .bio-card{align-items:center;gap:1.2rem}
.nv-cliente .bio-foto{width:92px;height:92px;border:3px solid #fff;box-shadow:var(--nv-shadow)}
.nv-cliente .bio-pay b{background:var(--nv-tint-2);border:0;color:var(--brand-deep)}

/* passos 1 · 2 · 3 */
.nv-cliente .steps{background:var(--nv-tint-2);border-radius:999px;padding:4px;gap:2px;flex-wrap:nowrap;margin:0 auto 1.1rem;max-width:520px;justify-content:stretch}
.nv-cliente .steps span{flex:1;text-align:center;border:0;padding:.55rem .4rem;font-size:.72rem;color:var(--muted)}
.nv-cliente .steps span.on{background:var(--brand-deep);color:#fff;box-shadow:0 5px 14px -6px var(--brand-deep)}
.nv-cliente .steps span.done{background:transparent;color:var(--brand-deep)}

/* serviços */
.nv-cliente .cat-title{font-size:1.15rem;margin:1.3rem 0 .7rem;color:var(--brand-deep)}
.nv-cliente .cat-title::after{background:var(--nv-line)}
.nv-cliente .catgrid{gap:.65rem}
.nv-cliente .svc{border:1.5px solid var(--nv-line);border-radius:18px;padding:.95rem 1.05rem;background:#fff;gap:.9rem}
.nv-cliente .svc:hover{border-color:var(--brand-2);box-shadow:0 12px 24px -18px var(--brand-deep)}
.nv-cliente .svc.selected{border-color:var(--brand-deep);background:color-mix(in srgb,var(--brand-2) 12%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-deep) 12%,transparent)}
.nv-cliente .svc-check{width:26px;height:26px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--brand-deep) 28%,transparent);font-size:.8rem;order:-1}
.nv-cliente .svc.selected .svc-check{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.nv-cliente .svc b{font-size:1rem}
.nv-cliente .svc .preco{font-size:1.05rem;color:var(--brand-deep)}
.nv-cliente .cat-icon{height:46px}
.nv-cliente .multi-bar{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:0;border-radius:20px;box-shadow:0 18px 40px -16px color-mix(in srgb,var(--brand-deep) 55%,transparent);bottom:.9rem}
.nv-cliente .multi-info span{color:var(--brand-deep)}

/* dias e horários */
.nv-cliente .days{gap:.6rem;padding:.3rem .1rem .8rem}
.nv-cliente .day{min-width:72px;border:1.5px solid var(--nv-line);border-radius:18px;padding:.7rem .5rem;background:#fff}
.nv-cliente .day:hover{border-color:var(--brand-2)}
.nv-cliente .day.on{background:var(--brand-deep);border-color:var(--brand-deep);box-shadow:0 8px 18px -10px var(--brand-deep)}
.nv-cliente .day.on small,.nv-cliente .day.on b,.nv-cliente .day.on em{color:#fff}
.nv-cliente .day b{font-size:1.4rem}
.nv-cliente .slots{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:.6rem}
.nv-cliente .slot{border:1.5px solid var(--nv-line);border-radius:14px;padding:.7rem 0;font-size:.95rem;background:#fff;color:var(--brand-deep)}
.nv-cliente .slot:hover{border-color:var(--brand-2);color:var(--brand-deep)}
.nv-cliente .slot.on{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;box-shadow:0 6px 14px -6px var(--brand-deep)}

/* resumo, formulário, botões */
.nv-cliente .resumo{background:var(--nv-tint-2);border:0;border-radius:18px;padding:1rem 1.1rem}
.nv-cliente .cliente-banner{background:var(--nv-tint-2);border:0;border-radius:16px}
.nv-cliente label{color:var(--muted);font-size:.7rem}
.nv-cliente input,.nv-cliente select{border:1.5px solid var(--nv-line);border-radius:14px;padding:.85rem 1rem;font-size:1rem}
.nv-cliente input:focus,.nv-cliente select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.nv-cliente .btn{border-radius:16px}
.nv-cliente .btn-brand{background:var(--brand-deep);color:#fff;box-shadow:0 10px 22px -12px var(--brand-deep)}
.nv-cliente .btn-line{background:#fff;border:1.5px solid color-mix(in srgb,var(--brand-deep) 35%,transparent);color:var(--brand-deep)}
.nv-cliente .btn-back{color:var(--brand-deep)}
.nv-cliente .btn-block{padding:1rem}
.nv-cliente .errbox{border-radius:14px}

/* sucesso */
.nv-cliente .success .check{background:#e1f3e7;width:76px;height:76px}
.nv-cliente .success .indica{border-top:1px dashed var(--nv-line)}

.nv-cliente .foot{color:var(--muted)}

@media (max-width:560px){
  .nv-cliente .wrap{width:min(780px,92vw)}
  .nv-cliente .card{padding:1.15rem 1rem}
  .nv-cliente .card h2{font-size:1.35rem}
  .nv-cliente .steps span{font-size:.64rem}
  .nv-cliente .multi-bar{bottom:.6rem}
}
@media (prefers-reduced-motion:reduce){.nv-cliente *{transition:none!important}}

/* aviso "Instale esse app": o botão tem cor branca inline — precisa de fundo transparente sobre o degradê */
.nv-cliente #banner-instalar{border-radius:var(--nv-radius);background:linear-gradient(135deg,var(--brand-deep),color-mix(in srgb,var(--brand-deep) 70%,var(--brand)))!important}
.nv-cliente #banner-instalar .btn-line{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.7)!important;color:#fff!important}

/* Em telas largas o nome do serviço ficava centralizado (space-between com 3 itens): o texto ocupa o meio e alinha à esquerda */
.nv-cliente .svc>span:not(.svc-check):not(.preco){flex:1;text-align:left;min-width:0}