/* ============================================================
   VIP plan cards — light glass slab + tier rail
   Used by homepage (index.php) and shop (user/shop.php)
   ============================================================ */

.gx-plan-grid {
    display: grid;
    gap: 18px;
    justify-items: stretch;
}

.pv-card {
    --t-a: #fbbf24;
    --t-b: #f59e0b;
    --t-glow: rgba(251, 191, 36, 0.5);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 62px 1fr;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    text-align: left;
    font: inherit;
    color: #45210f;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.9) 0%, transparent 40%),
        linear-gradient(200deg, #fffdfa 0%, #fff4e7 48%, #ffe9d6 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(180, 90, 40, 0.12) inset,
        0 16px 32px rgba(90, 26, 8, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.6);
    content-visibility: auto;
    contain-intrinsic-size: 260px;
}

/* tier accents */
.pv-card.is-t0 { --t-a: #fcd34d; --t-b: #f59e0b; --t-glow: rgba(252, 211, 77, 0.4); }
.pv-card.is-t1 { --t-a: #7dd3fc; --t-b: #2563eb; --t-glow: rgba(125, 211, 252, 0.4); }
.pv-card.is-t2 { --t-a: #bef264; --t-b: #4d7c0f; --t-glow: rgba(190, 242, 100, 0.4); }
.pv-card.is-t3 { --t-a: #fdba74; --t-b: #ea580c; --t-glow: rgba(253, 186, 116, 0.4); }

.pv-card__glow {
    position: absolute;
    z-index: 0;
    top: -55%;
    right: -25%;
    width: 78%;
    height: 175%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--t-glow) 0%, transparent 62%);
    opacity: 0.28;
    pointer-events: none;
}

/* ── Left vertical tier rail ── */
.pv-rail {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 26%),
        linear-gradient(170deg, var(--t-a) 0%, var(--t-b) 76%);
    box-shadow:
        1px 0 0 rgba(255, 255, 255, 0.4) inset,
        -6px 0 16px rgba(90, 26, 8, 0.14);
}

.pv-rail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.45) 0%, transparent 34%, transparent 68%, rgba(255, 255, 255, 0.2) 100%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.pv-rail__word {
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    writing-mode: vertical-rl;
    text-shadow: 0 1px 2px rgba(80, 30, 0, 0.35);
}

.pv-rail__num {
    font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow:
        0 2px 0 rgba(90, 35, 5, 0.2),
        0 8px 16px rgba(90, 35, 5, 0.28);
}

/* ── Right body ── */
.pv-body {
    position: relative;
    z-index: 2;
    padding: 15px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.pv-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pv-top__label {
    margin: 0 0 2px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #9a5426;
}

.pv-top__value {
    margin: 0;
    font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.62rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #2f1608;
}

.pv-cur {
    margin-right: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #c2410c;
    vertical-align: 0.35em;
}

/* Trust badge — lime */
.pv-trust {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 7px 11px;
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.85), transparent 62%),
        linear-gradient(150deg, rgba(163, 230, 53, 0.42), rgba(190, 242, 100, 0.22));
    border: 1px solid rgba(101, 163, 13, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 5px 12px rgba(77, 124, 15, 0.18);
}

.pv-trust__ico {
    font-size: 0.98rem;
    line-height: 1;
    color: #4d7c0f;
}

.pv-trust__cap {
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #3f6212;
}

.pv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pv-cell {
    --c-a: #38bdf8;
    --c-ink: #075985;
    --c-tint: rgba(56, 189, 248, 0.2);
    position: relative;
    padding: 10px 11px;
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent 66%),
        linear-gradient(145deg, var(--c-tint), rgba(255, 255, 255, 0.5));
    border: 1px solid color-mix(in srgb, var(--c-a) 46%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 5px 12px rgba(90, 40, 10, 0.12);
}

.pv-cell::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--c-a), transparent);
}

/* Each box its own colour */
.pv-cell--blue   { --c-a: #38bdf8; --c-ink: #075985; --c-tint: rgba(56, 189, 248, 0.24); }
.pv-cell--yellow { --c-a: #facc15; --c-ink: #854d0e; --c-tint: rgba(250, 204, 21, 0.26); }
.pv-cell--aqua   { --c-a: #a3e635; --c-ink: #3f6212; --c-tint: rgba(163, 230, 53, 0.26); }

.pv-cell--wide { grid-column: 1 / -1; }

.pv-cell__k {
    display: flex;
    align-items: center;
    gap: 5px;
    /* keep "Daily Payout" on one line */
    white-space: nowrap;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-ink);
    margin-bottom: 4px;
}

.pv-cell__k i {
    font-size: 0.6rem;
    color: var(--c-a);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8));
}

.pv-cell__v {
    display: block;
    font-size: 0.96rem;
    font-weight: 800;
    color: #2f1608;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.pv-cell__v small {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--c-ink);
}

/* ── CTA bar ── */
.pv-go {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
    padding: 13px 14px 13px 18px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    font: inherit;
    text-decoration: none;
    color: #ffffff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, transparent 48%),
        linear-gradient(100deg, #2563eb 0%, #1d4ed8 60%, #1e40af 118%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 8px 18px rgba(29, 78, 216, 0.32);
    transition: transform 0.13s ease, filter 0.13s ease;
}

.pv-go:active {
    transform: translateY(2px);
    filter: brightness(1.06);
}

.pv-go__txt {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pv-go__arrow {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-size: 0.72rem;
    color: #1d4ed8;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 6px rgba(20, 40, 90, 0.22);
}

@media (min-width: 380px) {
    .pv-card { grid-template-columns: 70px 1fr; }
    .pv-rail__num { font-size: 2.1rem; }
    .pv-top__value { font-size: 1.78rem; }
    .pv-cell__k { font-size: 0.53rem; }
}

.gx-empty {
    padding: 24px;
    text-align: center;
    color: #45210f;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.8);
}