/*

================================================================================

| REEBUX — WELCOME EVENT v1.0 | welcome-event.css

================================================================================

| Mobile-first, pixel-perfect, 2026-grade UI.

| Standalone stylesheet — no dependency on main.css.

================================================================================

*/



/* ===== IMPORTS & FONTS ===== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');



/* ===== CSS VARIABLES ===== */

:root {

    --c-bg:         #04040A;

    --c-bg1:        #0A0A14;

    --c-bg2:        #111120;

    --c-bg3:        #1A1A2E;

    --c-border:     rgba(255,255,255,0.08);

    --c-border-hov: rgba(0,191,255,0.4);



    --c-primary:    #00BFFF;

    --c-primary-g:  rgba(0,191,255,0.18);

    --c-primary-gd: rgba(0,191,255,0.05);

    --c-accent:     #39FF14;

    --c-accent-g:   rgba(57,255,20,0.15);

    --c-gold:       #FFD700;

    --c-error:      #FF495C;

    --c-error-g:    rgba(255,73,92,0.15);

    --c-warning:    #FFB020;



    --c-txt1:       #F0F2F5;

    --c-txt2:       #A0AEC0;

    --c-txt3:       #5A6A7E;



    --font:         'Rajdhani', system-ui, sans-serif;

    --mono:         'JetBrains Mono', monospace;



    --r-sm:  6px;

    --r-md:  12px;

    --r-lg:  18px;

    --r-xl:  24px;

    --r-2xl: 32px;



    --sp-xs:  4px;

    --sp-sm:  8px;

    --sp-md: 16px;

    --sp-lg: 24px;

    --sp-xl: 32px;

    --sp-2xl:48px;



    --trans-fast:   150ms cubic-bezier(0.4,0,0.2,1);

    --trans-mid:    280ms cubic-bezier(0.4,0,0.2,1);

    --trans-slow:   500ms cubic-bezier(0.23,1,0.32,1);

    --trans-spring: 600ms cubic-bezier(0.34,1.56,0.64,1);



    --nav-bottom-h: 72px;

    --nav-top-h:    64px;

}



/* ===== RESET ===== */

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {

    font-family: var(--font);

    background: var(--c-bg);

    color: var(--c-txt2);

    min-height: 100vh;

    overflow-x: hidden;

    padding-bottom: calc(var(--nav-bottom-h) + var(--sp-lg));

}

img, svg { max-width:100%; display:block; }

a { color: var(--c-primary); text-decoration:none; }

strong { color: var(--c-txt1); font-weight:600; }

input, button { font-family: inherit; }



/* ===== TOAST ===== */

#evt-toast-container {

    position:fixed; bottom: calc(var(--nav-bottom-h) + 12px); right:16px;

    z-index:9998; display:flex; flex-direction:column; gap:8px;

}

.evt-toast {

    background: var(--c-bg2);

    border: 1px solid var(--c-border);

    border-left: 4px solid var(--c-primary);

    border-radius: var(--r-md);

    padding: 12px 18px;

    color: var(--c-txt1);

    font-size:0.875rem; font-weight:500;

    box-shadow: 0 8px 30px rgba(0,0,0,0.4);

    animation: toastIn 0.35s var(--trans-spring) forwards;

    max-width: 320px;

}

.evt-toast.success { border-left-color: var(--c-accent); }

.evt-toast.error   { border-left-color: var(--c-error); }

.evt-toast.warning { border-left-color: var(--c-warning); }

.evt-toast.out { animation: toastOut 0.3s ease forwards; }

@keyframes toastIn  { from { opacity:0; transform:translateX(100%); } to { opacity:1; transform:translateX(0); } }

@keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(100%); } }



/* ===== TOP NAV (Desktop) ===== */

.evt-topnav {

    display: none;

    position: sticky; top:0; z-index: 100;

    height: var(--nav-top-h);

    background: rgba(4,4,10,0.85);

    backdrop-filter: blur(20px) saturate(1.5);

    border-bottom: 1px solid var(--c-border);

    padding: 0 var(--sp-lg);

}

.evt-topnav-inner {

    max-width:1200px; margin:0 auto;

    display:flex; align-items:center; justify-content:space-between;

    height:100%;

}



/* ── Desktop-only header fix: logo hard-left, badge centred, actions hard-right ── */

@media (min-width: 900px) {

    .evt-topnav-inner {

        display: grid;

        grid-template-columns: 1fr auto 1fr;

        column-gap: 32px;

        align-items: center;

    }

    .evt-logo         { justify-self: start; }

    .evt-nav-badge    { justify-self: center; }

    .evt-topnav-right { justify-self: end; }

    .evt-user-info    { display: flex; align-items: center; gap: 20px; }

    .evt-user-name    { padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.12); }

}

.evt-logo {

    font-size:1.5rem; font-weight:700; color: var(--c-txt1); letter-spacing:-0.04em;

}

.evt-logo-r { color: var(--c-primary); }

