/* v107 — payment card actions stay compact and right-aligned on narrow screens.
   The event card keeps its three-part composition: date | event | actions. */
@media (max-width:1240px){
  .payment-page .event-card-main{
    grid-template-columns:minmax(62px,.17fr) minmax(0,1fr) clamp(118px,18vw,220px)!important;
  }
  .payment-page .event-card-actions{
    width:100%!important;
    min-width:0!important;
    justify-self:end!important;
    align-items:flex-end!important;
    justify-content:center!important;
  }
  .payment-page .event-card-actions .btn-3d{
    width:clamp(108px,15vw,168px)!important;
    min-width:0!important;
    max-width:100%!important;
    flex:0 0 auto!important;
    align-self:flex-end!important;
    padding:clamp(7px,.9vw,10px) clamp(9px,1.2vw,15px)!important;
    font-size:clamp(7px,.92vw,10.5px)!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
  .payment-page .event-status,
  .payment-page .event-details-link{
    align-self:flex-end!important;
    text-align:right!important;
  }
}
@media (max-width:700px){
  .payment-page .event-card-main{
    grid-template-columns:minmax(54px,.18fr) minmax(0,1fr) clamp(92px,20vw,132px)!important;
  }
  .payment-page .event-card-actions{
    align-items:flex-end!important;
  }
  .payment-page .event-card-actions .btn-3d{
    width:clamp(82px,18vw,116px)!important;
    min-height:28px!important;
    padding:4px 7px!important;
    font-size:clamp(6.2px,1.18vw,8px)!important;
    border-radius:8px!important;
    white-space:nowrap!important;
  }
  .payment-page .event-status,
  .payment-page .event-details-link{
    width:auto!important;
    max-width:100%!important;
    text-align:right!important;
  }
}