/* Book Appointment page styles */
.book-section{padding-top:56px}
.book-grid{
  display:grid;grid-template-columns:1fr;gap:44px;align-items:start;
}
@media(min-width:880px){.book-grid{grid-template-columns:1fr 1.1fr;gap:60px}}

.book-info p{color:var(--gray)}
.visit-option{
  background:var(--sage-light);
  border-radius:var(--radius-lg);
  padding:22px 24px;margin-bottom:var(--sp-2);
}
.visit-option p{margin:0;font-size:.95rem}
.lang-note{font-family:var(--font-serif);font-size:1.3rem;color:var(--lavender-deep)}
.text-link{color:var(--sage-dark);font-weight:600}
.text-link:hover{text-decoration:underline}
.map{
  width:100%;height:280px;border:0;border-radius:var(--radius);
  box-shadow:var(--shadow);margin-top:18px;
}

/* Form */
.book-form{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFAFD 100%);
  border-radius:var(--radius-lg);
  border:1px solid rgba(58,63,68,.07);
  padding:34px 30px;
  box-shadow:var(--shadow-lg);
  border-top:5px solid var(--sage);
}
.book-form h2{font-size:1.5rem}
.hp{display:none}
.field{margin-bottom:16px}
.field label{
  display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;
  transition:color .18s ease;
}
.field:focus-within label{color:var(--sage-dark)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;
  border:1.5px solid var(--lavender);
  border-radius:8px;font-size:1rem;font-family:var(--font-sans);
  min-height:48px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:90px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(124,148,115,.15);
}

/* Valid entry — quiet checkmark appended to the label, no layout shift */
.field.is-valid label::after{
  content:"✓";
  display:inline-block;
  margin-left:6px;
  color:var(--sage-dark);
  font-weight:700;
  animation:pop-in .25s ease;
}
.field.is-valid input,.field.is-valid select,.field.is-valid textarea{border-color:var(--sage)}

/* Invalid entry — red border with a brief shake */
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
  border-color:#C0453D;
  animation:field-shake .4s ease;
}
@keyframes field-shake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}

/* Shared error banner, revealed smoothly when validation fails */
.form-error{
  color:#C0453D;font-size:.88rem;font-weight:600;
  text-align:center;
  max-height:0;opacity:0;overflow:hidden;margin:0;
  transition:max-height .3s ease,opacity .3s ease,margin .3s ease;
}
.form-error.show{max-height:40px;opacity:1;margin:0 0 14px}

.btn-full{width:100%}
.form-note{
  text-align:center;color:var(--gray);
  font-size:.8rem;margin:12px 0 0;
}

@media(prefers-reduced-motion:reduce){
  .field.is-valid label::after{animation:none}
  .field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{animation:none}
}

/* FAQs */
.faq-section{background:var(--lavender-bg)}
.narrow{max-width:760px}
.faq-section details{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFAFD 100%);
  border-radius:var(--radius-lg);
  border:1px solid rgba(58,63,68,.07);
  padding:20px 22px;margin-bottom:var(--sp-2);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease,transform .2s ease;
}
.faq-section details:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.faq-section summary{
  cursor:pointer;font-weight:600;font-size:1.02rem;
  min-height:32px;
}
.faq-section details p{color:var(--gray);margin:12px 0 0}