.evt-nav-badge {

    display:flex; align-items:center; gap:8px;

    background: var(--c-primary-g);

    border: 1px solid var(--c-border-hov);

    border-radius:999px;

    padding: 6px 16px;

    font-size:0.8rem; font-weight:600; color: var(--c-primary);

    letter-spacing:0.05em; text-transform:uppercase;

}

.badge-dot {

    width:7px; height:7px; border-radius:50%;

    background: var(--c-accent);

    animation: glowPulse 2s ease infinite;

    box-shadow: 0 0 8px var(--c-accent);

}

.evt-topnav-right { display:flex; align-items:center; gap:16px; }

.evt-user-info { display:flex; align-items:center; gap:16px; }

.evt-user-name { font-size:0.9rem; font-weight:600; color: var(--c-txt1); }

.btn-ghost-sm {

    padding: 6px 16px;

    border: 1px solid var(--c-border);

    border-radius: var(--r-md);

    font-size:0.8rem; font-weight:600;

    color: var(--c-txt2);

    transition: var(--trans-fast);

    background: transparent;

}

.btn-ghost-sm:hover { border-color: var(--c-primary); color: var(--c-primary); }



/* ===== BOTTOM NAV (Mobile) ===== */

.evt-bottomnav {

    position: fixed; bottom:0; left:0; right:0; z-index:100;

    height: var(--nav-bottom-h);

    background: rgba(10,10,20,0.95);

    backdrop-filter: blur(20px) saturate(1.5);

    border-top: 1px solid var(--c-border);

    display:flex; align-items:center; justify-content:space-around;

    padding: 0 4px;

}

.bnav-item {

    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;

    gap:3px; background:none; border:none; cursor:pointer;

    padding: 8px 4px; color: var(--c-txt3);

    transition: var(--trans-mid); border-radius: var(--r-md);

    font-size:1rem;

}

.bnav-item.active, .bnav-item:hover { color: var(--c-primary); }

.bnav-label { font-size:0.65rem; font-weight:600; letter-spacing:0.03em; }

.bnav-center {

    flex: 0 0 56px; width:56px; height:56px; border-radius:50%;

    background: linear-gradient(135deg, var(--c-primary), #0088cc);

    display:flex; align-items:center; justify-content:center;

    font-size:1.3rem;

    box-shadow: 0 0 20px rgba(0,191,255,0.4);

    margin-top:-16px;

    transition: var(--trans-spring);

}

.bnav-center:hover { transform: scale(1.08); }

.bnav-center-inner { display:flex; }



/* ===== CONTAINER ===== */

.evt-container {

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding: 0 var(--sp-md);

}



/* ===== HERO ===== */

.evt-hero {

    position:relative; overflow:hidden;

    padding: 48px var(--sp-md) 56px;

    text-align:center;

}

.evt-hero-bg {

    position:absolute; inset:0; pointer-events:none; overflow:hidden;

}

.hero-orb {

    position:absolute; border-radius:50%; filter:blur(80px);

    animation: orbFloat 8s ease-in-out infinite;

}

.hero-orb-1 {

    width:300px; height:300px;

    background: radial-gradient(circle, rgba(0,191,255,0.12), transparent 70%);

    top:-100px; left:-60px; animation-delay:0s;

}

.hero-orb-2 {

    width:250px; height:250px;

    background: radial-gradient(circle, rgba(57,255,20,0.08), transparent 70%);

    top:20px; right:-40px; animation-delay:-3s;

}

.hero-orb-3 {

    width:200px; height:200px;

    background: radial-gradient(circle, rgba(255,73,92,0.06), transparent 70%);

    bottom:0; left:30%; animation-delay:-6s;

}

.hero-grid-lines {

    position:absolute; inset:0;

    background-image:

        linear-gradient(rgba(0,191,255,0.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(0,191,255,0.03) 1px, transparent 1px);

    background-size: 40px 40px;

    mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);

    animation: panGrid 20s linear infinite;

}

.evt-hero-content { position:relative; z-index:1; }

.evt-hero-badge {

    display:inline-flex; align-items:center; gap:8px;

    background: rgba(255,215,0,0.08);

    border: 1px solid rgba(255,215,0,0.25);

    border-radius:999px; padding: 6px 16px;

    font-size:0.78rem; font-weight:700; color: var(--c-gold);

    letter-spacing:0.05em; text-transform:uppercase; margin-bottom:20px;

    animation: fadeInDown 0.6s var(--trans-slow);

}

.badge-fire { font-size:1rem; }

.badge-live {

    display:flex; align-items:center; gap:5px;

    background: rgba(255,73,92,0.15);

    border-radius:999px; padding: 2px 8px;

    font-size:0.7rem; color: var(--c-error);

}

.live-dot {

    width:6px; height:6px; border-radius:50%;

    background: var(--c-error);

    animation: glowPulse 1s ease infinite;

}

.evt-hero-title {

    font-size: clamp(2rem, 8vw, 4.5rem);

    font-weight:700; color: var(--c-txt1);

    line-height:1.1; letter-spacing:-0.03em;

    margin-bottom:16px;

    animation: fadeInUp 0.7s var(--trans-slow) 0.1s backwards;

}

.gradient-text {

    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 60%, var(--c-gold) 100%);

    -webkit-background-clip: text; -webkit-text-fill-color: transparent;

    background-clip: text;

    filter: drop-shadow(0 0 20px rgba(0,191,255,0.4));

}

