:root {
  --pay-ink: #211d18;
  --pay-muted: #6f685f;
  --pay-cream: #f3eee5;
  --pay-paper: #fffdf8;
  --pay-line: rgba(123, 91, 34, .2);
  --pay-gold: #b88932;
  --pay-gold-dark: #77571f;
  --pay-turquoise: #42afa9;
  --pay-turquoise-dark: #187c77;
  --pay-error: #a63d30;
  --pay-success: #2f7559;
}

html { background: var(--pay-cream); }

body.payment-redesign {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 8% 12%, rgba(184, 137, 50, .12), transparent 26rem),
    linear-gradient(135deg, #eee7dc 0%, #f7f3ec 52%, #e6eee9 100%);
  color: var(--pay-ink);
  font-family: "Montserrat", Arial, sans-serif;
  overflow-x: hidden;
}

body.payment-redesign::before {
  content: "";
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  background-image: url("/v2/assets/brand/sila-solnca-icon-gold.svg");
  background-repeat: no-repeat;
  background-position: calc(100% + 5rem) calc(100% + 7rem);
  background-size: min(36rem, 62vw);
  opacity: .035;
  animation: none;
  pointer-events: none;
  z-index: 0;
}

.payment-redesign .back-link {
  position: fixed;
  inset: 1.25rem auto auto 1.5rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1rem;
  color: #fffaf0;
  background: rgba(25, 22, 18, .78);
  border: 1px solid rgba(255, 232, 173, .25);
  border-radius: .35rem;
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .02em;
  backdrop-filter: blur(14px);
  transition: transform .2s ease, background-color .2s ease;
}

.payment-redesign .back-link:hover { background: #211d18; transform: translateY(-2px); }
.payment-redesign .back-link:active { transform: translateY(0); }
.payment-redesign :focus-visible { outline: 3px solid var(--pay-turquoise); outline-offset: 3px; }

.payment-redesign .container.payment-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(20rem, .78fr) minmax(32rem, 1.22fr);
  gap: clamp(1.3rem, 3vw, 3.5rem);
  width: min(74rem, calc(100% - 3rem));
  max-width: none;
  margin: 0 auto;
  padding: clamp(5.4rem, 8vw, 7rem) 0 4rem;
  align-items: start;
}

.payment-redesign .payment-header {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 5.5rem;
  min-height: 38rem;
  margin: 0;
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  text-align: left;
  border-radius: 1.1rem .25rem 1.1rem .25rem;
  background:
    linear-gradient(180deg, rgba(19, 20, 17, .15) 5%, rgba(18, 18, 15, .88) 82%),
    url("/v2/assets/payment-community-v1.webp") center 42% / cover no-repeat;
  box-shadow: 0 2rem 5rem rgba(66, 53, 35, .16);
}

.payment-redesign .payment-header::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(255, 232, 173, .34);
  border-radius: .75rem .15rem .75rem .15rem;
  pointer-events: none;
}

.payment-redesign .payment-brand {
  position: absolute;
  inset: 2rem auto auto 2rem;
  width: min(13rem, 62%);
  height: auto;
}

.payment-redesign .payment-kicker {
  position: relative;
  margin: 0 0 .85rem;
  color: #74d4cd;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.payment-redesign .payment-header h1 {
  position: relative;
  max-width: 10ch;
  margin: 0 0 1rem;
  color: #ffe8ad;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 4vw, 4.35rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.payment-redesign .payment-header > p {
  position: relative;
  max-width: 31rem;
  margin: 0 0 1.4rem;
  color: rgba(255, 250, 240, .86);
  font-size: .96rem;
  line-height: 1.6;
}

.payment-redesign .date-badge {
  position: relative;
  padding: .65rem 0 0;
  color: #fffaf0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 232, 173, .48);
  border-radius: 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
}

.payment-redesign .payment-trust {
  position: relative;
  display: grid;
  gap: .55rem;
  width: 100%;
  margin: 1.35rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  color: rgba(255,250,240,.76);
  font-size: .76rem;
}

