/* =====================================================
🎨 FUNDZONE DESIGN SYSTEM (GLOBAL VARIABLES)
===================================================== */
:root {
    --bg:           #0f172a;
    --card:         #111827;
    --primary:      #00ff99;
    --primary-dark: #00cc77;
    --text:         #ffffff;
    --muted:        #94a3b8;
    --shadow:       0 10px 30px rgba(0,0,0,0.35);
    --radius:       14px;
    --bg-light:     #1e283b;
    --danger:       #ef4444;
    --warning:      #f59e0b;
    --info:         #3b82f6;
}


/* =====================================================
💰 BALANCE WIDGET
===================================================== */

.ofc-balance-box {
    background: linear-gradient(135deg, #0b1c3d, #102a5c);
    padding: 40px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow);
    max-width: 420px;
    margin: 20px auto;
    transition: transform 0.3s ease;
}

.ofc-balance-box:hover {
    transform: translateY(-5px);
}

.ofc-balance-label {
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ofc-balance-value {
    font-size: 54px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 2px;
}


/* =====================================================
📌 FUNDZONE SYSTEM
===================================================== */

.ofc-fundzone {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    color: var(--text);
}

.ofc-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
}

.ofc-section {
    background: var(--card);
    padding: 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.ofc-section:hover {
    transform: translateY(-5px);
}


/* =====================================================
🔘 BUTTON SYSTEM
===================================================== */

.ofc-btn {
    padding: 10px 20px;
    background: var(--primary);
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 8px;
    transition: all 0.3s ease;
    color: var(--bg);
    text-decoration: none;
    display: inline-block;
}

.ofc-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.ofc-btn:disabled {
    background: #334155;
    cursor: not-allowed;
    opacity: 0.6;
    color: var(--muted);
}


/* =====================================================
📌 SMARTLINK SYSTEM
===================================================== */

.ofc-smart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.ofc-smart-card {
    background: var(--card);
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid var(--bg-light);
}

.ofc-smart-card:hover {
    transform: translateY(-5px);
}

.ofc-smart-card h4 {
    margin-bottom: 10px;
    color: var(--primary);
}

.ofc-smart-desc {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 10px;
}


/* =====================================================
📌 TASKS SYSTEM
===================================================== */

.ofc-task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.ofc-task-card {
    background: var(--card);
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
    border: 1px solid var(--bg-light);
}

.ofc-task-card:hover {
    transform: translateY(-5px);
}

.ofc-task-card h4 {
    margin: 0 0 10px;
}

.ofc-task-desc {
    font-size: 14px;
    color: var(--muted);
    margin: 10px 0;
}

.ofc-task-reward {
    margin: 10px 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--primary);
}

.ofc-task-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}


/* =====================================================
📌 POPUP SYSTEM
===================================================== */

.ofc-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9980;  /* below loader (999999) and notification panel (9993) */
}

.ofc-popup-content {
    background: var(--card);
    padding: 25px;
    border-radius: var(--radius);
    width: 320px;
    text-align: center;
    box-shadow: var(--shadow);
}

.ofc-popup input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 8px;
    outline: none;
}

.ofc-popup input[type="file"] {
    background: var(--bg-light);
    color: var(--muted);
    padding: 8px;
}


/* =====================================================
📌 USER HEADER
===================================================== */

.ofc-user-header {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--card);
    padding: 10px 20px;
    border-radius: var(--radius);
    color: var(--primary);
    font-weight: bold;
    z-index: 9999;
    display: flex;
    gap: 15px;
    align-items: center;
    box-shadow: var(--shadow);
}

.ofc-user-header span {
    font-size: 14px;
    color: var(--text);
}


/* =====================================================
📊 USER LOGS
===================================================== */

.ofc-logs {
    display: grid;
    gap: 15px;
}

.ofc-log-card {
    background: var(--card);
    padding: 15px;
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: var(--shadow);
}


/* =====================================================
📱 RESPONSIVE DESIGN
===================================================== */

@media (max-width: 768px) {

    .ofc-balance-box {
        padding: 25px;
    }

    .ofc-balance-value {
        font-size: 40px;
    }

    .ofc-smart-grid,
    .ofc-task-grid {
        grid-template-columns: 1fr;
    }

    .ofc-user-header {
        flex-direction: column;
        gap: 5px;
        right: 10px;
        top: 10px;
    }
}


/* =====================================================
🍞 TOAST NOTIFICATIONS
===================================================== */

