/* ========================================================= 
   PHTM Instant Wins — Ticket Layout (Top centered band)
   - Ticket Nr: top/center, different background band
   - Status: centered below (Available / Won by Name) + WRAPS
   - Ticket feel: side notches
   - Mobile: 2 per row, Desktop: 4 per row
   - FIX: Status truly centered (no “too high” feel)
========================================================= */

.phtm-iw { color: inherit; }

/* Header */
.phtm-iw__header{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* right on desktop */
  gap:12px;
  margin-bottom:12px;
}
.phtm-iw__title{ margin:0; }

/* Nice pill for "Left to be won" */
/* Gradient pill: "14,770/15,000 Left to be won" */
.phtm-iw__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 30px;
    border-radius: 10px;
    /* font-weight: 900; */
    font-size: 15px;
    /* line-height: 1; */
    letter-spacing: 0.3px;
    color: #fff;
    background: linear-gradient(90deg, rgba(26, 0, 54, 1) 0%, rgba(45, 0, 79, 1) 50%, rgba(186, 37, 77, 1) 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .18) inset;
    white-space: nowrap;
}


/* Mobile: center the hint */
@media (max-width: 767px){
  .phtm-iw__header{ justify-content:center; }
}

/* Layout shell (prize cards) */
.phtm-iw__grid{ display:block; }
.phtm-iw__cols{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.phtm-iw__col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Prize card */
.phtm-iwCard{
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
  position:relative;
  isolation:isolate;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 16px 40px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.08) inset;
}
.phtm-iwCard > summary{ list-style:none; }
.phtm-iwCard > summary::-webkit-details-marker{ display:none; }

.phtm-iwCard__top{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:0;
  cursor:pointer;
  text-align:left;
  background:rgba(0,0,0,0.35);
  color:inherit;
  transition: background .15s ease, transform .12s ease;
}
.phtm-iwCard__top:hover{ background:rgba(0,0,0,0.42); }
.phtm-iwCard__top:active{ transform: scale(0.995); }
.phtm-iwCard__top:focus-visible{
  outline:2px solid rgba(255,255,255,0.22);
  outline-offset:2px;
}

/* Image */
.phtm-iwCard__img{
  width:64px;
  height:64px;
  border-radius:12px;
  background:#0a0a0a;
  flex:0 0 auto;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.phtm-iwCard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.phtm-iwCard__imgFallback{
  width:100%;
  height:100%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,0));
}
.phtm-iwCard.is-all-won .phtm-iwCard__img img{
  filter: grayscale(1) blur(.6px);
  opacity:.75;
}

