/* =========================================================
   Agendamento (agenda.php) — padrão visual Mill'S VET
   Depende dos tokens de millsvet.css
   ========================================================= */

.shell{
  max-width:880px;
  margin:0 auto;
  padding:32px 20px 28px;
}

/* Barra de progresso */
.progress-track{
  height:8px;
  background:var(--purple-100);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:32px;
}
.progress-fill{
  height:100%;
  background:var(--green-500);
  border-radius:999px;
  transition:width .35s ease;
}

.step-container{animation:fadeUp .3s ease both;}
.step-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--purple-100);
  color:var(--purple-700);
  padding:6px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:.82rem;
  margin-bottom:14px;
}
.step-meta span{color:var(--green-700);}
.step-headline{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.7rem,4vw,2.3rem);
  line-height:1.2;
  color:var(--purple-900);
  margin-bottom:24px;
  letter-spacing:-0.01em;
}
.step-headline em{font-style:italic; color:var(--purple-600);}

/* ---------- Passo 1: escolha do serviço ---------- */
.search-bar{margin-bottom:18px;}
.search-input{
  width:100%;
  height:50px;
  padding:0 22px;
  border:1.5px solid var(--purple-100);
  border-radius:999px;
  background:var(--white);
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-input::placeholder{color:var(--ink-soft);}
.search-input:focus{
  outline:none;
  border-color:var(--green-500);
  box-shadow:0 0 0 4px rgba(78,132,100,.15);
}

.service-list{display:flex; flex-direction:column; gap:12px;}
.service-card{
  background:var(--white);
  border:1.5px solid var(--purple-100);
  border-radius:var(--radius-md);
  padding:18px 20px;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.service-card:hover{
  border-color:var(--purple-300);
  box-shadow:var(--shadow-soft);
}
.service-card.selected{
  border-color:var(--green-500);
  background:var(--green-100);
  box-shadow:0 0 0 3px rgba(78,132,100,.15);
}
.service-card-row{display:flex; align-items:center; gap:14px;}
.service-name{
  flex:1;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.1rem;
  color:var(--purple-900);
}
.service-price{
  font-weight:800;
  font-size:.95rem;
  color:var(--purple-700);
  white-space:nowrap;
}
.service-card.selected .service-price{color:var(--green-800);}
.service-check{
  width:26px; height:26px;
  flex-shrink:0;
  border-radius:50%;
  border:2px solid var(--purple-100);
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.service-card:hover .service-check{border-color:var(--purple-300);}
.service-card.selected .service-check{background:var(--green-700); border-color:var(--green-700);}
.service-check svg{display:none; stroke:#fff;}
.service-card.selected .service-check svg{display:block;}
.service-desc{
  margin-top:8px;
  font-size:.92rem;
  line-height:1.5;
  color:var(--ink-soft);
}
.service-desc:empty{display:none;}
.no-results{
  text-align:center;
  padding:36px 20px;
  background:var(--white);
  border:1px dashed var(--purple-300);
  border-radius:var(--radius-md);
  color:var(--ink-soft);
}

/* ---------- Passo 2: data, horário, dados do pet ---------- */
.service-pill{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  background:var(--purple-050);
  border:1px solid var(--purple-100);
  border-radius:999px;
  padding:10px 10px 10px 20px;
  margin-bottom:28px;
  font-size:.95rem;
}
.pill-name{font-weight:800; color:var(--purple-900);}
.pill-dot{width:4px; height:4px; border-radius:50%; background:var(--purple-300);}
.pill-price{color:var(--ink-soft); font-weight:600;}
.pill-change{
  margin-left:auto;
  border:none;
  background:var(--white);
  color:var(--purple-700);
  font-weight:700;
  font-size:.85rem;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--purple-100);
}
.pill-change:hover{background:var(--purple-100);}

.step2-grid{display:grid; gap:24px; margin-bottom:8px;}
@media (min-width:760px){
  .step2-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start;}
}
.dt-section{padding:0 0 12px;}
.dt-label{
  font-weight:800;
  font-size:.85rem;
  color:var(--purple-700);
  margin-bottom:10px;
}

.calendar{
  background:var(--white);
  border:1px solid var(--purple-100);
  border-radius:var(--radius-md);
  padding:18px;
  box-shadow:var(--shadow-soft);
}
.cal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cal-month{font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--purple-900);}
.cal-nav{display:flex; gap:8px;}
.cal-nav-btn{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--purple-100);
  background:var(--white);
  color:var(--purple-700);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.cal-nav-btn:hover{background:var(--purple-100);}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:6px;}
