/* Checkout (business/checkout.js) and the booking details bar it opens from.
   The window is the Modify window's sibling: same white sheet, 14px cards,
   Figtree, the dark main button, numbers that count and pop as they change. */

/* ---------------------------------------------------------------- bar ---- */
/* Every button in plain sight: the status buttons on the left, then Gap time,
   Modify and Checkout (alike: an icon and a word, no fill) and Cancel. */
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-bar-gap { flex: 1 1 0; min-width: 0; height: 0; }
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > :is(.rl-booking-tool, button[data-status="cancelled"]):not(#rl) { margin-left: 0 !important; }
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-tool:not([disabled]):not(#rl) {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding-inline: 12px 14px !important;
  border-color: transparent !important;
  color: #26332e !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-tool:not([disabled]):not(#rl):hover {
  color: #16201c !important;
  background: #f1f4f3 !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-tool:not([disabled]):not(#rl):focus-visible {
  outline: 2px solid #1f6b52;
  outline-offset: 2px;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-checkout-button.is-paid:not([disabled]):not(#rl) { color: #1f6b52 !important; }
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-checkout-button.is-due:not([disabled]):not(#rl) { color: #8a5a00 !important; }
body.pro-mode .rl-booking-tool > svg { width: 16px; height: 16px; flex: none; }
body.pro-mode .rl-booking-checkout-button.is-popping { animation: rl-checkout-button-pop 520ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-booking-checkout-button.is-popping > svg { animation: rl-checkout-check-draw 520ms ease both; }

/* Undoing what the appointment already is (Unconfirm, Undo no-show, Reopen):
   filled in that status's colour, as a button that is on. */
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-undo:not([disabled]):not(#rl) {
  --rl-undo: #1f8a5b;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding-inline: 12px 16px !important;
  border-color: var(--rl-undo) !important;
  color: #fff !important;
  background: var(--rl-undo) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--rl-undo) 28%, transparent) !important;
  animation: rl-booking-undo-on 360ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-undo.status-no_show:not([disabled]):not(#rl) { --rl-undo: #c2414b; }
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-undo.status-completed:not([disabled]):not(#rl) { --rl-undo: #4f5d66; }
body.pro-mode .business-team-drawer .business-calendar-booking-actions .rl-booking-bar > .rl-booking-undo:not([disabled]):not(#rl):hover {
  border-color: color-mix(in srgb, var(--rl-undo) 82%, #000) !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--rl-undo) 82%, #000) !important;
}
body.pro-mode .rl-booking-undo > .rl-status-shape:not(#rl) { --rl-status-color: #fff; width: 14px; height: 14px; }
@keyframes rl-booking-undo-on {
  0% { transform: scale(.92); filter: saturate(.4); }
  60% { transform: scale(1.04); }
  100% { transform: none; filter: none; }
}

/* The appointment's own card: what was paid, beside what it was booked at. */
body.pro-mode .rl-booking-detail-paid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e3e7e4;
  font-size: .84rem;
  color: #3a4741;
}
body.pro-mode .rl-booking-detail-paid > span { display: inline-flex; align-items: center; gap: 6px; color: #626b79; }
body.pro-mode .rl-booking-detail-paid > span > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1f8a5b;
}
body.pro-mode .rl-booking-detail-paid.is-due > span > i { background: #e0a100; }
body.pro-mode .rl-booking-detail-paid > strong { font-weight: 700; font-variant-numeric: tabular-nums; color: #0b0e17; }
body.pro-mode .rl-booking-detail-paid > strong > small { margin-left: 6px; font-weight: 600; color: #8a948f; }

/* -------------------------------------------------------------- window -- */
body.pro-mode .business-modal-layer.rl-checkout-layer { z-index: 1240; padding: 24px; }
body.pro-mode .business-modal.rl-checkout-modal:not(#rl) {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #e9edf0;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgb(22 32 28 / 14%);
}
body.pro-mode .rl-checkout-layer.is-opening > .business-modal-backdrop { animation: rl-checkout-fade 280ms ease both; }
body.pro-mode .rl-checkout-layer.is-opening > .rl-checkout-modal { animation: rl-checkout-rise 320ms cubic-bezier(.2, .8, .2, 1) both; }
body.pro-mode .rl-checkout-layer.is-closing > .business-modal-backdrop { animation: rl-checkout-fade 220ms ease reverse both; }
body.pro-mode .rl-checkout-layer.is-closing > .rl-checkout-modal { animation: rl-checkout-sink 220ms ease both; }
/* Open, it plays nothing: every dialog's own entrance (schedule-calendar.css)
   would otherwise run again the moment is-opening comes off, a second
   appearance that read as a blink. */
body.pro-mode .rl-checkout-layer:not(.is-opening):not(.is-closing) > :is(.business-modal-backdrop, .rl-checkout-modal) { animation: none; }

body.pro-mode .rl-checkout-head:not(#rl) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 22px 28px 14px;
}
body.pro-mode .rl-checkout-head > div { flex: 1; min-width: 0; }
body.pro-mode .rl-checkout-head h2 {
  margin: 0;
  font: 650 28px/1.15 Figtree, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.7px;
  color: #0b0e17;
}
body.pro-mode .rl-checkout-head p { margin: 3px 0 0; font-size: 14px; color: #626b79; }
body.pro-mode .rl-checkout-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #7a5308;
  background: #fdf7e6;
  animation: rl-checkout-pop 300ms cubic-bezier(.34, 1.56, .64, 1) both;
}
body.pro-mode .rl-checkout-state.is-paid { color: #1f6b52; background: #e6f5ee; }
body.pro-mode .rl-checkout-state > svg { width: 14px; height: 14px; }
body.pro-mode .rl-checkout-head > .icon-button { flex: none; }
body.pro-mode .rl-checkout-head > .icon-button > svg { width: 18px; height: 18px; }

body.pro-mode .rl-checkout-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 28px 24px; overscroll-behavior: contain; }
body.pro-mode .rl-checkout-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  transition: opacity 200ms ease;
}
body.pro-mode .rl-checkout-columns.is-loading { opacity: .55; pointer-events: none; }
body.pro-mode .rl-checkout-column { display: grid; gap: 14px; min-width: 0; }
body.pro-mode .rl-checkout-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #e3e7e4;
  border-radius: 14px;
  background: #fff;
}
body.pro-mode .rl-checkout-card > h3:not(#rl) {
  margin: 0 0 4px !important;
  font-size: 10.24px !important;
  font-weight: 820 !important;
  line-height: 1.4 !important;
  letter-spacing: .72px !important;
  text-transform: uppercase;
  color: #626b79 !important;
}

/* Lines */
body.pro-mode .rl-checkout-lines { display: grid; margin: 0; padding: 0; list-style: none; }
body.pro-mode .rl-checkout-line { padding: 11px 0; border-top: 1px solid #eef1ef; }
body.pro-mode .rl-checkout-line:first-child { border-top: 0; }
body.pro-mode .rl-checkout-line.is-new { animation: rl-checkout-pop 380ms cubic-bezier(.34, 1.56, .64, 1) both; }
body.pro-mode .rl-checkout-line.is-leaving { animation: rl-checkout-leave 180ms ease both; pointer-events: none; }
body.pro-mode .rl-checkout-line-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.pro-mode .rl-checkout-line-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
body.pro-mode .rl-checkout-line-copy > strong { overflow: hidden; font-size: 15px; font-weight: 700; color: #0b0e17; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-checkout-line-copy > small { overflow: hidden; font-size: 12.5px; color: #626b79; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-checkout-line-price { display: grid; justify-items: end; gap: 1px; }
body.pro-mode .rl-checkout-booked { font-size: 12px; color: #9aa39f; font-variant-numeric: tabular-nums; animation: rl-checkout-pop 260ms ease both; }
body.pro-mode .rl-checkout-line-tools { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 34px; }

body.pro-mode .rl-checkout-money:not(#rl) {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #e3e7e4;
  border-radius: 10px;
  background: #fbfcfb;
  cursor: text;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
body.pro-mode .rl-checkout-money:focus-within { border-color: #16201c; background: #fff; box-shadow: 0 0 0 3px rgb(22 32 28 / 8%); }
body.pro-mode .rl-checkout-money.is-invalid { border-color: #e6b8bc; background: #fdf1f2; }
body.pro-mode .rl-checkout-currency { font-size: 14px; font-weight: 600; color: #8a948f; }
body.pro-mode .rl-checkout-money input:not(#rl),
body.pro-mode .rl-checkout-adjust-input input:not(#rl),
body.pro-mode .rl-checkout-search-field input:not(#rl) {
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0b0e17;
  font: inherit;
}
body.pro-mode .rl-checkout-money input:not(#rl) {
  width: 68px;
  font-size: 15px;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.pro-mode .rl-checkout-payment-amount .rl-checkout-money input:not(#rl) { width: 104px; }

body.pro-mode .rl-checkout-tool:not(#rl),
body.pro-mode .rl-checkout-remove:not(#rl) {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 1px solid #e3e7e4;
  border-radius: 999px;
  color: #626b79;
  background: #fff;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 200ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-checkout-tool:hover:not(#rl) { color: #16201c; border-color: #cfd8d3; }
body.pro-mode .rl-checkout-tool:active:not(#rl), body.pro-mode .rl-checkout-remove:active:not(#rl) { transform: scale(.92); }
body.pro-mode .rl-checkout-tool > svg { width: 16px; height: 16px; }
body.pro-mode .rl-checkout-tool.is-done:not(#rl) { color: #fff; border-color: #16201c; background: #16201c; }
body.pro-mode .rl-checkout-chip:not(#rl) {
  height: 26px;
  min-height: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  animation: rl-checkout-pop 300ms cubic-bezier(.34, 1.56, .64, 1) both;
}
body.pro-mode .rl-checkout-chip.is-discount:not(#rl) { color: #b4502e; background: #fdf0eb; }

body.pro-mode .rl-checkout-line-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px 8px 12px;
  border-radius: 11px;
  background: #f5f7f6;
  font-size: 13px;
  font-weight: 650;
  color: #3a4741;
  animation: rl-checkout-drop 200ms cubic-bezier(.2, .8, .2, 1) both;
}
body.pro-mode .rl-checkout-line-editor > span:first-child { flex: 1; }

body.pro-mode .rl-checkout-adjust-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 4px 0 3px;
  border: 1px solid #e3e7e4;
  border-radius: 10px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.pro-mode .rl-checkout-adjust-input:focus-within { border-color: #16201c; box-shadow: 0 0 0 3px rgb(22 32 28 / 8%); }
body.pro-mode .rl-checkout-adjust-input input:not(#rl) { width: 54px; font-size: 14px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-checkout-kind { display: inline-flex; padding: 2px; border-radius: 8px; background: #f2f4f3; }
body.pro-mode .rl-checkout-kind > button:not(#rl) {
  width: 26px;
  min-width: 0;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 750;
  color: #8a948f;
  background: transparent;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
body.pro-mode .rl-checkout-kind > button.is-on:not(#rl) { color: #0b0e17; background: #fff; box-shadow: 0 1px 2px rgb(22 32 28 / 14%); }

/* Products */
body.pro-mode .rl-checkout-thumb {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 10px;
  color: #9aa39f;
  background: #f2f4f3;
}
body.pro-mode .rl-checkout-thumb > img { width: 100%; height: 100%; object-fit: cover; }
body.pro-mode .rl-checkout-thumb > svg { width: 20px; height: 20px; }
body.pro-mode .rl-checkout-stock { font-weight: 650; color: #2f7d5c; }
body.pro-mode .rl-checkout-stock.is-low { color: #a86b00; }
body.pro-mode .rl-checkout-stock.is-out { color: #c2410c; }
body.pro-mode .rl-checkout-stepper {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 34px;
  padding: 0 2px;
  border: 1px solid #e3e7e4;
  border-radius: 999px;
  background: #fff;
}
body.pro-mode .rl-checkout-stepper > button:not(#rl) {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-width: 0;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #3a4741;
  background: transparent;
  transition: background-color 140ms ease, transform 180ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-checkout-stepper > button:hover:not(#rl) { background: #f2f4f3; }
body.pro-mode .rl-checkout-stepper > button:active:not(#rl) { transform: scale(.88); }
body.pro-mode .rl-checkout-stepper > button > svg { width: 15px; height: 15px; }
body.pro-mode .rl-checkout-stepper > output { display: inline-block; min-width: 24px; font-size: 14px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }

body.pro-mode .rl-checkout-search { position: relative; display: flex; gap: 8px; margin-top: 10px; }
body.pro-mode .rl-checkout-lines + .rl-checkout-search { margin-top: 6px; }
body.pro-mode .rl-checkout-search-field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border: 1px dashed #cfd8d3;
  border-radius: 12px;
  color: #8a948f;
  cursor: text;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
body.pro-mode .rl-checkout-search-field:hover { border-color: #b7c3bd; }
body.pro-mode .rl-checkout-search-field:focus-within { border-style: solid; border-color: #16201c; background: #fff; box-shadow: 0 0 0 3px rgb(22 32 28 / 8%); color: #16201c; }
body.pro-mode .rl-checkout-search-field > svg { width: 17px; height: 17px; flex: none; }
body.pro-mode .rl-checkout-search-field input:not(#rl) { flex: 1; font-size: 14.5px; }
body.pro-mode .rl-checkout-search-field input::-webkit-search-cancel-button { display: none; }
body.pro-mode .rl-checkout-scan:not(#rl) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  min-height: 0;
  padding: 0 14px;
  border: 1px solid #e3e7e4;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 650;
  color: #26332e;
  background: #fff;
  transition: border-color 160ms ease, background-color 160ms ease, transform 200ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-checkout-scan:hover:not(#rl) { border-color: #cfd8d3; background: #f8faf9; }
body.pro-mode .rl-checkout-scan:active:not(#rl) { transform: scale(.95); }
body.pro-mode .rl-checkout-scan > svg { width: 18px; height: 18px; }
body.pro-mode .rl-checkout-results {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 312px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #e3e7e4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgb(22 32 28 / 14%);
  animation: rl-checkout-drop 180ms cubic-bezier(.2, .8, .2, 1) both;
}
body.pro-mode .rl-checkout-result:not(#rl) {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  text-align: left;
  background: transparent;
  transition: background-color 120ms ease;
}
body.pro-mode .rl-checkout-result:is(:hover, .is-active):not(#rl) { background: #f2f5f3; }
body.pro-mode .rl-checkout-result-copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
body.pro-mode .rl-checkout-result-copy > strong { overflow: hidden; font-size: 14px; font-weight: 700; color: #0b0e17; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-checkout-result-copy > small { overflow: hidden; font-size: 12px; color: #626b79; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-checkout-result-meta { display: grid; justify-items: end; gap: 1px; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-checkout-result-meta > b { font-size: 14px; color: #0b0e17; }
body.pro-mode .rl-checkout-result-meta > small { font-size: 12px; font-weight: 650; color: #2f7d5c; }
body.pro-mode .rl-checkout-result-meta > small.is-low { color: #a86b00; }
body.pro-mode .rl-checkout-result-meta > small.is-out { color: #c2410c; }
body.pro-mode .rl-checkout-results-empty { display: grid; place-items: center; min-height: 56px; margin: 0; font-size: 13.5px; color: #8a948f; }
body.pro-mode .rl-checkout-results-empty.is-error { color: #b42318; }
body.pro-mode .rl-checkout-search-notice {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #a86b00;
  animation: rl-checkout-drop 180ms ease both;
}
body.pro-mode .rl-checkout-search.has-notice { margin-bottom: 18px; }

/* Discount, tax, tip */
body.pro-mode .rl-checkout-adjustments { padding-block: 6px; }
body.pro-mode .rl-checkout-adjust {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) minmax(64px, auto);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-top: 1px solid #eef1ef;
}
body.pro-mode .rl-checkout-adjust:first-child { border-top: 0; }
body.pro-mode .rl-checkout-adjust > span:first-child { font-size: 14px; font-weight: 650; color: #26332e; }
body.pro-mode .rl-checkout-adjust > .rl-checkout-adjust-input { justify-self: end; }
body.pro-mode .rl-checkout-adjust-amount { font-size: 14px; font-weight: 650; text-align: right; color: #626b79; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-checkout-adjust:not(.is-set) .rl-checkout-adjust-input { border-style: dashed; background: #fbfcfb; }

/* Summary */
body.pro-mode .rl-checkout-summary { display: grid; gap: 2px; padding-block: 12px 14px; }
body.pro-mode .rl-checkout-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; color: #3a4741; animation: rl-checkout-drop 220ms ease both; }
body.pro-mode .rl-checkout-sum-row > output { display: inline-block; font-weight: 650; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-checkout-sum-row.is-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid #eef1ef; animation: none; }
body.pro-mode .rl-checkout-sum-row.is-total > span { font-size: 15px; font-weight: 750; color: #0b0e17; }
body.pro-mode .rl-checkout-sum-row.is-total > output { font-size: 28px; font-weight: 750; letter-spacing: -.6px; color: #0b0e17; transform-origin: 100% 60%; }
body.pro-mode .rl-checkout-booked-total { margin: 0; font-size: 12.5px; text-align: right; color: #9aa39f; font-variant-numeric: tabular-nums; }

/* Payment */
body.pro-mode .rl-checkout-segment {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 11px;
  background: #f2f4f3;
}
body.pro-mode .rl-checkout-segment > button:not(#rl) {
  position: relative;
  z-index: 1;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 650;
  color: #626b79;
  background: transparent;
  transition: color 200ms ease;
}
body.pro-mode .rl-checkout-segment > button.is-on:not(#rl) { color: #0b0e17; }
body.pro-mode .rl-checkout-segment > i {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(22 32 28 / 16%);
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1);
}
body.pro-mode .rl-checkout-segment > button:nth-child(2).is-on ~ i { transform: translateX(100%); }
body.pro-mode .rl-checkout-payment { animation: rl-checkout-drop 220ms cubic-bezier(.2, .8, .2, 1) both; }
body.pro-mode .rl-checkout-payment + .rl-checkout-payment { margin-top: 6px; padding-top: 4px; border-top: 1px dashed #e3e7e4; }
body.pro-mode .rl-checkout-methods { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
body.pro-mode .rl-checkout-method:not(#rl) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  min-height: 0;
  padding: 0 12px 0 10px;
  border: 1px solid #e3e7e4;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  color: #3a4741;
  background: #fff;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 200ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-checkout-method:hover:not(#rl) { border-color: #cfd8d3; }
body.pro-mode .rl-checkout-method:active:not(#rl) { transform: scale(.94); }
body.pro-mode .rl-checkout-method.is-on:not(#rl) { border-color: #16201c; color: #fff; background: #16201c; }
body.pro-mode .rl-checkout-method > svg { width: 16px; height: 16px; }
body.pro-mode .rl-checkout-payment-amount { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
body.pro-mode .rl-checkout-balance { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; text-align: right; color: #a86b00; font-variant-numeric: tabular-nums; animation: rl-checkout-drop 200ms ease both; }
body.pro-mode .rl-checkout-hint { margin: 6px 0 0; font-size: 12.5px; text-align: right; }
body.pro-mode .rl-checkout-hint.is-error { color: #b42318; }
body.pro-mode .rl-checkout-split:not(#rl) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  margin-top: 10px;
  padding: 4px 2px;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1f6b52;
  background: none;
}
body.pro-mode .rl-checkout-split > svg { width: 15px; height: 15px; }

/* Footer */
body.pro-mode .rl-checkout-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 65px;
  padding: 12px 28px;
  border-top: 1px solid #e3e8e6;
  background: #fff;
}
body.pro-mode .rl-checkout-footer-total { display: grid; justify-items: end; margin-left: auto; line-height: 1.15; }
body.pro-mode .rl-checkout-footer-total > span { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #8a948f; }
body.pro-mode .rl-checkout-footer-total > strong { display: inline-block; font-size: 19px; font-weight: 750; color: #0b0e17; font-variant-numeric: tabular-nums; transform-origin: 100% 50%; }
body.pro-mode .rl-checkout-save:not(#rl) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 188px; height: 42px; border-radius: 10px; }
body.pro-mode .rl-checkout-save.is-saved:not(#rl) { border-color: #1f6b52; color: #fff; background: #1f6b52; }
body.pro-mode .rl-checkout-remove:not(#rl) { width: 40px; min-width: 40px; height: 40px; }
body.pro-mode .rl-checkout-remove:hover:not(#rl) { color: #b42318; border-color: #f0b9bf; background: #fdeef0; }
body.pro-mode .rl-checkout-remove > svg { width: 18px; height: 18px; }
body.pro-mode .rl-checkout-footer.is-confirm { justify-content: space-between; animation: rl-checkout-drop 200ms ease both; }
body.pro-mode .rl-checkout-footer.is-confirm > p { margin: 0; font-size: 14.5px; font-weight: 700; color: #0b0e17; }
body.pro-mode .rl-checkout-footer.is-confirm > div { display: flex; gap: 8px; }

body.pro-mode .rl-checkout-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #8e2430;
  background: #fdf1f2;
  animation: rl-checkout-pop 300ms cubic-bezier(.34, 1.56, .64, 1) both;
}
body.pro-mode .rl-checkout-alert > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
body.pro-mode .rl-checkout-alert > p { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
body.pro-mode .rl-checkout-loading { display: grid; place-items: center; min-height: 320px; }
body.pro-mode .rl-checkout-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #dfe5e2;
  border-top-color: #16201c;
  border-radius: 50%;
  animation: rl-checkout-spin 700ms linear infinite;
}
body.pro-mode .rl-checkout-search-field > .rl-checkout-spinner { width: 14px; height: 14px; }

@media (max-width: 860px) {
  body.pro-mode .business-modal-layer.rl-checkout-layer { align-items: end; padding: 8px; }
  body.pro-mode .business-modal.rl-checkout-modal:not(#rl) { width: 100%; max-height: calc(var(--mobile-viewport-height, 100dvh) - 16px); border-radius: 18px; }
  body.pro-mode .rl-checkout-columns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.pro-mode .rl-checkout-head:not(#rl) { padding: 18px 16px 10px; }
  body.pro-mode .rl-checkout-head h2 { font-size: 23px; }
  body.pro-mode .rl-checkout-body { padding: 2px 16px 18px; }
  body.pro-mode .rl-checkout-footer { gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  body.pro-mode .rl-checkout-save:not(#rl) { min-width: 0; flex: 1; }
  body.pro-mode .rl-checkout-footer-total { margin-left: 0; }
  body.pro-mode .rl-checkout-line-main { flex-wrap: wrap; }
  body.pro-mode .rl-checkout-line.is-product .rl-checkout-line-copy { flex-basis: calc(100% - 52px); }
  body.pro-mode .rl-checkout-line.is-product .rl-checkout-stepper { margin-left: 52px; }
  body.pro-mode .rl-checkout-line.is-product .rl-checkout-line-price { margin-left: auto; }
  body.pro-mode .rl-checkout-scan > span { display: none; }
  body.pro-mode .rl-checkout-layer.is-opening > .rl-checkout-modal { animation-name: rl-checkout-slide; }
}

@keyframes rl-checkout-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rl-checkout-rise { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes rl-checkout-sink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes rl-checkout-slide { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rl-checkout-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes rl-checkout-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rl-checkout-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-10px) scale(.97); } }
@keyframes rl-checkout-spin { to { transform: rotate(360deg); } }
@keyframes rl-checkout-button-pop { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes rl-checkout-check-draw { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.rl-checkout-layer, .rl-checkout-layer *, .rl-booking-checkout-button, .rl-booking-checkout-button > svg, .rl-booking-undo) {
    animation: none !important;
    transition: none !important;
  }
}

/* Analytics › Sales: the Checkout panel. */
body.pro-mode .rl-an-checkout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
body.pro-mode .rl-an-checkout > section { display: grid; gap: 8px; min-width: 0; }
body.pro-mode .rl-an-checkout > section + section { padding-left: 22px; border-left: 1px solid #eef1ef; }
body.pro-mode .rl-an-checkout > section > header > span { font-size: .75rem; font-weight: 700; color: #626b79; }
@media (max-width: 900px) {
  body.pro-mode .rl-an-checkout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.pro-mode .rl-an-checkout > section.is-methods { grid-column: 1 / -1; }
  body.pro-mode .rl-an-checkout > section + section { padding-left: 0; border-left: 0; }
}