/* ============================================
   PRICE CARD — gradient border for VIP, badge
   ============================================ */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
}

.price-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  /* Gold border by default */
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}

/* Highlighted card — gradient border via pseudo element */
.price-card--highlighted {
  /* Gradient border trick: wrapper bg is the gradient, inner bg covers it */
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(135deg, var(--gold-deep), var(--gold-light), var(--gold-deep)) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-glow);
}

.price-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-deep), var(--gold-light));
  color: var(--text-on-gold);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.price-card__duration {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.price-card__amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--gold-light);
  font-weight: var(--weight-bold);
}

.price-card--highlighted .price-card__amount { color: var(--gold-light); }

.price-card__note {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ---- Price page full table ---- */
.service-prices {
  padding-block: var(--sp-12);
}

.service-prices h2 { margin-bottom: var(--sp-8); }