/* ============================================================
   Página de agendamento — herda os tokens de styles.css
   ============================================================ */

.ag-main{ padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,8vw,6rem); background:var(--off-white); }

.ag-head{ text-align:center; max-width:680px; margin:0 auto clamp(2.5rem,5vw,4rem); }
.ag-head .ornament{ width:52px; margin:0 auto .9rem; opacity:.9; }
.ag-head h1{ font-size:clamp(2.1rem,4.6vw,3.2rem); margin-bottom:1rem; }
.ag-lede{ color:var(--ink-soft); margin:0; }

/* ---- Etapas ---- */
.ag-step{
  max-width:860px; margin:0 auto clamp(2rem,4vw,3.2rem);
  background:var(--white); border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3.5vw,2.6rem); box-shadow:var(--shadow-sm);
}
.ag-step-title{
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.35rem,2.6vw,1.75rem); color:var(--terracotta-deep);
  margin:0 0 1.6rem; line-height:1.2;
}
.ag-num{
  flex:none; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--rose-soft); color:var(--terracotta-deep);
  font-family:var(--font-label); font-size:.95rem; font-weight:600;
}

/* ---- Modalidade ---- */
.ag-mod-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.ag-mod{
  display:flex; flex-direction:column; align-items:flex-start; gap:.45rem;
  text-align:left; padding:1.4rem; cursor:pointer;
  background:var(--cream); border:2px solid transparent; border-radius:var(--radius);
  font-family:var(--font-body); color:var(--ink);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ag-mod:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.ag-mod[aria-checked="true"]{ border-color:var(--terracotta); background:var(--white); box-shadow:var(--shadow-sm); }
.ag-mod-icon{ width:30px; height:30px; color:var(--terracotta-dark); }
.ag-mod-icon svg{ width:100%; height:100%; }
.ag-mod-nome{ font-family:var(--font-label); font-weight:500; font-size:1.08rem; color:var(--terracotta-deep); }
.ag-mod-desc{ font-size:.92rem; color:var(--ink-soft); line-height:1.5; }
.ag-mod-preco{
  margin-top:.35rem; font-family:var(--font-label); font-weight:600;
  font-size:1.05rem; color:var(--terracotta-dark);
}

/* ---- Estado / spinner ---- */
.ag-estado{
  display:flex; align-items:center; gap:.7rem;
  color:var(--ink-soft); font-size:.95rem; padding:.6rem 0;
}
.ag-spinner{
  width:17px; height:17px; flex:none; border-radius:50%;
  border:2px solid var(--rose-soft); border-top-color:var(--terracotta);
  animation:ag-gira .7s linear infinite;
}
@keyframes ag-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .ag-spinner{ animation:none; } }

/* ---- Dias ---- */
.ag-dias{
  display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.7rem; margin-bottom:1.5rem;
  scrollbar-width:thin; scrollbar-color:var(--rose-soft) transparent;
}
.ag-dia{
  flex:none; min-width:104px; padding:.85rem .7rem; cursor:pointer; text-align:center;
  background:var(--cream); border:2px solid transparent; border-radius:14px;
  font-family:var(--font-label); color:var(--ink);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.ag-dia:hover{ border-color:var(--rose); }
.ag-dia[aria-selected="true"]{ background:var(--terracotta); color:var(--white); border-color:var(--terracotta); }
.ag-dia-semana{ display:block; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; opacity:.75; }
.ag-dia-num{ display:block; font-family:var(--font-display); font-size:1.5rem; line-height:1.25; }
.ag-dia-mes{ display:block; font-size:.76rem; opacity:.75; }

/* ---- Horas ---- */
.ag-horas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:.6rem; }
.ag-hora{
  padding:.75rem .5rem; cursor:pointer;
  background:var(--white); border:1.5px solid var(--rose-soft); border-radius:12px;
  font-family:var(--font-label); font-size:1rem; color:var(--terracotta-deep);
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.ag-hora:hover{ transform:translateY(-2px); border-color:var(--terracotta); }
.ag-hora[aria-pressed="true"]{ background:var(--terracotta); color:var(--white); border-color:var(--terracotta); }

.ag-vazio{ color:var(--ink-soft); font-size:.95rem; grid-column:1/-1; margin:0; }

/* ---- Formulário ---- */
.ag-form{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.ag-campo{ display:flex; flex-direction:column; gap:.4rem; }
.ag-campo-full{ grid-column:1/-1; }
.ag-form label{
  font-family:var(--font-label); font-size:.88rem; font-weight:500;
  letter-spacing:.03em; color:var(--terracotta-deep);
}
.ag-opc{ font-weight:400; color:var(--ink-soft); }
.ag-form input, .ag-form textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:.85rem 1rem; background:var(--cream);
  border:1.5px solid transparent; border-radius:12px; width:100%;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.ag-form input:focus, .ag-form textarea:focus{
  outline:none; background:var(--white); border-color:var(--terracotta);
}
.ag-form textarea{ resize:vertical; line-height:1.6; }
.ag-dica{ font-size:.82rem; color:var(--ink-soft); }

/* ---- Resumo ---- */
.ag-resumo{ background:var(--cream); border-radius:var(--radius); padding:1.3rem 1.5rem; }
.ag-resumo-titulo{
  font-family:var(--font-label); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--terracotta-dark);
  margin:0 0 .8rem;
}
.ag-resumo dl{ margin:0; display:grid; gap:.45rem; }
.ag-resumo dl > div{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ag-resumo dt{ color:var(--ink-soft); font-size:.93rem; }
.ag-resumo dd{ margin:0; font-weight:600; color:var(--terracotta-deep); text-align:right; }

/* ---- Erro / ações ---- */
.ag-erro{
  margin:0; padding:.9rem 1.1rem; border-radius:12px;
  background:#FBEAE5; color:#8E3B22; font-size:.95rem;
  border:1px solid #F0C9BC;
}
.ag-acoes{ text-align:center; margin-top:.4rem; }
.ag-acoes .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.ag-nota{ margin:.9rem 0 0; font-size:.87rem; color:var(--ink-soft); }

/* ---- Sucesso ---- */
.ag-sucesso{
  max-width:620px; margin:0 auto; text-align:center;
  background:var(--white); border-radius:var(--radius-lg);
  padding:clamp(2.2rem,5vw,3.4rem); box-shadow:var(--shadow-md);
}
.ag-check{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 1.3rem;
  border-radius:50%; background:var(--rose-soft); color:var(--terracotta-deep);
}
.ag-check svg{ width:30px; height:30px; }
.ag-sucesso h2{ margin-bottom:.6rem; }
.ag-sucesso p{ color:var(--ink-soft); }
.ag-sucesso-quando{
  font-family:var(--font-label); font-size:1.12rem;
  color:var(--terracotta-deep)!important; font-weight:500; margin:.2rem 0 1.2rem;
}
.ag-sucesso .btn{ margin-top:1.4rem; }
.ag-sucesso-nota{ font-size:.88rem; margin-top:1.4rem; }
.ag-voltar{
  display:inline-block; margin-top:1.2rem;
  font-family:var(--font-label); font-size:.9rem;
  color:var(--terracotta-dark); border-bottom:1px solid var(--rose);
}

@media (max-width:720px){
  .ag-form{ grid-template-columns:1fr; }
  .main-nav{ display:none; }
}