.payment-page {
  --payment-primary: #7367f0;
  --payment-success: #28c76f;
  --payment-danger: #ea5455;
  --payment-border: #ebe9f1;
  --payment-muted: #6e6b7b;
}
[dir] .payment-page .card-body {
  padding: 2rem;
}
.payment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
[dir] .payment-header {
  margin-bottom: 2.25rem;
}
.payment-header h2 {
  color: #2f2b3d;
  font-weight: 600;
}
.order-badge,
.status-badge {
  font-size: 0.9rem;
}
[dir] .order-badge, [dir] .status-badge {
  padding: 0.6rem 0.85rem;
}
.payment-steps {
  display: flex;
  width: min(680px, 100%);
}
[dir] .payment-steps {
  margin: 0 auto 2.5rem;
}
.payment-step {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  color: #b9b9c3;
  font-size: 0.9rem;
  font-weight: 500;
}
.payment-step:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 17px;
  width: calc(100% - 50px);
  height: 2px;
  content: "";
}
[dir] .payment-step:not(:last-child)::after {
  background: var(--payment-border);
}
[dir=ltr] .payment-step:not(:last-child)::after {
  left: calc(50% + 25px);
}
[dir=rtl] .payment-step:not(:last-child)::after {
  right: calc(50% + 25px);
}
.payment-step.active {
  color: var(--payment-primary);
}
[dir] .payment-step.active:not(:last-child)::after {
  background: rgba(115, 103, 240, 0.4);
}
.payment-step.active .step-number {
  color: #fff;
}
[dir] .payment-step.active .step-number {
  background: var(--payment-primary);
  box-shadow: 0 3px 8px rgba(115, 103, 240, 0.25);
}
.payment-step.error {
  color: var(--payment-danger);
}
[dir] .payment-step.error .step-number {
  background: var(--payment-danger);
}
.step-number {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}
[dir] .step-number {
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--payment-border);
}
.compose-form {
  max-width: 1000px;
}
[dir] .compose-form {
  margin: 0 auto;
}
[dir] .payment-section {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--payment-border);
  border-radius: 0.5rem;
}
.section-heading {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
[dir] .section-heading {
  margin-bottom: 1.25rem;
}
.section-heading h4 {
  font-size: 1.1rem;
  font-weight: 600;
}
[dir] .section-heading h4 {
  margin: 0 0 0.2rem;
}
.section-heading p {
  color: var(--payment-muted);
  font-size: 0.9rem;
}
[dir] .section-heading p {
  margin: 0;
}
.section-index {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--payment-primary);
  font-weight: 600;
}
[dir] .section-index {
  border-radius: 50%;
  background: rgba(115, 103, 240, 0.12);
}
[dir] .selection-input {
  cursor: pointer;
}
.balance-panel {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  justify-content: center;
  color: var(--payment-muted);
}
[dir] .balance-panel {
  padding: 0.85rem 1rem;
  border-radius: 0.4rem;
  background: #f8f8f8;
}
.balance-panel.ready {
  color: #1f7a4c;
}
[dir] .balance-panel.ready {
  background: rgba(40, 199, 111, 0.08);
}
[dir] .balance-panel strong {
  margin-top: 0.25rem;
}
.beneficiary-summary {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}
[dir] .beneficiary-summary {
  padding: 1rem;
  border-radius: 0.4rem;
  background: #f8f8f8;
}
.beneficiary-summary div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.beneficiary-summary span {
  color: var(--payment-muted);
  font-size: 0.8rem;
}
.beneficiary-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[dir] .beneficiary-summary strong {
  margin-top: 0.25rem;
}
.compose-actions,
.review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.security-note {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--payment-muted);
  font-size: 0.85rem;
}
.review-page {
  max-width: 820px;
}
[dir] .review-page {
  margin: 0 auto;
}
[dir] .review-intro {
  margin-bottom: 1.75rem;
}
[dir] .review-intro h3 {
  margin: 0.75rem 0 0.35rem;
}
.review-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--payment-primary);
}
[dir] .review-icon {
  border-radius: 50%;
  background: rgba(115, 103, 240, 0.12);
}
.review-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  color: #fff;
}
[dir] .review-flow {
  padding: 1.5rem;
  border-radius: 0.5rem;
}
[dir=ltr] .review-flow {
  background: linear-gradient(125deg, #6255d9, #8579f3);
}
[dir=rtl] .review-flow {
  background: linear-gradient(-125deg, #6255d9, #8579f3);
}
.review-flow > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.review-flow span,
.review-flow small {
  opacity: 0.8;
}
.review-flow strong {
  overflow-wrap: anywhere;
}
[dir] .review-flow strong {
  margin: 0.3rem 0;
}
.review-arrow {
  align-items: center;
}
[dir] .review-details, [dir] .result-summary {
  margin: 1.25rem 0;
  border: 1px solid var(--payment-border);
  border-radius: 0.5rem;
}
.review-details > div,
.result-summary > div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 1rem;
}
[dir] .review-details > div, [dir] .result-summary > div {
  padding: 0.9rem 1.1rem;
}
[dir] .review-details > div:not(:last-child), [dir] .result-summary > div:not(:last-child) {
  border-bottom: 1px solid var(--payment-border);
}
.review-details > div span,
.result-summary > div span {
  color: var(--payment-muted);
}
.debit-amount {
  color: var(--payment-danger);
  font-size: 1.1rem;
}
.wrap-value {
  overflow-wrap: anywhere;
}
.result-page {
  max-width: 640px;
}
[dir] .result-page {
  margin: 0 auto;
  padding: 1.5rem 0;
  text-align: center;
}
[dir] .result-page h2 {
  margin: 1rem 0 0.75rem;
}
.result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  color: var(--payment-success);
}
[dir] .result-icon {
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(40, 199, 111, 0.12);
}
[dir=ltr] .result-summary {
  text-align: left;
}
[dir=rtl] .result-summary {
  text-align: right;
}
@media (max-width: 767px) {
[dir] .payment-page .card-body {
    padding: 1.25rem;
}
.payment-header,
.compose-actions,
.review-actions {
    gap: 1rem;
    align-items: stretch;
    flex-direction: column;
}
.beneficiary-summary,
.review-flow {
    grid-template-columns: 1fr;
}
[dir] .review-flow > div, [dir] .review-flow .text-right {
    text-align: center !important;
}
.review-arrow {
    flex-direction: row !important;
    justify-content: center;
    gap: 0.75rem;
}
[dir=ltr] .review-arrow svg {
    transform: rotate(90deg);
}
[dir=rtl] .review-arrow svg {
    transform: rotate(-90deg);
}
.compose-actions .btn,
.review-actions .btn {
    width: 100%;
}
.review-details > div,
.result-summary > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
}
}