/* public/theme/css/components.css
   Reskins Bootstrap's OWN components via its CSS custom properties, instead of
   inventing parallel custom classes. Use plain Bootstrap markup (.card, .btn,
   .badge, .table, .rounded-*, .shadow-*, .bg-*-subtle, .text-bg-*) everywhere
   possible — these overrides make that markup match the design tokens.
   Only the stepper below is genuinely custom CSS, because Bootstrap has no
   equivalent component for it. */

:root {
  /* Base */
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-border-color: var(--color-border);

  /* Radius scale -> drives .card, .btn, .rounded, .rounded-1.. automatically */
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-xxl: 24px;
  /* --bs-border-radius-pill is already 50rem in Bootstrap — functions as a
     pill regardless of box size, no override needed. */

  /* Shadow scale -> drives .shadow-sm, .shadow, .shadow-lg */
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-lg: var(--shadow-lg);

  /* Primary (indigo/violet) -> drives .btn-primary, .bg-primary(-subtle),
     .text-primary(-emphasis), .border-primary(-subtle), .text-bg-primary */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 91, 79, 230;
  --bs-primary-text-emphasis: var(--color-primary-emphasis);
  --bs-primary-bg-subtle: var(--color-primary-bg-subtle);
  --bs-primary-border-subtle: var(--color-primary-border-subtle);

  /* Success (green) */
  --bs-success: var(--color-success);
  --bs-success-rgb: 22, 163, 74;
  --bs-success-text-emphasis: var(--color-success-emphasis);
  --bs-success-bg-subtle: var(--color-success-bg);
  --bs-success-border-subtle: var(--color-success-border-subtle);

  /* Warning (amber/peach) */
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-text-emphasis: var(--color-warning-emphasis);
  --bs-warning-bg-subtle: var(--color-warning-bg);
  --bs-warning-border-subtle: var(--color-warning-border-subtle);

  /* Danger (red) */
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: var(--color-danger-emphasis);
  --bs-danger-bg-subtle: var(--color-danger-bg);
  --bs-danger-border-subtle: var(--color-danger-border-subtle);

  /* Info (blue) */
  --bs-info: var(--color-info);
  --bs-info-rgb: 37, 99, 235;
  --bs-info-text-emphasis: var(--color-info-emphasis);
  --bs-info-bg-subtle: var(--color-info-bg);
  --bs-info-border-subtle: var(--color-info-border-subtle);
}

/* Buttons: bump the default padding/weight slightly to match the mockups
   (Bootstrap's own --bs-btn-* variables already read --bs-border-radius). */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1.1rem;
}

/* NOTE: unlike --bs-border-radius / --bs-box-shadow / the -subtle utilities,
   Bootstrap's SOLID color component classes (.btn-primary, .btn-success,
   .btn-danger, ...) hardcode a literal hex value per color at Bootstrap's own
   build time — they do NOT read var(--bs-primary) etc. at runtime. Each solid
   variant actually used has to be re-pointed at our tokens explicitly, like
   this one. Add the next one (e.g. .btn-success) only when a page actually
   needs it — same on-demand principle as vendoring plugins. */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: 91, 79, 230;
}

/* Bootstrap ships no default card shadow/border color for our light theme —
   this is a one-line default so plain `.card` looks right without every page
   remembering to add `.shadow-sm` by hand. */
.card {
  /* Bootstrap's .card defaults --bs-card-bg to var(--bs-body-bg) — since our
     page background is light lavender, not white, cards would otherwise
     silently blend into the page instead of standing out as white surfaces. */
  --bs-card-bg: var(--color-surface);
  --bs-card-border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

/* Icon badge: a small, fixed-size circle used with a `bg-*-subtle` utility
   and an icon inside (e.g. `<div class="icon-badge rounded-circle bg-success-subtle">`).
   Bootstrap has sizing utilities but not a "square-ish icon chip" primitive. */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.icon-badge-lg {
  width: 55px;
  height: 55px;
}

/* Stepper (multi-step forms) — no Bootstrap equivalent, fully custom. */
.stepper {
  display: flex;
  align-items: flex-start;
}

.stepper-step {
  flex: 1;
  text-align: center;
  position: relative;
}

.stepper-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.stepper-step.is-complete:not(:last-child)::after,
.stepper-step.is-active:not(:last-child)::after {
  background: var(--color-primary);
}

.stepper-step__circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  margin: 0 auto var(--space-2);
  position: relative;
  z-index: 1;
}

