/* kenTel — bundle cards. Solid colours only, no color-mix(), so they render
   correctly on every mobile WebView. Each .pcard-N maps to one theme
   palette slot (--pN accent, --pNd deep, --pNs soft tint). */

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  padding: 22px 20px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.7);
  transition: transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s, border-color .26s;
  overflow: hidden;
  min-height: 250px;
}
.pcard:hover { transform: translateY(-5px); }

/* accent per slot: a top glow, a tinted border, a coloured Buy button.
   All solid values pulled straight from the theme. */
.pcard-1 { border-color: var(--p1); background: linear-gradient(180deg, var(--p1s), var(--panel) 62%); }
.pcard-2 { border-color: var(--p2); background: linear-gradient(180deg, var(--p2s), var(--panel) 62%); }
.pcard-3 { border-color: var(--p3); background: linear-gradient(180deg, var(--p3s), var(--panel) 62%); }
.pcard-4 { border-color: var(--p4); background: linear-gradient(180deg, var(--p4s), var(--panel) 62%); }
.pcard-5 { border-color: var(--p5); background: linear-gradient(180deg, var(--p5s), var(--panel) 62%); }
.pcard-6 { border-color: var(--p6); background: linear-gradient(180deg, var(--p6s), var(--panel) 62%); }

.pcard-1:hover { box-shadow: 0 26px 55px -22px var(--p1d); }
.pcard-2:hover { box-shadow: 0 26px 55px -22px var(--p2d); }
.pcard-3:hover { box-shadow: 0 26px 55px -22px var(--p3d); }
.pcard-4:hover { box-shadow: 0 26px 55px -22px var(--p4d); }
.pcard-5:hover { box-shadow: 0 26px 55px -22px var(--p5d); }
.pcard-6:hover { box-shadow: 0 26px 55px -22px var(--p6d); }

/* network badge */
.pcard-head { margin-bottom: 16px; }
.pnet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .3px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text-muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pnet-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pcard-1 .pnet-dot { background: var(--p1); } .pcard-2 .pnet-dot { background: var(--p2); }
.pcard-3 .pnet-dot { background: var(--p3); } .pcard-4 .pnet-dot { background: var(--p4); }
.pcard-5 .pnet-dot { background: var(--p5); } .pcard-6 .pnet-dot { background: var(--p6); }
.pcard-1 .pnet { color: var(--p1); } .pcard-2 .pnet { color: var(--p2); }
.pcard-3 .pnet { color: var(--p3); } .pcard-4 .pnet { color: var(--p4); }
.pcard-5 .pnet { color: var(--p5); } .pcard-6 .pnet { color: var(--p6); }

/* status flags */
.pflag {
  position: absolute; top: 15px; right: 0;
  padding: 5px 13px 5px 11px; border-radius: 7px 0 0 7px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .6px;
  display: inline-flex; align-items: center; gap: 5px;
  color: #0a0a0a;
}
.pflag .i { width: 12px; height: 12px; fill: currentColor; }
.pflag-popular { background: var(--brand); color: var(--brand-ink); }
.pflag-new     { background: var(--ok); color: #05230f; }
.pflag-best    { background: var(--signal); color: #04263a; }

/* amount */
.pamount { font-size: clamp(2.3rem, 8vw, 3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--text); }
.punit { font-size: .42em; font-weight: 800; margin-left: 2px; color: var(--text-muted); }
.punlim { font-size: clamp(1.4rem,5vw,1.9rem); }
.pmeta { color: var(--text-muted); font-size: 13.5px; margin-top: 7px; }

/* price */
.pprice { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 6px; }
.pcur { color: var(--text-muted); font-size: 15px; font-weight: 700; }
.pnow { font-size: 30px; font-weight: 900; letter-spacing: -.02em; color: var(--text); }

.psave {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 16px;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.psave .i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* the Buy button — solid gradient from the slot's own colour, always visible */
.pbuy {
  margin-top: auto; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: 13px;
  font-weight: 800; font-size: 15px; color: #0a0a0a;
  transition: transform .15s, filter .2s;
}
.pbuy .i { width: 16px; height: 16px; fill: currentColor; }
.pbuy:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; }
.pbuy:active { transform: translateY(0); }
.pcard-1 .pbuy { background: linear-gradient(180deg, var(--p1), var(--p1d)); box-shadow: 0 12px 26px -12px var(--p1d); }
.pcard-2 .pbuy { background: linear-gradient(180deg, var(--p2), var(--p2d)); box-shadow: 0 12px 26px -12px var(--p2d); }
.pcard-3 .pbuy { background: linear-gradient(180deg, var(--p3), var(--p3d)); box-shadow: 0 12px 26px -12px var(--p3d); }
.pcard-4 .pbuy { background: linear-gradient(180deg, var(--p4), var(--p4d)); box-shadow: 0 12px 26px -12px var(--p4d); }
.pcard-5 .pbuy { background: linear-gradient(180deg, var(--p5), var(--p5d)); box-shadow: 0 12px 26px -12px var(--p5d); }
.pcard-6 .pbuy { background: linear-gradient(180deg, var(--p6), var(--p6d)); box-shadow: 0 12px 26px -12px var(--p6d); }
/* white text reads better on the darker deep-shade buttons of the warm theme */
[data-theme="drben"] .pcard-3 .pbuy,
[data-theme="drben"] .pcard-4 .pbuy { color: #fff; }

/* Responsive bundle grid — 2-up on phones like the reference, more on wider
   screens. Explicit breakpoints instead of auto-fill, so cards never end up
   one-per-row on a phone (the layout the reference does NOT want). */
.bundle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 420px) { .bundle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .bundle-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1200px){ .bundle-grid { grid-template-columns: repeat(4, 1fr); } }