/* ========================================
   Consultation Booking Page
   ======================================== */
.consult-hero { text-align: center; padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl); background: linear-gradient(160deg, #f0f6ff 0%, #f9f0ff 100%); border-bottom: 1px solid var(--color-border); }
.consult-hero h1 { font-size: var(--font-size-3xl); font-weight: 800; margin-bottom: var(--spacing-md); word-break: keep-all; }
.consult-hero p  { font-size: var(--font-size-lg); color: var(--color-text-sub); }

/* Step indicator */
.consult-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: var(--spacing-2xl); }
.consult-step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.consult-step-circle {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--color-border);
  background: var(--color-white); display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm); font-weight: 800; color: var(--color-text-weak); transition: all var(--transition-base);
}
.consult-step-circle.active  { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.consult-step-circle.done    { background: #16a34a; border-color: #16a34a; color: var(--color-white); }
.consult-step-label { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-weak); white-space: nowrap; }
.consult-step-label.active { color: var(--color-primary); }
.consult-step-line { width: 60px; height: 2px; background: var(--color-border); margin-bottom: 22px; }
.consult-step-line.done { background: #16a34a; }

/* Form card */
.consult-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-2xl); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); max-width: 640px; margin: 0 auto; }
.consult-card-title { font-size: var(--font-size-2xl); font-weight: 800; margin-bottom: var(--spacing-sm); color: var(--color-text-main); }
.consult-card-desc  { font-size: var(--font-size-md); color: var(--color-text-sub); margin-bottom: var(--spacing-xl); line-height: 1.6; }

/* Type selection */
.consult-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-xl); }
.consult-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--spacing-md); border: 2px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-white); cursor: pointer;
  font-family: var(--font-family); text-align: center; transition: all var(--transition-base);
}
.consult-type-btn:hover { border-color: var(--color-primary); background: rgba(49,130,246,0.03); }
.consult-type-btn.selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.consult-type-icon { font-size: 36px; line-height: 1; }
.consult-type-label { font-size: var(--font-size-md); font-weight: 700; color: var(--color-text-main); }
.consult-type-desc  { font-size: var(--font-size-xs); color: var(--color-text-weak); word-break: keep-all; line-height: 1.5; }

/* Date/Time grid */
.consult-section-label { font-size: var(--font-size-md); font-weight: 700; color: var(--color-text-main); margin-bottom: var(--spacing-md); margin-top: var(--spacing-xl); display: block; }
.date-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.date-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-white); cursor: pointer; font-family: var(--font-family); transition: all var(--transition-base);
}
.date-btn:hover { border-color: var(--color-primary); }
.date-btn.selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.date-btn.disabled { opacity: 0.35; cursor: not-allowed; background: var(--color-surface); }
.date-day  { font-size: var(--font-size-xs); color: var(--color-text-weak); font-weight: 600; }
.date-num  { font-size: var(--font-size-lg); font-weight: 800; color: var(--color-text-main); }
.date-btn.selected .date-num { color: var(--color-primary); }

.time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.time-btn {
  padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-white); font-size: var(--font-size-sm); font-weight: 600;
  color: var(--color-text-sub); cursor: pointer; font-family: var(--font-family); transition: all var(--transition-base);
}
.time-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.time-btn.selected { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }
.time-btn.disabled { opacity: 0.35; cursor: not-allowed; }

/* Info form */
.consult-form { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.consult-form-group { display: flex; flex-direction: column; gap: 6px; }
.consult-form-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-main); }
.consult-form-label .req { color: var(--color-error); }
.consult-form-input, .consult-form-select, .consult-form-textarea {
  padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--font-size-md); font-family: var(--font-family); color: var(--color-text-main);
  background: var(--color-white); transition: border-color var(--transition-base);
}
.consult-form-input:focus, .consult-form-select:focus, .consult-form-textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(49,130,246,0.1);
}
.consult-form-textarea { resize: vertical; min-height: 80px; }

/* Summary box */
.consult-summary { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
.consult-summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-md); }
.consult-summary-row:last-child { border-bottom: none; }
.consult-summary-key   { color: var(--color-text-weak); font-weight: 600; }
.consult-summary-value { color: var(--color-text-main); font-weight: 700; }

/* Nav buttons */
.consult-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-xl); }
.consult-btn-prev { padding: 12px 24px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-white); font-size: var(--font-size-md); font-weight: 600; color: var(--color-text-sub); cursor: pointer; font-family: var(--font-family); transition: all var(--transition-base); }
.consult-btn-prev:hover { background: var(--color-surface); }
.consult-btn-next { padding: 14px 36px; border-radius: var(--radius-full); border: none; background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-md); font-weight: 700; cursor: pointer; font-family: var(--font-family); transition: all var(--transition-base); }
.consult-btn-next:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.consult-btn-next:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Done */
.consult-done { text-align: center; }
.consult-done-icon { font-size: 64px; display: block; margin-bottom: var(--spacing-lg); animation: donePop 0.5s cubic-bezier(.4,0,.2,1); }
@keyframes donePop { 0%{transform:scale(0.5);opacity:0} 70%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
.consult-done h2 { font-size: var(--font-size-2xl); font-weight: 800; margin-bottom: var(--spacing-md); }
.consult-done p  { font-size: var(--font-size-md); color: var(--color-text-sub); line-height: 1.7; word-break: keep-all; }
.consult-done .highlight { color: var(--color-primary); font-weight: 700; }

/* trust badges */
.consult-trust { display: flex; gap: var(--spacing-lg); justify-content: center; flex-wrap: wrap; margin: var(--spacing-2xl) 0; }
.consult-trust-item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); color: var(--color-text-weak); font-weight: 600; }
.consult-trust-icon { font-size: 20px; }

@media (max-width: 767px) {
  .consult-type-grid { grid-template-columns: 1fr; }
  .date-grid  { grid-template-columns: repeat(4, 1fr); }
  .time-grid  { grid-template-columns: repeat(3, 1fr); }
  .consult-hero h1 { font-size: var(--font-size-2xl); }
  .consult-step-line { width: 32px; }
}