/* ============================================================
   Roblox Card Manager — Redemption Form
   Matches Premium's Paradise hero aesthetic
   ============================================================ */

/* ── Section: full-viewport hero-style wrapper ──────────────── */
.rcm-redeem-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--pp-bg, #0F0A1E);
    padding: 100px 16px 80px;
}

/* ── Background radial gradients (mirrors hero) ─────────────── */
.rcm-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(155, 93, 229, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 45, 135, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(0, 212, 255, 0.09) 0%, transparent 50%);
    pointer-events: none;
}

/* ── Dark overlay ───────────────────────────────────────────── */
.rcm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 10, 30, 0.55);
    pointer-events: none;
}

/* ── Star particles container ───────────────────────────────── */
.rcm-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.rcm-star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: rcm-twinkle ease-in-out infinite alternate;
}

@keyframes rcm-twinkle {
    from { opacity: 0.08; transform: scale(0.7); }
    to   { opacity: 0.85; transform: scale(1.3); }
}

/* ── Floating orbs ──────────────────────────────────────────── */
.rcm-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    animation: rcm-float ease-in-out infinite alternate;
}

.rcm-orb--1 {
    width: 420px;
    height: 420px;
    background: rgba(255, 45, 135, 0.13);
    top: -8%;
    right: -4%;
    animation-duration: 7s;
}

.rcm-orb--2 {
    width: 320px;
    height: 320px;
    background: rgba(155, 93, 229, 0.13);
    bottom: 8%;
    left: -4%;
    animation-duration: 9s;
    animation-delay: -3s;
}

.rcm-orb--3 {
    width: 220px;
    height: 220px;
    background: rgba(0, 212, 255, 0.08);
    top: 55%;
    left: 55%;
    animation-duration: 11s;
    animation-delay: -5s;
}

@keyframes rcm-float {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-28px) scale(1.04); }
}

/* ── Card wrapper ───────────────────────────────────────────── */
.rcm-redeem-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    width: 100%;
}

.rcm-redeem-card {
    width: 100%;
    max-width: 540px;
    padding: 52px 48px 48px;
    position: relative;
}

/* ── Header ─────────────────────────────────────────────────── */
.rcm-redeem-header {
    text-align: center;
    margin-bottom: 36px;
}

.rcm-header-badge {
    display: inline-block;
    padding: 7px 18px;
    background: rgba(255, 45, 135, 0.12);
    border: 1px solid rgba(255, 45, 135, 0.38);
    border-radius: var(--pp-radius-pill, 999px);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pp-primary-light, #FF6BB0);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.rcm-logo {
    font-size: 54px;
    display: block;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 18px rgba(255, 45, 135, 0.55));
    animation: rcm-pulse 3s ease-in-out infinite alternate;
}

@keyframes rcm-pulse {
    from { filter: drop-shadow(0 0 10px rgba(255, 45, 135, 0.4)); }
    to   { filter: drop-shadow(0 0 28px rgba(155, 93, 229, 0.75)); }
}

.rcm-redeem-header h2 {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 3.5vw, 2rem);
    font-family: var(--pp-font-heading, 'Orbitron', sans-serif);
    font-weight: 900;
    background: linear-gradient(135deg, #fff 0%, var(--pp-primary-light, #FF6BB0) 45%, var(--pp-secondary, #9B5DE5) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.rcm-redeem-header p {
    color: var(--pp-text-muted, #A89BC2);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Divider ────────────────────────────────────────────────── */
.rcm-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 45, 135, 0.28), rgba(155, 93, 229, 0.28), transparent);
    margin-bottom: 36px;
}

/* ── Form fields ────────────────────────────────────────────── */
.rcm-form .rcm-field-group {
    margin-bottom: 28px;
}

.rcm-form label {
    display: block;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--pp-text-muted, #A89BC2);
    margin-bottom: 10px;
}

/* ── Input icon wrapper ─────────────────────────────────────── */
.rcm-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.rcm-input-icon {
    position: absolute;
    left: 18px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pp-text-subtle, #6B5D8A);
    pointer-events: none;
    z-index: 1;
    transition: color 0.25s ease;
    user-select: none;
    letter-spacing: 1px;
    line-height: 1;
}