.ofc-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg);
    color: var(--text);
    padding: 12px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: fadeIn 0.3s ease;
    z-index: 99999;
}

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


/* =====================================================
📡 TELCO GAINS STYLES
===================================================== */

.ofc-telco {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    color: var(--text);
}

.ofc-telco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ofc-telco-card {
    background: var(--card);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    border: 1px solid var(--bg-light);
    transition: transform 0.3s ease;
}

.ofc-telco-card:hover {
    transform: translateY(-5px);
}

.ofc-telco-card h3 {
    color: var(--primary);
    margin-bottom: 15px;
}

.ofc-telco-card select,
.ofc-telco-card input {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--bg-light);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    font-size: 14px;
}

.ofc-telco-card select:focus,
.ofc-telco-card input:focus {
    border-color: var(--primary);
}

.ofc-bundle-list {
    display: grid;
    gap: 10px;
    margin: 15px 0;
}

.ofc-bundle-item {
    background: linear-gradient(135deg, var(--bg), var(--bg-light));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--bg-light);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.ofc-bundle-item:hover {
    border-color: var(--primary);
    transform: scale(1.02);
}

.ofc-bundle-item.selected {
    border-color: var(--primary);
    background: linear-gradient(135deg, #0b3d2e, #0f5a3e);
}

.ofc-bundle-item .bundle-name {
    font-weight: bold;
    color: var(--text);
    font-size: 16px;
}

.ofc-bundle-item .bundle-desc {
    font-size: 12px;
    color: var(--muted);
    margin: 5px 0;
}

.ofc-bundle-item .bundle-price {
    color: var(--primary);
    font-weight: bold;
    font-size: 14px;
}


/* =====================================================
🏆 SKILL CASH STYLES
===================================================== */

.ofc-contests {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    color: var(--text);
}

.ofc-contest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ofc-contest-card {
    background: var(--card);
    padding: 25px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--bg-light);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ofc-contest-card:hover {
    transform: translateY(-5px);
}

.ofc-contest-card.featured::before {
    content: "🔥 HOT";
    position: absolute;
    top: 15px;
    right: -30px;
    background: var(--danger);
    color: white;
    padding: 5px 40px;
    font-size: 11px;
    font-weight: bold;
    transform: rotate(45deg);
}

.ofc-contest-card h3 {
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 20px;
}

.ofc-contest-meta {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    font-size: 14px;
    color: var(--muted);
}

.ofc-contest-meta span {
    color: var(--text);
    font-weight: bold;
}

.ofc-contest-progress {
    background: var(--bg-light);
    border-radius: 10px;
    height: 8px;
    margin: 15px 0;
    overflow: hidden;
}

.ofc-contest-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #00cc77);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.ofc-leaderboard {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
}

.ofc-leaderboard h4 {
    color: var(--primary);
    margin-bottom: 10px;
    text-align: center;
}

.ofc-leaderboard-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--bg);
    font-size: 13px;
}

.ofc-leaderboard-item:last-child {
    border-bottom: none;
}

.ofc-leaderboard-rank {
    font-weight: bold;
    color: var(--primary);
    width: 30px;
}

.ofc-leaderboard-name {
    flex: 1;
    margin: 0 10px;
}

.ofc-leaderboard-prize {
    color: var(--warning);
    font-weight: bold;
}

.ofc-contest-timer {
    text-align: center;
    font-size: 14px;
    color: var(--warning);
    margin: 10px 0;
    font-weight: bold;
}

.ofc-countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}

.ofc-countdown-box {
    background: var(--bg);
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 60px;
}

.ofc-countdown-box .number {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary);
}

.ofc-countdown-box .label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
}

.ofc-contest-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 15px 0;
    text-align: center;
}

.ofc-stat-box {
    background: var(--bg);
    padding: 10px;
    border-radius: 8px;
}

.ofc-stat-box .stat-value {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary);
}

.ofc-stat-box .stat-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
}

.ofc-prize-pool {
    background: linear-gradient(135deg, #1a3a2a, #0f2a1e);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    margin: 15px 0;
}

.ofc-prize-pool .pool-amount {
    font-size: 28px;
    font-weight: bold;
    color: var(--primary);
}

.ofc-prize-pool .pool-label {
    font-size: 12px;
    color: var(--muted);
}

.ofc-age-check {
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
}

.ofc-age-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}


/* =====================================================
📊 DASHBOARD STYLES
===================================================== */

.ofc-dashboard {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    color: var(--text);
}

