/* ============================================================
   Customer payments portal (payments.mysleepeezee.com.au)
   Mobile-first, tokens only. Layered over bclaim-tokens.css and
   bclaim-overrides.css (synced copies in this deploy).
   HIG: Foundations > Layout, Typography; Patterns > Feedback.
   ============================================================ */

.bc-pay-body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bc-bg-grouped);
  color: var(--bc-text-primary);
  font-family: 'Inter', var(--bc-font-text);
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------- header -------------------------------- */

.bc-pay-header {
  background: var(--bc-bg-elevated);
  border-bottom: 1px solid var(--bc-separator);
  padding-top: env(safe-area-inset-top);
}
.bc-pay-header__inner {
  max-width: var(--bc-readable-max);
  margin: 0 auto;
  padding: var(--bc-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-3);
}
.bc-pay-wordmark {
  font-size: var(--bc-text-headline);
  font-weight: var(--bc-weight-semibold);
}
.bc-pay-secure {
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-medium);
  color: var(--bc-success);
}

/* -------------------------------- shell -------------------------------- */

.bc-pay-shell {
  flex: 1;
  width: 100%;
  max-width: var(--bc-readable-max);
  margin: 0 auto;
  padding: var(--bc-space-4);
  padding-left: max(var(--bc-space-4), env(safe-area-inset-left));
  padding-right: max(var(--bc-space-4), env(safe-area-inset-right));
  box-sizing: border-box;
}

.bc-pay-panel {
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-lg);
  padding: var(--bc-space-5);
  margin-top: var(--bc-space-5);
  box-shadow: var(--bc-shadow-1);
}

.bc-pay-eyebrow {
  margin: 0 0 var(--bc-space-2);
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bc-text-secondary);
}
.bc-pay-title {
  margin: 0 0 var(--bc-space-3);
  font-size: var(--bc-text-title-2);
  font-weight: var(--bc-weight-bold);
  line-height: 1.2;
}
.bc-pay-lede {
  margin: 0 0 var(--bc-space-4);
  font-size: var(--bc-text-body);
  color: var(--bc-text-primary);
}
.bc-pay-help {
  margin: 0;
  font-size: var(--bc-text-subhead);
  color: var(--bc-text-secondary);
}
.bc-pay-help a,
.bc-pay-security-note a,
.bc-pay-footer a {
  color: var(--bc-accent);
}

/* ------------------------------ OTP entry ------------------------------ */

.bc-pay-otp-input {
  font-size: var(--bc-text-title-2);
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------- items summary ---------------------------- */

.bc-pay-items {
  width: 100%;
  border-collapse: collapse;
  margin: var(--bc-space-4) 0;
}
.bc-pay-items td {
  padding: var(--bc-space-3) 0;
  border-bottom: 1px solid var(--bc-separator);
  font-size: var(--bc-text-callout);
  vertical-align: top;
}
.bc-pay-items__note {
  display: block;
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-secondary);
  margin-top: var(--bc-space-1);
}
.bc-pay-items__amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bc-pay-items tfoot td {
  border-bottom: none;
  font-weight: var(--bc-weight-semibold);
  font-size: var(--bc-text-body);
}
.bc-pay-items__gst {
  display: block;
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-regular);
  color: var(--bc-text-secondary);
}
.bc-pay-items__total {
  font-size: var(--bc-text-title-3);
}

/* --------------------------- repair authorisation ---------------------- */

.bc-pay-consent {
  background: var(--bc-bg-subtle);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-md);
  padding: var(--bc-space-4);
  margin: var(--bc-space-4) 0;
}
.bc-pay-consent__title {
  margin: 0 0 var(--bc-space-2);
  font-size: var(--bc-text-headline);
  font-weight: var(--bc-weight-semibold);
}
.bc-pay-consent__body {
  margin: 0 0 var(--bc-space-4);
  font-size: var(--bc-text-subhead);
  color: var(--bc-text-secondary);
}
.bc-pay-consent__check {
  display: flex;
  gap: var(--bc-space-3);
  align-items: flex-start;
  font-size: var(--bc-text-callout);
  cursor: pointer;
}
.bc-pay-consent__check input[type="checkbox"] {
  width: var(--bc-space-6);
  height: var(--bc-space-6);
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--bc-accent);
}
.bc-pay-consent__check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--bc-focus-ring);
  border-radius: var(--bc-radius-xs);
}
.bc-pay-consent__done {
  display: block;
  font-style: normal;
  margin-top: var(--bc-space-2);
  font-size: var(--bc-text-footnote);
  color: var(--bc-success);
}

/* ------------------------------ pay button ----------------------------- */

.bc-pay-wallets {
  text-align: center;
  margin: var(--bc-space-3) 0 0;
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-tertiary);
}
.bc-pay-security-note {
  margin: var(--bc-space-5) 0 0;
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-secondary);
}

/* -------------------------------- alerts ------------------------------- */

.bc-pay-alert {
  margin: var(--bc-space-3) 0;
  padding: var(--bc-space-3) var(--bc-space-4);
  border-radius: var(--bc-radius-md);
  font-size: var(--bc-text-subhead);
  background: color-mix(in srgb, var(--bc-info) 12%, transparent);
  color: var(--bc-text-primary);
  border: 1px solid color-mix(in srgb, var(--bc-info) 30%, transparent);
}
.bc-pay-alert--error {
  background: color-mix(in srgb, var(--bc-destructive) 12%, transparent);
  border-color: color-mix(in srgb, var(--bc-destructive) 30%, transparent);
}
.bc-pay-alert--success {
  background: color-mix(in srgb, var(--bc-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--bc-success) 30%, transparent);
}

/* -------------------------------- footer ------------------------------- */

.bc-pay-footer {
  padding: var(--bc-space-5) var(--bc-space-4);
  padding-bottom: max(var(--bc-space-5), env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-tertiary);
}
.bc-pay-footer p { margin: 0; }

/* ------------------------------- desktop ------------------------------- */

@media (min-width: 640px) {
  .bc-pay-panel {
    padding: var(--bc-space-7);
    margin-top: var(--bc-space-8);
  }
}