.stepper-step.is-active .stepper-step__circle,
.stepper-step.is-complete .stepper-step__circle {
  background: var(--color-primary);
  color: #fff;
}

.stepper-step__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.stepper-step__sublabel {
  font-size: 11px;
  color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
  .stepper-step__label,
  .stepper-step__sublabel {
    display: none;
  }

  .stepper-step.is-active .stepper-step__label,
  .stepper-step.is-active .stepper-step__sublabel {
    display: block;
  }
}

/* Table: horizontal scroll container so the page never scrolls sideways. */
.theme-table-responsive {
  overflow-x: auto;
}

/* Global table style — applies to every `.table` in the app, not just one
   page: light lavender uppercase header, borderless rows, subtle zebra
   striping, generous padding. */
.table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  border-bottom-width: 0;
  box-shadow: none;
}

.table > thead > tr > th {
  background: var(--color-primary-bg-subtle);
  color: var(--color-primary-emphasis);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}

.table > tbody > tr:nth-child(odd) > td {
  background: rgba(91, 79, 230, 0.03);
}

/* Boxed leading icon used in table rows (e.g. transaction direction) */
.table-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

/* Payment method tab switcher (e.g. Send Money Stripe/PayPal/Zelle confirm
   step — "saved card" vs "new card"). Class names are relied on by that
   page's own JS to toggle .active/.disabled; only the visual rules live
   here so no page needs its own <style> block. */
.payment-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

.payment-tab {
  flex: 1;
  padding: var(--space-3);
  text-align: center;
  cursor: pointer;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: all 0.2s ease;
  font-weight: 600;
  color: var(--color-text-muted);
}

.payment-tab.active {
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
  margin-bottom: -1px;
}

.payment-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.payment-tab:not(.disabled):hover {
  background: var(--color-primary-bg-subtle);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Saved payment card list */
.saved-cards-container {
  max-height: 280px;
  overflow-y: auto;
  padding-right: var(--space-2);
}

.saved-card-item {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.saved-card-item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg-subtle);
}

.saved-card-item.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg-subtle);
}

.saved-card-item input[type="radio"] {
  margin-right: var(--space-3);
  width: 18px;
  height: 18px;
}

.card-info {
  flex: 1;
}

.card-brand {
  font-weight: 600;
  color: var(--color-text);
}

.card-number {
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Stripe Elements card field (new-card entry) */
#card-element {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

#card-errors {
  color: var(--color-danger);
  margin-top: var(--space-2);
  font-size: 13px;
}

.save-card-option {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

/* jQuery Validate's auto-generated inline error messages (its default
   errorClass is literally "error") — unstyled by Bootstrap, so without this
   they render in the ambient body text color instead of reading as errors. */
.error {
  color: var(--color-danger);
  font-size: 0.875rem;
  display: block;
  margin-top: var(--space-1);
}

/* Initial-hidden state for elements JS progressively reveals via
   .show()/.hide()/.css('display', ...). Deliberately NOT !important (unlike
   Bootstrap's .d-none) — jQuery toggles these by setting the inline style
   attribute directly, which needs to be able to override this class. */
.js-hidden {
  display: none;
}

/* Inline button-loading spinner (`<i class="spinner ... js-hidden">` followed
   by the button's label text) — used site-wide on submit buttons. A bare
   space between the icon and text isn't enough breathing room: the
   spinner-border ring's open edge can visually read as glued onto the first
   letter of the label when caught mid-rotation. */
.spinner {
  margin-right: var(--space-2);
}

/* Select2 — reskinned to match Bootstrap's own .form-select exactly, using
   the same Bootstrap CSS variables (not hardcoded values) so it always
   stays in sync with however .form-select is themed. */
.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color);
  line-height: calc(1.5em + 0.75rem);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
  right: 0.5rem;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--color-primary-bg-subtle);
}

