/* ===============================
   STEP 5 – ORDER SUMMARY WRAPPER
=============================== */

/* .bpabfb-step-content.bpabfb-step-5 {
  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-5.bg-white {
  background: var(--gradient-card);
} */

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

/* scroll wrapper */
.bpabfb-step-5 .maintant-height {
  overflow-y: visible;
}

/* ===============================
   BOOK DETAILS BLOCK
=============================== */

.bpabfb-step-5 .border.rounded.p-4.mb-4 {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bb-border-color);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

/* grid */
.bpabfb-book-details.grid.grid-cols-1.md\:grid-cols-2.gap-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .bpabfb-book-details.grid.grid-cols-1.md\:grid-cols-2.gap-1 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===============================
   SERVICE LIST WRAPPER (scroll)
=============================== */

.bpabfb-step-5 .h-\[196px\].overflow-y-auto.pr-2 {
  max-height: 196px;
  overflow-y: auto;
  padding-right: 6px;
}

/* ===============================
   “SERVICE DETAILS” TITLE
=============================== */

.bpabfb-step-5 .summary .mb-4 {
  margin-bottom: 16px;
}

.bpabfb-step-5 .summary h4.text-\[18px\].font-semibold.text-gray-700.mb-2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-heading);
}

/* ===============================
   EACH SERVICE ITEM CARD
=============================== */

.bpabfb-summary-services
  .flex.justify-between.items-center.bg-gray-50.rounded.p-3.mb-2.shadow-sm.hover\:shadow-md.transition-shadow.duration-200 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);

  background: var(--color-surface);
  border: 1px solid var(--bb-border-color);
  box-shadow: var(--shadow-sm);

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

.bpabfb-summary-services
  .flex.justify-between.items-center.bg-gray-50.rounded.p-3.mb-2.shadow-sm.hover\:shadow-md.transition-shadow.duration-200:hover {
  background: var(--gradient-card);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* name */
.bpabfb-summary-services h4.text-sm.text-gray-900 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-heading);
}

/* qty / duration text */
.bpabfb-summary-services p.text-sm.text-gray-500 {
  margin: 0;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-body);
}

/* price */
.bpabfb-summary-services span.text-md.font-semibold.text-amber-600 {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-500);
}

/* ===============================
   COUPON PANEL
=============================== */

.bpabfb-step-5 .border.p-2.rounded.mb-3.col-span-2 {
  border-radius: var(--radius-md);
  border: 1px solid var(--bb-border-color);
  padding: 10px 12px;
  margin-bottom: 0px;
  background: var(--color-surface);
}

/* header */
.bpabfb-step-5
  .border.p-2.rounded.mb-3.col-span-2
  .flex.justify-between.items-center.cursor-pointer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* label */
.bpabfb-step-5
  .border.p-2.rounded.mb-3.col-span-2
  span.text-xs.text-gray-700.font-medium {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-body);
}

/* caret */
.bpabfb-step-5 .bpabfb-coupon-caret {
  width: 18px;
  height: 18px;
  color: var(--color-body);
}

/* inner section */
.bpabfb-step-5 .bpabfb-coupon-section {
  margin-top: 10px;
}

/* input row */
.bpabfb-step-5 .bpabfb-coupon-section .flex.justify-between.items-center {
  display: flex;
  align-items: stretch;
}

/* coupon input */
.bpabfb-step-5 .bpabfb-coupon {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border: 1px solid var(--bb-border-color);
  font-size: 13px;
  background: var(--color-surface);
  color: var(--color-heading);
  outline: none;

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

/* Light theme input fix */
:root[data-theme="light"] .bpabfb-step-5 .bpabfb-coupon {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
}

/* focus */
.bpabfb-step-5 .bpabfb-coupon:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(178, 134, 71, 0.35);
}

/* APPLY BTN */
.bpabfb-step-5 .bpabfb-apply-coupon-btn {
  padding: 0 16px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;

  background: var(--brand-gradient);
  color: #111;

  white-space: nowrap;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.bpabfb-step-5 .bpabfb-apply-coupon-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}

/* ===============================
   BARBER SUMMARY
=============================== */

.bpabfb-step-5 .barber-summary.border.p-2.rounded.mb-3.col-span-2 {
  display: flex;
  align-items: center;

  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--bb-border-color);
}

/* barber pic */
.bpabfb-step-5 .barber-summary img {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* barber name */
.bpabfb-step-5 .barber-summary h2.text-lg.font-semibold.text-gray-800 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-heading);
}

/* barber email */
.bpabfb-step-5 .barber-summary p.text-sm.text-gray-600 {
  margin: 0;
  font-size: 12px;
  color: var(--color-body);
}

/* ===============================
   CUSTOMER / BOOKING INFO
=============================== */

.bpabfb-step-5
  h2.text-sm.text-gray-500.uppercase.mb-3.border-b.font-semibold.pb-1 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-body);
  border-bottom: 1px solid var(--bb-border-color);
}

/* info lines */
.bpabfb-step-5 .text-sm.text-gray-600 {
  font-size: 13px;
  color: var(--color-body);
}

.bpabfb-step-5 .text-sm.text-gray-700 {
  font-size: 13px;
  color: var(--color-heading);
}

/* ===============================
   TOTAL / DISCOUNT BOX
=============================== */

.bpabfb-step-5 .bg-gray-50.p-3.rounded {
  margin-top: 0px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--bb-border-color);
}

/* text inside total block */
.bpabfb-step-5 .bg-gray-50.p-3.rounded .text-sm.text-gray-700 {
  font-size: 13px;
  color: var(--color-heading);
}

/* discount row */
.bpabfb-step-5
  .bg-gray-50.p-3.rounded
  .text-sm.text-gray-700.mb-1.border-b.py-2 {
  border-bottom: 1px solid var(--bb-border-color);
  padding: 8px 0;
}

/* ===============================
   COUPON NAME (final bottom)
=============================== */

.bpabfb-step-5 .mt-4.col-span-2 p.text-base.font-medium.text-gray-800 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-heading);
}

.bpabfb-step-5 .mt-4.col-span-2 h3.text-base.font-semibold.text-green-600 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-success);
}

/* load error */
.bpabfb-step-5 .text-red-500 {
  font-size: 13px;
  color: var(--color-danger);
}