/* =========================================================
   RAprime — index-modern-3d.css  (OVERLAY ONLY)
   The page now uses css/main.css for ALL content + shell
   styling, so it looks exactly like index.html (light theme,
   navy/blue colours, gold reserved for the PRIME card).
   This file only adds the animated 3D globe background and
   lets it show softly through the light content.
   ========================================================= */

/* plain light backdrop behind the WebGL canvas — no tint/glow behind the nav */
.bg-field{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:#f4f6fb;
}
/* drop the dark-theme glow blobs (not needed on a light page) */
.bg-blob{display:none}

/* subtle navy grid, fading from the top */
.bg-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(14,55,137,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,55,137,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000,transparent 70%);
  mask-image:radial-gradient(circle at 50% 0%,#000,transparent 70%);
}

/* the rotating globe + flying currencies */
#bg3d{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.9}

/* let the globe stay visible behind the body:
   the fixed .bg-field provides the light surface, so the body
   itself can be transparent. */
body{background:transparent}
/* main.css sets overflow-x:hidden on html/body, which forces overflow-y to
   auto and turns them into scroll containers — that BREAKS position:sticky
   on the nav. overflow-x:clip blocks horizontal scroll WITHOUT creating a
   scroll container, so the sticky/fixed-on-scroll nav works again. */
html,body{overflow-x:clip !important}

/* make the solid section bands slightly translucent so the globe
   shows through softly across the whole page (still reads white,
   matching index.html — just "transparent like the modern page"). */
.section.tinted{background:rgba(255,255,255,.80)}
.section.soft{background:rgba(238,241,248,.80)}