.rcm-input-wrap:focus-within .rcm-input-icon {
    color: var(--pp-primary, #FF2D87);
}

.rcm-form input[type="text"],
.rcm-form input[type="email"] {
    width: 100%;
    padding: 15px 18px 15px 52px;
    background: rgba(36, 24, 69, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--pp-radius, 12px);
    font-size: 1rem;
    color: var(--pp-text, #F8F0FF);
    font-family: var(--pp-font-body, 'Nunito', sans-serif);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    letter-spacing: 0.4px;
    -webkit-appearance: none;
}

#rcm-card-number {
    font-family: 'Courier New', 'Orbitron', monospace;
    font-size: 1.05rem;
    letter-spacing: 2.5px;
}

.rcm-form input::placeholder {
    color: var(--pp-text-subtle, #6B5D8A);
    letter-spacing: 0.2px;
}

.rcm-form input:focus {
    outline: none;
    border-color: var(--pp-primary, #FF2D87);
    background: rgba(255, 45, 135, 0.06);
    box-shadow:
        0 0 0 4px rgba(255, 45, 135, 0.13),
        0 0 20px rgba(255, 45, 135, 0.08);
}

.rcm-form small {
    display: block;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--pp-text-subtle, #6B5D8A);
    line-height: 1.4;
    padding-left: 2px;
}

/* ── Submit button ──────────────────────────────────────────── */
.rcm-submit-btn {
    display: block;
    width: 100%;
    padding: 17px 24px;
    margin-top: 8px;
    background: linear-gradient(135deg, var(--pp-primary, #FF2D87) 0%, var(--pp-secondary, #9B5DE5) 100%);
    color: #fff;
    border: none;
    border-radius: var(--pp-radius-pill, 999px);
    font-family: var(--pp-font-body, 'Nunito', sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 0 24px rgba(255, 45, 135, 0.38), 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.rcm-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.rcm-submit-btn:hover::before  { opacity: 1; }
.rcm-submit-btn:hover          { transform: translateY(-2px); box-shadow: 0 0 40px rgba(255, 45, 135, 0.6), 0 8px 28px rgba(0, 0, 0, 0.35); }
.rcm-submit-btn:active         { transform: scale(0.98) translateY(0); }
.rcm-submit-btn:disabled       { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Result box ─────────────────────────────────────────────── */
#rcm-result {
    margin-top: 28px;
    padding: 28px 24px;
    border-radius: var(--pp-radius-lg, 20px);
    text-align: center;
    font-size: 0.95rem;
    font-family: var(--pp-font-body, 'Nunito', sans-serif);
    animation: rcm-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes rcm-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

#rcm-result.rcm-success {
    background: rgba(155, 93, 229, 0.1);
    border: 1px solid rgba(155, 93, 229, 0.3);
    color: var(--pp-text, #F8F0FF);
}

#rcm-result.rcm-error {
    background: rgba(255, 45, 135, 0.08);
    border: 1px solid rgba(255, 45, 135, 0.3);
    color: var(--pp-text, #F8F0FF);
}

#rcm-result .rcm-result-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

#rcm-result .rcm-result-title {
    font-family: var(--pp-font-heading, 'Orbitron', sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #fff, var(--pp-primary-light, #FF6BB0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#rcm-result.rcm-error .rcm-result-title {
    background: linear-gradient(135deg, #fff, var(--pp-primary, #FF2D87));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#rcm-result p {
    color: var(--pp-text-muted, #A89BC2);
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ── Success: item image ────────────────────────────────────── */
#rcm-result .rcm-item-image {
    width: 100%;
    max-width: 190px;
    border-radius: var(--pp-radius-lg, 20px);
    margin: 0 auto 22px;
    display: block;
    border: 2px solid rgba(255, 45, 135, 0.3);
    box-shadow: 0 0 36px rgba(255, 45, 135, 0.22);
}

/* ── Success: item details box ──────────────────────────────── */
#rcm-result .rcm-item-box {
    background: rgba(36, 24, 69, 0.6);
    border: 1px solid rgba(255, 45, 135, 0.2);
    border-radius: var(--pp-radius, 12px);
    padding: 22px 18px 18px;
    margin-top: 22px;
    text-align: left;
    backdrop-filter: blur(8px);
}

#rcm-result .rcm-item-box > strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--pp-text, #F8F0FF);
    margin-bottom: 18px;
    text-align: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#rcm-result .rcm-credentials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#rcm-result .rcm-credentials > div {
    background: rgba(255, 45, 135, 0.06);
    border: 1px solid rgba(255, 45, 135, 0.15);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    transition: border-color 0.25s ease;
}

#rcm-result .rcm-credentials > div:hover {
    border-color: rgba(255, 45, 135, 0.35);
}

#rcm-result .rcm-item-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--pp-text-muted, #A89BC2);
    display: block;
    margin-bottom: 6px;
}

#rcm-result .rcm-item-id {
    font-size: 0.95rem;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    background: linear-gradient(135deg, var(--pp-primary, #FF2D87), var(--pp-secondary, #9B5DE5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px;
    display: block;
    word-break: break-all;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 580px) {
    .rcm-redeem-section { padding: 80px 16px 60px; }

    .rcm-redeem-card {
        padding: 36px 24px 32px;
    }

    .rcm-redeem-header h2 { font-size: 1.45rem; }

    .rcm-orb--1 { width: 260px; height: 260px; }
    .rcm-orb--2 { width: 200px; height: 200px; }
    .rcm-orb--3 { display: none; }

    #rcm-result .rcm-credentials { grid-template-columns: 1fr; }
}