/* ============================================================
   SERVICES STEP (STEP 3)
============================================================ */

/* Total duration card */
.bpabfb-step-3 .flex.items-center.justify-between.bg-green-50 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 24px;
  border-radius: 20px;
  background: var(--gradient-card);
  border: 1px solid var(--bb-border-color);
  /* box-shadow: var(--shadow-card); */
}

/* Left icon + text */
.bpabfb-step-3 .flex.items-center.gap-4 {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Clock icon circle */
.bpabfb-step-3 .bg-green-100.text-green-700.rounded-full.w-12.h-12 {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--color-surface);
  color: var(--color-heading);
  opacity: 0.85;
}

/* Title text */
.bpabfb-step-3 h4.text-gray-800 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-heading);
}

/* Subtitle text */
.bpabfb-step-3 p.text-xs.text-gray-500 {
  margin: 0;
  font-size: 11px;
  color: var(--color-body);
  opacity: 0.8;
}

/* Right total label */
.bpabfb-step-3 .text-right {
  text-align: right;
}

.bpabfb-step-3 .text-lg.font-bold.text-green-700 {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-500);
}

.bpabfb-total-duration {
  font-variant-numeric: tabular-nums;
}

/* Service grid wrapper */
.bpabfb-service-grid.grid.grid-cols-1.gap-4 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* JS generated service card */
.flex.items-center.justify-between.bg-white.border.border-amber-400.rounded.p-4.shadow.hover\:shadow-md.transition.duration-200.mb-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--gradient-card);
  border: 1px solid var(--bb-border-color);
  /* box-shadow: var(--shadow-card); */
}

/* Left side layout: image + text */
.flex.items-start.gap-3 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Service image */
.bbap-service-image.mt-1.rounded {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid transparent;
  padding: 1px;
  background: var(--brand-gradient);
}

/* Placeholder icon */
.bg-amber-100.text-amber-500.rounded-full.w-10.h-10.flex.items-center.justify-center.text-lg.mt-1 {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--brand-500);
  opacity: 0.85;
}

/* Service name */
.text-gray-800.font-semibold.text-base.mb-1.mt-1 {
  margin: 2px 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-heading);
}

/* Price row */
.text-gray-500.text-xs.mt-1 {
  margin: 0;
  font-size: 11px;
  color: var(--color-body);
  opacity: 0.8;
}

/* Price accent */
.text-amber-500 {
  color: var(--brand-500);
}

/* Qty section */
.flex.items-center.gap-md-3.mt-2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 16px;
}

/* +/- BUTTONS */
.btn-decrement.bg-amber-200.text-amber-700.rounded.w-7.h-7.text-center.text-sm.font-bold,
.btn-increment.bg-amber-200.text-amber-700.rounded.w-7.h-7.text-center.text-sm.font-bold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  background: var(--brand-gradient);
  color: #111;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.btn-decrement:hover,
.btn-increment:hover {
  transform: translateY(-1px);
  opacity: 0.96;
  box-shadow: var(--shadow-lg);
}

.btn-decrement:active,
.btn-increment:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: var(--shadow-sm);
}

/* Quantity number */
.quantity-display.text-sm.font-medium.w-6.text-center.mx-2 {
  min-width: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-heading);
}

.service-card-disabled:hover {
  box-shadow: none;
  transform: none;
}
/* unavailable message */
.service-unavailable-message {
  font-size: 11px;
  color: #dc2626; /* red */
  margin: 2px 0;
}
/* disabled +/- buttons */
.btn-quantity-disabled,
.btn-quantity:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}