.select2-dropdown {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.75rem;
}

.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--color-primary);
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--color-primary-bg-subtle);
}

/* Prevents a link-styled button from being re-clicked while a confirm request is in flight */
.disabled-link {
  background-color: var(--color-text-muted) !important;
  border-color: var(--color-text-muted) !important;
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
}

/* EziPay Card — physical/virtual card face mockup shown in the detail modal */
.ezipay-card-visual {
  position: relative;
  color: #cea535;
  padding: var(--space-4);
  border: 1px solid var(--color-primary-border-subtle);
  background-image: url("/public/images/ezipay_card/ezipay_card_background.png");
  background-size: cover;
}

.ezipay-card-visual h2,
.ezipay-card-visual h5,
.ezipay-card-visual h6 {
  color: #cea535;
}

.ezipay-card-visual .card-brand-logo {
  width: 60%;
  margin-top: var(--space-2);
}

.ezipay-card-visual-logo {
  width: 50px;
}

.ezipay-card-visual .valid-heading {
  position: relative;
  top: -10px;
}

.ezipay-card-detail-row .heading {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.ezipay-card-detail-row .value {
  font-size: 15px;
  text-align: right;
}

/* Auth pages (login, register, forgot/set password, OTP verify) — a dark
   split shell: branding panel on the left, a white form card on the right.
   Colors here are page-scoped custom properties on .auth-body so they don't
   leak into the --color-* tokens used by the rest of the app. */
body.auth-body {
  --auth-navy-900: #060a20;
  --auth-navy-800: #0a1442;
  --auth-navy-700: #101c5e;
  --auth-navy-600: #16277d;
  --auth-accent-purple: #5b21b6;
  --auth-accent-red: #e01b3d;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--auth-navy-900);
  background-image: url('/public/images/backgrounds/auth-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

.auth-split {
  flex: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

.auth-split-left {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) 64px;
  position: relative;
  overflow: hidden;
}

.auth-split-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 44px;
}

.auth-split-logo img {
  display: block;
  max-height: 88px;
  max-width: 300px;
  object-fit: contain;
}

/* Specificity note: base.css's `.theme-body h1` rule sets a dark text
   color at (0,1,1) specificity. A bare `.auth-split-headline` (0,1,0)
   would lose to it, so this is scoped through the parent to win. */
.auth-split-left .auth-split-headline {
  color: #fff;
  font-size: clamp(2.5rem, 4.4vw, 4.25rem);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 40px;
  max-width: 600px;
}

.auth-split-headline .text-highlight {
  color: #7aa2ff;
}

.auth-split-lede {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1875rem;
  max-width: 520px;
  margin-bottom: 40px;
}

.auth-split-divider {
  width: 160px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--auth-accent-purple), var(--auth-accent-red));
  margin-bottom: 44px;
}

.auth-split-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.auth-feature-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 140px;
  text-align: center;
}

.auth-feature-chip-icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 2.25rem;
}

.auth-feature-chip-icon-blue {
  color: #5b9bff;
}

.auth-feature-chip-icon-purple {
  color: #c58bff;
}

.auth-feature-chip-icon-green {
  color: #4ade80;
}

.auth-feature-chip-icon-orange {
  color: #fbbf5e;
}

.auth-feature-chip span {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
}

