/* ════════════════════════════════════════
   product.css — Product detail page
   ════════════════════════════════════════ */

/* ── Page wrapper ── */
.pd-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 60px;
}

/* ── Breadcrumb ── */
.pd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: rgba(240,242,248,.4);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pd-breadcrumb a {
  color: rgba(240,242,248,.5);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .15s;
}
.pd-breadcrumb a:hover { color: #a29bfe; }
.pd-breadcrumb .fa-chevron-right { font-size: .65rem; }
.pd-breadcrumb span { color: rgba(240,242,248,.7); font-weight: 600; }

/* ── Two-column layout ── */
.pd-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .pd-layout { grid-template-columns: 1fr; }
}

/* ════════════════════════════════
   LEFT COLUMN
   ════════════════════════════════ */

/* ── Hero image ── */
.pd-hero {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1d2e, #13151f);
  border: 1px solid rgba(108,92,231,.18);
  aspect-ratio: 16/9;
  min-height: 220px;
  max-height: 420px;
}
.pd-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .4s ease;
}
.pd-hero:hover .pd-hero-img { transform: scale(1.03); }
.pd-hero-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: rgba(108,92,231,.3);
}
.pd-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(13,15,27,.65) 100%);
  pointer-events: none;
}
.pd-hero-badges {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Stock badge */
.pd-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 30px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  backdrop-filter: blur(8px);
}
.pd-stock-badge.in {
  background: rgba(0,230,118,.18);
  color: #00e676;
  border: 1px solid rgba(0,230,118,.35);
}
.pd-stock-badge.out {
  background: rgba(255,87,87,.18);
  color: #ff5757;
  border: 1px solid rgba(255,87,87,.3);
}