.evt-hero-subtitle {

    font-size:clamp(0.9rem, 3vw, 1.1rem); color: var(--c-txt2);

    max-width:560px; margin:0 auto 32px; line-height:1.7;

    animation: fadeInUp 0.7s var(--trans-slow) 0.2s backwards;

}

/* Calculator Strip */

.evt-calc-strip {

    display:flex; align-items:center; justify-content:center;

    flex-wrap:wrap; gap:12px;

    background: var(--c-bg2);

    border: 1px solid var(--c-border);

    border-radius: var(--r-xl);

    padding: 16px 24px; margin-bottom: 20px;

    animation: fadeInUp 0.7s var(--trans-slow) 0.3s backwards;

    max-width:520px; margin-left:auto; margin-right:auto;

}

.calc-item { text-align:center; }

.calc-label { display:block; font-size:0.7rem; font-weight:600; color: var(--c-txt3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }

.calc-value { display:block; font-size:1.2rem; font-weight:700; color: var(--c-txt1); font-family: var(--mono); }

.calc-value.accent { color: var(--c-accent); text-shadow: 0 0 15px rgba(57,255,20,0.4); }

.calc-value.primary { color: var(--c-primary); text-shadow: 0 0 15px rgba(0,191,255,0.4); }

.calc-arrow { font-size:1.2rem; color: var(--c-txt3); }

/* Range Slider */

.evt-range {

    width:100%; max-width:400px;

    -webkit-appearance:none; appearance:none;

    height:6px; border-radius:999px;

    background: linear-gradient(to right, var(--c-primary) 0%, var(--c-primary) 0%, var(--c-bg3) 0%);

    outline:none; margin: 0 auto; display:block;

    cursor:pointer; margin-bottom:8px;

    animation: fadeInUp 0.7s var(--trans-slow) 0.4s backwards;

}

.evt-range::-webkit-slider-thumb {

    -webkit-appearance:none; appearance:none;

    width:22px; height:22px; border-radius:50%;

    background: var(--c-primary);

    box-shadow: 0 0 12px rgba(0,191,255,0.6);

    border: 3px solid var(--c-bg);

    cursor:pointer;

    transition: var(--trans-spring);

}

.evt-range::-webkit-slider-thumb:hover { transform: scale(1.2); }



/* ===== WALLET STRIP ===== */

.evt-wallet-strip {

    background: var(--c-bg1);

    border-top: 1px solid var(--c-border);

    border-bottom: 1px solid var(--c-border);

    padding: var(--sp-lg) 0;

}

.wallet-strip-grid {

    display:grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

}

.wstrip-card {

    display:flex; align-items:center; gap:12px;

    background: var(--c-bg2);

    border: 1px solid var(--c-border);

    border-radius: var(--r-lg);

    padding: 14px 16px;

    transition: var(--trans-mid);

}

.wstrip-card:hover { border-color: var(--c-border-hov); transform:translateY(-2px); }

.wstrip-card.accent-card { border-color: rgba(57,255,20,0.2); background: rgba(57,255,20,0.03); }

.wstrip-icon { font-size:1.4rem; flex-shrink:0; }

.wstrip-label { display:block; font-size:0.7rem; font-weight:600; color: var(--c-txt3); text-transform:uppercase; letter-spacing:0.05em; }

.wstrip-value { display:block; font-size:1rem; font-weight:700; color: var(--c-txt1); font-family: var(--mono); }

.wstrip-value.accent { color: var(--c-accent); }



/* ===== CONTENT GRID ===== */

.evt-content-grid {

    display:grid;

    grid-template-columns: 1fr;

    gap: var(--sp-lg);

    padding-top: var(--sp-lg);

    padding-bottom: var(--sp-lg);

}

.evt-col-left, .evt-col-right { display:flex; flex-direction:column; gap: var(--sp-lg); }



/* ===== CARDS ===== */

.evt-card {

    background: var(--c-bg1);

    border: 1px solid var(--c-border);

    border-radius: var(--r-xl);

    padding: var(--sp-lg);

    position:relative; overflow:hidden;

    transition: var(--trans-mid);

    min-width: 0; /* prevent flex/grid blowout */

}

.evt-card::before {

    content:'';

    position:absolute; inset:0; border-radius: var(--r-xl);

    background: radial-gradient(circle at top left, rgba(0,191,255,0.04), transparent 60%);

    pointer-events:none;

}

.evt-card:hover { border-color: rgba(0,191,255,0.2); }

.evt-card-header {

    display:flex; align-items:center; justify-content:space-between;

    margin-bottom: var(--sp-lg); gap: 8px; flex-wrap:wrap;

}

.evt-card-title { display:flex; align-items:center; gap:10px; }

.evt-card-title h2 {

    font-size:1.1rem; font-weight:700; color: var(--c-txt1); margin:0; letter-spacing:-0.02em;

}

.card-icon { font-size:1.3rem; }

.evt-card-badges { display:flex; gap:6px; flex-wrap:wrap; }

.badge-tag {

    font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;

    padding: 4px 10px; border-radius:999px;

    background: var(--c-primary-g); color: var(--c-primary);

    border: 1px solid rgba(0,191,255,0.3);

}

.badge-tag.accent { background: var(--c-accent-g); color: var(--c-accent); border-color: rgba(57,255,20,0.3); }



/* ===== ELIGIBILITY BOX ===== */

.evt-eligibility-box {

    display:flex; align-items:flex-start; gap:12px;

    background: rgba(255,176,32,0.07);

    border: 1px solid rgba(255,176,32,0.25);

    border-radius: var(--r-md); padding:14px;

    margin-bottom: var(--sp-lg); font-size:0.85rem;

}

.eligibility-icon { font-size:1.2rem; flex-shrink:0; margin-top:2px; }

.evt-eligibility-box strong { color: var(--c-warning); font-size:0.9rem; }

.evt-eligibility-box p { margin:4px 0 0; font-size:0.82rem; color: var(--c-txt2); }

.evt-warning-box {

    display:flex; align-items:center; gap:10px;

    background: var(--c-error-g); border: 1px solid rgba(255,73,92,0.3);

    border-radius: var(--r-md); padding:12px; margin-bottom:var(--sp-lg);

    font-size:0.85rem; color: var(--c-error);

}



/* ===== DEPOSIT STEPS ===== */

.deposit-step { margin-bottom: var(--sp-lg); }

.step-header {

    display:flex; align-items:center; gap:10px; margin-bottom:12px;

}

.step-num {

    width:28px; height:28px; border-radius: var(--r-sm);

    background: var(--c-primary-g); border: 1px solid rgba(0,191,255,0.3);

    color: var(--c-primary); font-family: var(--mono);

    font-size:0.75rem; font-weight:700; letter-spacing:0.05em;

    display:flex; align-items:center; justify-content:center;

    flex-shrink:0;

}

.step-title { font-size:0.9rem; font-weight:600; color: var(--c-txt1); }



/* Amount Presets */

.amount-presets {

    display:grid; grid-template-columns: repeat(4,1fr); gap:8px;

    margin-bottom:12px;

}

.preset-btn {

    padding: 10px 4px; border-radius: var(--r-md);

    border: 1px solid var(--c-border);

    background: var(--c-bg2); color: var(--c-txt2);

    font-size:0.85rem; font-weight:600; cursor:pointer;

    transition: var(--trans-mid);

}

.preset-btn:hover, .preset-btn.selected {

    border-color: var(--c-primary); color: var(--c-primary);

    background: var(--c-primary-gd);

    box-shadow: 0 0 12px rgba(0,191,255,0.15);

    transform: translateY(-2px);

}



/* Amount Input */

.amt-input-wrap {

    display:flex; align-items:center;

    background: var(--c-bg2); border: 1px solid var(--c-border);

    border-radius: var(--r-md); overflow:hidden;

    transition: var(--trans-fast);

    position:relative;

}

.amt-input-wrap:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(0,191,255,0.1); }