.auth-split-right {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

.auth-card {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 0;
  overflow: hidden;
  width: 100%;
  max-width: 660px;
  max-height: calc(100vh - var(--space-6) * 2);
  overflow-y: auto;
}

.auth-shell-wide .auth-card {
  max-width: 760px;
}

@media (max-width: 575.98px) {
  .auth-card {
    border-radius: var(--radius-xl);
  }
}

.auth-card-header {
  padding: var(--space-8) var(--space-6) var(--space-5);
  text-align: center;
}

.auth-card-header h1 {
  color: var(--color-text);
  font-weight: 800;
  font-size: 2.25rem;
  margin-bottom: var(--space-2);
}

.auth-card-header p {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  margin-bottom: 0;
}

.auth-card-body {
  padding: 0 var(--space-6) var(--space-6);
}

@media (max-width: 575.98px) {
  .auth-card-header {
    padding: var(--space-5) var(--space-4) var(--space-3);
  }
  .auth-card-body {
    padding: 0 var(--space-4) var(--space-4);
  }
}

/* Form inputs with a leading icon, filled/pill style */
.auth-input-icon {
  position: relative;
}

.auth-input-icon .form-control {
  background: var(--color-primary-bg-subtle);
  border-color: var(--color-primary-bg-subtle);
  border-radius: var(--radius-lg);
  padding-left: 3rem;
  height: 60px;
  font-size: 1.0625rem;
}

.auth-input-icon .form-control:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--color-primary-bg-subtle);
}

.auth-input-icon-glyph {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* Optional trailing action inside an .auth-input-icon field, e.g. the
   password show/hide toggle. Sits opposite the leading glyph. */
.auth-input-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  padding: 0.5rem;
  line-height: 1;
}

.auth-input-toggle:hover {
  color: var(--color-text);
}

.auth-input-icon-has-toggle .form-control {
  padding-right: 2.75rem;
}

/* Gradient submit button — navy/purple into red, matching the split panel */
.btn-auth-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: linear-gradient(90deg, var(--auth-navy-700), var(--auth-accent-purple), var(--auth-accent-red));
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.0625rem;
  border-radius: var(--radius-lg);
  height: 60px;
  box-shadow: var(--shadow-md);
}

.btn-auth-gradient:hover,
.btn-auth-gradient:focus {
  color: #fff;
  filter: brightness(1.06);
}

.btn-auth-gradient:disabled {
  color: #fff;
  opacity: 0.85;
  cursor: not-allowed;
}

/* Trust line + support link under the submit button */
.auth-trust-row {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.auth-trust-row + .auth-trust-row {
  margin-top: var(--space-2);
}

/* Footer bar — the border/background spans the full width, but the content
   row is capped and centered to line up with .auth-split above it. */
.auth-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-4) 64px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
}

