/* Wallet Card with energetic gradient */
.reward-wallet-card {
    background: linear-gradient(135deg, #007AFF 0%, #AF52DE 100%);
    border-radius: 24px;
    padding: 25px 20px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 122, 255, 0.3);
    margin-bottom: 30px;
    text-align: center;
}

.wallet-label { font-size: 12px; font-weight: 600; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; }
.wallet-balance { font-size: 42px; font-weight: 900; margin: 5px 0 20px 0; letter-spacing: -1px; }

.progress-container { background: rgba(0,0,0,0.2); padding: 15px; border-radius: 16px; }
.progress-labels { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.progress-track { height: 8px; background: rgba(255,255,255,0.2); border-radius: 10px; overflow: hidden; }



/* Animated Progress Fill */
.progress-fill { 
    height: 100%; 
    background: #FFD60A; /* Default fallback */
    border-radius: 10px; 
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.5s ease; 
    position: relative;
    overflow: hidden;
}

/* The Shimmer Effect */
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0; 
    left: -100%;
    width: 50%; 
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    animation: progressShimmer 1.5s infinite linear;
    transform: skewX(-20deg);
}

@keyframes progressShimmer {
    100% { left: 200%; }
}


/* Typography */
.section-title { font-size: 16px; font-weight: 800; color: #1C1C1E; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.section-desc { font-size: 12px; color: #8E8E93; margin-bottom: 15px; line-height: 1.4; }

/* Share Box */
.share-box { display: flex; align-items: center; background: #F2F2F7; padding: 6px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); }
.share-box code { flex: 1; padding: 0 10px; font-size: 12px; font-weight: 700; color: #007AFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-btn { background: white; border: none; padding: 10px 15px; border-radius: 12px; font-weight: 700; font-size: 12px; color: #333; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.2s; }
.copy-btn:active { transform: scale(0.95); }

/* Forms */
.withdraw-form { display: flex; flex-direction: column; gap: 12px; }
.modern-input { width: 100%; padding: 16px; border: 2px solid #E5E5EA; border-radius: 16px; font-size: 14px; font-weight: 600; background: #FAFAFC; transition: 0.2s; outline: none; }
.modern-input:focus { border-color: #007AFF; background: white; box-shadow: 0 0 0 4px rgba(0,122,255,0.1); }
.w-full { width: 100%; }

/* Referral List Items */
.referrals-list-container { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; padding-bottom: 20px;}
.ref-item { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: white; border-radius: 16px; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.ref-user-info { display: flex; align-items: center; gap: 12px; }
.ref-avatar { width: 36px; height: 36px; border-radius: 50%; background: #E5E5EA; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #8E8E93; }
.ref-name { font-size: 13px; font-weight: 700; color: #1C1C1E; }
.ref-date { font-size: 10px; color: #8E8E93; }

/* Status Badges */
.status-pill { padding: 4px 10px; border-radius: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.status-premium { background: rgba(52, 199, 89, 0.15); color: #34C759; }
.status-free { background: rgba(142, 142, 147, 0.15); color: #8E8E93; }









/* --- OR Divider --- */
.or-divider { text-align: center; margin: 15px 0; position: relative; }
.or-divider::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: rgba(0,0,0,0.08); z-index: 1; }
.or-divider span { background: #F5F7FA; padding: 0 12px; font-size: 10px; font-weight: 800; color: #8E8E93; position: relative; z-index: 2; letter-spacing: 1px; border-radius: 10px; }

/* --- Raw Code Box --- */
.code-box { background: white; border: 2px dashed #007AFF; padding: 12px; justify-content: space-between; }
.code-label { font-size: 12px; font-weight: 700; color: #8E8E93; margin-right: 5px; text-transform: uppercase; }
.ref-code-text { font-size: 22px; font-weight: 900; color: #1C1C1E; letter-spacing: 3px; flex: 1; text-align: center; margin: 0; }
.code-copy-btn { background: #007AFF; color: white; } /* Make the code copy button pop */

/* --- How It Works Stepper --- */
.how-it-works-steps { 
    display: flex; flex-direction: column; gap: 0; 
    background: white; padding: 20px; border-radius: 20px; 
    border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
}
.step-item { display: flex; align-items: center; gap: 15px; position: relative; }
.step-icon { 
    width: 42px; height: 42px; border-radius: 14px; 
    background: #f0f7ff; color: #007AFF; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 18px; flex-shrink: 0; 
}
.step-text h4 { font-size: 14px; font-weight: 800; color: #1C1C1E; margin-bottom: 2px; }
.step-text p { font-size: 11px; color: #8E8E93; line-height: 1.3; font-weight: 500;}
.step-connector { 
    width: 2px; height: 20px; 
    background: #eef2ff; 
    margin-left: 20px; /* Perfectly centers under the 42px icon */
}



/* --- UNIVERSAL DRAG & SNAP ANIMATION --- */
.phone-frame {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.phone-frame.dragging {
    transition: none !important; /* Kills transition so it follows mouse instantly */
    cursor: grabbing;
}







/* === WATERMARK OVERLAY === */
.watermark-overlay {
    position: fixed; 
    top: -50vh; 
    left: -50vw; 
    width: 200vw; 
    height: 200vh;
    z-index: 9999;
    pointer-events: none;
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-content: center;
    transform: rotate(-30deg); 
    opacity: 0.04; /* Matches analytics.css exactly */
    mix-blend-mode: multiply;
}

.watermark-item {
    width: 200px; 
    height: 100px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-weight: 900; 
    font-size: 16px; 
    color: #000; 
    text-transform: uppercase;
}




/* --- PREMIUM BANK DROPDOWN --- */
#bank-code {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23007AFF' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    padding-right: 40px;
    cursor: pointer;
    background-color: #f9f9f9;
    border: 2px solid #eee;
    transition: all 0.3s ease;
}

#bank-code:focus {
    border-color: #007AFF;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

/* Style the placeholder option */
#bank-code option:first-child {
    color: #8E8E93;
}

/* Ensure consistent sizing with the number input */
.modern-input {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}