.amt-prefix {

    padding: 0 12px; font-size:1rem; font-weight:700;

    color: var(--c-txt3); background: var(--c-bg3);

    border-right: 1px solid var(--c-border);

    height:100%; display:flex; align-items:center;

    min-height:48px;

}

.amt-input, .evt-input {

    flex:1; width:100%; padding:12px 14px;

    background:transparent; border:none; outline:none;

    color: var(--c-txt1); font-family: var(--mono);

    font-size:1rem; font-weight:600;

}

.evt-input {

    background: var(--c-bg2); border: 1px solid var(--c-border);

    border-radius: var(--r-md); transition: var(--trans-fast);

    color: var(--c-txt1);

}

.evt-input:focus { border-color: var(--c-primary); outline:none; box-shadow: 0 0 0 3px rgba(0,191,255,0.1); }

input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }

.btn-max {

    padding: 0 14px; background: var(--c-primary-g);

    border: none; border-left: 1px solid var(--c-border);

    color: var(--c-primary); font-size:0.75rem; font-weight:700;

    letter-spacing:0.05em; cursor:pointer; min-height:48px;

    transition: var(--trans-fast);

}

.btn-max:hover { background: var(--c-primary); color: #000; }



/* Bonus Preview */

.bonus-preview {

    background: linear-gradient(135deg, var(--c-bg2), var(--c-bg3));

    border: 1px solid var(--c-border);

    border-radius: var(--r-md); overflow:hidden;

    margin-top:12px;

    opacity:0; transform:translateY(8px);

    transition: var(--trans-mid);

}

.bonus-preview.visible { opacity:1; transform:translateY(0); }

.bp-row {

    display:flex; justify-content:space-between; align-items:center;

    padding:10px 16px; border-bottom: 1px solid var(--c-border);

    font-size:0.875rem;

}

.bp-row:last-child { border-bottom:none; }

.bp-row.accent-row { background: rgba(57,255,20,0.03); }

.bp-row.total-row { background: rgba(0,191,255,0.04); font-size:0.95rem; }

.text-accent { color: var(--c-accent) !important; }

.text-primary { color: var(--c-primary) !important; }



/* Crypto Selector */

.crypto-selector {

    display:grid; grid-template-columns: repeat(3,1fr); gap:8px;

}

.crypto-opt {

    display:flex; flex-direction:column; align-items:center; gap:5px;

    padding:10px 6px; border-radius: var(--r-md);

    border: 1px solid var(--c-border);

    background: var(--c-bg2); cursor:pointer;

    transition: var(--trans-mid);

    position:relative;

}

.crypto-opt:hover { border-color: var(--c-primary); background: var(--c-primary-gd); }

.crypto-opt.selected {

    border-color: var(--c-primary); background: var(--c-primary-gd);

    box-shadow: 0 0 14px rgba(0,191,255,0.15);

}

.crypto-opt.selected::after {

    content:'✓'; position:absolute; top:4px; right:6px;

    font-size:0.6rem; font-weight:700; color: var(--c-primary);

}

.crypto-opt-icon { font-size:1.4rem; }

.crypto-opt-img {

    width:32px; height:32px; object-fit:contain;

    flex-shrink:0; display:block;

    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));

    transition: var(--trans-mid);

}