.ofc-header {
    text-align: center;
    margin-bottom: 20px;
}

.ofc-header h2 {
    color: var(--text);
    font-size: 24px;
}

.ofc-ref-list {
    display: grid;
    gap: 10px;
}

.ofc-ref-item {
    background: var(--bg-light);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--bg-light);
}

.ofc-ref-item strong {
    color: var(--primary);
}

.ofc-ref-item small {
    color: var(--muted);
    display: block;
    margin: 5px 0;
}

.ofc-ref-item span {
    color: var(--warning);
    font-weight: bold;
}

input[type="text"][readonly] {
    background: var(--bg-light);
    border: 1px solid var(--bg-light);
    padding: 12px;
    border-radius: 8px;
    color: var(--text);
    width: 100%;
    margin: 10px 0;
}


/* =====================================================
💳 WALLET STYLES
===================================================== */

.ofc-withdraw {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    color: var(--text);
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.ofc-withdraw input,
.ofc-withdraw select,
.ofc-withdraw textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--bg-light);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    outline: none;
}

.ofc-withdraw textarea {
    resize: vertical;
    min-height: 100px;
}

.ofc-withdraw input:focus,
.ofc-withdraw select:focus,
.ofc-withdraw textarea:focus {
    border-color: var(--primary);
}


/* =====================================================
🔔 NOTIFICATION PANEL
===================================================== */

.ofc-notify-panel {
    position: fixed;
    right: -320px;
    top: 110px;
    width: 300px;
    height: auto;
    max-height: 400px;
    background: var(--card);
    border: 1px solid var(--bg-light);
    color: #fff;
    padding: 15px;
    transition: 0.3s;
    overflow-y: auto;
    z-index: 9994; /* Issue 3: below loader, same as new .ofc-np */
    border-radius: 0 0 0 15px;
    pointer-events: none; /* Issue 3: don't block page when hidden */
}

.ofc-notify-panel.active,
.ofc-notify-panel.show {
    right: 0;
    pointer-events: auto;
}


/* =====================================================
📱 MOBILE RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    .ofc-contest-grid,
    .ofc-telco-grid {
        grid-template-columns: 1fr;
    }

    .ofc-contest-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .ofc-countdown-box {
        min-width: 50px;
        padding: 8px 10px;
    }

    .ofc-countdown-box .number {
        font-size: 18px;
    }
}


/* =====================================================
🌟 GLOBAL LOADER
─────────────────────────────────────────────────────
Structure inside #ofc-global-loader:
  .ofc-loader-icon-wrap   — pulse wrapper around SVG
    svg.ofc-loader-svg    — the icon itself
      .ofc-loader-ring    — spinning arcs + arrowheads
      .ofc-sparkle-large  — twinkle animation
      .ofc-sparkle-small  — twinkle animation (delayed)
  .ofc-loader-text        — shimmer tagline
  .ofc-loader-bar         — track
    .ofc-loader-bar-fill  — animated fill
===================================================== */

/* ── Overlay ── */
.ofc-global-loader {
    position: fixed;
    inset: 0;                          /* top/right/bottom/left: 0 */
    width: 100%;
    height: 100%;
    background: #0a0f1e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;  /* Issue 2: must be above all other elements */
    overflow: hidden;
    /* Fade-out handled by JS adding .ofc-loader-hidden */
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Subtle radial vignette for depth */
.ofc-global-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 60% at 50% 50%,
        rgba(26, 39, 68, 0.55) 0%,
        rgba(9, 14, 28, 0.95) 100%
    );
    pointer-events: none;
}

/* ── Hide state (JS adds this class on window load) ── */
.ofc-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Icon wrapper: pulse + glow ── */
.ofc-loader-icon-wrap {
    position: relative;
    z-index: 1;
    /* Responsive size: 140px on desktop, scales down to ~28vw on mobile */
    width:  clamp(110px, 28vw, 160px);
    height: clamp(110px, 28vw, 160px);
    margin-bottom: 28px;
    border-radius: 22.5%;           /* matches SVG rx=26.4/120 ≈ 22% */
    animation: ofc-pulse 2s ease-in-out infinite;
    /* Ambient glow around the icon */
    box-shadow:
        0 0  40px rgba(100, 160, 255, 0.20),
        0 0  80px rgba(60,  100, 200, 0.12),
        0 0 120px rgba(30,   60, 160, 0.06);
}

/* ── SVG fills its wrapper ── */
.ofc-loader-svg {
    display: block;
    width:  100%;
    height: 100%;
}

