/* Flip card */
.card{
  grid-column: span 4;
  perspective: 1200px;
  height: 340px;
}
@media (max-width: 980px){ .card{grid-column: span 3} }
@media (max-width: 640px){ .card{grid-column: span 1; height: 360px} }

.card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

.card.is-flipped .card-inner{ transform: rotateY(180deg); }

.face{
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  overflow:hidden;
  background: linear-gradient(180deg, rgba(11,18,32,.95), rgba(15,26,46,.92));
  box-shadow: var(--shadow);
  border: 1px solid var(--stroke);
  backface-visibility: hidden;
  color: var(--text);
}

/* Front */
.front .img{
  height: 124px;
  width:100%;
  position:relative;
  background:
    radial-gradient(700px 180px at 20% 30%, rgba(73,179,255,.35), transparent 60%),
    radial-gradient(500px 180px at 90% 30%, rgba(124,92,255,.28), transparent 55%),
    linear-gradient(135deg, rgba(231,238,252,.10), rgba(231,238,252,.02));
}

.front .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
  opacity:.92;
}

.front .img::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(11,18,32,.08), rgba(11,18,32,.82));
}

.badge-row{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index:2;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(231,238,252,.08);
  border:1px solid rgba(231,238,252,.14);
  font-weight:900;
  font-size:12px;
}

.badge .led{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(70,211,154,.18);
}

.price{
  padding:8px 10px;
  border-radius:999px;
  background: rgba(231,238,252,.08);
  border:1px solid rgba(231,238,252,.14);
  font-weight:950;
}

.front .body{padding:14px 16px 16px}

.title{
  font-size:18px;
  font-weight:950;
  margin:2px 0 6px;
}

.desc{
  font-size:13px;
  line-height:1.4;
  color: var(--muted);
  margin:0 0 12px;
}

.meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.pill{
  font-size:12px;
  font-weight:850;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(231,238,252,.07);
  border:1px solid rgba(231,238,252,.12);
  color: rgba(231,238,252,.86);
}

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
}

.btn{
  flex:1;
  border-radius: 999px;
  padding:11px 14px;
  font-weight:950;
  border:1px solid rgba(231,238,252,.14);
  background: rgba(231,238,252,.08);
  color: var(--text);
  cursor:pointer;
}

.btn:hover{background: rgba(231,238,252,.12)}

.btn.primary{
  border-color: rgba(73,179,255,.40);
  background: linear-gradient(135deg, rgba(73,179,255,.22), rgba(124,92,255,.14));
}

.btn.ghost{
  border-color: rgba(231,238,252,.14);
  background: transparent;
}

/* Back */
.back{transform: rotateY(180deg)}

.back .head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom: 1px solid rgba(231,238,252,.10);
}

.back .content{
  padding:12px 14px 14px;
  height: calc(100% - 56px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(231,238,252,.06);
  border:1px solid rgba(231,238,252,.10);
  margin:10px 0;
}

.check .tick{
  width:18px;
  height:18px;
  border-radius:999px;
  background: rgba(70,211,154,.16);
  border: 1px solid rgba(70,211,154,.35);
  display:grid;
  place-items:center;
  flex-shrink:0;
  margin-top:1px;
  color: rgba(70,211,154,.95);
  font-weight:950;
  font-size:12px;
}

.back .small{
  color: var(--muted);
  font-size:13px;
  line-height:1.45;
  margin:0;
}

.pill svg{
  width:14px;
  height:14px;
  margin-right:6px;
  vertical-align:-2px;
  opacity:.92;
}
.pill.is-time{
  display:inline-flex;
  align-items:center;
}