.crypto-opt:hover .crypto-opt-img,

.crypto-opt.selected .crypto-opt-img {

    transform: scale(1.1);

    filter: drop-shadow(0 2px 10px rgba(0,191,255,0.4));

}

.crypto-opt-icon-fallback { font-size:1.4rem; flex-shrink:0; }

.crypto-opt-sym { font-size:0.7rem; font-weight:700; color: var(--c-txt1); letter-spacing:0.05em; }

.crypto-opt-name { font-size:0.6rem; color: var(--c-txt3); }



/* Crypto Amount Display */

.crypto-amount-display {

    background: var(--c-bg2); border: 1px solid var(--c-border);

    border-radius: var(--r-md); padding:12px 14px; margin-top:10px;

}

.cad-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }

.cad-label { font-size:0.78rem; color: var(--c-txt3); font-weight:500; }

.cad-price { font-size:0.85rem; font-weight:600; color: var(--c-txt2); font-family: var(--mono); }

.cad-crypto { font-size:1rem; font-weight:700; color: var(--c-primary); font-family: var(--mono); }



/* Wallet Display */

.wallet-display { margin-top: var(--sp-sm); }

.wallet-addr-box {

    background: var(--c-bg3);

    border: 1px solid rgba(0,191,255,0.25);

    border-radius: var(--r-lg);

    padding: 20px;

    transition: var(--trans-mid);

}

.wallet-addr-box:hover {

    border-color: rgba(0,191,255,0.45);

    box-shadow: 0 0 18px rgba(0,191,255,0.08);

}

.wab-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

    gap: 8px;

}

.wab-label {

    font-size: 0.72rem;

    font-weight: 700;

    color: var(--c-primary);

    text-transform: uppercase;

    letter-spacing: 0.1em;

}

.wab-addr {

    display: block;

    font-family: var(--mono);

    font-size: 0.82rem;

    font-weight: 600;

    color: var(--c-txt1);

    word-break: break-all;

    line-height: 1.6;

    background: rgba(0,0,0,0.25);

    border: 1px solid var(--c-border);

    border-radius: var(--r-sm);

    padding: 12px 14px;

    letter-spacing: 0.02em;

}

.btn-copy {

    display:inline-flex; align-items:center; gap:5px;

    padding: 6px 14px; border-radius: var(--r-sm);

    background: var(--c-primary-g); border: 1px solid rgba(0,191,255,0.3);

    color: var(--c-primary); font-size:0.78rem; font-weight:600;

    cursor:pointer; transition: var(--trans-fast);

}

