:root {
  --bigb-opayo-primary: #4b148c;
  --bigb-opayo-primary-dark: #35106b;
  --bigb-opayo-submit: #4b148c;
  --bigb-opayo-ink: #151033;
  --bigb-opayo-muted: #5c5870;
  --bigb-opayo-line: #deddea;
  --bigb-opayo-panel: #ffffff;
  --bigb-opayo-soft: #f7f6fb;
  --bigb-opayo-shadow: 0 18px 45px rgba(21, 16, 51, 0.08);
}

.bigb-modern-checkout {
  background: #f4f5f8;
  color: var(--bigb-opayo-ink);
}

.bigb-checkout-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 22px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(21, 16, 51, 0.08);
}

.bigb-checkout-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  color: var(--bigb-opayo-muted);
  font-size: 15px;
  font-weight: 600;
}

.bigb-checkout-steps span {
  position: relative;
}

.bigb-checkout-steps span + span:before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.bigb-checkout-steps .is-active {
  color: var(--bigb-opayo-primary);
  font-weight: 800;
}

.bigb-checkout-secure {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--bigb-opayo-primary);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.bigb-checkout-secure__icon {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 3px;
  content: "";
}

.bigb-checkout-secure__icon:before {
  content: "";
  position: absolute;
  left: 2px;
  top: -9px;
  width: 5px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.bigb-modern-checkout #checkout-checkout #content,
.bigb-modern-checkout.checkout-checkout #content,
.bigb-modern-checkout .journal-checkout,
.bigb-modern-checkout .quick-checkout,
.bigb-modern-checkout .checkout-page {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.bigb-modern-checkout .panel,
.bigb-modern-checkout .checkout-section,
.bigb-modern-checkout .section-body,
.bigb-modern-checkout .checkout-payment-methods,
.bigb-modern-checkout .checkout-cart,
.bigb-modern-checkout .cart-section,
.bigb-modern-checkout .confirm-section,
.bigb-modern-checkout .payment-section {
  border-color: var(--bigb-opayo-line);
  box-shadow: none;
}

.bigb-modern-checkout .panel,
.bigb-modern-checkout .checkout-section,
.bigb-modern-checkout .cart-section {
  border-radius: 8px;
  background: var(--bigb-opayo-panel);
}

.bigb-modern-checkout .panel-heading,
.bigb-modern-checkout .section-title,
.bigb-modern-checkout .checkout-section > .title,
.bigb-modern-checkout legend {
  color: var(--bigb-opayo-ink);
  font-weight: 700;
  letter-spacing: 0;
}

.bigb-modern-checkout .form-control,
.bigb-modern-checkout input[type="text"],
.bigb-modern-checkout input[type="email"],
.bigb-modern-checkout input[type="tel"],
.bigb-modern-checkout input[type="password"],
.bigb-modern-checkout select,
.bigb-modern-checkout textarea {
  min-height: 44px;
  border: 1px solid var(--bigb-opayo-line);
  border-radius: 6px;
  box-shadow: none;
  color: var(--bigb-opayo-ink);
}

.bigb-modern-checkout .form-control:focus,
.bigb-modern-checkout input:focus,
.bigb-modern-checkout select:focus,
.bigb-modern-checkout textarea:focus {
  border-color: var(--bigb-opayo-primary);
  box-shadow: 0 0 0 3px rgba(75, 20, 140, 0.11);
  outline: none;
}

.bigb-modern-checkout .btn-primary,
.bigb-modern-checkout .button,
.bigb-modern-checkout button[type="submit"] {
  border-color: var(--bigb-opayo-submit);
  background: var(--bigb-opayo-submit);
  border-radius: 6px;
  color: #ffffff;
  font-weight: 700;
  min-height: 44px;
}

.bigb-modern-checkout .btn-primary:hover,
.bigb-modern-checkout .btn-primary:focus,
.bigb-modern-checkout .button:hover,
.bigb-modern-checkout button[type="submit"]:hover {
  border-color: var(--bigb-opayo-submit);
  background: var(--bigb-opayo-submit);
  color: #ffffff;
}

.bigb-modern-checkout .radio label,
.bigb-modern-checkout .checkbox label,
.bigb-modern-checkout label {
  color: var(--bigb-opayo-ink);
}

.bigb-modern-checkout .table,
.bigb-modern-checkout .checkout-cart table {
  color: var(--bigb-opayo-ink);
}

.bigb-modern-checkout .table > thead > tr > th,
.bigb-modern-checkout .table > tbody > tr > td,
.bigb-modern-checkout .checkout-cart table td {
  border-color: var(--bigb-opayo-line);
}

.bigb-modern-checkout .checkout-cart,
.bigb-modern-checkout .cart-section {
  padding: 20px;
}

.bigb-modern-checkout .checkout-cart img,
.bigb-modern-checkout .cart-section img {
  border-radius: 7px;
  border: 1px solid var(--bigb-opayo-line);
  background: #ffffff;
}

.bigb-modern-checkout .checkout-cart .total,
.bigb-modern-checkout .cart-section .total,
.bigb-modern-checkout .checkout-cart strong,
.bigb-modern-checkout .cart-section strong {
  color: var(--bigb-opayo-ink);
}

.bigb-modern-checkout .bigb-payment-option,
.bigb-modern-checkout .payment-methods .radio,
.bigb-modern-checkout #collapse-payment-method .radio {
  border: 1px solid var(--bigb-opayo-line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.bigb-modern-checkout .bigb-payment-option.is-selected {
  border-color: var(--bigb-opayo-primary);
  box-shadow: 0 0 0 3px rgba(75, 20, 140, 0.1);
}

.bigb-modern-checkout .bigb-native-payment-section-hidden,
.bigb-modern-checkout .bigb-native-opayo-payment-option[hidden] {
  display: none !important;
}

.bigb-modern-checkout .bigb-opayo-widget-source-hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.bigb-modern-checkout .bigb-opayo-force-hidden,
.bigb-opayo-force-hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#bigb-opayo-payment [data-bigb-opayo-keep="1"].bigb-opayo-force-hidden {
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: initial !important;
  padding: initial !important;
  overflow: visible !important;
}

#bigb-opayo-payment .bigb-opayo-payment__brands.bigb-opayo-force-hidden,
#bigb-opayo-payment .bigb-opayo-payment__brands[data-bigb-opayo-keep="1"] {
  display: flex !important;
}

#bigb-opayo-payment .bigb-opayo-payment__brands [data-bigb-opayo-keep="1"].bigb-opayo-force-hidden,
#bigb-opayo-payment .bigb-opayo-payment__wallet-mark[data-bigb-opayo-keep="1"].bigb-opayo-force-hidden {
  display: inline-flex !important;
}

