.wc-ticket-wrap {
  max-width: 820px;
  margin: 12px auto;
  font-family: Arial, Helvetica, sans-serif;
}

.ticket-card {
  display: flex;
  flex-wrap: wrap;                 /* allow stacking on smaller screens */
  margin: 0 -7px;                  /* manual spacing instead of gap */
  align-items: flex-start;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ticket-card > div {
  padding: 0 7px;                  /* simulate "gap" */
}

.ticket-card h3 {
  margin: 0 0 8px 0;
}

/* QR image wrapper */
.ticket-card > div:first-child {
  flex: 0 0 200px;   /* fixed width on desktop */
}

/* Ticket details wrapper */
.ticket-card > div:last-child {
  flex: 1;
  min-width: 250px;
}

/* Responsive for mobile */
@media screen and (max-width: 600px) {
  .ticket-card {
    flex-direction: column;   /* stack QR and details */
    align-items: center;
    text-align: center;
  }

  .ticket-card > div:first-child {
    width: 100%;              /* no "unset", just let it stretch */
  }

  .ticket-card > div:last-child {
    width: 100%;
    text-align: left;         /* keep details aligned left */
  }

  .ticket-card img {
    max-width: 100%;          /* responsive QR image */
    height: auto;
  }
}