.btn-copy:hover { background: var(--c-primary); color:#000; }

.wallet-warning {

    display:flex; align-items:flex-start; gap:8px;

    background: var(--c-error-g); border: 1px solid rgba(255,73,92,0.2);

    border-radius: var(--r-sm); padding:10px 12px; margin-top:10px;

    font-size:0.8rem; color: var(--c-error);

}



/* TxID input */

.txid-input-wrap { }

.txid-input { width:100%; padding:12px 14px; font-size:0.85rem; }

.txid-hint { font-size:0.75rem; color: var(--c-txt3); margin-top:6px; }

.wd-balance-hint { font-size:0.8rem; color: var(--c-txt3); margin-top:6px; }



/* ===== BUTTONS ===== */

.evt-btn-primary {

    display:inline-flex; align-items:center; justify-content:center; gap:8px;

    padding: 14px 24px; border-radius: var(--r-md);

    background: linear-gradient(135deg, var(--c-primary), #0088cc);

    border:none; color: #000; font-family: var(--font);

    font-size:0.95rem; font-weight:700; cursor:pointer;

    transition: var(--trans-spring);

    box-shadow: 0 4px 20px rgba(0,191,255,0.3);

    position:relative; overflow:hidden; letter-spacing:0.01em;

}

.evt-btn-primary::after {

    content:''; position:absolute; inset:0;

    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.15));

    opacity:0; transition: var(--trans-fast);

}

.evt-btn-primary:hover { transform:translateY(-2px); box-shadow: 0 8px 30px rgba(0,191,255,0.4); }

.evt-btn-primary:hover::after { opacity:1; }

.evt-btn-primary:active { transform:translateY(0); }

.evt-btn-primary:disabled { opacity:0.4; cursor:not-allowed; transform:none; }

.evt-btn-accent {

    display:inline-flex; align-items:center; justify-content:center; gap:8px;

    padding: 14px 24px; border-radius: var(--r-md);

    background: linear-gradient(135deg, var(--c-accent), #22cc00);

    border:none; color: #000; font-family: var(--font);

    font-size:0.95rem; font-weight:700; cursor:pointer;

    transition: var(--trans-spring);

    box-shadow: 0 4px 20px rgba(57,255,20,0.25);

    position:relative; overflow:hidden;

}

.evt-btn-accent:hover { transform:translateY(-2px); box-shadow: 0 8px 30px rgba(57,255,20,0.35); }

.evt-btn-accent:active { transform:translateY(0); }

.evt-btn-accent:disabled { opacity:0.4; cursor:not-allowed; transform:none; }

.full-width { width:100%; }

.btn-icon { font-size:1rem; }



/* ===== HISTORY LIST ===== */

.history-list { display:flex; flex-direction:column; gap:8px; }

.history-empty {

    display:flex; flex-direction:column; align-items:center; gap:8px;

    padding: var(--sp-xl) var(--sp-md); color: var(--c-txt3); text-align:center;

}

.empty-icon { font-size:2.5rem; opacity:0.5; }

.history-empty p { font-size:0.875rem; }



/* History Card */

.hist-card {

    display:flex; align-items:center; gap:12px;

    background: var(--c-bg2); border: 1px solid var(--c-border);

    border-radius: var(--r-md); padding: 12px 14px;

    transition: var(--trans-mid);

    animation: fadeInUp 0.4s var(--trans-slow) backwards;

}

.hist-card:hover { border-color: var(--c-border-hov); transform: translateX(3px); }

.hist-icon { font-size:1.4rem; flex-shrink:0; }

.hist-info { flex:1; min-width:0; }

.hist-title { font-size:0.85rem; font-weight:700; color: var(--c-txt1); margin-bottom:2px; }

.hist-sub {

    font-size:0.72rem; color: var(--c-txt3); font-family: var(--mono);

    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

    max-width: 160px;

}

.hist-right { text-align:right; flex-shrink:0; }

.hist-amount { display:block; font-size:0.95rem; font-weight:700; color: var(--c-txt1); font-family: var(--mono); }

.hist-status {

    display:inline-block; padding:2px 8px;

    border-radius:999px; font-size:0.65rem; font-weight:700; letter-spacing:0.05em;

    margin-top:3px;

}

.hist-status.pending  { background: rgba(255,176,32,0.15); color: var(--c-warning); border: 1px solid rgba(255,176,32,0.3); }

.hist-status.approved { background: var(--c-accent-g); color: var(--c-accent); border: 1px solid rgba(57,255,20,0.3); }

.hist-status.rejected { background: var(--c-error-g); color: var(--c-error); border: 1px solid rgba(255,73,92,0.3); }

.hist-status.processing { background: var(--c-primary-g); color: var(--c-primary); border: 1px solid rgba(0,191,255,0.3); }



/* ===== RULES CARD ===== */

.rules-card { background: linear-gradient(135deg, var(--c-bg1), var(--c-bg2)); }

.rules-list { list-style:none; display:flex; flex-direction:column; gap:10px; }

.rules-list li {

    display:flex; align-items:flex-start; gap:10px;

    font-size:0.875rem; color: var(--c-txt2); line-height:1.5;

    padding:10px 12px;

    background: rgba(255,255,255,0.02); border-radius: var(--r-sm);

    border: 1px solid var(--c-border);

    transition: var(--trans-fast);

}

.rules-list li:hover { border-color: var(--c-border-hov); background: rgba(0,191,255,0.03); }

.rule-icon { font-size:1rem; flex-shrink:0; }



/* ===== DISABLED EVENT OVERLAY ===== */

.evt-disabled-overlay {

    position:fixed; inset:0; z-index:9990;

    background: rgba(4,4,10,0.95);

    backdrop-filter: blur(10px);

    display:flex; align-items:center; justify-content:center;

    padding: var(--sp-md);

}

.disabled-card {

    background: var(--c-bg1); border: 1px solid var(--c-border);

    border-radius: var(--r-2xl); padding: var(--sp-2xl) var(--sp-xl);

    text-align:center; max-width:400px;

    animation: popIn 0.5s var(--trans-spring);

}

.disabled-icon { font-size:3rem; display:block; margin-bottom:16px; }

.disabled-card h2 { color: var(--c-txt1); margin-bottom:12px; }

.disabled-card p { color: var(--c-txt2); font-size:0.9rem; margin-bottom:24px; }



/* ===== ANIMATIONS ===== */

@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }

@keyframes popIn { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }

@keyframes orbFloat {

    0%,100% { transform: translate(0,0) scale(1); }

    33% { transform: translate(20px,-15px) scale(1.05); }

    66% { transform: translate(-10px,10px) scale(0.97); }

}

@keyframes glowPulse {

    0%,100% { opacity:1; box-shadow: 0 0 6px currentColor; }

    50% { opacity:0.6; box-shadow: 0 0 14px currentColor; }

}

@keyframes panGrid {

    from { background-position: 0 0; }

    to { background-position: -40px -40px; }

}

@keyframes shimmerLoad {

    0% { background-position: -1000px 0; }

    100% { background-position: 1000px 0; }

}

.skeleton {

    animation: shimmerLoad 2s infinite linear;

    background: linear-gradient(90deg, var(--c-bg2) 25%, var(--c-bg3) 50%, var(--c-bg2) 75%);

    background-size: 2000px 100%; border-radius: var(--r-sm);

    color:transparent;

}



/* ===== DESKTOP RESPONSIVE ===== */

@media (min-width: 600px) {

    .wallet-strip-grid { grid-template-columns: repeat(4,1fr); }

    .crypto-selector { grid-template-columns: repeat(6,1fr); }

    .amount-presets { grid-template-columns: repeat(4,1fr); }

}



@media (min-width: 900px) {

    body { padding-bottom: var(--sp-2xl); }



    /* Show top nav, hide bottom nav */

    .evt-topnav { display:flex; }

    .evt-bottomnav { display:none; }



    /* Top nav padding */

    .evt-hero { padding-top: calc(var(--nav-top-h) + 56px); padding-bottom: 64px; }



    /* Toast position — not above mobile nav on desktop */

    #evt-toast-container { bottom: var(--sp-lg); }



    /* ── HERO ── */

    .evt-hero-title { font-size: 4.5rem; }

    .evt-calc-strip { gap: 28px; padding: 22px 36px; max-width: 600px; }

    .evt-range { max-width: 480px; }



    /* ── WALLET STRIP ── */

    .wallet-strip-grid { grid-template-columns: repeat(4,1fr); gap: 16px; }

    .wstrip-card { padding: 18px 20px; }

    .wstrip-value { font-size: 1.1rem; }



    /* ── CONTENT GRID: 55/45 split, left col is wider (deposit form) ── */

    .evt-content-grid {

        grid-template-columns: 1.15fr 1fr;

        gap: 28px;

        align-items: start;

        padding-top: var(--sp-xl);

        padding-bottom: var(--sp-xl);

    }

    .evt-col-left, .evt-col-right { gap: var(--sp-xl); }



    /* ── CARDS ── */

    .evt-card { padding: var(--sp-xl) 28px; }

    .evt-card-title h2 { font-size: 1.2rem; }



    /* ── DEPOSIT FORM ── */

    .amount-presets { grid-template-columns: repeat(4,1fr); gap: 10px; }

    .preset-btn { padding: 12px 8px; font-size: 0.9rem; }



    /* Crypto selector: 6 across on desktop */

    .crypto-selector { grid-template-columns: repeat(6,1fr); gap: 10px; }

    .crypto-opt { padding: 12px 8px; gap: 7px; border-radius: var(--r-lg); }

    .crypto-opt-img { width: 36px; height: 36px; }

    .crypto-opt-sym { font-size: 0.75rem; }

    .crypto-opt-name { font-size: 0.65rem; }



    /* ── WALLET DISPLAY ── */

    .wallet-addr-box { padding: 22px; }

    .wab-addr { font-size: 0.85rem; }



    /* ── BONUS PREVIEW ── */

    .bp-row { padding: 12px 18px; font-size: 0.9rem; }



    /* ── HISTORY CARDS ── */

    .hist-card { padding: 14px 18px; }

    .hist-title { font-size: 0.9rem; }

    .hist-amount { font-size: 1rem; }



    /* ── BUTTONS ── */

    .evt-btn-primary, .evt-btn-accent { padding: 15px 28px; font-size: 1rem; }



    /* ── RULES CARD ── */

    .rules-list li { padding: 12px 14px; font-size: 0.9rem; }

}



