/* ROXX Checkout V2 */
.checkout-hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:start;
}

.checkout-flyer{
  overflow:hidden;
  padding:0;
}

.checkout-flyer-img{
  min-height:360px;
  background:linear-gradient(135deg,rgba(230,57,70,.35),rgba(255,159,28,.2));
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.45);
  font-weight:1000;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.checkout-flyer-img img{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  display:block;
}

.ticket-picker{
  display:grid;
  gap:12px;
}

.ticket-card{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  border-radius:22px;
  padding:16px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
}

.ticket-title{
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.ticket-desc{
  color:rgba(255,255,255,.62);
  margin-top:5px;
}

.ticket-price{
  font-size:1.15rem;
  font-weight:1000;
  color:#ff9f1c;
  white-space:nowrap;
}

.qty-control{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
  margin-top:12px;
}

.qty-control button{
  width:40px;
  height:40px;
  padding:0;
  border-radius:999px;
  display:grid;
  place-items:center;
}

.qty-control input{
  width:70px;
  text-align:center;
}

.checkout-grid{
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:18px;
  align-items:start;
  margin-top:18px;
}

.summary-box{
  position:sticky;
  top:92px;
}

.summary-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
}

.summary-line.total{
  font-size:1.4rem;
  color:#fff;
  font-weight:1000;
  border-bottom:0;
  margin-top:8px;
}

.coupon-row{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:14px;
}

.legal-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:rgba(255,255,255,.68);
  line-height:1.45;
}

.legal-check input{
  width:auto;
  margin-top:4px;
}

.payment-panel{
  text-align:center;
}

.status-pill{
  display:inline-flex;
  border-radius:999px;
  padding:7px 12px;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
}

.status-pill.paid{
  border-color:rgba(37,211,102,.35);
  background:rgba(37,211,102,.10);
  color:#aaffc7;
}

.status-pill.pending{
  border-color:rgba(255,159,28,.35);
  background:rgba(255,159,28,.10);
  color:#ffd69a;
}

@media(max-width:900px){
  .checkout-hero,
  .checkout-grid{
    grid-template-columns:1fr;
  }

  .summary-box{
    position:relative;
    top:auto;
  }

  .ticket-card{
    grid-template-columns:1fr;
  }
}