/* Mietto Barbearia — agendamento online do cliente. */
:root{--wine-light:#d9b45f;--line:rgba(239,228,204,.14);--card:#13201b;--card-2:#1a2b24}
*{box-sizing:border-box;margin:0}
body{background:var(--ink);color:var(--cream);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--wine-light);outline-offset:2px;border-radius:6px}
button,input,textarea{font:inherit;color:inherit}

/* topo */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,calc((100% - 1120px)/2));
  background:rgba(20,17,16,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:6px;background:var(--checker);background-size:12px 12px;opacity:.9}
.back{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 20px var(--display);text-transform:uppercase}
.back img{border-radius:50%;border:2px solid var(--cream)}
.bar-title{font:700 13px var(--body);font-stretch:125%;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-2)}

main{max-width:1120px;margin:0 auto;padding:40px 16px 60px}
.boot{display:flex;align-items:center;gap:12px;justify-content:center;padding:80px 0;color:var(--cream-2)}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--wine-light);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* layout */
.flow{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.steps{display:grid;gap:18px;min-width:0}
.step{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--card);min-width:0;transition:opacity .3s,border-color .3s;animation:rise .55s var(--ease-emphasis) both}
.step:nth-child(2){animation-delay:60ms}.step:nth-child(3){animation-delay:120ms}.step:nth-child(4){animation-delay:180ms}.step:nth-child(5){animation-delay:240ms}
.step:disabled{opacity:.45}
.step.isActive{border-color:rgba(201,165,76,.55)}
legend{display:flex;align-items:center;gap:10px;float:left;width:100%;margin-bottom:16px;font:400 22px/1 var(--display);text-transform:uppercase}
legend+*{clear:both}
/* passo concluído: mostra só a escolha, com "Trocar" */
.change{margin-left:auto;padding:8px 14px;min-height:40px;border-radius:999px;border:1.5px solid var(--line);background:none;font:700 13px var(--body);letter-spacing:.04em;text-transform:none;cursor:pointer}
.change:hover{border-color:var(--cream)}
.step:not(.isDone) .change{display:none}
.step.isDone .opt:not(:has(input:checked)),.step.isDone .times h3,.step.isDone .promo-note{display:none}
.step.isDone .services,.step.isDone .barbers,.step.isDone .time-grid{grid-template-columns:1fr}
.step.isDone .opt:has(input:checked) .face{animation:none}
.barbers .face{min-width:0}
.barbers .face>span:last-child{min-width:0}
.num{display:grid;place-items:center;width:30px;height:30px;font:400 14px var(--display);color:var(--ink);background:var(--cream);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* opções (inputs reais, visual de cartão) */
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt .face{display:block;height:100%;border:1.5px solid var(--line);border-radius:14px;background:var(--card-2);transition:border-color .2s,background-color .2s,transform .25s var(--ease-emphasis)}
@media (hover:hover){.opt:hover .face{border-color:rgba(239,228,204,.4);transform:translateY(-2px)}}
.opt input:checked+.face{border-color:var(--cream);background:var(--wine);animation:pick .5s var(--spring)}
.opt input:focus-visible+.face{outline:3px solid var(--wine-light);outline-offset:2px}
.opt input:disabled+.face{opacity:.35;cursor:not-allowed;transform:none}
@keyframes pick{from{transform:scale(.94)}to{transform:none}}

.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.skel{display:block;height:112px;border-radius:14px;background:linear-gradient(90deg,var(--card-2),#30251f,var(--card-2));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.services .face{padding:14px 16px;display:grid;gap:4px}
.svc-name{font:400 17px/1.15 var(--display)}
.svc-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;color:#cfc3a8}
.svc-meta b{font:800 17px var(--body);color:var(--cream)}
.svc-promo{justify-self:start;margin-top:4px;padding:2px 8px;border-radius:999px;background:#1f5b45;color:#f3ecdc;font:700 11px/1.6 var(--body);letter-spacing:.06em;text-transform:uppercase}

.barbers{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.barbers .opt:first-child{grid-column:1/-1}
.barbers b,.svc-name{overflow-wrap:anywhere}
.barbers .face{display:flex;align-items:center;gap:12px;padding:12px 14px}
.mono{display:grid;place-items:center;flex:none;width:38px;height:38px;font:400 15px var(--display);color:var(--ink);background:var(--cream);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.barbers b{font:400 16px var(--display)}
.barbers small{display:block;font-size:12px;color:#cfc3a8}

.days-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.nav{width:36px;height:56px;border-radius:10px;border:1.5px solid var(--line);background:var(--card-2);font-size:22px;cursor:pointer}
.nav:disabled{opacity:.3;cursor:default}
.days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 8px;scroll-behavior:smooth}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 68px;scroll-snap-align:start}
.day .face{display:grid;justify-items:center;gap:2px;padding:10px 4px 8px;text-align:center}
.day .dow{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#cfc3a8}
.day .dn{font:400 22px/1 var(--display)}
.day .mo{font-size:11px;color:#a99c82}
.day .tag{min-height:16px;font:800 10px/16px var(--body);letter-spacing:.04em;text-transform:uppercase}
.day .tag.off{color:#e6c97a}
.day .tag.full,.day .tag.closed{color:#a99c82}
.day input:checked+.face .dow,.day input:checked+.face .mo{color:var(--cream)}
.promo-note{margin-top:10px;font-size:14px;color:#e6c97a}

.times{display:grid;gap:16px}
.times h3{font:700 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:#cfc3a8;margin-bottom:8px}
.time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.time .face{padding:10px 0;text-align:center;font:800 16px var(--body);font-variant-numeric:tabular-nums;animation:rise .4s var(--ease-emphasis) both;animation-delay:calc(var(--k,0)*18ms)}
.time small{display:block;font:600 11px var(--body);color:#cfc3a8}
.time input:checked+.face small{color:var(--cream)}
.empty{padding:18px;border-radius:12px;background:var(--card-2);color:#cfc3a8}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields label{display:grid;gap:6px;font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-2)}
.fields label small{text-transform:none;letter-spacing:0;font-weight:500;color:#a99c82}
.fields .wide{grid-column:1/-1}
.fields input,.fields textarea{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid rgba(239,228,204,.3);background:var(--ink-2);font:500 16px var(--body);text-transform:none;letter-spacing:0;transition:border-color .2s}
.fields input:focus,.fields textarea:focus{border-color:var(--cream);outline:none}
.fields input[aria-invalid="true"]{border-color:var(--wine-light)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.policy{margin-top:12px;font-size:13px;color:#a99c82}

/* resumo */
.summary{position:sticky;top:90px;border-radius:18px;padding:22px;background:var(--cream);color:var(--ink);box-shadow:0 30px 60px -30px #000;animation:rise .6s .1s var(--ease-emphasis) both}
.summary h2{font:400 24px/1 var(--display);text-transform:uppercase;color:var(--wine);margin-bottom:14px}
.summary dl{display:grid;gap:8px}
.summary dl div{display:flex;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px dashed rgba(20,17,16,.25)}
.summary dt{font-size:13px;color:var(--muted-light)}
.summary dd{font-weight:700;text-align:right}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}
.total>span:first-child{font:700 13px var(--body);letter-spacing:.14em;text-transform:uppercase}
.price s{color:var(--muted-light);font-weight:600}
.price b{font:400 30px var(--display);color:var(--wine);font-variant-numeric:tabular-nums}
.promo-tag{margin-top:6px;font:italic 500 21px/1.1 var(--script);color:#1f5b45}
.form-error{min-height:1.2em;margin-top:10px;font-size:14px;font-weight:600;color:#a3172f}
.btn-confirm{position:relative;overflow:hidden;width:100%;margin-top:8px;padding:16px;border:0;border-radius:999px;background:var(--wine);color:var(--cream);font:700 14px var(--body);font-stretch:118%;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:transform .15s,background-color .2s,opacity .2s}
@media (hover:hover){.btn-confirm:not(:disabled):hover{background:var(--wine-bright);transform:translateY(-2px)}}
.btn-confirm:disabled{opacity:.45;cursor:not-allowed}
.btn-confirm.isBusy span{opacity:.6}
.summary .fine{margin-top:12px;font-size:12px;color:var(--muted-light)}

/* confirmação */
.done{display:grid;place-items:center;padding:20px 0}
.ticket{position:relative;width:min(560px,100%);padding:40px 30px 30px;border-radius:20px;background:var(--cream);color:var(--ink);box-shadow:0 40px 80px -30px #000;animation:rise .6s var(--ease-emphasis) both}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:var(--ink)}
.ticket::before{left:-13px}.ticket::after{right:-13px}
.stamp{position:absolute;right:22px;top:18px;padding:6px 14px;border:4px solid var(--wine);border-radius:8px;color:var(--wine);font:400 22px var(--display);text-transform:uppercase;transform:rotate(-12deg);animation:stamp .55s .25s var(--spring) both;mix-blend-mode:multiply}
.stamp.cancel{border-color:#5b4b3d;color:#5b4b3d}
@keyframes stamp{from{opacity:0;transform:rotate(-12deg) scale(2.4)}to{opacity:.92;transform:rotate(-12deg) scale(1)}}
.kicker{font:700 12px var(--body);font-stretch:125%;letter-spacing:.3em;text-transform:uppercase;color:var(--wine)}
.ticket h1{font:400 clamp(28px,5vw,38px)/1 var(--display);margin:10px 0 18px;max-width:14ch}
.ticket-info{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;padding:16px 0;border-block:2px dashed rgba(20,17,16,.25)}
.ticket-info dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-light)}
.ticket-info dd{font-weight:800;font-size:17px}
.actions{display:grid;gap:10px;margin-top:20px}
.btn-cream,.btn-line,.btn-danger{display:block;text-align:center;padding:14px;border-radius:999px;font:700 13px var(--body);font-stretch:118%;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn-cream{background:var(--ink);color:var(--cream)}
.btn-line{border:2px solid var(--ink)}
.btn-danger{width:100%;margin-top:16px;border:2px solid #a3172f;background:none;color:#a3172f}
.manage{margin-top:20px;font-size:14px;color:var(--muted-light)}
.linkbox{display:flex;gap:6px;margin-top:6px}
.linkbox input{flex:1;min-width:0;padding:10px;border-radius:8px;border:1.5px solid rgba(20,17,16,.25);background:#fff8ea;font-size:13px;color:var(--ink)}
.linkbox button{padding:0 14px;border-radius:8px;border:0;background:var(--wine);color:var(--cream);font-weight:700;cursor:pointer}
.cancel-msg{margin-top:10px;font-weight:600}
.again{display:inline-block;margin-top:18px;font-weight:700;color:var(--wine)}

.contact{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);text-align:center}
.contact h2{font:400 22px var(--display);text-transform:uppercase;margin-bottom:12px}
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.contact-row a{padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;font-weight:600;font-size:14px}
.contact-row a:hover{border-color:var(--cream)}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);padding:12px 18px;border-radius:12px;background:var(--cream);color:var(--ink);font-weight:700;box-shadow:0 10px 30px #0008;animation:rise .3s var(--ease-emphasis) both;z-index:40}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .flow{grid-template-columns:1fr}
  .summary{position:relative;top:0}
}
@media (max-width:520px){
  main{padding-top:28px}
  .step{padding:18px 14px}
  .fields{grid-template-columns:1fr}
  .bar-title{display:none}
  .services{grid-template-columns:1fr}
  .barbers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barbers .face{padding:10px;gap:10px}
  .barbers b{font-size:15px}
  .nav{display:none}
  .days-wrap{grid-template-columns:1fr}
  .ticket{padding:34px 20px 24px}
  .ticket-info{grid-template-columns:1fr}
}
/* celular: barra fixa com preço e confirmação sempre à mão */
.mbar{display:none}
@media (max-width:900px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(20,17,16,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mbar-info{flex:1;display:grid;line-height:1.2;min-width:0}
  .mbar-info small{font-size:13px;color:#cfc3a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbar-info b{font:400 22px var(--display);font-variant-numeric:tabular-nums}
  .mbar-btn{min-height:52px;padding:0 22px;border:0;border-radius:14px;background:var(--cream);color:var(--ink);font:800 15px var(--body);letter-spacing:.06em;text-transform:uppercase}
  .mbar-btn:disabled{opacity:.4}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  html{scroll-padding-top:80px;scroll-padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.ts-box{margin-top:14px;min-height:0}
.ts-box:not(:empty){min-height:65px}

/* meus agendamentos */
.mine{margin:0 0 28px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.mine h2{font:600 22px var(--display);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.mine-list{display:grid;gap:10px}
.mine-card{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card-2);transition:opacity .4s}
.mine-card.isGone{opacity:.45}
.mine-card b{display:block;font-size:17px}
.mine-card span{font-size:14px;color:#cfc3a8}
.mine-actions{display:flex;gap:8px}
.mine-actions a,.mine-cancel{display:grid;place-items:center;min-height:44px;padding:0 16px;border-radius:999px;font:700 13px var(--body);text-decoration:none;cursor:pointer}
.mine-actions a{border:1.5px solid var(--line)}
.mine-cancel{border:1.5px solid #c77;background:none;color:#f0b3b3}
.mine-cancel:disabled{opacity:.4;cursor:not-allowed}
.mine-msg{grid-column:1/-1;font-size:13px;color:#e6c97a}
.mine-msg:empty{display:none}
.mine-empty,.mine-help{color:#cfc3a8;font-size:14px}
.mine-help{margin-top:12px}
.mine-help a{color:var(--gold-light)}
@media (max-width:520px){.mine-card{grid-template-columns:1fr}.mine-actions a,.mine-cancel{flex:1}}