.payment-method-picker { margin: 0; padding: 0; border: 0; }
.payment-method-picker legend { margin-bottom: 8px; color: #aebfc5; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.payment-method-picker > div { display: grid; grid-template-columns: 1fr; gap: 10px; }
.payment-method-picker button, .payment-method-picker .payment-method-card { min-width: 0; min-height: 106px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; align-items: center; color: white; background: rgba(255,255,255,.045); text-align: left; transition: border-color .2s ease, background .2s ease; }
.payment-method-picker button { cursor: pointer; }
.payment-method-picker button:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.055); }
.payment-method-picker button:focus-visible { outline: 2px solid rgba(222,232,235,.68); outline-offset: 2px; }
.payment-method-picker button.is-selected, .payment-method-picker .payment-method-card.is-selected { border-color: rgba(210,224,228,.5); background: rgba(255,255,255,.08); }
.payment-method-picker button > span { min-width: 0; }
.payment-option-body { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; align-items: center; }
.payment-option-copy { min-width: 0; display: grid; gap: 6px; }
.payment-method-picker strong { font-size: 14px; line-height: 1.35; }
.payment-method-picker small { color: #9aadb4; font-size: 12px; line-height: 1.4; }
.payment-provider-brand { width: 106px; height: 44px; padding: 7px 10px; border: 1px solid rgba(9,38,54,.1); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #123552; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.payment-provider-brand img { width: 100%; height: 100%; display: block; object-fit: contain; }
.payment-provider-brand--pesapal img { max-height: 31px; }
.payment-provider-brand--paypal { padding: 2px; }
.payment-provider-brand--paypal img { max-height: none; }
.payment-provider-brand--paystack { gap: 7px; color: #011b33; background: #fff; }
.payment-provider-brand--paystack svg { width: 22px; height: 26px; flex: 0 0 auto; fill: #00c3f7; }
.payment-provider-brand--paystack strong { color: #011b33; font: 850 14px/1 var(--font-ui); letter-spacing: -.035em; text-transform: lowercase; }
.payment-provider-brand--text { color: #dce8eb; background: rgba(255,255,255,.06); box-shadow: none; font-size: 10px; font-weight: 850; letter-spacing: .02em; }
.payment-option-body .payment-provider-brand { width: 92px; height: 48px; padding: 7px 8px; }
.payment-network-mark { width: 60px; height: 38px; padding: 5px 6px; border-radius: 9px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: white; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.payment-network-mark img { display: block; max-width: 100%; max-height: 24px; object-fit: contain; }
.payment-network-mark--mpesa img { width: 100%; }
.payment-network-mark--airtel img { width: 46px; }
.payment-provider-note { margin: -2px 0 0; color: #a9bbc1; font-size: 12px; line-height: 1.65; }
.payment-channel-marks { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.payment-channel-mark { min-width: 72px; height: 40px; padding: 7px 9px; border: 1px solid rgba(9,38,54,.12); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 2px 7px rgba(9,38,54,.05); }
.payment-channel-logo { height: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.payment-channel-logo img { width: auto; height: auto; max-width: 72px; max-height: 24px; display: block; object-fit: contain; }
.payment-channel-mark--mpesa { min-width: 96px; }
.payment-channel-mark--mpesa .payment-channel-logo img { max-width: 82px; }
.payment-channel-mark--airtel { min-width: 88px; }
.payment-channel-mark--airtel .payment-channel-logo img { max-width: 48px; max-height: 18px; }
.payment-channel-mark--airtel .payment-channel-logo strong { color: #1d252d; font: 800 10px/1 var(--font-ui); }
.payment-channel-mark--pesalink { min-width: 88px; }
.payment-channel-mark--pesalink .payment-channel-logo img { max-width: 72px; }
.payment-channel-mark--visa { min-width: 61px; }
.payment-channel-mark--visa .payment-channel-logo img { max-width: 45px; }
.payment-channel-mark--mastercard { min-width: 55px; }
.payment-channel-mark--mastercard .payment-channel-logo { width: 38px; }
.payment-channel-mark--mastercard .payment-channel-logo img { width: 38px; height: auto; max-width: none; max-height: 27px; }
.payment-channel-mark--apple { min-width: 57px; padding: 2px 0; border: 0; background: transparent; box-shadow: none; }
.payment-channel-mark--apple .payment-channel-logo img { width: 52px; max-width: none; max-height: 34px; }
.payment-page { min-height: 100vh; padding: 40px 5vw; color: white; background: var(--ink); }
.payment-page > .brand { color: white; }
.payment-card { max-width: 780px; margin: 7vh auto 0; padding: clamp(34px,5vw,58px); border: 1px solid rgba(255,255,255,.15); border-radius: 28px; background: linear-gradient(150deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); box-shadow: 0 34px 90px rgba(0,0,0,.22); }
.payment-status-row { margin-bottom: 24px; display: flex; align-items: center; gap: 15px; }
.payment-status-row .eyebrow { margin: 0; }
.payment-status-heading { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.payment-status-heading .payment-provider-brand { width: 100px; height: 42px; box-shadow: none; }
.payment-symbol { width: 54px; height: 54px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--amber); font-size: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.38); }
.payment-symbol svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.payment-card.is-paid .payment-symbol { color: #06231e; background: #43d1bd; border-color: rgba(158,243,229,.6); }
.payment-card.is-failed .payment-symbol { color: white; background: #b6493d; }
.payment-card h1 { max-width: 620px; margin: 0 0 20px; font-size: clamp(42px, 6vw, 62px); line-height: .95; letter-spacing: -.045em; }
.payment-card > p { color: #bed0d4; line-height: 1.7; }
.payment-card .payment-primary-message { max-width: 650px; margin: 0; color: #e7f1f2; font-size: 15px; line-height: 1.65; }
.payment-card .payment-secondary-message { max-width: 650px; margin: 8px 0 0; color: #93aab1; font-size: 12px; line-height: 1.65; }
.payment-card dl { margin: 34px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.15); border-left: 1px solid rgba(255,255,255,.15); }
.payment-card dl > div { min-width: 0; padding: 17px 18px; display: grid; gap: 8px; align-content: start; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.022); }
.payment-card dt { color: #7f969f; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.payment-card dd { margin: 0; overflow-wrap: anywhere; color: #f5f8f8; font-size: 13px; line-height: 1.45; }
.payment-command-bar { margin-bottom: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; display: grid; grid-template-columns: minmax(205px,auto) minmax(220px,1fr) auto; align-items: center; gap: 18px; background: #071d27; }
.payment-command-bar > div { min-width: 205px; display: flex; align-items: center; gap: 11px; }
.payment-command-bar p { margin: 0; color: #718790; font-size: 8px; line-height: 1.5; }
.payment-command-bar > div p { display: grid; gap: 3px; }
.payment-command-bar > div strong { color: #e7f0f1; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.payment-command-bar > p { max-width: 500px; margin-right: auto; }
.payment-alert { margin-bottom: 14px; padding: 14px 17px; border: 1px solid rgba(85,183,232,.32); border-radius: 15px; display: flex; gap: 14px; color: #a8cddd; background: rgba(85,183,232,.07); font-size: 9px; line-height: 1.5; }
.payment-alert strong { color: white; }
.payment-alert--warning { border-color: rgba(242,169,59,.42); color: #d8bd91; background: rgba(242,169,59,.08); }
.payment-kpi-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.13); border-left: 1px solid rgba(255,255,255,.13); }
.payment-kpi { min-width: 0; min-height: 194px; padding: 20px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); display: flex; flex-direction: column; background: rgba(1,13,20,.25); }
.payment-kpi > span, .payment-visual-card > header > span, .payment-ledger > header span { color: #f3bb61; font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.payment-kpi > strong { margin: 20px 0 10px; font-family: var(--font-display); font-size: clamp(28px,2.5vw,43px); font-weight: 400; line-height: 1; overflow-wrap: anywhere; }
.payment-kpi p { margin: auto 0 0; padding-top: 18px; color: #758b93; font-size: 8px; line-height: 1.55; }
.payment-chart-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr); gap: 18px; }
.payment-visual-card { min-width: 0; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: rgba(2,15,22,.46); overflow: hidden; }
.payment-visual-card > header { padding: 24px 24px 0; }
.payment-visual-card h3, .payment-ledger h3 { margin: 8px 0 5px; font-family: var(--font-display); font-size: clamp(24px,2.3vw,34px); font-weight: 400; }
.payment-visual-card header p, .payment-ledger header p { margin: 0; color: #80969e; font-size: 9px; line-height: 1.55; }
.payment-analytics-chart { width: 100%; height: 330px; padding: 8px 12px 12px; }
.payment-analytics-chart--empty { display: grid; place-items: center; color: #718790; font-size: 10px; text-align: center; }
.payment-donut-wrap { min-height: 330px; position: relative; }
.payment-donut-total { width: 88px; height: 88px; display: grid; place-content: center; gap: 3px; position: absolute; top: 41%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.payment-donut-total strong { font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.payment-donut-total span { color: #718790; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.payment-provider-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.payment-provider-grid > article { min-width: 0; padding: 22px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(2,15,22,.42); }
.payment-provider-grid header { display: grid; grid-template-columns: minmax(0,1fr) 10px auto; gap: 10px; align-items: center; }
.payment-provider-grid header .payment-provider-brand { width: 112px; height: 46px; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.payment-provider-grid header em { color: #82979e; font-size: 7px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.payment-provider-grid > article > p { margin: 22px 0 16px; color: #c2d0d3; font-size: 10px; }
.payment-provider-grid p small { margin-top: 5px; display: block; color: #718790; font-size: 8px; }
.payment-provider-grid dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
.payment-provider-grid dl div { padding: 12px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.payment-provider-grid dt { color: #718790; font-size: 7px; text-transform: uppercase; }
.payment-provider-grid dd { margin: 6px 0 0; color: white; font-size: 11px; }
.payment-readiness-note { margin: 11px 2px 0; color: #6f858d; font-size: 8px; line-height: 1.5; }
.paypal-readiness-heading > .payment-provider-brand { width: 112px; height: 46px; flex: 0 0 auto; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.payment-ledger { margin-top: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: rgba(2,15,22,.46); overflow: hidden; }
.payment-ledger > header { padding: 24px; display: flex; justify-content: space-between; gap: 24px; align-items: end; }
.payment-ledger > header > b { color: #82979e; font-size: 8px; font-weight: 500; }
.payment-ledger-scroll { overflow-x: auto; }
.payment-ledger table { width: 100%; min-width: 920px; border-collapse: collapse; }
.payment-ledger th, .payment-ledger td { padding: 15px 17px; border-top: 1px solid rgba(255,255,255,.1); color: #b9c8cc; font-size: 8px; text-align: left; vertical-align: top; }
.payment-ledger th { color: #718790; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.payment-ledger td strong, .payment-ledger td small { display: block; }
.payment-ledger td .payment-provider-brand { width: 82px; height: 34px; padding: 5px 7px; box-shadow: none; }
.payment-ledger td .payment-provider-brand--pesapal img { max-height: 23px; }
.payment-ledger td .payment-provider-brand--paypal { padding: 1px; }
.payment-ledger td strong { color: white; font-size: 9px; }
.payment-ledger td small { margin-top: 5px; color: #718790; line-height: 1.4; }
.payment-definitions code { color: var(--mint); font: inherit; }

@media (max-width: 980px) {
  .payment-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payment-chart-grid { grid-template-columns: 1fr; }
  .payment-provider-grid { grid-template-columns: 1fr; }
}

@media (max-width: 660px) {
  .payment-method-picker > div { grid-template-columns: 1fr; }
  .payment-method-picker button { min-height: 104px; grid-template-columns: minmax(0,1fr); }
  .payment-option-body { grid-template-columns: 84px minmax(0,1fr); gap: 10px; }
  .payment-option-body .payment-provider-brand { width: 84px; height: 44px; }
  .payment-method-picker strong { font-size: 11px; }
  .payment-method-picker small { font-size: 8px; }
  .payment-page { padding: 26px 20px; }
  .payment-card { margin-top: 6vh; padding: 34px 24px; border-radius: 24px; }
  .payment-card dl { grid-template-columns: 1fr; }
  .payment-command-bar { padding: 12px; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
  .payment-command-bar > div { min-width: 0; }
  .payment-command-bar > p { max-width: none; grid-column: 1 / -1; grid-row: 2; }
  .payment-alert { align-items: flex-start; flex-direction: column; gap: 4px; }
  .payment-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payment-kpi:last-child { grid-column: 1 / -1; }
  .payment-kpi { min-height: 154px; padding: 16px; }
  .payment-kpi > strong { margin-top: 15px; font-size: 28px; }
  .payment-kpi p { padding-top: 13px; }
  .payment-visual-card > header, .payment-ledger > header { padding: 21px 18px 0; }
  .payment-analytics-chart, .payment-donut-wrap { height: 270px; min-height: 270px; }
  .payment-provider-grid > article { padding: 18px; }
  .payment-provider-grid header { grid-template-columns: minmax(0,1fr) 10px; }
  .payment-provider-grid header em { grid-column: 1 / -1; }
  .payment-ledger > header { padding-bottom: 21px; align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (max-width: 980px) and (orientation: landscape) {

  .payment-page { padding: 24px; }
  .payment-card { max-width: 760px; margin-top: 28px; padding: 38px; }
  .payment-card h1 { font-size: clamp(40px, 6vw, 58px); }
}

.payment-method-picker legend {
  margin-bottom: 10px;
}

.payment-method-picker > div {
  gap: 11px;
}

.payment-method-picker button,
.payment-method-picker .payment-method-card {
  min-height: 104px;
  padding: 15px;
  border-color: #d5dde1;
  border-radius: 12px;
  color: #071d2a;
  background: #ffffff;
  box-shadow: none;
}

.payment-method-picker button:hover {
  border-color: #9badb4;
  background: #fbfcfc;
}

.payment-method-picker button:focus-visible {
  outline: 2px solid #087d70;
  outline-offset: 3px;
}

.payment-method-picker button.is-selected,
.payment-method-picker .payment-method-card.is-selected {
  border-color: #087d70;
  background: #eef8f5;
  box-shadow: inset 0 0 0 1px rgba(8,125,112,.12);
}

.payment-method-picker .payment-method-card.is-selected {
  border-color: #d5dde1;
  background: #ffffff;
  box-shadow: none;
}

.payment-provider-brand,
.payment-option-body .payment-provider-brand {
  border-color: #e1e6e8;
  background: #ffffff;
  box-shadow: none;
}

.payment-method-picker strong {
  color: #071d2a;
  font-size: 14px;
  font-weight: 800;
}

.payment-method-picker small {
  color: #5f747c;
  font-size: 11px;
  line-height: 1.45;
}

.payment-provider-note {
  margin: -3px 0 1px;
  color: #536a73;
  font-size: 12px;
  line-height: 1.6;
}

.booking-page .payment-provider-note strong {
  color: #263f49;
}

.payment-page {
  color: #071d2a;
  background: #f6f8f9;
}

.payment-page > .brand {
  color: #071d2a;
}

.payment-card {
  border-color: #dbe2e6;
  color: #071d2a;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(7,29,42,.09);
}

.payment-card > p,
.payment-card .payment-secondary-message {
  color: #5d727a;
}

.payment-card .payment-primary-message,
.payment-card dd {
  color: #183440;
}

.payment-card dl {
  border-top-color: #dfe5e8;
  border-left-color: #dfe5e8;
}

.payment-card dl > div {
  border-right-color: #dfe5e8;
  border-bottom-color: #dfe5e8;
  background: #fbfcfc;
}

.payment-card dt {
  color: #677b83;
}

.payment-card .button--dark {
  color: #ffffff;
  background: #087d70;
}

.payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.payment-card .payment-secondary-action {
  border: 1px solid #cbd7dc;
  color: #183440;
  background: #ffffff;
}

@media (max-width: 620px) {
  .payment-actions { align-items: stretch; flex-direction: column; }
  .payment-actions .button { width: 100%; }
}

@media (max-width: 660px) {

  .payment-method-picker button,
  .payment-method-picker .payment-method-card {
    min-height: 94px;
  }
}