#bigb-opayo-payment img[data-bigb-opayo-keep="1"].bigb-opayo-force-hidden {
  display: block !important;
}

.bigb-modern-checkout .bigb-opayo-native-payment-list {
  display: block !important;
}

.bigb-modern-checkout .bigb-opayo-native-payment-list > .bigb-payment-option:not(.bigb-native-opayo-payment-option),
.bigb-modern-checkout .bigb-opayo-native-payment-list > .radio:not(.bigb-native-opayo-payment-option),
.bigb-modern-checkout .bigb-opayo-payment-method-mount {
  clear: both !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
}

.bigb-opayo-payment-method-mount {
  display: block;
  margin: 12px 0 16px;
}

.bigb-opayo-payment-method-mount .bigb-opayo-payment {
  box-shadow: none;
}

.bigb-opayo-payment {
  overflow: hidden;
  border: 1px solid var(--bigb-opayo-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--bigb-opayo-ink);
  box-shadow: var(--bigb-opayo-shadow);
}

.bigb-opayo-payment.is-collapsed .bigb-opayo-payment__header {
  border-bottom: 0;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.bigb-opayo-payment.is-collapsed .bigb-opayo-payment__header:hover {
  opacity: 1;
  background: #f7f6fb;
}

.bigb-opayo-payment.is-collapsed .bigb-opayo-payment__body,
.bigb-opayo-payment.is-collapsed .bigb-opayo-payment__wallets,
.bigb-opayo-payment.is-collapsed .bigb-opayo-payment__actions {
  display: none !important;
}

.bigb-opayo-payment.is-collapsed .bigb-opayo-payment__method.is-selected {
  box-shadow: none;
}

.bigb-opayo-payment.is-collapsed .bigb-opayo-payment__radio {
  border-width: 2px;
  border-color: #cfd0df;
}

.bigb-opayo-payment__method {
  position: relative;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.bigb-opayo-payment__method:hover {
  background: #fbfbfe;
}

.bigb-opayo-payment__method.is-selected {
  box-shadow: inset 3px 0 0 var(--bigb-opayo-primary);
}

.bigb-opayo-payment__native-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  padding: 0;
}

.bigb-opayo-payment__native-radio:focus + .bigb-opayo-payment__radio,
.bigb-opayo-payment__native-radio:focus + .bigb-opayo-payment__empty-radio {
  box-shadow: 0 0 0 3px rgba(75, 20, 140, 0.16);
}

.bigb-opayo-payment__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px 14px;
  align-items: center;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--bigb-opayo-line);
}

.bigb-opayo-payment__copy,
.bigb-opayo-payment__radio {
  display: block;
}

.bigb-opayo-payment__copy {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}

.bigb-opayo-payment__radio {
  width: 22px;
  height: 22px;
  border: 6px solid var(--bigb-opayo-primary);
  border-radius: 50%;
  background: #ffffff;
  grid-column: 1;
  grid-row: 1;
}