@media (min-width: 1200px) {

    .evt-container { padding: 0 var(--sp-2xl); }



    /* Wider layout — give deposit form more breathing room */

    .evt-content-grid { grid-template-columns: 1.2fr 1fr; gap: 36px; }

    .evt-card { padding: 32px; }



    /* Bigger crypto tiles */

    .crypto-opt { padding: 14px 10px; gap: 8px; }

    .crypto-opt-img { width: 38px; height: 38px; }

    .crypto-opt-sym { font-size: 0.8rem; }



    /* Hero */

    .evt-hero-title { font-size: 5rem; }

    .evt-hero-subtitle { font-size: 1.15rem; }

    .evt-calc-strip { max-width: 680px; }

}



/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}





/* ===== MOBILE FIXES (max-width: 899px) ===== */

@media (max-width: 899px) {



    /* Container — tighter horizontal padding on small phones */

    .evt-container { padding: 0 12px; }



    /* Cards — reduce padding, ensure no overflow */

    .evt-card { padding: 16px 14px; overflow: hidden; min-width: 0; }



    /* Card header — allow wrap so badges don't push out */

    .evt-card-header { flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }



    /* Crypto selector — force 3 columns always on mobile */

    .crypto-selector {

        grid-template-columns: repeat(3, 1fr) !important;

        gap: 6px;

    }

    .crypto-opt { padding: 8px 4px; gap: 4px; }

    .crypto-opt-img { width: 26px; height: 26px; }

    .crypto-opt-sym { font-size: 0.65rem; }

    .crypto-opt-name { font-size: 0.55rem; }



    /* Amount presets — 4 across always */

    .amount-presets {

        grid-template-columns: repeat(4, 1fr) !important;

        gap: 6px;

    }

    .preset-btn { padding: 9px 2px; font-size: 0.78rem; }



    /* Wallet address box — prevent overflow */

    .wallet-addr-box { padding: 14px; }

    .wab-addr {

        font-size: 0.72rem;

        padding: 10px 10px;

        overflow-wrap: break-word;

        word-break: break-all;

    }

    .wab-header { flex-wrap: wrap; gap: 6px; }

    .btn-copy { padding: 5px 10px; font-size: 0.72rem; }



    /* History cards — keep sub text from overflowing */

    .hist-card { padding: 10px 12px; gap: 8px; }

    .hist-info { min-width: 0; overflow: hidden; }

    .hist-sub { max-width: 120px; }

    .hist-title { font-size: 0.82rem; }

    .hist-amount { font-size: 0.88rem; }



    /* Wallet strip — 2 columns on small screens */

    .wallet-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .wstrip-card { padding: 12px 14px; }

    .wstrip-value { font-size: 0.95rem; }



    /* Hero — reduce padding */

    .evt-hero { padding: 32px 12px 40px; }

    .evt-hero-title { font-size: clamp(1.8rem, 7vw, 2.8rem); }

    .evt-hero-subtitle { font-size: 0.9rem; }



    /* Calc strip — tighter on mobile */

    .evt-calc-strip { padding: 14px 16px; gap: 10px; }

    .calc-value { font-size: 1rem; }

    .calc-arrow { font-size: 0.9rem; }



    /* Inputs — full width, no overflow */

    .evt-input, .txid-input { font-size: 0.85rem; }

    .amt-input { font-size: 0.95rem; }



    /* Buttons */

    .evt-btn-primary, .evt-btn-accent { padding: 13px 16px; font-size: 0.9rem; }



    /* Step header */

    .step-title { font-size: 0.85rem; }



    /* Rules list */

    .rules-list li { font-size: 0.82rem; padding: 9px 10px; }

}



/* Extra small phones */

@media (max-width: 380px) {

    .evt-container { padding: 0 8px; }

    .evt-card { padding: 14px 10px; }

    .crypto-opt { padding: 7px 2px; }

    .crypto-opt-img { width: 22px; height: 22px; }

    .amount-presets { grid-template-columns: repeat(4, 1fr) !important; gap: 4px; }

    .preset-btn { font-size: 0.7rem; padding: 8px 1px; }

    .hist-sub { max-width: 90px; }

    .wab-addr { font-size: 0.65rem; }

}

/* END MOBILE FIXES */



/* ===== DEPOSIT CLAIMED STATE ===== */

.evt-claimed-state {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: var(--sp-xl) var(--sp-md);

    gap: 12px;

}

.evt-claimed-icon {

    font-size: 3rem;

    line-height: 1;

    filter: drop-shadow(0 0 12px rgba(57,255,20,0.5));

}

.evt-claimed-title {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--c-txt1);

    margin: 0;

    letter-spacing: -0.02em;

}

.evt-claimed-desc {

    font-size: 0.9rem;

    color: var(--c-txt2);

    line-height: 1.6;

    margin: 0;

    max-width: 380px;

}

.evt-claimed-desc strong { color: var(--c-accent); }

/* END DEPOSIT CLAIMED STATE */