.payment-hero .slots-hero-art {
  background-image: url('assets/payment-hero.webp');
  background-position: right center
}

.payment-hero .slots-hero-copy {
  max-width: 1000px
}

.payment-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px
}

.payment-overview>.panel {
  min-width: 0;
  margin: 0
}

.payment-tabs {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid #b77dd5;
  border-radius: 25px;
  background: linear-gradient(#482361, #20112f);
  margin: 14px 0 17px;
  overflow-x: auto;
  scrollbar-width: none
}

.payment-tabs::-webkit-scrollbar {
  display: none
}

.payment-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 0 130px;
  min-height: 51px;
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 9px 10px;
  background: transparent;
  color: white;
  font: 700 14px/1.4 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: background .2s, box-shadow .2s
}

.payment-tabs .ui-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px
}

.payment-tabs button[aria-selected=true] {
  border-color: #ffe6ff;
  background: linear-gradient(#f456ff, #c000ea 40%, #8300c0);
  box-shadow: inset 0 1px 8px #ffbfff80, 0 0 6px #fff0ff, 0 0 15px #d538e985
}

.payment-tabs button:hover {
  filter: brightness(1.13)
}

.payment-content h3 {
  font-size: 14px;
  line-height: 1.5
}

.payment-status .section-heading {
  align-items: flex-start
}

.status-list {
  display: grid;
  gap: 9px
}

.status-card {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
  border: 1px solid #c78bec;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(120deg, #592173, #2a103f);
  min-width: 0
}

.status-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 9px;
  margin: 0
}

.status-card .ui-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  filter: drop-shadow(0 0 5px #e08bff70)
}