/* Single-line inline title row: "Card Payment - Pay securely using your card" */
.bigb-opayo-payment__inline-title {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0 4px;
  min-width: 0;
}

.bigb-opayo-payment__title {
  display: inline;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.bigb-opayo-payment__sep {
  display: inline;
  color: var(--bigb-opayo-muted);
  font-size: 13px;
  font-weight: 400;
}

.bigb-opayo-payment__subtitle,
.bigb-opayo-payment__note {
  display: inline;
  color: var(--bigb-opayo-muted);
  font-size: 13px;
  line-height: 1.3;
}

.bigb-opayo-payment__subtitle {
  overflow-wrap: anywhere;
}

/* Brands row: spans both columns, sits below the radio+title row */
.bigb-opayo-payment__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  grid-column: 1 / -1;
  grid-row: 2;
  padding-left: 36px; /* indent to align under the title text */
  max-width: none;
}

.bigb-opayo-payment__brands span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 32px;
  padding: 4px 6px;
  border: 1px solid var(--bigb-opayo-line);
  border-radius: 4px;
  background: #ffffff;
}

.bigb-opayo-payment__brands .bigb-opayo-payment__journal-card-icon,
#bigb-opayo-payment .bigb-opayo-payment__brands .bigb-opayo-payment__journal-card-icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  color: var(--bigb-opayo-ink);
}

.bigb-opayo-payment__brands .bigb-opayo-payment__journal-card-icon:before {
  content: "";
  display: block;
  width: 24px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 2px;
  box-sizing: border-box;
}

.bigb-opayo-payment__brands .bigb-opayo-payment__journal-card-icon:after {
  content: "";
  position: absolute;
  left: 13px;
  top: 11px;
  width: 7px;
  height: 2px;
  background: currentColor;
  box-shadow: -10px 0 0 currentColor;
}

.bigb-opayo-payment__brands .bigb-opayo-payment__journal-card-icon.has-native-icon:before,
.bigb-opayo-payment__brands .bigb-opayo-payment__journal-card-icon.has-native-icon:after {
  content: none;
}

.bigb-opayo-payment__brands .bigb-opayo-payment__journal-card-icon img,
.bigb-opayo-payment__brands .bigb-opayo-payment__journal-card-icon svg,
.bigb-opayo-payment__brands .bigb-opayo-payment__journal-card-icon i {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.bigb-opayo-payment__brands .bigb-opayo-journal-native-logo,
#bigb-opayo-payment .bigb-opayo-payment__brands .bigb-opayo-journal-native-logo {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--bigb-opayo-ink);
  font-size: 18px;
}