.auth-footer-inner {
  max-width: 1760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Specificity note: base.css's `.theme-body a:not(.btn)` rule sets the
   indigo link color at (0,2,1). `.auth-footer a` alone (0,1,1) loses to it,
   so this is scoped through body.auth-body to win outright. */
body.auth-body .auth-footer a {
  color: rgba(255, 255, 255, 0.85);
}

body.auth-body .auth-footer a:hover {
  color: #fff;
}

/* The intl-tel-input country dropdown (register page's phone field) is
   appended straight to <body> (dropdownParent: document.body in its JS
   options), so it inherits body.auth-body's white text color onto its
   own white list — invisible country names. Force normal dark text back. */
body.auth-body .iti__country-list {
  color: var(--color-text);
}

@media (max-width: 1199.98px) {
  .auth-split-left {
    padding: var(--space-8) 40px;
  }

  .auth-split-features {
    gap: var(--space-3);
  }
}

@media (max-width: 991.98px) {
  .auth-split-left {
    display: none;
  }

  .auth-footer {
    text-align: center;
    padding: var(--space-4) var(--space-4);
  }

  .auth-footer-inner {
    justify-content: center;
  }
}

/* SweetAlert2 — reskinned via its own CSS custom properties to match the theme */
:root {
  --swal2-border-radius: var(--radius-lg);
  --swal2-confirm-button-background-color: var(--color-primary);
  --swal2-confirm-button-color: #fff;
  --swal2-confirm-button-border-radius: var(--radius-sm);
  --swal2-cancel-button-background-color: var(--color-bg);
  --swal2-cancel-button-color: var(--color-text);
  --swal2-cancel-button-border-radius: var(--radius-sm);
  --swal2-deny-button-background-color: var(--color-danger);
  --swal2-deny-button-color: #fff;
  --swal2-deny-button-border-radius: var(--radius-sm);
}

/* Event ticket QR view (inside the "My Tickets" modal) */
.ticket-view {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

/* Profile page avatar (agent/user "Settings" pages) */
.profile-avatar-lg {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

/* Masks a plain text input's characters like a password field (used where
   the value must stay type="text" for other reasons, e.g. a secret-code
   field read by JS as plain text) */
.field-mask {
  -webkit-text-security: disc;
}

/* jQuery UI datepicker — only the structural core.css + datepicker.css are
   vendored (no jquery-ui.theme.css / sprite images), so all color styling
   and the prev/next glyphs live here instead. */
.ui-datepicker {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  padding: var(--space-3);
}

.ui-datepicker .ui-datepicker-header {
  background: none;
  border: 0;
  color: var(--color-text);
}

.ui-datepicker .ui-datepicker-title {
  font-weight: 600;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: var(--color-primary-bg-subtle);
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  display: none;
}

.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
  font-family: "bootstrap-icons";
  color: var(--color-text);
}

.ui-datepicker .ui-datepicker-prev::before {
  content: "\f284"; /* bi-chevron-left */
}

.ui-datepicker .ui-datepicker-next::before {
  content: "\f285"; /* bi-chevron-right */
}

.ui-datepicker th {
  color: var(--color-text-muted);
}

.ui-datepicker td a,
.ui-datepicker td span {
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.ui-datepicker td a:hover {
  background: var(--color-primary-bg-subtle);
}

.ui-datepicker td .ui-datepicker-today a {
  border: 1px solid var(--color-primary);
}

.ui-datepicker td .ui-state-active {
  background: var(--color-primary);
  color: #fff;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
}

/* Right-hand promo rail cards (.portal-rightbar) */
.promo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.promo-card h5 {
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.promo-card > p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.promo-card-purple {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
  color: #fff;
}

.promo-card-purple p {
  color: rgba(255, 255, 255, 0.85);
}

.promo-card-marketplace {
  background: linear-gradient(180deg, var(--color-primary-bg-subtle), var(--color-surface) 60%);
}

/* Pill CTA with a white icon chip on the left, matching the reference
   banner's "Request Access API Now" button treatment. */
.btn-marketplace-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  margin-top: var(--space-4);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

.btn-marketplace-cta-text {
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
}

.btn-marketplace-cta:hover .btn-marketplace-cta-text,
.btn-marketplace-cta:focus .btn-marketplace-cta-text {
  color: #fff;
}

.btn-marketplace-cta:hover {
  filter: brightness(1.06);
}

.btn-marketplace-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--color-surface);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
  font-size: 1.0625rem;
}

.marketplace-illustration {
  width: 100%;
  max-width: 200px;
  margin: 0 auto var(--space-4);
  display: block;
}

/* Bottom feature strip — one bordered container with vertical dividers
   between items, matching the reference banner's footer row. */
.marketplace-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.marketplace-feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.marketplace-feature-item:nth-child(2n) {
  border-right: 0;
}

.marketplace-feature-item:nth-last-child(-n+2) {
  border-bottom: 0;
}

.marketplace-feature-item i {
  color: var(--color-primary);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.business-center-stats {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.business-center-stat {
  flex: 1;
  text-align: center;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-2);
}

.business-center-stat-value {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}

.business-center-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.why-ezipay-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.why-ezipay-item + .why-ezipay-item {
  margin-top: var(--space-4);
}

.why-ezipay-item h6 {
  font-weight: 700;
  margin-bottom: 2px;
}

.why-ezipay-item p {
  color: var(--color-text-muted);
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* Merchant Api Docs — tabbed web view shows only the active section;
   the PDF export includes the same content partial without this wrapper,
   so every section prints in full, one after another. */
.api-doc-tabs .api-doc-pane {
  display: none;
}

.api-doc-tabs .api-doc-pane.active-pane {
  display: block;
}

/* Merchant Api Docs — left-hand section nav */
.api-doc-nav-group {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2);
  padding: 0 var(--space-2);
}

.api-doc-nav-group:first-child {
  margin-top: 0;
}

.api-doc-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.api-doc-nav-link-text {
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9375rem;
}

.api-doc-nav-link i {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.api-doc-nav-link:hover {
  background: var(--color-primary-bg-subtle);
}

.api-doc-nav-link.active {
  background: var(--color-primary);
}

.api-doc-nav-link.active .api-doc-nav-link-text {
  color: #fff;
}

.api-doc-nav-link.active i {
  color: #fff;
}

/* Merchant Api Docs — content: endpoint strip, parameter list, code block */
.api-doc-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: var(--space-5) 0 var(--space-2);
}

.api-doc-label:first-of-type {
  margin-top: 0;
}

.api-doc-endpoint {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  overflow-x: auto;
  white-space: nowrap;
}

.api-doc-method {
  flex-shrink: 0;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill, 999px);
}

.api-doc-method-post {
  background: var(--color-success-bg);
  color: var(--color-success-emphasis);
}

.api-doc-method-get {
  background: var(--color-info-bg);
  color: var(--color-info-emphasis);
}

.api-doc-params {
  border-top: 1px solid var(--color-border);
}

.api-doc-param {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.api-doc-param-name {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  font-size: 0.875rem;
  min-width: 180px;
}

.api-doc-param-tag {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill, 999px);
}

.api-doc-param-tag-required {
  background: var(--color-danger-bg);
  color: var(--color-danger-emphasis);
}

.api-doc-param-tag-optional {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.api-doc-param-tag-conditional {
  background: var(--color-warning-bg);
  color: var(--color-warning-emphasis);
}

.api-doc-param-desc {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  flex: 1 1 240px;
}

.api-doc-note {
  display: flex;
  gap: var(--space-2);
  background: var(--color-danger-bg);
  color: var(--color-danger-emphasis);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.875rem;
  margin: var(--space-4) 0;
}

.api-doc-code {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

/* Detail sidebar rows — Dispute discussion / Ticket reply info panels */
.detail-row + .detail-row {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.detail-row-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.detail-row-value {
  font-weight: 600;
}

/* Small circular avatar for message threads */
.avatar-sm {
  width: 44px;
  height: 44px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Message thread — Dispute discussion / Ticket reply conversation */
.thread-message {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.thread-message:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.thread-message-body {
  flex: 1;
  min-width: 0;
}

.thread-message-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.thread-message-name {
  font-weight: 700;
  margin-bottom: 0;
}

.thread-message-time {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.thread-message-text {
  margin-bottom: 0;
}

.thread-message-file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-weight: 600;
  text-decoration: none;
}

/* intl-tel-input — the plugin's wrapper defaults to display:inline-block with
   no width, so it shrinks to its content instead of matching the sibling
   .form-control/.form-select it's laid out next to. */
.iti {
  display: block;
  width: 100%;
}

.iti input {
  width: 100%;
}

/* Tables where every row has a hidden sibling <tr> for expandable details
   (Recent Activity / Transactions lists with a collapse row per item) —
   :nth-child(odd) can't zebra-stripe these: every visible row is followed by
   exactly one hidden row, so all visible rows land on the same nth-child
   parity and end up identically shaded. Striping is applied via an explicit
   class instead, computed from the item's index in PHP. */
.table-collapsible-rows > tbody > tr:nth-child(odd) > td {
  background: transparent;
}

.table-collapsible-rows > tbody > tr.zebra-tint > td {
  background: rgba(91, 79, 230, 0.03);
}