/* Meta */
.phtm-iwCard__meta{ flex:1; min-width:0; }
.phtm-iwCard__name{
  font-weight:900;
  font-size:14px;
  line-height:1.2;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.phtm-iwCard__sub{ display:flex; gap:8px; align-items:center; }

.phtm-iwCard__pill{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:8px;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.phtm-iwCard__pill.is-live{ background:#40d586; color:#2b2b2b; }
.phtm-iwCard__pill.is-won{ background:rgba(255,255,255,0.18); color:rgba(255,255,255,0.92); }

.phtm-iwCard__bar{
  margin-top:8px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,0.10);
  overflow:hidden;
}
.phtm-iwCard__bar > span{
  display:block;
  height:100%;
  width:0%;
  background: rgba(255,255,255,0.35);
}

/* Chevron */
.phtm-iwCard__chev{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  opacity:.9;
}
.phtm-iwCard__chev:before{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.phtm-iwCard[open] .phtm-iwCard__chev:before{ transform: rotate(-135deg); }

.phtm-iwCard__details{
  background: rgba(0,0,0,0.25);
  padding:12px 14px 14px;
}

/* Tickets grid */
.phtm-iwTickets{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile */
  gap:10px;
}
@media (min-width:900px){
  .phtm-iwTickets{ grid-template-columns: repeat(4, minmax(0, 1fr)); } /* desktop */
}

/* =========================================================
   Ticket mini-cards — GRID LAYOUT (perfect centering)
========================================================= */

.phtm-iwTicket{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  isolation:isolate;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);

  /* ✅ true 2-row structure */
  display:grid;
  grid-template-rows: 26px 1fr;

}

.phtm-iwTicket.is-hidden{ display:none; }

/* Side notches (webkit mask) */
.phtm-iwTicket{
  -webkit-mask-image:
    radial-gradient(circle 10px at 0 50%, transparent 99%, #000 100%),
    radial-gradient(circle 10px at 100% 50%, transparent 99%, #000 100%),
    linear-gradient(#000,#000);
  -webkit-mask-composite: source-over;
  -webkit-mask-size: 20px 20px, 20px 20px, 100% 100%;
  -webkit-mask-position: -10px 50%, calc(100% + 10px) 50%, 0 0;
  -webkit-mask-repeat: no-repeat;
}

/* Hover */
.phtm-iwTicket:hover{
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

/* Ticket number band (row 1) */
.phtm-iwTicket__value{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 6px;
  letter-spacing:1.2px;

  background: rgba(0,0,0,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.10);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Status zone (row 2) — PERFECT CENTER */
.phtm-iwTicket__status{
  display:flex;
  align-items:center;        /* vertical center inside row */
  justify-content:center;    /* horizontal center */

  padding:4px;

  text-align:center;
  font-size:11px;
  font-weight:900;
  line-height:1.25;
  opacity:.88;
  min-height: 35px;

  white-space:normal;
  overflow:visible;
  text-overflow:clip;

  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Live */
.phtm-iwTicket.is-live{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
}
.phtm-iwTicket.is-live .phtm-iwTicket__status{ opacity:.86; }

/* Won */
.phtm-iwTicket.is-won{
  background: linear-gradient(180deg, rgba(16,94,42,0.62), rgba(12,66,30,0.46));
  border-color: rgba(34,197,94,0.38);
}
.phtm-iwTicket.is-won .phtm-iwTicket__value{
  background: rgba(34,197,94,0.14);
  border-bottom-color: rgba(34,197,94,0.22);
}
.phtm-iwTicket.is-won .phtm-iwTicket__status{ opacity:1; }

/* See all button */
.phtm-iwCard__more{
  display:block;
  margin:14px auto 0;
  text-align:center;
}

/* Mobile fallback spacing */
@media (max-width:767px){
  .phtm-iw__grid > .phtm-iwCard{ margin-bottom:14px; }
  .phtm-iw__grid > .phtm-iwCard:last-child{ margin-bottom:0; }
}

/* ============================
   IW Loading UI
============================ */

.phtm-iwTickets.is-loading{
  position: relative;
  min-height: 25px;
}

.phtm-iwTickets__loader{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 0 6px;
}

.phtm-iwSpinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.22);
  border-top-color: rgba(255,255,255,0.85);
  animation: phtmSpin 0.85s linear infinite;
}

@keyframes phtmSpin { to { transform: rotate(360deg); } }

/* Optional: subtle skeleton tickets while loading */
.phtm-iwSkel{
  border-radius:10px;
  overflow:hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  min-height: 78px;
  position: relative;
}
.phtm-iwSkel:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.02) 100%
  );
  transform: translateX(-100%);
  animation: phtmShimmer 1.15s ease-in-out infinite;
}
@keyframes phtmShimmer { to { transform: translateX(100%); } }

.phtm-iwSkel__band{
  height: 22px;
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.phtm-iwSkel__body{
  padding: 14px;
  display:flex;
  justify-content:center;
}
.phtm-iwSkel__line{
  width: 70%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
}

/* Button loading */
.phtm-iwCard__more.is-loading{
  opacity: .75;
  pointer-events: none;
}
.phtm-iwCard__more.is-loading:after{
  content:"";
  display:inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.28);
  border-top-color: rgba(255,255,255,0.9);
  animation: phtmSpin 0.85s linear infinite;
  vertical-align: -2px;
}