/* ============================================================
   choose.css — 左浅紫面板收据卡 / 右手风琴三横幅
   ============================================================ */

.choose { padding: 100px 0 190px; background: var(--white); }

.choose__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5.5vw, 90px);
  align-items: stretch;
}

/* ---------- 左面板 ---------- */
.choose__panel {
  position: relative;
  border-radius: var(--radius-card);
  background: #e9edfb;
  overflow: clip;
  padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 70px);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 56px;
}
.choose__shape { position: absolute; pointer-events: none; opacity: .7; }
.choose__shape--1 { left: -80px; top: 34%; width: 260px; }
.choose__shape--2 { right: -220px; bottom: -180px; width: 620px; }

.choose__receipt {
  position: relative;
  width: min(430px, 100%);
  padding: 84px 40px 56px;
  border-radius: 26px;
  background: var(--white);
  box-shadow: 0 34px 80px rgb(3 0 40 / .12);
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.choose__receipt-check {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: #0c0e14;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 22px rgb(12 14 20 / .06);
  margin-bottom: 26px;
}
.choose__receipt-check img { width: 44px; }
.choose__receipt-label { font-size: 20px; color: var(--ink); }
.choose__receipt-amount {
  font-family: var(--font-display);
  font-size: clamp(44px, 4vw, 60px);
  line-height: 1;
  color: var(--ink);
}
.choose__receipt .btn { margin-top: 18px; }

.choose__panel-caption {
  position: relative;
  padding-top: 48px;
  border-top: 1px dashed rgb(3 0 40 / .3);
  width: min(430px, 100%);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- 右列 ---------- */
.choose__copy { display: grid; align-content: center; gap: 26px; }
.choose__copy h2 { max-width: 15ch; }
.choose__copy > p { max-width: 52ch; font-size: var(--body-lg); }

.choose__rows { display: grid; gap: 16px; margin-top: 26px; }
.choose__row {
  position: relative;
  border-radius: 16px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--ink);
  transition: transform .25s var(--reveal-ease);
  overflow: clip;
}
.choose__row:hover { transform: translateY(-2px); }
.choose__row-tag {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: #101218;
  color: var(--white);
  font-size: 17px;
}

.choose__row--noise { background: #d7d9de url('../../assets/img/choose-noise-1.svg'); background-size: 600px 82px; }
.choose__row--green { background: var(--green); }
.choose__row--green .choose__row-tag { background: #0f130f; }

.choose__row--dark {
  background: var(--dark);
  color: var(--white);
  flex-direction: column;
  align-items: stretch;
}
.choose__row-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.choose__row-title { font-size: clamp(22px, 2vw, 28px); }
.choose__row-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .4s var(--reveal-ease), opacity .4s, margin .4s;
  opacity: 1;
  margin-top: 18px;
}
.choose__row[aria-expanded="false"] .choose__row-body { grid-template-rows: 0fr; opacity: 0; margin-top: 0; }
.choose__row-body > span:first-child {
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--body-lg);
  color: rgb(255 255 255 / .72);
  max-width: 46ch;
}
.choose__row-pill {
  justify-self: start;
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--ink);
  font-size: 16px;
}

@media (max-width: 1199px) {
  .choose__grid { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .choose { padding: 40px 0 80px; }
  .choose__row { padding: 20px 20px; }
}