/* Agendamento público. Herda as cores de bertonha-tokens.css. */

#bertonha-agendar,
#bertonha-meu-horario{--bt-navy:#0a141c;--bt-navy-2:#0f1d28;--bt-navy-3:#12202c;
  --bt-gold:#ba934e;--bt-gold-2:#cfa75e;--bt-line:rgba(186,147,78,.24);
  --bt-ink:#fff;--bt-ink-2:rgba(255,255,255,.68);--bt-ink-3:rgba(255,255,255,.62);
  max-width:460px;margin:0 auto;background:var(--bt-navy);color:var(--bt-ink);
  font-family:var(--bt-font-text,'Source Sans 3',system-ui,sans-serif);
  border-radius:20px;overflow:hidden;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom,0)}
#bertonha-agendar *,
#bertonha-meu-horario *{box-sizing:border-box}
#bertonha-agendar button,
#bertonha-meu-horario button{font-family:inherit;cursor:pointer;transition:
  transform .18s cubic-bezier(.22,.61,.36,1),background .22s,border-color .22s,box-shadow .22s,color .22s}
#bertonha-agendar button:active:not(:disabled),
#bertonha-meu-horario button:active:not(:disabled){transform:translateY(1px)}
#bertonha-agendar :focus-visible,
#bertonha-meu-horario :focus-visible{outline:2px solid var(--bt-gold-2);outline-offset:3px}

.bt-ag__tela{display:flex;flex-direction:column;min-height:560px}
.bt-ag__tela--centro{align-items:center;text-align:center;padding-bottom:28px}

.bt-ag__topo{display:flex;align-items:center;gap:12px;padding:22px 20px 14px;width:100%}
.bt-ag__voltar{width:44px;height:44px;margin-left:-10px;background:none;border:0;
  color:var(--bt-ink);display:flex;align-items:center;justify-content:center}
.bt-ag__titulo{flex:1;text-align:left}
.bt-ag__passo{display:block;font-size:12px;letter-spacing:.22em;
  color:var(--bt-gold);text-transform:uppercase}
.bt-ag__titulo h2{margin:2px 0 0;font-family:var(--bt-font-display,'Big Shoulders Display',sans-serif);
  font-weight:700;font-size:28px;letter-spacing:.02em;text-transform:uppercase}

.bt-ag__chip{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 20px 14px;padding:12px 14px;border-radius:14px;background:var(--bt-navy-2)}
.bt-ag__chip-texto{display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0}
.bt-ag__chip-texto strong{font-family:var(--bt-font-display,sans-serif);font-weight:700;
  font-size:16px;letter-spacing:.02em;text-transform:uppercase}
.bt-ag__chip-texto span{font-size:12px;color:var(--bt-ink-3)}
.bt-ag__link{background:none;border:0;color:var(--bt-gold);font-size:13px;padding:6px}
.bt-ag__link:hover{color:var(--bt-gold-2)}

.bt-ag__lista{flex:1;display:flex;flex-direction:column;gap:10px;padding:0 20px;overflow-y:auto}
.bt-ag__grupo{margin:6px 0 0;font-size:11.5px;letter-spacing:.2em;
  color:var(--bt-ink-3);text-transform:uppercase}

.bt-ag__item{display:flex;align-items:center;gap:13px;width:100%;padding:15px 16px;
  border-radius:16px;background:var(--bt-navy-2);border:1px solid var(--bt-line);
  color:var(--bt-ink);text-align:left}
