/* V21.31 — session names on slot buttons, the DP/Lunas choice, and the payment
   portal's countdown, transfer card and step rail. */

.slot-session-name-v2131{
  display:block;
  font:700 9.5px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a7346;
  font-style:normal;
  margin-bottom:2px;
  overflow-wrap:anywhere;
}
.slot-button.selected .slot-session-name-v2131{color:#6d5a33}

/* Booking sidebar — DP or full payment, chosen before the booking is created. */
.payment-plan-choice-v2131{
  border:1px solid #e0d3b8;
  border-radius:13px;
  background:#fdfaf3;
  padding:14px 16px 12px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.payment-plan-choice-v2131>legend{
  padding:0 6px;
  font:700 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.2em;
  color:#8a7346;
  text-transform:uppercase;
}
.payment-plan-choice-v2131>label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid #e6dac0;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  min-height:44px;
}
.payment-plan-choice-v2131>label.is-active-v2131{border-color:#8a7346;box-shadow:0 0 0 1px #8a7346 inset}
.payment-plan-choice-v2131 input[type=radio]{margin-top:2px;width:18px;height:18px;flex:0 0 auto;accent-color:#8a7346}
.payment-plan-choice-v2131 span{display:flex;flex-direction:column;gap:2px;min-width:0}
.payment-plan-choice-v2131 b{font:600 14px/1.35 Inter,Arial,sans-serif;color:#2c2418}
.payment-plan-choice-v2131 i{font-style:normal;font:700 16px/1.2 Inter,Arial,sans-serif;color:#2c2418}
.payment-plan-choice-v2131 small{font-size:11.5px;line-height:1.5;color:#7d6e56}
.payment-plan-choice-v2131>p{margin:2px 0 0;font-size:11.5px;line-height:1.5;color:#8b8270}
.payment-plan-choice-v2131[disabled]{opacity:.6}

/* Payment portal — the deadline and the three steps read first, on any width. */
.payment-portal-top-v2131{grid-column:1/-1;display:block}

/* Payment portal — three steps, so a rider always knows what is still missing. */
.payment-steps-v2131{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
  padding:0;
}
.payment-steps-v2131 li{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 150px;
  padding:9px 12px;
  border:1px solid #e6dac0;
  border-radius:999px;
  background:#fff;
  color:#8b8270;
  font-size:12px;
  line-height:1.3;
  min-width:0;
}
.payment-steps-v2131 li b{
  flex:0 0 auto;
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#efe6d4;
  color:#8a7346;
  font:700 11px/1 Inter,Arial,sans-serif;
}
.payment-steps-v2131 li.is-active-v2131{border-color:#8a7346;color:#2c2418}
.payment-steps-v2131 li.is-active-v2131 b{background:#8a7346;color:#fff}
.payment-steps-v2131 li.is-done-v2131{border-color:#a9c2a2;color:#4d6b49;background:#f4f8f2}
.payment-steps-v2131 li.is-done-v2131 b{background:#4d6b49;color:#fff}

.payment-countdown-v2131{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  margin:0 0 16px;
  border:1px solid #d9c49a;
  border-radius:12px;
  background:#fdf6e8;
}
.payment-countdown-v2131>svg{flex:0 0 auto;margin-top:2px;color:#8a7346}
.payment-countdown-v2131 div{display:flex;flex-direction:column;gap:3px;min-width:0}
.payment-countdown-v2131 b{font:600 14px/1.35 Inter,Arial,sans-serif;color:#2c2418}
.payment-countdown-v2131 time{font-variant-numeric:tabular-nums;font-weight:700}
.payment-countdown-v2131 small{font-size:11.5px;line-height:1.5;color:#7d6e56}
.payment-countdown-v2131.is-urgent-v2131{border-color:#c58a3d;background:#fdf0dd}
.payment-countdown-v2131.is-expired-v2131{border-color:#c07a72;background:#fbeeec}
.payment-countdown-v2131.is-expired-v2131>svg{color:#a4514a}
.payment-countdown-v2131.is-expired-v2131 b{color:#8c3f39}

/* Where to transfer — this used to live only in the booking modal. */
.payment-transfer-v2131{
  margin-top:16px;
  padding:14px;
  border:1px solid #e6dac0;
  border-radius:12px;
  background:#fdfaf3;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.payment-transfer-v2131>span{
  font:700 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.2em;
  color:#8a7346;
}
.payment-bank-v2131{display:flex;flex-direction:column;gap:5px}
.payment-bank-v2131>b{font:600 14px/1.3 Inter,Arial,sans-serif;color:#2c2418}
.payment-bank-v2131 small{font-size:11.5px;color:#7d6e56}
.payment-account-v2131{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.payment-account-v2131 code{
  font:700 17px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
  color:#2c2418;
  overflow-wrap:anywhere;
}
.payment-account-v2131 button{
  min-height:34px;
  padding:6px 14px;
  border:1px solid #d9c49a;
  border-radius:999px;
  background:#fff;
  color:#8a7346;
  font:700 11px/1 Inter,Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.payment-qris-v2131{display:flex;flex-direction:column;gap:6px}
.payment-qris-v2131 img{max-width:200px;width:100%;border-radius:10px;border:1px solid #e6dac0;background:#fff}
.payment-qris-v2131 small{font-size:11.5px;color:#7d6e56}
.payment-amount-due-v2131{margin:0;font-size:12.5px;color:#7d6e56}
.payment-amount-due-v2131 b{display:block;font:700 20px/1.2 Inter,Arial,sans-serif;color:#2c2418}
.payment-transfer-v2131>p{margin:0;font-size:11.5px;line-height:1.55;color:#8b8270}

.payment-confirm-v2131{margin-top:14px;justify-content:center}
.payment-links-v2131{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #ece3d2;
}
.payment-links-v2131 a{font-size:12px;color:#8a7346;text-decoration:underline}

@media (max-width:640px){
  .payment-plan-choice-v2131{padding:12px 12px 10px}
  .payment-steps-v2131 li{flex:1 1 100%}
  .payment-account-v2131 code{font-size:15px}
}

/* /jadwal — the same session name the admin configured. */
.schedule-session-name-v2131{
  display:block;
  font:700 9.5px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a7346;
  font-style:normal;
  margin-bottom:3px;
}

/* The summary rows carry longer values now (session name, date, time), so the
   label keeps its own line rather than breaking mid-word. */
.payment-summary-card>div{gap:12px;align-items:baseline}
.payment-summary-card>div>small{flex:0 0 auto;white-space:nowrap}
.payment-summary-card>div>b{text-align:right;overflow-wrap:anywhere}