.bigb-opayo-payment__brands .bigb-opayo-journal-native-logo img,
.bigb-opayo-payment__brands .bigb-opayo-journal-native-logo svg,
.bigb-opayo-payment__brands .bigb-opayo-journal-native-logo i {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.bigb-opayo-payment__brands img,
.bigb-opayo-payment__wallet-mark img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bigb-opayo-payment__body {
  padding: 18px 20px;
  background: var(--bigb-opayo-soft);
}

.bigb-opayo-payment__body--card {
  cursor: pointer;
}

.bigb-opayo-payment__body--compact {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid var(--bigb-opayo-line);
}

.bigb-opayo-payment__secure {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  color: var(--bigb-opayo-ink);
  font-weight: 700;
}

.bigb-opayo-payment__lock {
  position: relative;
  width: 18px;
  height: 14px;
  border: 2px solid var(--bigb-opayo-primary);
  border-radius: 3px;
}

.bigb-opayo-payment__lock:before {
  content: "";
  position: absolute;
  left: 3px;
  top: -10px;
  width: 8px;
  height: 9px;
  border: 2px solid var(--bigb-opayo-primary);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.bigb-opayo-payment__dropin-form {
  margin: 14px 0 10px;
}

.bigb-opayo-payment__dropin {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px 14px;
  border: 1px solid var(--bigb-opayo-line);
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.bigb-opayo-payment__dropin:focus-within {
  border-color: var(--bigb-opayo-primary);
  box-shadow: 0 0 0 3px rgba(75, 20, 140, .12);
}

.bigb-opayo-payment__dropin iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 210px !important;
  height: 230px !important;
  max-height: 230px !important;
  border: 0;
}

.bigb-opayo-payment__dropin > div,
.bigb-opayo-payment__dropin > form {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;
}

.bigb-opayo-payment__dropin,
.bigb-opayo-payment__dropin * {
  box-sizing: border-box;
}

.bigb-opayo-payment__dropin label,
.bigb-opayo-payment__dropin input,
.bigb-opayo-payment__dropin select {
  max-width: 100%;
}

.bigb-opayo-payment__dropin table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.bigb-opayo-payment__dropin tr {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 44px !important;
  border-bottom: 1px solid var(--bigb-opayo-line) !important;
}

.bigb-opayo-payment__dropin tr:last-child {
  border-bottom: 0 !important;
}

.bigb-opayo-payment__dropin td,
.bigb-opayo-payment__dropin th {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  vertical-align: middle !important;
}

.bigb-opayo-payment__dropin label {
  display: block !important;
  margin: 0 !important;
  color: var(--bigb-opayo-ink);
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.bigb-opayo-payment__dropin input:not([type="hidden"]),
.bigb-opayo-payment__dropin select {
  display: block !important;
  width: 100% !important;
  min-height: 36px !important;
  padding: 6px 9px !important;
  border: 1px solid var(--bigb-opayo-line) !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: var(--bigb-opayo-ink) !important;
  box-shadow: none !important;
  line-height: 1.35 !important;
}

.bigb-opayo-payment__dropin input:not([type="hidden"]):focus,
.bigb-opayo-payment__dropin select:focus {
  border-color: var(--bigb-opayo-primary) !important;
  box-shadow: 0 0 0 3px rgba(75, 20, 140, .12) !important;
  outline: 0 !important;
}

.bigb-opayo-payment__dropin br {
  display: none;
}

.bigb-opayo-payment__dropin-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--bigb-opayo-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.bigb-opayo-payment__hidden-submit {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bigb-opayo-payment__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 12px;
}

.bigb-opayo-payment__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--bigb-opayo-line);
  border-radius: 6px;
  background: #fbfbfd;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.bigb-opayo-payment__field:focus-within {
  border-color: var(--bigb-opayo-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(75, 20, 140, .12);
}

.bigb-opayo-payment__field--wide {
  grid-column: 1 / -1;
}

.bigb-opayo-payment__field label {
  margin-bottom: 4px;
  color: var(--bigb-opayo-ink);
  font-size: 12px;
  font-weight: 800;
}

.bigb-opayo-payment__field input {
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: #9a96aa;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: none;
}

.bigb-opayo-payment__field input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}

.bigb-opayo-payment__field input::placeholder {
  color: #9a96aa;
  opacity: 1;
}

.bigb-opayo-payment__save {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 8px;
  color: #312b4f;
  font-size: 13px;
  font-weight: 600;
}

.bigb-opayo-payment__save input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.bigb-opayo-payment__wallets {
  background: #ffffff;
}

.bigb-opayo-payment__wallet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 14px 20px;
  border-top: 1px solid var(--bigb-opayo-line);
}

.bigb-opayo-payment__empty-radio {
  width: 22px;
  height: 22px;
  border: 1px solid #cfd0dc;
  border-radius: 50%;
  background: #ffffff;
}

.bigb-opayo-payment__method.is-selected .bigb-opayo-payment__empty-radio {
  border: 6px solid var(--bigb-opayo-primary);
}

.bigb-opayo-payment__wallet-name {
  color: var(--bigb-opayo-ink);
  font-size: 16px;
  font-weight: 800;
}

.bigb-opayo-payment__wallet-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 30px;
  padding: 4px 6px;
  border: 1px solid var(--bigb-opayo-line);
  border-radius: 4px;
  background: #ffffff;
}

.bigb-opayo-payment__wallet-help {
  padding: 0 20px 14px 56px;
  color: var(--bigb-opayo-muted);
  font-size: 12px;
}

.bigb-opayo-payment__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  padding: 18px 20px;
}

.bigb-opayo-payment .bigb-opayo-payment__actions {
  display: none !important;
}

.bigb-opayo-payment__actions--final {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: 14px 0 0;
  padding: 0;
  width: 100%;
  clear: both;
}

.bigb-opayo-payment__return {
  color: var(--bigb-opayo-primary);
  font-weight: 700;
  text-decoration: none;
}

.bigb-opayo-payment__return:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 1px;
}

.bigb-opayo-payment__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  background: var(--bigb-opayo-submit);
  border-color: var(--bigb-opayo-submit);
  border-radius: 6px;
  font-size: 16px;
}

.bigb-opayo-payment__button span {
  font-weight: 800;
}

.bigb-opayo-payment__button-lock {
  position: relative;
  display: inline-block;
  color: #ffffff;
  width: 12px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.bigb-opayo-payment__button-lock:before {
  content: "";
  position: absolute;
  left: 2px;
  top: -9px;
  width: 4px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.bigb-opayo-payment__button.is-loading {
  opacity: 0.78;
}

.bigb-checkout-trust {
  display: grid;
  gap: 15px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--bigb-opayo-line);
}

.bigb-checkout-trust__item {
  position: relative;
  min-height: 42px;
  padding-left: 52px;
  color: var(--bigb-opayo-primary);
}

.bigb-checkout-trust__item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 8px;
}

.bigb-checkout-trust__item--clock:before {
  border-radius: 50%;
}