.payment-redesign .payment-trust span::before {
  content: "";
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-right: .6rem;
  border: 1px solid #74d4cd;
  transform: rotate(45deg);
}

.payment-redesign .payment-main {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.payment-redesign .card,
.payment-redesign .order-status .status-card {
  grid-column: auto;
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2.35rem);
  color: var(--pay-ink);
  background: rgba(255, 253, 248, .92);
  border: 1px solid var(--pay-line);
  border-radius: .35rem 1.2rem .35rem 1.2rem;
  box-shadow: 0 1.8rem 4.4rem rgba(71, 56, 36, .1);
  backdrop-filter: blur(15px);
}

.payment-redesign .step-card { animation: payReveal .34s ease-out; }
@keyframes payReveal { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }

.payment-redesign .step-indicator {
  display: inline-flex;
  margin: 0 0 1.15rem;
  padding: 0 0 .45rem;
  color: var(--pay-turquoise-dark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(24,124,119,.35);
  border-radius: 0;
  font-size: .7rem;
  letter-spacing: .16em;
}

.payment-redesign .card-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  margin: 0 0 1.5rem;
  color: var(--pay-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  font-weight: 400;
  line-height: 1.06;
}

.payment-redesign .card-title .icon {
  width: auto;
  height: auto;
  color: var(--pay-gold-dark);
  background: none;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.payment-redesign .ticket-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

.payment-redesign .ticket-option.ticket-disabled { display: none; }
.payment-redesign .ticket-option::before { pointer-events: none; }

.payment-redesign .ticket-option {
  min-height: 7.8rem;
  padding: 1.25rem 1.35rem;
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr auto;
  grid-template-areas: "price desc quantity";
  align-items: center;
  gap: 1.3rem;
  color: var(--pay-ink);
  background: #f4efe6;
  border: 1px solid rgba(119, 87, 31, .2);
  border-radius: .25rem .9rem .25rem .9rem;
  box-shadow: none;
  text-align: left;
  cursor: default;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.payment-redesign .ticket-option.active {
  color: var(--pay-ink);
  background: #edf6f2;
  border-color: var(--pay-turquoise);
  transform: translateY(-2px);
  box-shadow: none;
}

.payment-redesign .ticket-option .price {
  grid-area: price;
  margin: 0;
  color: var(--pay-gold-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.payment-redesign .ticket-option .price sup { font-family: "Montserrat", sans-serif; font-size: .9rem; }
.payment-redesign .ticket-option .desc { grid-area: desc; display: grid; gap: .25rem; color: var(--pay-muted); font-size: .8rem; line-height: 1.45; }
.payment-redesign .ticket-option .desc::before { content: none; }
.payment-redesign .ticket-option .desc strong { color: var(--pay-ink); font-size: .9rem; }
.payment-redesign .ticket-option .desc span { max-width: 36rem; }
.payment-redesign .ticket-option .badge { position: static; grid-area: badge; color: var(--pay-turquoise-dark); background: none; font-size: .68rem; }

.payment-redesign .ticket-quantity {
  grid-area: quantity;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2.5rem 2.35rem 2.5rem;
  align-items: center;
  border: 1px solid rgba(31, 112, 106, .28);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
}
.payment-redesign .ticket-quantity button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  color: var(--pay-turquoise-dark);
  background: transparent;
  border: 0;
  font: 700 1.25rem/1 "Montserrat", sans-serif;
  cursor: pointer;
}
.payment-redesign .ticket-quantity button:hover,
.payment-redesign .ticket-quantity button:focus-visible { background: rgba(34, 147, 139, .12); outline: none; }
.payment-redesign .ticket-quantity output { color: var(--pay-ink); text-align: center; font: 700 .9rem/1 "Montserrat", sans-serif; }

.payment-redesign .cart-summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(119, 87, 31, .2);
  border-radius: .25rem .9rem .25rem .9rem;
  background: #f4efe6;
  color: var(--pay-muted);
}
.payment-redesign .cart-summary > div { display: grid; gap: .2rem; }
.payment-redesign .cart-summary span { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.payment-redesign .cart-summary strong { color: var(--pay-ink); font-size: .95rem; }
.payment-redesign .cart-summary .cart-total { text-align: right; }
.payment-redesign .cart-summary .cart-total strong { color: var(--pay-turquoise-dark); font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; font-weight: 400; }
.payment-redesign .cart-summary.has-items { border-color: rgba(31, 112, 106, .38); background: #edf6f2; }
.payment-redesign .cart-error { min-height: 1.2rem; margin: .55rem 0 0; color: #a43e32; font-size: .78rem; font-weight: 600; }

.payment-redesign .btn-pay,
.payment-redesign .btn-search {
  min-height: 3.35rem;
  padding: .85rem 1.35rem;
  color: #fff;
  background: var(--pay-turquoise) !important;
  border: 1px solid var(--pay-turquoise) !important;
  border-radius: .25rem .8rem .25rem .8rem !important;
  box-shadow: 0 .8rem 2rem rgba(24,124,119,.16);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.payment-redesign .btn-pay:hover,
.payment-redesign .btn-search:hover { background: var(--pay-turquoise-dark) !important; transform: translateY(-2px); }
.payment-redesign .btn-pay:active,
.payment-redesign .btn-search:active { transform: translateY(0); }

.payment-redesign .step-back-btn,
.payment-redesign .btn-secondary {
  color: var(--pay-muted);
  background: transparent;
  border: 1px solid rgba(33,29,24,.2);
  border-radius: .25rem .65rem .25rem .65rem;
}
.payment-redesign .step-back-btn:hover,
.payment-redesign .btn-secondary:hover { color: var(--pay-ink); background: #f4efe6; border-color: rgba(33,29,24,.35); }

.payment-redesign .chosen-ticket-info {
  margin: 0 0 1.4rem;
  padding: 1rem 1.15rem;
  color: var(--pay-muted);
  background: #f4efe6;
  border: 1px solid rgba(184,137,50,.22);
  border-radius: .2rem .65rem .2rem .65rem;
}
.payment-redesign .chosen-ticket-info strong { color: var(--pay-gold-dark); font-family: Georgia,serif; font-size: 1.65rem; }

.payment-redesign .method-choice-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: .8rem; }
.payment-redesign .method-choice-card {
  min-height: 12.5rem;
  padding: 1.45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  color: var(--pay-ink);
  background: #f4efe6;
  border: 1px solid rgba(119,87,31,.18);
  border-radius: .25rem .9rem .25rem .9rem;
  text-align: left;
  box-shadow: none;
}
.payment-redesign .method-choice-card:hover { background: #edf6f2; border-color: var(--pay-turquoise); box-shadow: none; transform: translateY(-2px); }
.payment-redesign .method-choice-card h3 { color: var(--pay-ink); font-family: Georgia,serif; font-size: 1.45rem; font-weight: 400; }
.payment-redesign .method-choice-card p { color: var(--pay-muted); line-height: 1.45; }
.payment-redesign .method-choice-icon { color: var(--pay-gold-dark); }
.payment-redesign .method-logos { justify-content: flex-start; }
.payment-redesign .method-logo-text { padding: .22rem .45rem; border: 1px solid rgba(33,29,24,.18); color: var(--pay-muted); font-size: .62rem; font-weight: 700; letter-spacing: .05em; }
.payment-redesign .method-badge { color: var(--pay-turquoise-dark); background: rgba(66,175,169,.12); border-radius: .15rem; }
.payment-redesign .method-badge-wa { color: #2f7559; background: rgba(47,117,89,.1); }
.payment-redesign .method-choice-card.method-locked { opacity: .62; filter: none; }
.payment-redesign .method-choice-card.method-locked::after { content: ""; }

.payment-redesign .form-group label { color: var(--pay-ink); font-size: .77rem; font-weight: 600; }
.payment-redesign .form-control,
.payment-redesign .pay-amount-input input {
  color: var(--pay-ink);
  background: #fffdf8;
  border: 1px solid rgba(33,29,24,.2);
  border-radius: .2rem .65rem .2rem .65rem;
  box-shadow: none;
}
.payment-redesign .form-control::placeholder { color: #a49c91; }
.payment-redesign .form-control:focus,
.payment-redesign .pay-amount-input input:focus { border-color: var(--pay-turquoise); box-shadow: 0 0 0 3px rgba(66,175,169,.14); }

.payment-redesign .info-box {
  color: var(--pay-muted);
  background: #edf6f2;
  border: 1px solid rgba(66,175,169,.2);
  border-radius: .2rem .65rem .2rem .65rem;
}
.payment-redesign .info-box h4 { color: var(--pay-turquoise-dark); }

.payment-redesign #searchSection { margin-top: 0 !important; }
.payment-redesign #searchSection h3 { color: var(--pay-ink); font-family: Georgia,serif; font-size: 1.3rem !important; font-weight: 400; }
.payment-redesign .order-status { grid-column: auto; }
.payment-redesign .status-title { color: var(--pay-ink); }
.payment-redesign .status-message,
.payment-redesign .status-row .label { color: var(--pay-muted); }
.payment-redesign .status-row .value { color: var(--pay-ink); }

.payment-redesign .payment-modal-overlay { background: rgba(31,27,22,.72); backdrop-filter: blur(10px); }
.payment-redesign .payment-modal-box { color: #fffaf0; background: #211d18; border-color: rgba(255,232,173,.22); }
.payment-redesign .pm-cards span { padding: .2rem .35rem; color: rgba(255,250,240,.7); border: 1px solid rgba(255,250,240,.18); font-size: .62rem; font-weight: 700; }

@media (max-width: 900px) {
  .payment-redesign .back-link { position: absolute; inset: 1rem auto auto 1rem; }
  .payment-redesign .container.payment-layout {
    grid-template-columns: 1fr;
    width: min(46rem, calc(100% - 1.5rem));
    padding-top: 4.8rem;
  }
  .payment-redesign .payment-header {
    position: relative;
    top: auto;
    min-height: 28rem;
    padding: 2rem;
  }
  .payment-redesign .payment-header h1 { font-size: clamp(3.3rem, 12vw, 5rem); }
  .payment-redesign .card,
  .payment-redesign .payment-main,
  .payment-redesign .order-status,
  .payment-redesign .order-status .status-card { grid-column: 1; }
  .payment-redesign .payment-main { grid-row: auto; }
}

@media (max-width: 560px) {
  .payment-redesign .container.payment-layout { width: calc(100% - 1rem); gap: .85rem; padding-bottom: 2rem; }
  .payment-redesign .payment-header { min-height: 29rem; padding: 1.35rem; border-radius: .75rem .2rem .75rem .2rem; }
  .payment-redesign .payment-header::before { inset: .55rem; }
  .payment-redesign .payment-brand { inset: 1.3rem auto auto 1.3rem; width: 11rem; }
  .payment-redesign .payment-kicker { margin-top: 4.7rem; }
  .payment-redesign .payment-header h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
  .payment-redesign .payment-header > p { font-size: .83rem; }
  .payment-redesign .card,
  .payment-redesign .order-status .status-card { padding: 1.2rem; border-radius: .25rem .85rem .25rem .85rem; }
  .payment-redesign .ticket-option { grid-template-columns: 1fr auto; grid-template-areas: "price quantity" "desc desc"; gap: .65rem 1rem; padding: 1rem; }
  .payment-redesign .ticket-quantity { grid-template-columns: 2.35rem 2.15rem 2.35rem; }
  .payment-redesign .method-choice-grid { grid-template-columns: 1fr; }
  .payment-redesign .method-choice-card { min-height: 10rem; }
  .payment-redesign .search-form { display: grid !important; grid-template-columns: 1fr; }
  .payment-redesign .btn-search { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .payment-redesign *, .payment-redesign *::before, .payment-redesign *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}