/* ==========================================================================
   VIP Content Access — blur mechanic unchanged; overlay card + pill button
   game-y restyled.
   ========================================================================== */

/* ── Wrapper keeps positioning context for blur + overlay ─────────────────── */
.vip-content-wrapper {
    position: relative;
}

.hidden_from_non_vip.vip-content-blurred {
    position: relative;
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    z-index: 1;
}

.hidden_from_non_vip.vip-content-blurred iframe {
    pointer-events: none !important;
    z-index: 0 !important;
}

.hidden_from_non_vip.vip-content-blurred * {
    pointer-events: none;
    user-select: none;
}

/* ── Overlay: centred card above the blurred content ─────────────────────── */
.vip-content-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999 !important;
    pointer-events: all;
}

/* ── Unlock card ─────────────────────────────────────────────────────────── */
.vip-content-modal {
    background: #fff;
    border-radius: var(--gg-radius, 14px);
    padding: 0;
    max-width: 440px;
    width: 90%;
    box-shadow: var(--gg-shadow-lg, 0 20px 60px rgba(102, 12, 27, 0.22));
    animation: vip-modal-pop var(--gg-dur, .3s) var(--gg-spring, cubic-bezier(0.34,1.56,0.64,1)) forwards;
    z-index: 9999999 !important;
    position: relative;
    border: 1px solid rgba(102, 12, 27, 0.14);
}

@keyframes vip-modal-pop {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.vip-modal-content {
    padding: 28px 24px 24px;
    text-align: center;
}

/* Gem sprite injected by JS sits above the heading */
.vip-modal-content .gg-gem {
    display: block;
    margin: 0 auto 10px;
    font-size: 2.5em;   /* visual anchor */
}

.vip-modal-content h3 {
    margin: 0 0 12px;
    color: #751f3d;
    font-size: 22px;
    font-weight: 700;
}

.vip-modal-content p {
    margin: 8px 0;
    color: #333;
    font-size: 15px;
}

.vip-cost {
    font-size: 17px !important;
    font-weight: 700;
    color: #751f3d !important;
    margin: 16px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vip-cost strong {
    color: var(--gg-gold, #f4a900);
    font-size: 19px;
}

.vip-current-points {
    color: #666;
    font-size: 14px !important;
}

.vip-current-points strong {
    color: #751f3d;
    font-weight: 700;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.vip-modal-buttons {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.vip-purchase-btn,
.vip-cancel-btn {
    padding: 11px 24px;
    border: none;
    border-radius: var(--gg-radius-pill, 999px);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform var(--gg-dur-fast, .18s) var(--gg-spring, cubic-bezier(0.34,1.56,0.64,1)),
        box-shadow var(--gg-dur-fast, .18s) ease;
}

.vip-purchase-btn {
    background: #751f3d;
    color: #fff;
    box-shadow: 0 4px 14px rgba(102, 12, 27, 0.25);
}

.vip-purchase-btn:hover:not(:disabled) {
    background: #9d2d5a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 12, 27, 0.35);
}

.vip-purchase-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.vip-purchase-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.vip-cancel-btn {
    background: transparent;
    color: #751f3d;
    border: 2px solid rgba(117, 31, 61, 0.30);
}

.vip-cancel-btn:hover {
    border-color: #751f3d;
    background: rgba(117, 31, 61, 0.04);
}

/* ── Inline message ──────────────────────────────────────────────────────── */
.vip-modal-message {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--gg-radius-sm, 10px);
    font-size: 14px;
    font-weight: 600;
}

.vip-modal-message.vip-error {
    background: rgba(254, 226, 226, 0.9);
    color: #7f1d1d;
    border: 1px solid rgba(239, 68, 68, 0.30);
}

.vip-modal-message.vip-success {
    background: rgba(220, 252, 231, 0.9);
    color: #14532d;
    border: 1px solid rgba(34, 197, 94, 0.30);
}

/* ── Reduced-motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vip-content-modal { animation: none; }
    .vip-purchase-btn,
    .vip-cancel-btn    { transition: none; transform: none; }
}