/* Mirapages — /vip/: Mira's VIP cards (or "Coming soon") and the checkout sheet's card summary.
   The page frame and the coming-soon panel reuse shop.css (.shop, .shop__empty); the sheet is booking.css. */

.vip__title { font-size: clamp(2.75rem, 7vw, 5rem); line-height: 1; color: var(--accent-text); }
:lang(zh) .vip__title { font: 700 clamp(2rem, 5vw, 3rem)/1.15 var(--sans); }
.vip__list { display: grid; gap: clamp(24px, 4vw, 40px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .vip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vip__pending { align-items: center; }
.vip__pending p { padding-top: 0; }
.vip__pending .btn { flex: none; }
.vip__footer { margin-top: 40px; }

.vipcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; padding: 18px; border-radius: 28px; background: var(--card); border: 1.5px solid rgba(196, 131, 90, .35); min-width: 0; }
@media (min-width: 520px) { .vipcard { grid-template-columns: 150px minmax(0, 1fr); } }
.vipcard__frame { width: 100%; max-width: 220px; justify-self: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 16px 16px; background: var(--sand-2); }
.vipcard--ghost .vipcard__frame { animation: pulse 1.2s ease-in-out infinite alternate; }
.vipcard--ghost { min-height: 240px; }
.vipcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vipcard__blank { width: 100%; height: 100%; display: grid; place-items: center; background: var(--sand); }
.vipcard__blank img { opacity: .5; }
.vipcard__body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.vipcard__name { font: italic 600 clamp(1.625rem, 3.4vw, 2.125rem)/1.1 var(--serif); color: var(--accent-text); overflow-wrap: anywhere; }
:lang(zh) .vipcard__name { font: 700 1.375rem/1.3 var(--sans); }
.vipcard__valid { font-weight: 600; font-size: .9375rem; }
.vipcard__perks { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: .9375rem; }
.vipcard__benefits { color: var(--muted); font-size: .9375rem; white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; }
.vipcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.vipcard__price { font: 700 1.625rem/1 var(--sans); color: var(--copper-deep); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Checkout sheet: the card being bought */
.vipsum { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 18px; padding: 12px 14px; border-radius: 18px; background: rgba(196, 131, 90, .1); }
.vipsum__frame { width: 56px; height: 68px; overflow: hidden; border-radius: 28px 28px 8px 8px; background: var(--sand); }
.vipsum__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vipsum__blank { width: 100%; height: 100%; display: grid; place-items: center; }
.vipsum__blank img { width: 24px; height: auto; opacity: .5; }
.vipsum__main { display: grid; gap: 2px; min-width: 0; }
.vipsum__name { font-weight: 700; overflow-wrap: anywhere; }
.vipsum__meta { font-size: .8125rem; color: rgba(29, 26, 20, .65); }
.vipsum__price { font: 700 1.125rem/1 var(--sans); color: var(--copper-deep); font-variant-numeric: tabular-nums; }