/* Platform badge */
.pd-plat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 30px;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(0,0,0,.45);
  color: rgba(240,242,248,.8);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
}
.pd-plat-badge.plat-android { color: #78c257; }
.pd-plat-badge.plat-ios,
.pd-plat-badge.plat-macos   { color: #e8e8e8; }
.pd-plat-badge.plat-windows { color: #00adef; }
.pd-plat-badge.plat-web     { color: #00b4d8; }
.pd-plat-badge.plat-pc      { color: #a29bfe; }

/* ── Stats row ── */
.pd-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 12px 0;
  margin-top: 14px;
  overflow: hidden;
}
.pd-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: .72rem;
}
.pd-stat > i { font-size: .9rem; color: rgba(240,242,248,.35); margin-bottom: 2px; }
.pd-stat-val {
  font-size: 1rem;
  font-weight: 700;
  color: #f0f2f8;
  line-height: 1;
}
.pd-stat-lbl { color: rgba(240,242,248,.4); font-size: .68rem; }
.pd-stat-div {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.07);
  flex-shrink: 0;
}

/* ── Panels ── */
.pd-panel {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 14px;
}
.pd-panel--note {
  background: rgba(255,200,80,.04);
  border-color: rgba(255,200,80,.15);
}
.pd-panel-title {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(240,242,248,.55);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.pd-panel-title i { color: #6c5ce7; }
.pd-panel--note .pd-panel-title i { color: #ffd700; }

/* ── Feature list ── */
.pd-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pd-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .85rem;
  color: rgba(240,242,248,.75);
  line-height: 1.5;
}
.pd-feature-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(0,230,118,.12);
  border: 1px solid rgba(0,230,118,.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5L4.8 9.5L10 3.5' stroke='%2300e676' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 2px;
}
.pd-short-desc, .pd-note-text {
  font-size: .85rem;
  color: rgba(240,242,248,.7);
  line-height: 1.65;
  margin: 0;
}

/* ── Guarantee row ── */
.pd-guarantee-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.pd-guarantee {
  flex: 1;
  min-width: 100px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: .77rem;
  color: rgba(240,242,248,.65);
  font-weight: 600;
}
.pd-guarantee i { font-size: 1rem; flex-shrink: 0; }

/* ════════════════════════════════
   RIGHT COLUMN — PURCHASE PANEL
   ════════════════════════════════ */

.pd-purchase-panel {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(108,92,231,.22);
  border-radius: 22px;
  padding: 0 0 6px;
  position: sticky;
  top: 18px;
  overflow: hidden;
}

/* Product name block */
.pd-pp-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(160deg, rgba(90,79,207,.12), rgba(108,92,231,.05));
}
.pd-pp-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f0f2f8;
  line-height: 1.35;
  margin-bottom: 10px;
}
.pd-pp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  min-height: 4px;
}

/* ── Price display ── */
.pd-price-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pd-price-label {
  font-size: .72rem;
  color: rgba(240,242,248,.4);
  font-weight: 500;
}
.pd-price-range {
  font-size: 1.55rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a855f7, #c084fc, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: -.01em;
}
.pd-price-sep {
  font-size: 1rem;
  opacity: .5;
  -webkit-text-fill-color: rgba(162,155,254,.45);
}
.pd-price-unit {
  font-size: .85rem;
  font-weight: 600;
  -webkit-text-fill-color: rgba(162,155,254,.6);
}

/* ── Sections inside panel ── */
.pd-section {
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pd-section:last-of-type { border-bottom: none; }
.pd-section-label {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(240,242,248,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-section-label i { color: #6c5ce7; font-size: .85rem; }

/* ── Package grid ── */
.pd-pkg-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-pkg-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;           /* lets .pd-pkg-desc drop to its own row */
  gap: 6px 12px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .18s ease;
  position: relative;
  overflow: hidden;
}
.pd-pkg-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(108,92,231,.0), rgba(108,92,231,.08));
  opacity: 0;
  transition: opacity .2s;
}
.pd-pkg-card:hover:not(.no-stock) {
  border-color: rgba(108,92,231,.55);
  background: rgba(108,92,231,.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(108,92,231,.18);
}
.pd-pkg-card:hover::before { opacity: 1; }
.pd-pkg-card.active {
  border-color: #6c5ce7 !important;
  background: rgba(108,92,231,.14) !important;
  box-shadow: 0 0 0 3px rgba(108,92,231,.18), 0 4px 20px rgba(108,92,231,.22);
}
.pd-pkg-card.active::before { opacity: 1; }
.pd-pkg-card.no-stock {
  opacity: .45;
  cursor: not-allowed;
}
.pd-pkg-info { flex: 1; min-width: 0; }
.pd-pkg-name {
  font-size: .87rem;
  font-weight: 700;
  color: #f0f2f8;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-pkg-dur {
  font-size: .72rem;
  color: rgba(240,242,248,.4);
  margin-bottom: 3px;
}
.pd-pkg-stock {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(255,87,87,.7);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;    /* prevent "Còn 10 key" breaking to 3 lines */
}
.pd-pkg-stock.ok { color: rgba(0,230,118,.8); }
.pd-pkg-price {
  font-size: 1.05rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a855f7, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}
.pd-pkg-price span {
  font-size: .7rem;
  font-weight: 600;
  -webkit-text-fill-color: rgba(162,155,254,.55);
  margin-left: 1px;
}
.pd-pkg-desc {
  /* flex-basis:100% pushes this to its own row below info+price */
  flex-basis: 100%;
  width: 100%;
  font-size: .72rem;
  color: rgba(240,242,248,.45);
  margin-top: 2px;
  line-height: 1.45;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.pd-no-pkg {
  font-size: .82rem;
  color: rgba(240,242,248,.35);
  text-align: center;
  padding: 12px 0;
}

/* ── Quantity ── */
.pd-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pd-qty-ctrl {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
}
.pd-qty-btn {
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: rgba(240,242,248,.6);
  cursor: pointer;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.pd-qty-btn:hover { background: rgba(108,92,231,.25); color: #a29bfe; }
.pd-qty-input {
  width: 44px;
  text-align: center;
  background: none;
  border: none;
  color: #f0f2f8;
  font-weight: 700;
  font-size: .9rem;
  outline: none;
  -moz-appearance: textfield;
}
.pd-qty-input::-webkit-inner-spin-button,
.pd-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.pd-qty-avail {
  font-size: .75rem;
  color: rgba(240,242,248,.4);
  font-weight: 600;
}

/* ── Invoice ── */
.pd-invoice-section { background: rgba(0,0,0,.12); }
.pd-invoice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-inv-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: .82rem;
  color: rgba(240,242,248,.55);
  gap: 12px;
}
.pd-inv-row span:first-child { white-space: nowrap; }
.pd-inv-val {
  font-weight: 700;
  color: rgba(240,242,248,.85);
  text-align: right;
  word-break: break-word;
}
.pd-inv-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 2px 0;
}
.pd-inv-total .pd-inv-val { font-size: .95rem; }
.pd-inv-total-val {
  background: linear-gradient(135deg, #a855f7, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}
.pd-inv-balance { color: rgba(240,242,248,.45); }
.pd-inv-remain .pd-inv-val { color: #00e676; }
.pd-inv-remain.negative .pd-inv-val { color: #ff5757; }

/* ── Buy button ── */
.pd-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: calc(100% - 44px);
  margin: 6px 22px 4px;
  padding: 15px 22px;
  border-radius: 16px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .03em;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: opacity .15s, transform .15s, box-shadow .15s;
  background: linear-gradient(135deg, #5a4fcf, #6c5ce7, #a29bfe);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(108,92,231,.45);
}
.pd-buy-btn:disabled {
  background: rgba(255,255,255,.07);
  color: rgba(240,242,248,.35);
  cursor: not-allowed;
  box-shadow: none;
}
.pd-buy-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(108,92,231,.55);
}
.pd-buy-btn:not(:disabled):active { transform: translateY(0); }
.pd-buy-btn.loading {
  pointer-events: none;
  opacity: .7;
}
.pd-buy-btn--login {
  background: linear-gradient(135deg, rgba(90,79,207,.55), rgba(108,92,231,.35)) !important;
  border: 1.5px solid rgba(108,92,231,.4) !important;
  box-shadow: none !important;
}
.pd-buy-shine {
  position: absolute;
  top: -50%;
  left: -70%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
  animation: pdBtnShine 3s ease infinite;
}
@keyframes pdBtnShine {
  0%   { left: -70%; opacity: 0; }
  15%  { opacity: 1; }
  45%  { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

.pd-no-balance {
  margin: 4px 22px;
  padding: 12px 14px;
  background: rgba(255,80,80,.08);
  border: 1px solid rgba(255,80,80,.2);
  border-radius: 12px;
  font-size: .82rem;
  color: rgba(255,150,150,.8);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-no-balance a { color: #a29bfe; font-weight: 700; text-decoration: none; }
.pd-no-balance a:hover { text-decoration: underline; }

/* ── Footer notes ── */
.pd-footer-notes {
  margin: 6px 22px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-fn {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  color: rgba(240,242,248,.4);
}
.pd-fn i { font-size: .75rem; color: rgba(108,92,231,.7); }
.pd-fn a { color: #a29bfe; text-decoration: none; }
.pd-fn a:hover { text-decoration: underline; }

/* ── VIP medals ── */
.pd-vip-medal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.pd-vip-medal.bronze { background:rgba(205,127,50,.12);color:#cd7f32;border:1px solid rgba(205,127,50,.3); }
.pd-vip-medal.silver { background:rgba(192,192,192,.1);color:#c0c0c0;border:1px solid rgba(192,192,192,.25); }
.pd-vip-medal.gold   { background:rgba(255,215,0,.1);color:#ffd700;border:1px solid rgba(255,215,0,.3); }
.pd-vip-medal.diamond{ background:rgba(168,237,255,.1);color:#a8edff;border:1px solid rgba(168,237,255,.25); }

/* ════════════════════════════════
   PURCHASE SUCCESS CARD
   ════════════════════════════════ */
#pdSuccessCard {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  width: 340px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.psc-wrap {
  background: rgba(10,12,20,.97);
  border: 1px solid rgba(108,92,231,.4);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 20px 60px rgba(0,0,0,.7),
    0 0 40px rgba(108,92,231,.2);
  pointer-events: auto;
  transform: translateX(calc(100% + 28px));
  opacity: 0;
  transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  position: relative;
}
.psc-wrap.psc-visible {
  transform: translateX(0);
  opacity: 1;
}

/* Confetti */
.psc-confetti-area {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 20px;
}
.psc-conf {
  position: absolute;
  top: -10px;
  border-radius: 2px;
  animation: pscFall linear forwards;
  opacity: .9;
}
@keyframes pscFall {
  0%   { transform: translateY(-10px) rotate(0deg);   opacity: .95; }
  80%  { opacity: .7; }
  100% { transform: translateY(120px) rotate(360deg); opacity: 0; }
}

/* Header */
.psc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 12px;
  background: linear-gradient(135deg, rgba(108,92,231,.18), rgba(168,85,247,.08));
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}

/* Animated checkmark ring */
.psc-check-ring {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
}
.psc-check-svg {
  width: 46px;
  height: 46px;
  display: block;
}
.psc-check-circle {
  stroke: #a855f7;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: pscCircle .5s ease .1s forwards;
}
.psc-check-mark {
  stroke: #00e676;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: pscMark .35s ease .55s forwards;
}
@keyframes pscCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes pscMark {
  to { stroke-dashoffset: 0; }
}

.psc-head-text { flex: 1; min-width: 0; padding-top: 2px; }
.psc-title {
  font-size: .93rem;
  font-weight: 800;
  color: #f0f2f8;
  letter-spacing: .01em;
}
.psc-subtitle {
  font-size: .75rem;
  color: rgba(240,242,248,.45);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.psc-close {
  background: none;
  border: none;
  color: rgba(240,242,248,.3);
  cursor: pointer;
  font-size: .8rem;
  padding: 4px;
  line-height: 1;
  transition: color .15s;
  flex-shrink: 0;
  margin-top: -2px;
}
.psc-close:hover { color: rgba(240,242,248,.8); }

/* Body */
.psc-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.psc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .8rem;
}
.psc-row-lbl {
  color: rgba(240,242,248,.4);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.psc-row-lbl i { font-size: .75rem; color: #6c5ce7; }
.psc-row-val {
  font-weight: 700;
  color: rgba(240,242,248,.85);
  text-align: right;
  min-width: 0;
  word-break: break-all;
}

/* Order code — click to copy */
.psc-code {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(108,92,231,.1);
  border: 1px solid rgba(108,92,231,.25);
  border-radius: 8px;
  padding: 4px 9px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: 'Courier New', monospace;
  font-size: .78rem;
  color: #a29bfe !important;
}
.psc-code:hover {
  background: rgba(108,92,231,.2);
  border-color: rgba(108,92,231,.5);
}
.psc-copy-ico { font-size: .7rem; color: rgba(162,155,254,.5); flex-shrink: 0; }

/* Total row */
.psc-row--total .psc-row-lbl i { color: #a855f7; }
.psc-total-val {
  font-size: .95rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #a855f7, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Footer */
.psc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.psc-btn-orders {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5a4fcf, #6c5ce7);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  transition: box-shadow .18s, transform .15s;
  letter-spacing: .02em;
}
.psc-btn-orders:hover {
  box-shadow: 0 4px 16px rgba(108,92,231,.5);
  transform: translateY(-1px);
}
.psc-btn-orders i { font-size: .8rem; }

.psc-countdown {
  font-size: .72rem;
  color: rgba(240,242,248,.3);
  font-weight: 700;
  white-space: nowrap;
}
.psc-countdown span {
  color: rgba(162,155,254,.6);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

/* Progress bar */
.psc-progress {
  height: 2px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.psc-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6c5ce7, #a855f7);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 80ms linear;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  #pdSuccessCard { top: 12px; right: 12px; width: calc(100vw - 24px); }
}

/* ════════════════════════════════
   RESPONSIVE — mobile
   ════════════════════════════════ */
@media (max-width: 900px) {
  .pd-page { padding: 12px 12px 80px; }
  .pd-hero { aspect-ratio: 4/3; max-height: 280px; }
  .pd-purchase-panel { position: static; border-radius: 18px; }
  .pd-layout { gap: 16px; }

  /* Stack packages as 2-col on mobile */
  .pd-pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pd-pkg-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  .pd-pkg-price { font-size: .95rem; }
}
@media (max-width: 500px) {
  .pd-pkg-grid { grid-template-columns: 1fr; }
  .pd-buy-btn { width: calc(100% - 28px); margin-left: 14px; margin-right: 14px; }
  .pd-footer-notes { margin-left: 14px; margin-right: 14px; }
  .pd-no-balance { margin-left: 14px; margin-right: 14px; }
}