/* ── Spinning ring group ── */
.ofc-loader-ring {
    transform-origin: 60px 60px;     /* centre of 120×120 viewBox */
    animation: ofc-spin 1.6s linear infinite;
}

/* ── Sparkle twinkle ── */
.ofc-sparkle-large {
    animation: ofc-twinkle 2.2s ease-in-out infinite;
    transform-origin: 93px 39px;     /* large sparkle centre */
}

.ofc-sparkle-small {
    animation: ofc-twinkle 2.2s ease-in-out 0.45s infinite;
    transform-origin: 107px 24px;    /* small sparkle centre */
}

/* ── Shimmer tagline ──
   • clamp() ensures it's never smaller than 12px or bigger than 17px
   • text-align + padding ensure nothing is cut off on narrow screens
   • word-break as last resort for very small viewports              */
.ofc-loader-text {
    position: relative;
    z-index: 1;
    margin: 0 0 24px;
    padding: 0 20px;                 /* safe horizontal margin on mobile */
    width: 100%;
    max-width: 420px;
    text-align: center;
    /* Responsive font size: 12px min → 3.8vw fluid → 17px max */
    font-size: clamp(12px, 3.8vw, 17px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
    /* Shimmer effect */
    background: linear-gradient(
        90deg,
        #2a4060 0%,
        #00ff99 30%,
        #ffffff 50%,
        #00ff99 70%,
        #2a4060 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ofc-shimmer 2.4s linear infinite;
    /* Prevent text overflow on very narrow screens */
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* ── Progress bar track ── */
.ofc-loader-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* ── Progress bar fill ── */
.ofc-loader-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ff99, #00cc77, #00ff99);
    background-size: 200% 100%;
    animation:
        ofc-progress  2.8s ease-in-out forwards,
        ofc-bar-shine 1.6s linear       infinite;
}


/* =====================================================
🎬 LOADER KEYFRAMES
===================================================== */

/* Ring rotation */
@keyframes ofc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Icon gentle pulse */
@keyframes ofc-pulse {
    0%,  100% { transform: scale(1);    opacity: 0.92; }
    50%        { transform: scale(1.05); opacity: 1;    }
}

/* Sparkle twinkle */
@keyframes ofc-twinkle {
    0%,  100% { opacity: 1;   transform: scale(1);   }
    50%        { opacity: 0.3; transform: scale(0.65); }
}

/* Text shimmer sweep */
@keyframes ofc-shimmer {
    0%   { background-position: 250% 0; }
    100% { background-position: -250% 0; }
}

/* Progress bar grows 0 → 100% */
@keyframes ofc-progress {
    0%   { width: 0%; }
    60%  { width: 80%; }
    100% { width: 100%; }
}

/* Progress bar shine sweep */
@keyframes ofc-bar-shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* =====================================================
📱 LOADER – MOBILE OVERRIDES
Only corrections needed for very small screens.
clamp() already handles most of the scaling above.
===================================================== */

@media (max-width: 360px) {
    /* Extra padding so text doesn't hug the edges */
    .ofc-loader-text {
        padding: 0 16px;
        font-size: 12px;          /* hard floor for tiny viewports */
        letter-spacing: 0.03em;
    }

    .ofc-loader-icon-wrap {
        width:  100px;
        height: 100px;
        margin-bottom: 22px;
    }
}

/* ═══════════════════════════════════════════════
   ONFUNDS GLOBAL LOADER v2.6
═══════════════════════════════════════════════ */
.ofc-global-loader{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#0c1120;transition:opacity .45s}
.ofc-loader-icon-wrap{width:100px;height:100px;filter:drop-shadow(0 0 18px rgba(0,180,255,.22))}
.ofc-loader-svg{width:100%;height:100%}
.ofc-loader-ring{transform-origin:60px 60px;animation:ofc-spin 1.1s cubic-bezier(.6,.05,.35,.95) infinite}
@keyframes ofc-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ofc-loader-text{font-size:12px;color:#64748b;letter-spacing:2px;text-transform:uppercase;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;animation:ofc-pulse 1.8s ease-in-out infinite}
@keyframes ofc-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.ofc-loader-bar{width:160px;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.ofc-loader-bar-fill{width:45%;height:100%;background:linear-gradient(90deg,transparent,#00ff99,transparent);border-radius:2px;animation:ofc-slide 1.4s ease-in-out infinite}
@keyframes ofc-slide{from{transform:translateX(-100%)}to{transform:translateX(350%)}}</p>