.bigb-checkout-trust__item--shield:before {
  border-radius: 12px 12px 8px 8px;
}

.bigb-checkout-trust__item--support:before {
  border-radius: 50% 50% 10px 10px;
}

.bigb-checkout-trust__item strong,
.bigb-checkout-trust__item span {
  display: block;
}

.bigb-checkout-trust__item strong {
  color: var(--bigb-opayo-primary);
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
}

.bigb-checkout-trust__item span {
  color: var(--bigb-opayo-ink);
  font-size: 13px;
  line-height: 1.35;
}

@media (min-width: 992px) {
  .bigb-modern-checkout .quick-checkout-wrapper,
  .bigb-modern-checkout .journal-checkout .checkout-container,
  .bigb-modern-checkout #checkout-checkout .row {
    align-items: flex-start;
  }

  .bigb-modern-checkout .checkout-cart,
  .bigb-modern-checkout .cart-section,
  .bigb-modern-checkout .journal-checkout .right {
    position: sticky;
    top: 20px;
  }
}

@media (max-width: 767px) {
  .bigb-checkout-chrome {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .bigb-checkout-steps {
    gap: 8px 18px;
    font-size: 13px;
  }

  .bigb-opayo-payment__header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .bigb-opayo-payment__brands {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    padding-left: 36px;
    max-width: none;
  }

  .bigb-opayo-payment__brands span {
    width: 47px;
    height: 30px;
  }

  .bigb-opayo-payment__dropin {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .bigb-opayo-payment__dropin iframe {
    min-height: 210px !important;
    height: auto !important;
    max-height: none !important;
  }

  .bigb-opayo-payment__dropin > div,
  .bigb-opayo-payment__dropin > form {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .bigb-opayo-payment__dropin tr {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    align-items: stretch !important;
    padding: 8px 0 !important;
  }

  .bigb-opayo-payment__dropin td,
  .bigb-opayo-payment__dropin th {
    padding: 3px 0 !important;
  }

  .bigb-opayo-payment__fields {
    grid-template-columns: 1fr;
  }

  .bigb-opayo-payment__field--wide {
    grid-column: auto;
  }

  .bigb-opayo-payment__actions {
    align-items: stretch;
    flex-direction: column-reverse;
    justify-content: stretch;
  }

  .bigb-opayo-payment__button {
    width: 100%;
    min-width: 0;
  }
}

/* ─── Fix 1: Hide the crossed-out native Opayo payment icon that Journal/OC
   renders in the payment method list header. The native BigB radio wrapper
   is hidden via JS (hidden attribute); ensure any residual img/icon is gone. ─── */
.bigb-native-opayo-payment-option[hidden],
.bigb-native-opayo-payment-option[hidden] * {
  display: none !important;
  visibility: hidden !important;
}

/* Hide the two stray icons that OpenCart/Journal injects above the payment
   method radio list (credit-card icon and coin-stack icon visible in
   screenshot above "Cash On Delivery"). Covers <img>, <i>, <svg>, and any
   icon-font element in that position. */
.bigb-modern-checkout .payment-section > p > img,
.bigb-modern-checkout .payment-section > div > p > img,
.bigb-modern-checkout #collapse-payment-method > p > img,
.bigb-modern-checkout #collapse-payment-method > div > p > img,
.bigb-modern-checkout .checkout-payment-methods > p > img,
.bigb-modern-checkout .payment-section > p > i,
.bigb-modern-checkout .payment-section > p > svg,
.bigb-modern-checkout .payment-section > p > [class*="icon"],
.bigb-modern-checkout .payment-section > p > [class*="fa"],
.bigb-modern-checkout #collapse-payment-method > p > i,
.bigb-modern-checkout #collapse-payment-method > p > svg,
.bigb-modern-checkout #collapse-payment-method > p > [class*="icon"],
.bigb-modern-checkout #collapse-payment-method > p > [class*="fa"],
.bigb-modern-checkout .checkout-payment-methods > p > i,
.bigb-modern-checkout .checkout-payment-methods > p > svg,
.bigb-modern-checkout .checkout-payment-methods > p > [class*="icon"],
/* Journal 3 sometimes renders the icon as a direct first child of the section */
.bigb-modern-checkout .payment-section > i:first-child,
.bigb-modern-checkout .payment-section > svg:first-child,
.bigb-modern-checkout .payment-section > img:first-child,
.bigb-modern-checkout .payment-section > .section-icon,
.bigb-modern-checkout .payment-section > [class*="fa-credit"],
.bigb-modern-checkout .payment-section > [class*="fa-money"],
.bigb-modern-checkout .payment-section > [class*="icon-credit"],
.bigb-modern-checkout .payment-section > [class*="icon-money"],
.bigb-modern-checkout .checkout-section > i:first-child,
.bigb-modern-checkout .checkout-section > svg:first-child,
.bigb-modern-checkout .checkout-section > img:first-child,
.bigb-modern-checkout .checkout-section > .section-icon {
  display: none !important;
}

/* ─── Fix 2: Hide the duplicate bottom "Confirm Order" button. When the Opayo
   Pay Now button is present the native OC confirm button is redundant.
   The JS intercepts its click; here we ensure it is not visible. ─── */
body.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready #button-confirm:not(#bigb-opayo-pay-btn),
body.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready #button-order-confirm:not(#bigb-opayo-pay-btn),
body.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready #button-checkout-confirm:not(#bigb-opayo-pay-btn),
body.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready .confirm-form > .buttons > .right > #button-confirm,
body.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready .checkout-confirm #button-confirm {
  display: none !important;
}

/* ─── Fix 3: Confirm Your Order block moved before the Pay Now button.
   JS (bigb_opayo_checkout.js) relocates the confirm-order panel into a
   .bigb-opayo-confirm-block wrapper inserted before .bigb-opayo-payment__actions.
   These styles render it cleanly in its new position. ─── */
.bigb-opayo-confirm-block {
  padding: 10px 20px 0;
  border-top: 1px solid var(--bigb-opayo-line);
  background: var(--bigb-opayo-soft);
}

.bigb-opayo-confirm-block .panel,
.bigb-opayo-confirm-block .checkout-section {
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bigb-opayo-confirm-block .buttons,
.bigb-opayo-confirm-block #button-confirm,
.bigb-opayo-confirm-block #button-order-confirm,
.bigb-opayo-confirm-block #button-checkout-confirm,
.bigb-opayo-confirm-block .btn,
.bigb-opayo-confirm-block button[type="button"],
.bigb-opayo-confirm-block button[type="submit"],
.bigb-opayo-confirm-block input[type="button"],
.bigb-opayo-confirm-block input[type="submit"] {
  display: none !important;
}

.bigb-opayo-confirm-block i,
.bigb-opayo-confirm-block > i,
.bigb-opayo-confirm-block > svg,
.bigb-opayo-confirm-block > img,
.bigb-opayo-confirm-block svg,
.bigb-opayo-confirm-block img:not([src*="captcha"]):not([src*="recaptcha"]),
.bigb-opayo-confirm-block .fa,
.bigb-opayo-confirm-block .icon,
.bigb-opayo-confirm-block [class^="icon-"],
.bigb-opayo-confirm-block [class*=" icon-"],
.bigb-opayo-confirm-block [class*="fa-"],
.bigb-opayo-confirm-block .checkout-section-icon,
.bigb-opayo-confirm-block .section-icon,
.bigb-opayo-confirm-block .panel-icon {
  display: none !important;
}

.bigb-opayo-confirm-block h1,
.bigb-opayo-confirm-block h2,
.bigb-opayo-confirm-block h3,
.bigb-opayo-confirm-block legend {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-top: 0 !important;
}

.bigb-opayo-confirm-block .form-group,
.bigb-opayo-confirm-block .checkbox,
.bigb-opayo-confirm-block p {
  margin-bottom: 8px !important;
}

.bigb-opayo-confirm-block textarea {
  min-height: 92px !important;
  margin-bottom: 8px !important;
}

.bigb-opayo-confirm-block .captcha,
.bigb-opayo-confirm-block [id*="captcha"],
.bigb-opayo-confirm-block [class*="captcha"] {
  margin-top: 4px !important;
  padding-top: 0 !important;
}

.bigb-opayo-confirm-block + .bigb-opayo-payment__actions {
  border-top: 0;
}

/* ─── Screenshot fixes ──────────────────────────────────────────────────────
   Applied to address the annotated issues in screenshots:
   1. Stray payment-method icons (credit card / coin) above the checkout list
   2. Excess whitespace before the Captcha block inside the confirm area
   3. Duplicate "Confirm Order" button persisting under the Pay Now button
─────────────────────────────────────────────────────────────────────────── */

/* Fix 1 – Stray payment-method icons
   Journal 3 and OC default both inject a <p> or <div> containing the selected
   payment method's icon image at the top of the payment panel. Target all
   common patterns to ensure it never shows. */
.bigb-modern-checkout .payment-section > p > img,
.bigb-modern-checkout .payment-section > div > p > img,
.bigb-modern-checkout .payment-section p:first-child img,
.bigb-modern-checkout .payment-section > p:first-child,
.bigb-modern-checkout #collapse-payment-method > p > img,
.bigb-modern-checkout #collapse-payment-method > p:first-child img,
.bigb-modern-checkout .checkout-payment-methods > p > img,
.bigb-modern-checkout .checkout-payment-methods > p:first-child img,
.bigb-modern-checkout .journal-checkout .payment-section > p > img,
.bigb-modern-checkout [class*="payment"] > p > img:first-child,
.bigb-modern-checkout .panel-body > p > img:first-child {
  display: none !important;
}

/* Fix 2 – Excess whitespace before Captcha inside the moved confirm block.
   The Captcha section has its own top margin/padding; collapse it so it sits
   flush directly below the checkboxes without an empty gap. */
.bigb-opayo-confirm-block [id*="captcha"],
.bigb-opayo-confirm-block [class*="captcha"],
.bigb-opayo-confirm-block .g-recaptcha,
.bigb-opayo-confirm-block fieldset + [id*="captcha"],
.bigb-opayo-confirm-block fieldset + [class*="captcha"],
.bigb-opayo-confirm-block .checkout-captcha,
.bigb-opayo-confirm-block #checkout-captcha {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Fix 3 – Duplicate "Confirm Order" button.
   Broaden the CSS selector to catch Journal 3's confirm button variants
   and any button-confirm that is NOT the Opayo Pay Now button.
   The existing JS (hideNativeConfirmButton) also hides it inline; this CSS
   provides a declarative fallback that fires before JS runs. */
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready #button-confirm:not(#bigb-opayo-pay-btn),
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready #button-order-confirm:not(#bigb-opayo-pay-btn),
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready #button-checkout-confirm:not(#bigb-opayo-pay-btn),
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready .buttons #button-confirm:not(#bigb-opayo-pay-btn),
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready .buttons .btn[id*="confirm"]:not(#bigb-opayo-pay-btn),
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready form[id*="confirm"] > .buttons > .right > .btn,
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready form[id*="confirm"] > .buttons > .right > button,
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready .journal-checkout #button-confirm:not(#bigb-opayo-pay-btn),
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready .journal-checkout [id*="confirm-btn"]:not(#bigb-opayo-pay-btn),
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready .checkout-confirm > .buttons > .right > button:not(#bigb-opayo-pay-btn),
.bigb-modern-checkout.bigb-opayo-card-active.bigb-opayo-final-actions-ready .checkout-confirm > .buttons > .right > .btn:not(#bigb-opayo-pay-btn) {
  display: none !important;
}

/* ─── Fix: Ensure the Pay Now button always renders ────────────────────────
   Journal 3 and some OC themes apply broad button[type="button"] or .btn
   hide rules inside checkout sections. Force the Pay Now button visible at
   the highest specificity so it is never suppressed by theme CSS. */
#bigb-opayo-pay-btn,
.bigb-opayo-payment #bigb-opayo-pay-btn,
.bigb-opayo-payment__actions #bigb-opayo-pay-btn,
#bigb-opayo-payment #bigb-opayo-pay-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ─── Fix: Card brand logos — always visible, never hidden ─────────────────
   Journal 3 AJAX refresh and its image-normalise passes can collapse the
   brand images. Lock them permanently visible with high specificity. */
.bigb-opayo-payment__brands,
#bigb-opayo-payment .bigb-opayo-payment__brands {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.bigb-opayo-payment__brands span,
#bigb-opayo-payment .bigb-opayo-payment__brands span {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.bigb-opayo-payment__brands img,
#bigb-opayo-payment .bigb-opayo-payment__brands img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* ─── Fix: Wallet logos (Apple Pay / Google Pay) — always visible ──────────
   Journal 3's global img reset and AJAX observer can collapse wallet images.
   Lock them permanently visible. */
.bigb-opayo-payment__wallet-mark,
#bigb-opayo-payment .bigb-opayo-payment__wallet-mark {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.bigb-opayo-payment__wallet-mark img,
#bigb-opayo-payment .bigb-opayo-payment__wallet-mark img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* ─── Fix: Journal Native card logo — repositioned above payment text ───────
   Journal 3 renders a card/payment icon <p> or <img> above the payment list
   that cannot always be removed via JS. If it persists, display it inside
   the widget header area as a decorative element above the inline title row,
   rather than floating loose above Cash on Delivery. The JS moves it; this
   CSS renders it correctly in its new position. */
.bigb-opayo-payment__header .bigb-opayo-journal-native-logo {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.bigb-opayo-payment__header .bigb-opayo-journal-native-logo ~ .bigb-opayo-payment__radio {
  grid-row: 2;
}

.bigb-opayo-payment__header .bigb-opayo-journal-native-logo ~ .bigb-opayo-payment__copy {
  grid-row: 2;
}

.bigb-opayo-payment__header .bigb-opayo-journal-native-logo ~ .bigb-opayo-payment__brands {
  grid-row: 3;
}

/* ─── Fix: Stray payment-method icon above Cash on Delivery ─────────────────
   Journal 3 injects a <p> with an <img> or icon-font element showing the
   currently-selected payment method icon above the radio list. Hide it
   across all known Journal 3 DOM variants. */
.bigb-modern-checkout .journal-checkout .payment-section > p,
.bigb-modern-checkout .journal-checkout .payment-section > p > img,
.bigb-modern-checkout .journal-checkout .payment-section > p > i,
.bigb-modern-checkout .journal-checkout .payment-section > p > svg,
.bigb-modern-checkout .journal-checkout .payment-section > div > p,
.bigb-modern-checkout .journal-checkout .payment-section > div > p > img,
.bigb-modern-checkout .bigb-opayo-native-payment-section > p:first-of-type,
.bigb-modern-checkout .bigb-opayo-native-payment-section > p:first-of-type > img,
.bigb-modern-checkout .bigb-opayo-native-payment-section > p:first-of-type > i,
.bigb-modern-checkout .bigb-opayo-native-payment-section > p:first-of-type > svg,
.bigb-modern-checkout .bigb-opayo-native-payment-section > i,
.bigb-modern-checkout .bigb-opayo-native-payment-section > img,
.bigb-modern-checkout .bigb-opayo-native-payment-section > svg,
.bigb-modern-checkout .bigb-opayo-native-payment-section > [class*="fa-credit"],
.bigb-modern-checkout .bigb-opayo-native-payment-section > [class*="fa-money"],
.bigb-modern-checkout .bigb-opayo-native-payment-section > [class*="icon-credit"],
.bigb-modern-checkout .bigb-opayo-native-payment-section > [class*="icon-money"],
.bigb-modern-checkout .payment-section > p:has(> img):first-of-type,
.bigb-modern-checkout .panel-body > p:first-child > img,
.bigb-modern-checkout .panel-body > p:first-child:has(> img) {
  display: none !important;
}

/* ─── Fix: Remove stray icons near "Add Comments" and Newsletter fields ──────
   Journal 3 / OC inject a credit-card <i> above the comments textarea and a
   coin/payment <i> next to the newsletter checkbox. These appear inside the
   confirm-section panel. Hide them wherever they appear. */

/* Icon that appears above the "Add Comments About Your Order" textarea */
.bigb-modern-checkout textarea#order-comment ~ i,
.bigb-modern-checkout textarea[name="comment"] ~ i,
.bigb-modern-checkout .form-group:has(> textarea) > i,
.bigb-modern-checkout .form-group:has(> textarea) i.fa,
.bigb-modern-checkout .form-group > i.fa:first-child,
.bigb-modern-checkout .form-group > i[class*="icon"]:first-child,
/* Broader: any lone <i> or <img> that is a direct sibling/child of a form-group
   containing a textarea (the comments field) */
.bigb-modern-checkout .confirm-section .form-group > i,
.bigb-modern-checkout .confirm-section .form-group > img,
.bigb-modern-checkout .confirm-section .form-group > svg,
.bigb-modern-checkout .checkout-confirm .form-group > i,
.bigb-modern-checkout .checkout-confirm .form-group > img,
.bigb-modern-checkout .checkout-confirm .form-group > svg,
/* Icon next to the newsletter checkbox */
.bigb-modern-checkout .confirm-section .checkbox > i,
.bigb-modern-checkout .confirm-section .checkbox > img,
.bigb-modern-checkout .confirm-section .checkbox ~ i,
.bigb-modern-checkout .confirm-section .checkbox ~ img,
.bigb-modern-checkout .checkout-confirm .checkbox > i,
.bigb-modern-checkout .checkout-confirm .checkbox > img,
.bigb-modern-checkout .checkout-confirm .checkbox ~ i,
.bigb-modern-checkout .checkout-confirm .checkbox ~ img,
/* Journal 3 wraps the icon in a <p> or <span> just before/after form elements */
.bigb-modern-checkout .confirm-section p:has(> i:only-child),
.bigb-modern-checkout .confirm-section p:has(> img:only-child),
.bigb-modern-checkout .checkout-confirm p:has(> i:only-child),
.bigb-modern-checkout .checkout-confirm p:has(> img:only-child),
/* Catch the specific Journal 3 section-icon slot pattern */
.bigb-modern-checkout .confirm-section .panel-body > i,
.bigb-modern-checkout .confirm-section .panel-body > img,
.bigb-modern-checkout .confirm-section .panel-body > svg,
.bigb-modern-checkout .confirm-section > i,
.bigb-modern-checkout .confirm-section > img,
.bigb-modern-checkout .confirm-section > svg,
/* Also cover when inside the moved bigb-opayo-confirm-block */
.bigb-opayo-confirm-block .form-group > i,
.bigb-opayo-confirm-block .form-group > img,
.bigb-opayo-confirm-block .form-group > svg,
.bigb-opayo-confirm-block .checkbox > i,
.bigb-opayo-confirm-block .checkbox > img,
.bigb-opayo-confirm-block .checkbox ~ i,
.bigb-opayo-confirm-block .checkbox ~ img {
  display: none !important;
}