/* ============================================================================
   Roblox Gift — Studio Blocks (default /roblox-gift/)
   ========================================================================== */

body.rg-body-v1 { background: #0a0a0a; }

/* ============================================================================
   VARIANT 1 — AURORA GLASS
   ========================================================================== */

.rg-v1 {
    --rg-bg: #0a0a0a;
    --rg-fg: #f2f2f2;
    --rg-muted: #9a9a9a;
    --rg-accent: #e2231a;
    --rg-accent-2: #ff4d45;
    --rg-ink: #1a0504;
    --rg-display: 'Space Grotesk', 'Inter', sans-serif;
    --rg-nav-bg: rgba(10, 10, 10, .78);
}

.rg-v1 .rg-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #0a0a0a;
}
.rg-v1 .rg-aurora::before {
    content: '';
    position: absolute;
    inset: -10% -5% auto;
    height: 120vh;
    background: url('/images/roblox-gift/rg-studio.webp') center top / cover no-repeat;
    opacity: .55;
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
}
.rg-v1 .rg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    animation: ag-drift 18s ease-in-out infinite alternate;
}
.rg-v1 .rg-orb--a { width: 460px; height: 460px; top: -120px; left: -80px; background: #e2231a; }
.rg-v1 .rg-orb--b { width: 380px; height: 380px; top: 120px; right: -60px; background: #8b0000; animation-delay: -6s; }
.rg-v1 .rg-orb--c { width: 320px; height: 320px; top: 620px; left: 45%; background: #2a2a2a; animation-delay: -11s; }
.rg-v1 .rg-noise {
    position: absolute;
    inset: 0;
    opacity: .3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rg-v1 .rg-halo {
    position: absolute;
    width: 118%;
    height: 128%;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 28px;
    background: url('/images/roblox-gift/rg-studio.webp') center / cover no-repeat;
    box-shadow: 0 28px 56px rgba(0, 0, 0, .5);
    pointer-events: none;
    z-index: 0;
}
.rg-v1 .rg-card { z-index: 1; }

.rg-v1 .rg-hero-grid { align-items: center; }

.rg-v1 .rg-buybox {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: clamp(2.4rem, 6vw, 4rem);
    padding: clamp(1.15rem, 2.8vw, 1.7rem);
    border-radius: 22px;
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 860px) {
    .rg-v1 .rg-buybox {
        grid-template-columns: 18rem minmax(0, 1fr);
        align-items: start;
        gap: 1.6rem 2.2rem;
        padding: 1.6rem 1.8rem;
    }
}
.rg-v1 .rg-buybox-price {
    display: grid;
    align-content: start;
    gap: 1.15rem;
    min-width: 0;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--rg-line);
}
@media (min-width: 860px) {
    .rg-v1 .rg-buybox-price {
        padding: 0 1.8rem 0 0;
        border-bottom: 0;
        border-right: 1px solid var(--rg-line);
    }
}
.rg-v1 .rg-buybox-pick,
.rg-v1 .rg-buybox-pay { display: grid; gap: .18rem; }
.rg-v1 .rg-buybox-pick span,
.rg-v1 .rg-buybox-pay span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rg-muted);
}
.rg-v1 .rg-buybox-pick b {
    font-family: var(--rg-display);
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rg-fg);
}
.rg-v1 .rg-buybox-pay b {
    font-family: var(--rg-display);
    font-size: clamp(1.85rem, 2.1vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--rg-accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.rg-v1 .rg-amount { display: grid; gap: .9rem; min-width: 0; }
.rg-v1 .rg-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.1rem, 1fr));
    gap: .45rem;
}
.rg-v1 .rg-chip {
    width: 100%;
    min-width: 0;
    padding: .58rem .3rem;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    color: var(--rg-fg);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
}
.rg-v1 .rg-chip.is-on { color: var(--rg-ink); background: var(--rg-accent); border-color: var(--rg-accent); }
.rg-v1 .rg-stepper-field input {
    color: var(--rg-fg);
    -webkit-text-fill-color: var(--rg-fg);
}
.rg-v1 .rg-specs-strip { margin-top: 1.4rem; }
.rg-v1 .rg-sec { border-top-color: rgba(255, 255, 255, .07); }