/* ===============================
   BARBERS STEP (STEP 2)
=============================== */

/* .bpabfb-step-content.bpabfb-step-2 {
  background: var(--gradient-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--bb-border-color);
  padding: 28px;
  box-shadow: var(--shadow-card);
  color: var(--color-heading);
  width: 100%;
  height: auto;
}

.bpabfb-step-content.bpabfb-step-2.bg-white {
  background: var(--gradient-card);
} */

.bpabfb-step-2 .bpabfb-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 22px;
  color: var(--color-heading);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Info box */
.bpabfb-step-2 .bg-green-100.border.border-green-300.rounded {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bb-border-color);
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.bpabfb-step-2 .text-sm.text-gray-600 {
  margin: 0;
  font-size: 13px;
  color: var(--color-body);
}

/* Barber grid */
.bpabfb-barbers.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .bpabfb-barbers.grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Barber card */
.bpabfb-barber-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bb-border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;

  transition: background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.bpabfb-barber-card:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* selected */
.bpabfb-barber-card.isBarber,
.bpabfb-barber-card.active {
  border-color: var(--brand-500);
  background: rgba(178, 134, 71, 0.12);
  box-shadow: 0 12px 30px rgba(178, 134, 71, 0.18);
}

/* name */
.bpabfb-barber-card strong.text-sm {
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
  color: var(--color-heading);
}

/* email */
.bpabfb-barber-card .text-xs.text-gray-500 {
  font-size: 12px;
  margin-top: 2px;
  color: var(--color-body);
  opacity: 0.8;
}

/* one-line clamp */
.single-line-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* image */
.bpabfb-barber-card img {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
  object-position: top;

  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.05);
}

/* ================================
   BARBER CARD — SELECTED STATE
=============================== */

.bpabfb-barber-card.is-selected {
  border-color: var(--brand-500) !important;
  background: rgba(178, 134, 71, 0.12) !important;
  box-shadow: 0 14px 32px rgba(178, 134, 71, 0.22) !important;

  transform: translateY(-2px);
}

.bpabfb-barber-card.is-selected strong {
  color: var(--color-heading) !important;
}

.bpabfb-barber-card.is-selected .text-xs {
  color: var(--color-body) !important;
}