.cal-weekday{font-size:.75rem; font-weight:700; color:var(--ink-soft); padding:4px 0;}
.cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-day{
  position:relative;
  aspect-ratio:1;
  border:none;
  border-radius:50%;
  background:transparent;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.92rem;
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.cal-day.empty{visibility:hidden;}
.cal-day.past,
.cal-day.disabled{color:#C9BFD2; cursor:not-allowed;}
.cal-day:hover:not(.empty):not(.past):not(.disabled){background:var(--purple-100);}
.cal-day.today{box-shadow:inset 0 0 0 2px var(--purple-300);}
.cal-day.has-slots::before{
  content:"";
  position:absolute;
  bottom:5px;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--green-500);
}
.cal-day.selected{background:var(--green-700); color:var(--white); box-shadow:none;}
.cal-day.selected.has-slots::before{background:var(--white);}

.slots-wrap{animation:fadeIn .22s ease both;}
.slots-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px;}
.slot-btn{
  height:44px;
  border:1.5px solid var(--purple-100);
  border-radius:999px;
  background:var(--white);
  color:var(--purple-700);
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.slot-btn:hover{border-color:var(--green-500); background:var(--green-100);}
.slot-btn.selected{background:var(--green-700); border-color:var(--green-700); color:var(--white);}
.slots-loading{
  display:flex; align-items:center; gap:8px;
  padding:18px;
  color:var(--ink-soft);
  font-size:.92rem;
}
.slots-empty{
  text-align:center;
  padding:22px 16px;
  background:var(--white);
  border:1px dashed var(--purple-300);
  border-radius:var(--radius-md);
  color:var(--ink-soft);
  font-size:.92rem;
}
.slots-empty strong{display:block; color:var(--purple-900); margin-bottom:4px; font-family:var(--font-display); font-size:1.05rem;}
.slots-empty i{margin-right:6px; color:var(--purple-300);}

.pet-section,
.observations-section{margin:0 0 22px;}
.pet-input,
.observations-input{
  width:100%;
  border:1.5px solid var(--purple-100);
  border-radius:var(--radius-sm);
  background:var(--white);
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  padding:14px 16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pet-input{height:50px; padding:0 16px;}
.observations-input{resize:vertical; min-height:96px;}
.pet-input:focus,
.observations-input:focus{
  outline:none;
  border-color:var(--green-500);
  box-shadow:0 0 0 4px rgba(78,132,100,.15);
}
.pet-input::placeholder,
.observations-input::placeholder{color:#9A8FA3;}
.field-hint{display:block; margin-top:6px; font-size:.8rem; color:var(--ink-soft);}

/* ---------- Barra de ação (fixa no rodapé da área de conteúdo) ---------- */
.cta-bar{
  position:sticky;
  bottom:0;
  z-index:40;
  background:rgba(251,248,242,.94);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--purple-100);
  padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
}
.cta-bar-row{
  max-width:840px;
  margin:0 auto;
  display:flex;
  gap:12px;
}
.cta-btn{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 26px;
  border:none;
  border-radius:999px;
  background:var(--green-700);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  box-shadow:0 10px 24px -10px rgba(52,92,65,.55);
  transition:transform .18s ease, background .18s ease;
}
.cta-btn:hover:not(:disabled){background:var(--green-800); transform:translateY(-1px);}
.cta-btn:disabled{background:var(--purple-100); color:#A89BB5; box-shadow:none; cursor:not-allowed;}
.cta-btn--ghost{
  flex:0 0 auto;
  background:transparent;
  color:var(--purple-700);
  border:2px solid var(--purple-300);
  box-shadow:none;
  padding:13px 22px;
}
.cta-btn--ghost:hover:not(:disabled){background:var(--purple-100); transform:none;}
.cta-info{
  max-width:840px;
  margin:10px auto 0;
  text-align:center;
  font-size:.86rem;
  font-weight:600;
  color:var(--ink-soft);
}
.cta-btn--spaced{margin-top:16px; flex:0 0 auto;}

/* ---------- Passo 3: revisão ---------- */
.review-card{
  background:var(--white);
  border:1px solid var(--purple-100);
  border-radius:var(--radius-md);
  padding:20px 22px;
  margin-bottom:16px;
  box-shadow:var(--shadow-soft);
  animation:fadeUp .3s ease both;
}
.review-card h3{
  font-size:.82rem;
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--green-700);
  margin-bottom:6px;
}
.review-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid var(--purple-050);
}
.review-item:last-child{border-bottom:none;}
.review-label{color:var(--ink-soft); font-size:.9rem; font-weight:600;}
.review-value{color:var(--purple-900); font-weight:700; text-align:right; word-break:break-word;}
.review-value.price{color:var(--green-700);}
.review-value--muted{color:#9A8FA3; font-weight:600;}
.review-value--full{text-align:left; font-weight:500; color:var(--ink);}
.review-item--footer{border-bottom:none; padding-bottom:0;}
.review-label--hint{font-size:.82rem; font-weight:500;}
.review-label--hint i{margin-right:6px; color:var(--purple-300);}
.review-card--empty{text-align:center; padding:36px 22px;}
.review-empty-icon{font-size:1.8rem; color:var(--purple-300); margin-bottom:12px;}

.warning-box{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:var(--purple-050);
  border:1px solid var(--purple-100);
  border-radius:var(--radius-md);
  padding:16px 18px;
  margin:20px 0;
  color:var(--purple-700);
  font-size:.92rem;
  font-weight:600;
}
.warning-box i{margin-top:3px; color:var(--purple-600);}
.action-buttons{display:flex; gap:12px;}
.action-buttons .cta-btn{max-width:none;}

@media (max-width:480px){
  .shell{padding:22px 16px 20px;}
  .action-buttons{flex-direction:column-reverse;}
  .action-buttons .cta-btn--ghost{flex:1;}
  .review-item{flex-direction:column; gap:4px;}
  .review-value{text-align:left;}
}

@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}