/* welcome bonus card -> solid dark-blue (brand main colour, no light-blue fade) */
.bonus-band{background:linear-gradient(135deg,#030641 0%,#0e3789 100%)}

/* =========================================================
   NAV / STATUS BAR / DRAWER — ported from index-modern.css
   (dark-glass modern shell). Tokens are scoped to the shell
   elements so they don't affect the light main.css content.
   Loaded after main.css, so these win for the shell.
   ========================================================= */
.statusbar,.header,.drawer,.drawer-backdrop{
  --navy:#030641;--navy-2:#0e3789;--blue:#2950bd;--blue-2:#4f8cff;--blue-lt:#86b0ff;
  --gold-lt:#86b0ff;--green:#1fd49a;--red:#ff5e7a;
  --glass:rgba(255,255,255,.05);--glass-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.18);
  --text:#eef1fb;--muted:#9aa4c8;--faint:#5c668e;
  --maxw:1240px;--radius:22px;--ease:cubic-bezier(.22,1,.36,1);
  --grad-blue:linear-gradient(135deg,var(--blue-2),var(--navy-2));
}

/* status bar — solid (no transparency) */
.statusbar{position:relative;z-index:70;border-bottom:1px solid var(--line);background:#060818;font-size:12.5px;color:var(--muted);overflow:hidden}
.statusbar-inner{max-width:var(--maxw);margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.statusbar .status-left,.statusbar .status-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.statusbar .status-item{display:inline-flex;align-items:center;gap:7px;color:var(--muted);transition:color .25s}
.statusbar .status-item i{color:var(--gold-lt);font-size:12px}
.statusbar .status-item:hover{color:#fff}
.statusbar .status-divider{width:1px;height:13px;background:var(--line-2)}
.statusbar .status-pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(31,212,154,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,212,154,.5)}70%{box-shadow:0 0 0 8px rgba(31,212,154,0)}100%{box-shadow:0 0 0 0 rgba(31,212,154,0)}}
.statusbar .status-mkt{display:flex;gap:14px}
.statusbar .status-mkt .tick{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.statusbar .status-mkt .tick.up{color:var(--green)}.statusbar .status-mkt .tick.down{color:var(--red)}
.statusbar .social-mini{display:flex;gap:11px}
.statusbar .social-mini a{color:var(--muted);transition:color .25s}
.statusbar .social-mini a:hover{color:#fff}

/* header + nav — EXACTLY like index-modern.html: transparent header,
   only the floating pill shows, sticky/fixed to the top on scroll.
   main.css's .header paints a dark gradient + box-shadow + border +
   backdrop-blur, so we must clear ALL of those (incl. the .scrolled
   state) — that box-shadow was the dark band behind the nav.
   Header is sized to the nav (centred, max-width) per request. */
.header{position:sticky;top:0;z-index:60;max-width:var(--maxw);margin:0 auto;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  transition:transform .4s var(--ease)}
.header.scrolled{background:transparent !important;box-shadow:none !important;border:0 !important}
.header .nav{max-width:var(--maxw);margin:12px auto 0;padding:10px 16px;display:flex;align-items:center;gap:18px;
  border:1px solid var(--line-2);border-radius:18px;background:rgba(7,10,30,.94);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 16px 40px -26px rgba(0,0,0,.7);transition:background .35s,border-color .35s,box-shadow .35s,margin .35s}
.header.scrolled .nav{background:rgba(5,7,24,.99);border-color:var(--line-2);box-shadow:0 18px 46px -20px rgba(0,0,0,.85);margin-top:6px}
.header .brand{display:flex;align-items:center;gap:9px}
.header .brand img,.drawer .brand img{height:32px;width:auto}
.header .nav-list{display:flex;align-items:center;gap:2px;margin:0 auto 0 8px}
.header .nav-item{position:relative}
.header .nav-link{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:11px;font-size:14px;font-weight:500;color:var(--muted);background:none;transition:color .25s,background .25s}
.header .nav-link:hover{color:#fff;background:var(--glass)}
.header .nav-link .caret{font-size:10px;opacity:.7;transition:transform .3s}
.header .nav-item.has-dd.open > .nav-link .caret{transform:rotate(180deg)}
.header .nav-item.has-dd.open > .nav-link{color:#fff;background:var(--glass)}

/* dropdowns */
.header .dropdown{position:absolute;top:calc(100% + 12px);left:0;min-width:320px;padding:12px;
  background:rgba(8,11,34,.96);border:1px solid var(--line-2);border-radius:18px;backdrop-filter:blur(20px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);
  transform-origin:top left;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;z-index:50}
.header .dropdown.mega{min-width:380px}
.header .dropdown.align-right{left:auto;right:0;transform-origin:top right}
.header .nav-item.has-dd.open > .dropdown{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.header .dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.header .dropdown-heading{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);padding:8px 12px 10px;font-weight:600}
.header .dropdown-divider{height:1px;background:var(--line);margin:8px 6px}
.header .dropdown-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:13px;position:relative;transition:background .22s;cursor:pointer}
.header .dropdown-item:hover{background:var(--glass)}
.header .dropdown-item .icon{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:15px;
  background:var(--glass-2);border:1px solid var(--line);color:var(--blue-lt);transition:.25s}
.header .dropdown-item:hover .icon{background:var(--grad-blue);color:#fff;border-color:transparent}
.header .dropdown-item .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.header .dropdown-item .title-row{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text)}
.header .dropdown-item .desc{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header .dropdown-item .arrow{margin-left:auto;font-size:11px;color:var(--faint);transition:transform .25s,color .25s}
.header .dropdown-item:hover .arrow{transform:translateX(3px);color:var(--blue-lt)}
.header .dropdown .badge{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.header .dropdown .badge.new{background:rgba(31,212,154,.16);color:var(--green)}
.header .dropdown .badge.hot{background:rgba(255,94,122,.16);color:var(--red)}
.header .has-submenu > .submenu{position:absolute;top:-12px;left:calc(100% + 8px);min-width:300px;padding:12px;
  background:rgba(8,11,34,.97);border:1px solid var(--line-2);border-radius:18px;backdrop-filter:blur(20px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateX(8px);transition:.26s var(--ease);z-index:60}
.header .has-submenu:hover > .submenu,.header .has-submenu:focus-within > .submenu{opacity:1;visibility:visible;transform:translateX(0)}

/* nav actions + buttons */
.header .nav-actions{display:flex;align-items:center;gap:9px;margin-left:auto}
.header .icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line-2);background:var(--glass);display:grid;place-items:center;color:var(--text);transition:.25s}
.header .icon-btn:hover{background:var(--glass-2)}
.header .lang-btn .flag{font-size:12.5px;font-weight:700;letter-spacing:.03em}
.header .btn,.drawer .btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:14px;border:0;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s,background .3s}
.header .btn-gold,.drawer .btn-gold{background:var(--grad-blue);color:#fff;font-weight:700;box-shadow:0 12px 30px -10px rgba(41,80,189,.7)}
.header .btn-gold:hover,.drawer .btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(79,140,255,.8)}
.header .btn-ghost-dark,.drawer .btn-ghost-dark{background:var(--glass);color:var(--text);border:1px solid var(--line-2)}
.header .btn-ghost-dark:hover,.drawer .btn-ghost-dark:hover{background:var(--glass-2)}
.header .burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-2);background:var(--glass);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.header .burger span{width:18px;height:2px;border-radius:2px;background:var(--text);transition:.3s}
.header .burger.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.header .burger.active span:nth-child(2){opacity:0}
.header .burger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile drawer */
.drawer-backdrop{position:fixed;inset:0;background:rgba(2,3,12,.7);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.35s;z-index:90}
.drawer-backdrop.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:-100%;width:min(88vw,360px);height:100%;z-index:95;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#080b2e,#05071c);border-left:1px solid var(--line-2);transition:right .4s var(--ease)}
.drawer.show{right:0}
.drawer .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer .drawer-close{width:40px;height:40px;border-radius:11px;border:1px solid var(--line-2);background:var(--glass);color:var(--text);font-size:17px}
.drawer .drawer-body{flex:1;overflow-y:auto;padding:14px}
.drawer .m-item{border-bottom:1px solid rgba(255,255,255,.05)}
.drawer .m-link{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;padding:13px 12px;border-radius:11px;font-size:15px;font-weight:500;color:var(--text);background:none;text-align:left;transition:background .2s}
.drawer .m-link:hover{background:var(--glass)}
.drawer .m-link .chev{font-size:12px;color:var(--faint);transition:transform .3s}
.drawer .m-item.open > .m-link .chev{transform:rotate(180deg)}
.drawer .m-sub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);padding-left:12px}
.drawer .m-item.open > .m-sub{max-height:600px}
.drawer .m-sub .m-link{font-size:14px;color:var(--muted);padding:11px 12px}
.drawer .drawer-foot{padding:18px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}

@media (max-width:1024px){
  .header .nav-list{display:none}
  .header .burger{display:flex}
}

/* ===== Toast notifications (global) ===== */
.toast-demo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:22px 16px 4px;}
.toast-demo__label{font-size:13px;color:#aeb6c8;font-weight:600;margin-right:4px;}
.toast-demo__btn{cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;font-weight:600;font-size:13px;padding:9px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;transition:transform .2s,background .2s,border-color .2s;}
.toast-demo__btn:hover{transform:translateY(-2px);}
.td-success{border-color:rgba(31,212,154,.45);} .td-success:hover{background:rgba(31,212,154,.14);}
.td-info{border-color:rgba(91,155,255,.45);} .td-info:hover{background:rgba(91,155,255,.14);}
.td-error{border-color:rgba(255,107,107,.45);} .td-error:hover{background:rgba(255,107,107,.14);}
.td-warning{border-color:rgba(251,191,36,.45);} .td-warning:hover{background:rgba(251,191,36,.14);}

.toast-wrap{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:12px;width:calc(100vw - 36px);max-width:360px;pointer-events:none;}
html[dir="rtl"] .toast-wrap{right:auto;left:18px;}
.toast{pointer-events:auto;position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 42px 14px 14px;border-radius:14px;background:rgba(8,12,30,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 44px -16px rgba(0,0,0,.7);color:#fff;overflow:hidden;transform:translateX(120%);opacity:0;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .42s;}
html[dir="rtl"] .toast{padding:14px 14px 14px 42px;transform:translateX(-120%);}
.toast.show{transform:translateX(0);opacity:1;}
html[dir="rtl"] .toast.show{transform:translateX(0);opacity:1;}
.toast.hide{transform:translateX(120%);opacity:0;}
html[dir="rtl"] .toast.hide{transform:translateX(-120%);}
.toast__icon{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;margin-top:1px;}
.toast__body{min-width:0;}
.toast__title{font-weight:700;font-size:14px;margin-bottom:2px;}
.toast__msg{font-size:13px;color:#c8cfe0;line-height:1.45;}
.toast__close{position:absolute;top:9px;right:11px;background:none;border:0;color:#9aa3ba;font-size:20px;line-height:1;cursor:pointer;transition:color .2s;}
html[dir="rtl"] .toast__close{right:auto;left:11px;}
.toast__close:hover{color:#fff;}
.toast__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;animation:toastBar linear forwards;}
.toast.paused .toast__bar{animation-play-state:paused;}
@keyframes toastBar{from{width:100%}to{width:0}}
.toast--success .toast__icon{background:rgba(31,212,154,.16);color:#1fd49a;} .toast--success .toast__bar{background:#1fd49a;}
.toast--info .toast__icon{background:rgba(91,155,255,.16);color:#5b9bff;} .toast--info .toast__bar{background:#5b9bff;}
.toast--error .toast__icon{background:rgba(255,107,107,.16);color:#ff6b6b;} .toast--error .toast__bar{background:#ff6b6b;}
.toast--warning .toast__icon{background:rgba(251,191,36,.16);color:#fbbf24;} .toast--warning .toast__bar{background:#fbbf24;}
@media (prefers-reduced-motion: reduce){.toast{transition:opacity .2s;transform:none;}.toast.hide{transform:none;}.toast__bar{animation:none;}}

/* ===== Confirmation dialog (global) — window.showConfirm(message, opts) ===== */
.confirm-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,4,16,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .3s;}
.confirm-overlay.show{opacity:1;}
.confirm-card{width:100%;max-width:420px;background:rgba(10,14,34,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);color:#fff;padding:26px 24px 22px;text-align:center;transform:translateY(14px) scale(.96);opacity:0;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s;}
.confirm-overlay.show .confirm-card{transform:none;opacity:1;}
.confirm__icon{width:56px;height:56px;border-radius:16px;margin:0 auto 16px;display:grid;place-items:center;font-size:24px;background:rgba(91,155,255,.16);color:#5b9bff;}
.confirm--success .confirm__icon{background:rgba(31,212,154,.16);color:#1fd49a;}
.confirm--warning .confirm__icon{background:rgba(251,191,36,.16);color:#fbbf24;}
.confirm--error .confirm__icon{background:rgba(255,107,107,.16);color:#ff6b6b;}
.confirm__title{font-size:18px;font-weight:800;margin-bottom:8px;}
.confirm__msg{font-size:14px;color:#c8cfe0;line-height:1.5;margin-bottom:22px;}
.confirm__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.confirm__btn{cursor:pointer;border:0;font-weight:700;font-size:14px;padding:12px 22px;border-radius:11px;display:inline-flex;align-items:center;gap:8px;justify-content:center;min-width:120px;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;}
.confirm__btn:hover{transform:translateY(-2px);}
.confirm__accept{background:linear-gradient(135deg,#0e3789,#030641);color:#fff;box-shadow:0 12px 26px -10px rgba(14,55,137,.8);}
.confirm__accept--danger{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 12px 26px -10px rgba(239,68,68,.7);}
.confirm__deny{background:rgba(255,255,255,.06);color:#cdd4e6;border:1px solid rgba(255,255,255,.16);}
.confirm__deny:hover{background:rgba(255,255,255,.1);}
html[dir="rtl"] .confirm__actions{flex-direction:row-reverse;}
@media (prefers-reduced-motion: reduce){.confirm-overlay,.confirm-card{transition:opacity .2s;transform:none;}}

/* confirm with terms checkbox */
.confirm__check{display:flex;align-items:center;justify-content:center;gap:10px;margin:-4px 0 20px;font-size:13.5px;color:#c8cfe0;cursor:pointer;user-select:none;text-align:left;}
.confirm__check input{position:absolute;opacity:0;width:0;height:0;}
.confirm__check .box{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;font-size:11px;transition:background .2s,border-color .2s;}
.confirm__check input:checked + .box{background:linear-gradient(135deg,#0e3789,#030641);border-color:transparent;}
.confirm__check .box i{opacity:0;transition:opacity .15s;}
.confirm__check input:checked + .box i{opacity:1;}
.confirm__check input:focus-visible + .box{outline:2px solid rgba(91,155,255,.6);outline-offset:2px;}
.confirm__btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}