.status-card>div {
  padding: 11px;
  background: linear-gradient(120deg, #f5eaff, #cdb8eb);
  color: #291239
}

.status-card p {
  margin: 0;
  line-height: 1.5
}

.status-card .status-action {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #9863b655;
  font-weight: 600
}

.status-0 h3 {
  background: linear-gradient(#713a71, #47214b)
}

.status-2 h3 {
  background: linear-gradient(#285d58, #20324b)
}

.status-3 h3 {
  background: linear-gradient(#235a80, #253960)
}

.status-4 h3 {
  background: linear-gradient(#8c215c, #47183f)
}

.status-5 h3 {
  background: linear-gradient(#6b265a, #381338)
}

.payment-status .recommendation {
  margin-top: 13px
}

.recommendation p+p {
  margin-top: 9px
}

.trace-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px
}

.trace-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px
}

.trace-stages article {
  position: relative;
  min-width: 0;
  padding: 17px 14px;
  border: 1px solid #d38fe6;
  border-radius: 14px;
  background: linear-gradient(155deg, #713482, #351249 50%, #201337);
  box-shadow: inset 0 1px 5px #e0a8f133, 0 0 10px #ce49e02b
}

.stage-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #ffd8ff;
  border-radius: 50%;
  background: linear-gradient(#ef9bf7, #aa32c2);
  font-size: 16px;
  font-weight: 800;
  position: absolute;
  top: 13px;
  left: 13px
}

.trace-stages .ui-icon {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 7px #d98bff75)
}

.trace-stages h3 {
  margin: 0 0 9px;
  color: #f8e4ff
}

.trace-stages p {
  margin: 8px 0;
  color: #e9dff0
}

.trace-reveal {
  min-width: 0;
  border: 1px solid #ffc3f1;
  border-radius: 13px;
  padding: 17px;
  background: linear-gradient(130deg, #fff1d1, #e2b9f0);
  color: #291239;
  box-shadow: inset 0 1px 8px #ffffff90
}

.trace-reveal h3 {
  font-size: 16px;
  margin: 0 0 14px
}

.trace-reveal .solution-list {
  gap: 14px
}

.trace-reveal .solution-list li {
  color: #291239
}

.trace-reveal .solution-list li:before {
  border-color: #149645
}

.investigation-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  align-items: start
}

.investigation-layout>div {
  min-width: 0
}

.prepare-panel table {
  width: 100%;
  min-width: 360px;
  font-size: 14px;
  background: linear-gradient(110deg, #f1e7fc, #cebae9);
  color: #251333
}

.prepare-panel thead th {
  background: linear-gradient(#702884, #45165c);
  color: white
}

.prepare-panel tbody th,
.prepare-panel tbody td {
  border-color: #ac86c7;
  color: #251333;
  padding: 11px
}

.prepare-panel tbody th {
  width: 34%
}

.prepare-panel tbody tr:nth-child(even) {
  background: #a673c523
}

.prepare-panel>p {
  margin: 13px 0 0;
  color: #e7dcec
}

.payment-safety {
  display: grid;
  gap: 14px
}

.payment-safety article {
  padding: 16px;
  border: 1px solid #c68ade;
  border-radius: 13px;
  background: linear-gradient(135deg, #4d205c, #25133a)
}

.payment-safety h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 16px;
  margin: 0 0 13px
}

.payment-safety h3 .ui-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px
}

.payment-safety .solution-list {
  gap: 11px
}

.payment-safety .solution-list li {
  color: #f0e2f5
}

.payment-safety>div.recommendation {
  margin-top: 0
}

main#payment-problems#payment-problems .payment-overview>.panel {
  border: 1px solid #ee8cff !important;
  border-radius: 19px;
  background: linear-gradient(150deg, #470c67, #1a0b33 35%, #1d0b36 80%, #400d5d) !important;
  box-shadow: inset 0 1px 0 #ffd8ffb0, inset 0 0 20px #af22de30, 0 0 5px #f074ff70, 0 0 17px #c523f94a
}

main#payment-problems#payment-problems .issue-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 9px;
  padding: 8px
}

main#payment-problems#payment-problems .issue-problem {
  gap: 10px;
  padding: 6px 9px 6px 3px;
  align-items: flex-start
}

main#payment-problems#payment-problems .issue-problem>.ui-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 7px
}

main#payment-problems#payment-problems .issue-problem h3 {
  font-size: 14px;
  line-height: 1.5
}

main#payment-problems#payment-problems .issue-solution {
  padding: 11px
}

@media(max-width:1350px) {
  .payment-overview {
    grid-template-columns: 1fr
  }

  .status-list {
    grid-template-columns: 1fr 1fr
  }

  .trace-layout {
    grid-template-columns: 1fr
  }

  .investigation-layout {
    grid-template-columns: 1fr
  }
}

@media(max-width:680px) {
  .payment-hero .slots-hero-art {
    background-position: 70% center
  }

  .payment-tabs button {
    flex: 1 0 150px
  }

  .payment-tabs .ui-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px
  }

  .status-list {
    grid-template-columns: 1fr
  }

  .trace-stages {
    grid-template-columns: 1fr
  }

  .trace-stages article {
    padding: 16px
  }

  .trace-stages .ui-icon {
    margin: 0 0 12px auto;
    width: 43px;
    height: 43px
  }

  .trace-stages h3 {
    padding-right: 0
  }

  .trace-reveal {
    padding: 15px
  }

  .payment-safety article {
    padding: 14px
  }

  .payment-overview {
    gap: 16px
  }

  main#payment-problems#payment-problems .issue-row {
    grid-template-columns: 1fr
  }

  main#payment-problems#payment-problems .issue-problem {
    border-right: 0
  }

  main#payment-problems#payment-problems .payment-overview>.panel {
    border-radius: 16px
  }
}

main#payment-problems#payment-problems .payment-safety .solution-list li {
  color: #f0e2f5
}

@media(min-width:1351px) {
  .payment-overview {
    align-items: stretch
  }

  .payment-status {
    display: flex;
    flex-direction: column
  }

  .payment-status:after {
    content: '';
    display: block;
    flex: 1;
    min-height: 0;
    margin-top: 15px;
    border-radius: 12px;
    background: url('assets/payment-hero.webp') 83% center/auto 100% no-repeat;
    mask-image: linear-gradient(transparent, #000 25%, #000 85%, transparent);
    opacity: .8
  }
}

.trace-reveal {
  display: flex;
  flex-direction: column
}

.trace-reveal-art {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 18px
}

.trace-reveal-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 9px #80349d20)
}

@media(max-width:1350px) {
  .trace-reveal-art {
    flex: none;
    height: 190px
  }
}

@media(max-width:680px) {
  .trace-reveal-art {
    height: 170px;
    margin-top: 15px
  }
}

@media(prefers-reduced-motion:reduce) {
  .payment-tabs button {
    transition: none
  }
}