/* ============================================================
   SERENZA · appointments.css
   Appointment rows, lists, and success icon.
   Requires colors_and_type.css (tokens).
   ============================================================ */

/* ---------- APPOINTMENT ROWS ---------- */
.sz-appointment-row {
  background: var(--paper-soft);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
}

.sz-appointment-row:hover {
  border-color: var(--sage-soft);
}

.sz-appointment-row .sz-btn--icon {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* ---------- APPOINTMENT LIST (summary) ---------- */
.sz-appointment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sz-appointment-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--paper-deep);
}

.sz-appointment-item__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: rgba(180, 154, 110, .12);
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sz-appointment-item__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---------- SUCCESS ICON ---------- */
.sz-success-icon {
  display: flex;
  justify-content: center;
  animation: sz-success-pop .4s ease-out;
}

@keyframes sz-success-pop {
  0% { transform: scale(.5); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: none; opacity: 1; }
}