.bt-ag__item.is-on{background:var(--bt-navy-3);border:1.5px solid var(--bt-gold)}
.bt-ag__item:hover{border-color:rgba(186,147,78,.5)}
.bt-ag__item-corpo{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.bt-ag__item-corpo strong{font-family:var(--bt-font-display,sans-serif);font-weight:700;
  font-size:20px;letter-spacing:.02em;text-transform:uppercase}
.bt-ag__desc{font-size:12.5px;line-height:1.35;color:var(--bt-ink-3)}
.bt-ag__dur{font-size:12px;letter-spacing:.08em;color:var(--bt-ink-3);text-transform:uppercase}
.bt-ag__preco{font-family:var(--bt-font-display,sans-serif);font-weight:700;
  font-size:22px;color:var(--bt-gold);flex-shrink:0}

.bt-ag__marca{width:26px;height:26px;border-radius:999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(186,147,78,.45);color:var(--bt-navy)}
.is-on .bt-ag__marca{background:var(--bt-gold);border-color:var(--bt-gold)}

.bt-ag__avatar{width:50px;height:50px;border-radius:999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(186,147,78,.18);color:var(--bt-gold);
  font-family:var(--bt-font-display,sans-serif);font-weight:700;font-size:18px}
.bt-ag__avatar--qualquer{background:none;border:1.5px dashed rgba(186,147,78,.6)}
.is-on .bt-ag__avatar{background:var(--bt-gold);color:var(--bt-navy)}

.bt-ag__dias{display:flex;gap:7px;padding:0 20px 14px;overflow-x:auto}
.bt-ag__dia{flex:1;min-width:46px;height:62px;border-radius:14px;
  background:var(--bt-navy-2);border:1px solid var(--bt-line);color:var(--bt-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.bt-ag__dia.is-on{background:var(--bt-gold);border-color:var(--bt-gold);color:var(--bt-navy)}
.bt-ag__dia-wd{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.78}
.bt-ag__dia-n{font-family:var(--bt-font-display,sans-serif);font-weight:700;font-size:21px}

.bt-ag__horarios-area{flex:1;padding:0 20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.bt-ag__faixa{margin:8px 0 2px;font-size:11.5px;letter-spacing:.16em;
  color:var(--bt-gold);text-transform:uppercase}
.bt-ag__grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.bt-ag__slot{height:48px;border-radius:12px;background:var(--bt-navy-2);
  border:1px solid rgba(186,147,78,.28);color:var(--bt-ink);
  font-family:var(--bt-font-display,sans-serif);font-weight:700;font-size:19px;letter-spacing:.04em}
.bt-ag__slot.is-on{background:var(--bt-gold);border-color:var(--bt-gold);color:var(--bt-navy)}

.bt-ag__vazio{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:34px 16px;text-align:center}
.bt-ag__vazio strong{font-family:var(--bt-font-display,sans-serif);font-weight:700;
  font-size:24px;text-transform:uppercase}
.bt-ag__vazio p{margin:0;font-size:14px;line-height:1.5;color:var(--bt-ink-2);max-width:30ch}

.bt-ag__form{flex:1;padding:0 20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.bt-ag__campo{display:flex;flex-direction:column;gap:7px}
.bt-ag__campo label{font-size:11.5px;letter-spacing:.18em;
  color:var(--bt-ink-3);text-transform:uppercase}
.bt-ag__campo input{height:52px;padding:0 16px;border-radius:13px;
  background:var(--bt-navy-2);border:1px solid var(--bt-line);color:var(--bt-ink);
  font-family:inherit;font-size:16px}
.bt-ag__campo input::placeholder{color:rgba(255,255,255,.4)}
.bt-ag__campo input:focus{border-color:var(--bt-gold);outline:none}
.bt-ag__ajuda{margin:0;font-size:12.5px;line-height:1.45;color:var(--bt-ink-3)}

.bt-ag__card{padding:16px;border-radius:16px;background:var(--bt-navy-2);
  border:1px solid var(--bt-line);display:flex;flex-direction:column;gap:10px;width:100%}
.bt-ag__linha{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:14.5px}
.bt-ag__linha--suave{font-size:13.5px;color:var(--bt-ink-3)}
.bt-ag__linha--total{padding-top:10px;border-top:1px solid rgba(186,147,78,.2)}
.bt-ag__linha--total strong{font-family:var(--bt-font-display,sans-serif);
  font-size:22px;color:var(--bt-gold)}

.bt-ag__rodape{display:flex;align-items:center;gap:14px;padding:16px 20px 22px;
  border-top:1px solid rgba(186,147,78,.18);margin-top:auto}
.bt-ag__resumo{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0}
.bt-ag__resumo-topo{font-size:11.5px;letter-spacing:.16em;
  color:var(--bt-ink-3);text-transform:uppercase}
.bt-ag__resumo-baixo{font-family:var(--bt-font-display,sans-serif);font-weight:700;font-size:19px}

.bt-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 26px;border-radius:999px;border:0;background:var(--bt-gold);color:var(--bt-navy);
  font-family:var(--bt-font-display,sans-serif);font-weight:700;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.bt-btn:hover:not(:disabled){background:var(--bt-gold-2);box-shadow:0 8px 26px rgba(186,147,78,.34)}
.bt-btn:disabled{background:rgba(186,147,78,.22);color:rgba(10,20,28,.45);cursor:not-allowed}
.bt-btn--linha{background:none;border:1px solid rgba(186,147,78,.5);color:var(--bt-gold);
  font-size:17px;min-height:48px}
.bt-btn--linha:hover:not(:disabled){background:rgba(186,147,78,.1);box-shadow:none}

.bt-ag__valor{font-family:var(--bt-font-display,sans-serif);font-weight:800;
  font-size:52px;color:var(--bt-gold);line-height:1;margin:6px 0 18px}
.bt-ag__qr{width:210px;height:210px;border-radius:18px;background:#fff;padding:14px}
.bt-ag__copia{display:flex;flex-direction:column;gap:9px;width:100%;padding:0 20px;margin-top:16px}
.bt-ag__copia code{display:block;padding:13px 14px;border-radius:12px;
  background:var(--bt-navy-2);border:1px solid var(--bt-line);
  font-size:12px;color:var(--bt-ink-3);word-break:break-all;text-align:left;
  max-height:64px;overflow:hidden}
.bt-ag__espera{display:flex;align-items:center;gap:10px;margin:18px 20px 0;
  font-size:13px;color:var(--bt-ink-2)}
.bt-ag__girando{width:15px;height:15px;border-radius:999px;flex-shrink:0;
  border:2px solid rgba(186,147,78,.25);border-top-color:var(--bt-gold);
  animation:btGirar 1s linear infinite}
@keyframes btGirar{to{transform:rotate(360deg)}}

.bt-ag__selo{width:84px;height:84px;border-radius:999px;margin:44px 0 20px;
  border:2px solid var(--bt-gold);color:var(--bt-gold);
  display:flex;align-items:center;justify-content:center}
.bt-ag__ok{margin:0 0 8px;font-family:var(--bt-font-display,sans-serif);font-weight:800;
  font-size:32px;text-transform:uppercase}
.bt-ag__codigo{display:flex;flex-direction:column;align-items:center;gap:5px;
  margin:18px 20px;padding:14px 30px;border-radius:14px;
  border:1px dashed rgba(186,147,78,.5)}
.bt-ag__codigo span{font-size:11px;letter-spacing:.2em;
  color:var(--bt-ink-3);text-transform:uppercase}
.bt-ag__codigo strong{font-family:var(--bt-font-display,sans-serif);font-weight:800;
  font-size:30px;letter-spacing:.14em;color:var(--bt-gold)}
.bt-ag__tela--centro .bt-ag__card,
.bt-ag__tela--centro .bt-btn--linha{margin:0 20px;width:calc(100% - 40px)}
.bt-ag__tela--centro .bt-btn--linha{margin-top:14px}

.bt-ag__erro{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:14px 20px 0;padding:13px 15px;border-radius:13px;
  background:rgba(180,69,60,.14);border:1px solid rgba(180,69,60,.45);
  font-size:13.5px;line-height:1.4}
.bt-ag__aviso{padding:30px 0;text-align:center;font-size:14px;color:var(--bt-ink-3)}

.bt-ag__esqueleto{display:flex;flex-direction:column;gap:10px}
.bt-ag__esqueleto-linha{height:86px;border-radius:16px;
  background:linear-gradient(100deg,var(--bt-navy-2) 30%,rgba(255,255,255,.05) 50%,var(--bt-navy-2) 70%);
  background-size:220% 100%;animation:btBrilho 1.4s linear infinite}
@keyframes btBrilho{to{background-position:-120% 0}}

@media (max-width:420px){
  #bertonha-agendar{border-radius:0}
  .bt-ag__titulo h2{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  #bertonha-agendar *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===========================================================================
   Página em tela cheia (template pagina-solo.php).

   Antes o cartão crescia até uns 1300px e a barra com o botão Continuar
   ficava lá embaixo, fora da vista. Agora a altura é a da tela: a lista
   rola por dentro e o botão fica sempre visível.
   =========================================================================== */

body.bt-solo{margin:0;background:#0a141c}
body.bt-solo--cliente,
body.bt-solo--agendar{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:0;background:#0a141c}
body.bt-solo--cliente.admin-bar,
body.bt-solo--agendar.admin-bar{min-height:calc(100dvh - var(--wp-admin--admin-bar--height,32px))}

body.bt-solo--cliente #bertonha-meu-horario,
body.bt-solo--agendar #bertonha-agendar{
  width:100%;max-width:460px;
  height:min(100dvh, 880px);
  display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
body.bt-solo--cliente.admin-bar #bertonha-meu-horario,
body.bt-solo--agendar.admin-bar #bertonha-agendar{
  height:min(calc(100dvh - var(--wp-admin--admin-bar--height,32px)), 880px)}

body.bt-solo .bt-ag__tela{flex:1;min-height:0;height:100%}
body.bt-solo .bt-ag__topo,
body.bt-solo .bt-ag__chip,
body.bt-solo .bt-ag__dias,
body.bt-solo .bt-ag__rodape{flex-shrink:0}
body.bt-solo .bt-ag__lista,
body.bt-solo .bt-ag__horarios-area,
body.bt-solo .bt-ag__form{flex:1;min-height:0;overflow-y:auto;
  padding-bottom:10px;scrollbar-width:thin}

/* Barra de baixo com um véu por cima, pra dar a dica de que a lista continua. */
body.bt-solo .bt-ag__rodape{position:relative;background:#0a141c}
body.bt-solo .bt-ag__rodape::before{content:"";position:absolute;left:0;right:0;
  top:-26px;height:26px;pointer-events:none;
  background:linear-gradient(to top,#0a141c,rgba(10,20,28,0))}

/* Tela de pagamento e confirmação rolam inteiras. */
body.bt-solo .bt-ag__tela--centro{overflow-y:auto}

@media (max-width:520px){
  body.bt-solo--cliente,
body.bt-solo--agendar{align-items:stretch}
  body.bt-solo--cliente #bertonha-meu-horario,
body.bt-solo--agendar #bertonha-agendar{max-width:none;border-radius:0;box-shadow:none;
    height:100dvh}
  body.bt-solo--cliente.admin-bar #bertonha-meu-horario,
body.bt-solo--agendar.admin-bar #bertonha-agendar{
    height:calc(100dvh - var(--wp-admin--admin-bar--height,32px))}
}

/* Ações da área do cliente. */
.bt-ag__acoes-cliente{display:flex;gap:10px;margin-top:4px}
.bt-ag__acoes-cliente .bt-btn{flex:1}


/* Aviso do sinal, no passo dos dados. */
.bt-ag__sinal{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;
  border-radius:16px;border:1px solid rgba(186,147,78,.5);color:var(--bt-gold)}
.bt-ag__sinal svg{flex-shrink:0;margin-top:1px}
.bt-ag__sinal-texto{display:flex;flex-direction:column;gap:3px}
.bt-ag__sinal-texto strong{font-family:var(--bt-font-display,sans-serif);font-weight:700;
  font-size:17px;letter-spacing:.03em;text-transform:uppercase}
.bt-ag__sinal-texto span{font-size:13px;line-height:1.45;color:var(--bt-ink-2)}

/* Nenhum conteúdo pode empurrar a página pro lado. */
body.bt-solo{overflow-x:hidden}
#bertonha-agendar,#bertonha-meu-horario{max-width:min(460px,100%)}
.bt-ag__codigo strong{word-break:break-all}

/* Confirmação dentro da tela, no lugar do alerta do navegador. */
.bt-ag__confirma{display:flex;flex-direction:column;gap:10px;padding:18px;
  border-radius:16px;background:var(--bt-navy-3);border:1px solid rgba(186,147,78,.5)}
.bt-ag__confirma strong{font-family:var(--bt-font-display,sans-serif);font-weight:700;
  font-size:19px;letter-spacing:.02em}
.bt-ag__confirma p{margin:0;font-size:13.5px;line-height:1.45;color:var(--bt-ink-2)}
.bt-ag__confirma .bt-ag__acoes-cliente{margin-top:4px}

/* Logo no topo do agendamento e da área do cliente. */
.bt-ag__logo-topo{display:flex;justify-content:center;padding:18px 20px 4px;flex-shrink:0}
.bt-ag__logo-topo img{height:40px;width:auto;opacity:.95;transition:opacity .2s}
.bt-ag__logo-topo:hover img{opacity:1}
.bt-ag__avatar--foto{object-fit:cover;object-position:50% 20%;padding:0;
  border:1.5px solid rgba(186,147,78,.5)}
.is-on .bt-ag__avatar--foto{border-color:var(--bt-gold)}

/* Passos do agendamento deslizam na direção em que a pessoa anda. */
.bt-ag__tela--frente{animation:btAgFrente .34s cubic-bezier(.2,.7,.2,1) both}
.bt-ag__tela--volta{animation:btAgVolta .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes btAgFrente{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes btAgVolta{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.bt-ag__item,.bt-ag__slot,.bt-ag__dia{transition:background .22s,border-color .22s,color .22s,transform .16s}
.bt-ag__item:active,.bt-ag__slot:active,.bt-ag__dia:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.bt-ag__tela--frente,.bt-ag__tela--volta{animation:none}}


/* Cor do barbeiro: um filete à esquerda e o anel da foto. */
.bt-ag__item.tem-cor{box-shadow:inset 3px 0 0 var(--cor-barbeiro)}
.bt-ag__item.tem-cor .bt-ag__avatar--foto{border-color:var(--cor-barbeiro)}
.bt-ag__item.tem-cor.is-on{box-shadow:inset 3px 0 0 var(--cor-barbeiro),0 0 0 1px var(--bt-gold)}