/* =========================================================
   TOFY PAY GLOBAL NEON BRAND V100
   Global visual system based on the approved blue/purple reference.
   CSS-only: does not replace site HTML, JS, API, DB, header markup or footer markup.
   ========================================================= */

:root{
  --tp-bg:#030b26;
  --tp-bg-2:#06143d;
  --tp-bg-3:#0a276f;
  --tp-panel:rgba(7,26,76,.86);
  --tp-panel-strong:rgba(5,20,62,.94);
  --tp-panel-soft:rgba(15,43,109,.58);
  --tp-text:#f7f9ff;
  --tp-muted:#9eb4e4;
  --tp-line:rgba(77,153,255,.28);
  --tp-line-strong:rgba(55,201,255,.56);
  --tp-cyan:#22d8ff;
  --tp-blue:#2587ff;
  --tp-violet:#7b4dff;
  --tp-purple:#b52cff;
  --tp-gold:#f6bd45;
  --tp-shadow:0 22px 70px rgba(0,11,52,.36);
  --tp-glow:0 0 30px rgba(47,167,255,.20);
  --tp-radius:18px;
}

/* ---------- page identity ---------- */
html[data-theme="dark"],
body{
  color-scheme:dark;
}

body{
  background:
    radial-gradient(circle at 3% 7%,rgba(33,99,255,.22),transparent 24%),
    radial-gradient(circle at 96% 12%,rgba(165,41,255,.18),transparent 26%),
    radial-gradient(circle at 60% 80%,rgba(32,113,255,.10),transparent 34%),
    linear-gradient(180deg,#020921 0%,#071a50 52%,#041235 100%) !important;
  color:var(--tp-text) !important;
  min-height:100vh;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.35;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.12) 0 1px,transparent 1px),
    radial-gradient(circle at 80% 35%,rgba(82,166,255,.18) 0 1px,transparent 1px),
    radial-gradient(circle at 35% 78%,rgba(159,73,255,.15) 0 1px,transparent 1px);
  background-size:120px 120px,170px 170px,220px 220px;
}

/* ---------- global header ---------- */
.topbar{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  min-height:76px !important;
  padding:10px 28px !important;
  display:grid !important;
  grid-template-columns:minmax(230px,auto) minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:22px !important;
  background:
    linear-gradient(180deg,rgba(4,14,46,.93),rgba(4,12,38,.88)) !important;
  border-bottom:1px solid rgba(55,164,255,.42) !important;
  box-shadow:
    0 12px 35px rgba(0,8,36,.35),
    0 1px 0 rgba(132,69,255,.18) inset !important;
  backdrop-filter:blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(130%) !important;
}

.topbar:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,#20d9ff 22%,#6068ff 50%,#a930ff 78%,transparent);
  opacity:.70;
  pointer-events:none;
}

/* Brand */
.topbar .brand,
.topbar .brand-reference{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
  text-decoration:none !important;
}
.topbar .brand-symbol{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  object-fit:contain !important;
  filter:
    drop-shadow(0 0 8px rgba(72,160,255,.26))
    drop-shadow(0 0 18px rgba(132,62,255,.16)) !important;
}
.topbar .brand-words{
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  min-width:0 !important;
}
.topbar .brand-words>b{
  font-size:22px !important;
  line-height:1 !important;
  letter-spacing:.035em !important;
  color:#fff !important;
  white-space:nowrap !important;
}
.topbar .brand-words>b::first-letter{
  color:var(--tp-gold);
}
.topbar .brand-words>small{
  font-size:9px !important;
  letter-spacing:.11em !important;
  color:#7edfff !important;
  opacity:.90 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:220px !important;
}

/* Desktop nav */
.topbar>nav{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-width:0 !important;
}
.topbar>nav>a{
  position:relative !important;
  min-height:40px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 15px !important;
  border-radius:11px !important;
  color:#dce6ff !important;
  font-size:13px !important;
  font-weight:800 !important;
  text-decoration:none !important;
  border:1px solid transparent !important;
  transition:.22s ease !important;
  white-space:nowrap !important;
}
.topbar>nav>a:hover{
  color:#fff !important;
  background:rgba(34,104,220,.14) !important;
  border-color:rgba(73,152,255,.20) !important;
}
.topbar>nav>a.active,
.topbar>nav>a.on,
.topbar>nav>a[aria-current="page"]{
  color:#fff !important;
  background:linear-gradient(180deg,rgba(40,123,255,.23),rgba(87,57,255,.18)) !important;
  border-color:rgba(65,204,255,.72) !important;
  box-shadow:
    0 0 0 1px rgba(88,101,255,.20) inset,
    0 0 24px rgba(54,155,255,.23) !important;
}
.topbar>nav>a.active:after,
.topbar>nav>a.on:after,
.topbar>nav>a[aria-current="page"]:after{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:-11px;
  height:2px;border-radius:999px;
  background:linear-gradient(90deg,#20d9ff,#7b4dff);
  box-shadow:0 0 10px #39c9ff;
}

/* Header actions */
.top-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  min-width:0 !important;
  flex-wrap:nowrap !important;
}
.top-actions .icon-btn,
.top-actions .theme-toggle,
.topbar .tofy-pwa-install,
.top-actions .lang-switch,
.top-actions .language-switcher{
  border:1px solid rgba(78,133,226,.36) !important;
  background:rgba(6,20,56,.70) !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(0,8,38,.18) !important;
  backdrop-filter:blur(10px) !important;
}
.top-actions .icon-btn,
.top-actions .theme-toggle{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:13px !important;
  transition:.2s ease !important;
}
.top-actions .icon-btn:hover,
.top-actions .theme-toggle:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(48,210,255,.70) !important;
  box-shadow:0 0 24px rgba(47,175,255,.22) !important;
}
.cart-header-link{position:relative !important}
.cart-header-link b,
#tofyCartCount{
  position:absolute !important;
  top:-4px !important;
  right:-3px !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 4px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,#23cbff,#6e51ff) !important;
  color:#fff !important;
  font-size:9px !important;
  box-shadow:0 0 12px rgba(40,189,255,.40) !important;
}

/* Wallet and account */
.top-actions .wallet-chip{
  min-height:46px !important;
  padding:6px 8px 6px 12px !important;
  display:grid !important;
  grid-template-columns:auto 34px !important;
  grid-template-rows:auto auto !important;
  column-gap:10px !important;
  align-items:center !important;
  border-radius:14px !important;
  border:1px solid rgba(77,143,241,.36) !important;
  background:linear-gradient(180deg,rgba(9,31,82,.82),rgba(5,20,57,.88)) !important;
  color:#fff !important;
  text-decoration:none !important;
}
.top-actions .wallet-chip small{
  color:#8da9dc !important;
  font-size:8px !important;
}
.top-actions .wallet-chip strong{
  font-size:14px !important;
  color:#fff !important;
}
.top-actions .wallet-chip i{
  grid-column:2 !important;
  grid-row:1 / 3 !important;
  width:32px !important;
  height:32px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#27d0ff,#7652ff) !important;
  color:#fff !important;
  font-style:normal !important;
  box-shadow:0 0 16px rgba(52,182,255,.24) !important;
}
.top-actions .account-btn{
  min-height:46px !important;
  padding:4px 11px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  border-radius:14px !important;
  border:1px solid rgba(77,143,241,.36) !important;
  background:rgba(6,20,57,.74) !important;
  color:#fff !important;
  text-decoration:none !important;
}
.top-actions .account-btn b{font-size:11px !important}
.top-actions .account-btn small{
  display:block !important;
  font-size:8px !important;
  color:#8ecfff !important;
  margin-top:2px !important;
}
.top-actions .header-avatar,
.top-actions .user-avatar{
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  box-shadow:0 0 0 1px rgba(56,208,255,.46),0 0 16px rgba(65,166,255,.18) !important;
}

/* ---------- global surfaces ---------- */
.panel,
.card,
.table-card,
.form-card,
.notice-box,
.content-hero,
.enterprise-form,
.modal .dialog,
.auth-dialog,
.wallet-card,
.account-card,
.product-card,
.p284-card,
.gc18-card,
.vip-card,
[class*="-panel"]:not(.admin-panel){
  border-color:var(--tp-line) !important;
  box-shadow:var(--tp-shadow);
}

.panel,
.table-card,
.form-card,
.enterprise-form,
.notice-box,
.content-hero{
  background:
    linear-gradient(180deg,rgba(8,29,82,.78),rgba(5,20,60,.88)) !important;
}

/* buttons */
.primary,
button.primary,
a.primary{
  border:1px solid rgba(49,210,255,.72) !important;
  background:linear-gradient(90deg,#10c9ff,#5e62ff 58%,#8b37ff) !important;
  color:#fff !important;
  box-shadow:0 9px 24px rgba(46,124,255,.25),0 0 18px rgba(80,67,255,.16) !important;
}
.primary:hover,
button.primary:hover,
a.primary:hover{
  filter:brightness(1.08) saturate(1.08) !important;
  transform:translateY(-1px);
}

input,
select,
textarea{
  border-color:rgba(76,135,230,.34) !important;
  background:rgba(5,20,57,.78) !important;
  color:#fff !important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(40,209,255,.72) !important;
  box-shadow:0 0 0 3px rgba(38,174,255,.10),0 0 22px rgba(61,119,255,.12) !important;
}

/* footer identity - keep markup, recolor only */
.site-footer,
footer.site-footer{
  border-top-color:rgba(70,143,255,.30) !important;
  background:
    linear-gradient(180deg,rgba(5,18,51,.95),rgba(3,11,34,.98)) !important;
}
.site-footer a{color:#cbd9f8 !important}
.site-footer a:hover{color:#5fe3ff !important}

/* bottom mobile app navigation */
.mobile-bottom-nav,
.app-bottom-nav,
.bottom-nav{
  border:1px solid rgba(71,146,255,.34) !important;
  background:rgba(5,20,57,.92) !important;
  box-shadow:0 18px 50px rgba(0,8,40,.48),0 0 26px rgba(51,101,255,.13) !important;
  backdrop-filter:blur(22px) !important;
  -webkit-backdrop-filter:blur(22px) !important;
}
.mobile-bottom-nav a,
.app-bottom-nav a,
.bottom-nav a{
  color:#9db2dd !important;
}
.mobile-bottom-nav a.active,
.app-bottom-nav a.active,
.bottom-nav a.active{
  color:#fff !important;
  background:linear-gradient(180deg,rgba(34,129,255,.18),rgba(99,55,255,.16)) !important;
  box-shadow:0 0 0 1px rgba(58,201,255,.24) inset !important;
}

/* ---------- mobile header ---------- */
@media(max-width:768px){
  .topbar{
    min-height:64px !important;
    padding:8px 10px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px !important;
    border-radius:0 !important;
  }
  .topbar>nav{
    display:none !important;
  }
  .topbar .brand{
    min-width:0 !important;
    gap:7px !important;
  }
  .topbar .brand-symbol{
    width:39px !important;
    height:39px !important;
    min-width:39px !important;
  }
  .topbar .brand-words>b{
    font-size:15px !important;
  }
  .topbar .brand-words>small{
    max-width:130px !important;
    font-size:7px !important;
  }
  .top-actions{
    gap:5px !important;
  }
  .top-actions>.wallet-chip,
  .top-actions>.account-btn,
  .top-actions>.logout-link,
  .top-actions>.cart-header-link{
    display:none !important;
  }
  .top-actions .icon-btn,
  .top-actions .theme-toggle{
    width:39px !important;
    height:39px !important;
    min-width:39px !important;
    border-radius:12px !important;
  }
  .top-actions .lang-switch,
  .top-actions .language-switcher{
    max-width:105px !important;
  }
}

/* Light mode deliberately retains brand palette instead of turning white */
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 3% 7%,rgba(33,99,255,.18),transparent 24%),
    radial-gradient(circle at 96% 12%,rgba(165,41,255,.15),transparent 26%),
    linear-gradient(180deg,#eaf2ff 0%,#dfeaff 45%,#edf3ff 100%) !important;
  color:#0b1530 !important;
}
html[data-theme="light"] .topbar{
  background:rgba(245,249,255,.90) !important;
  border-bottom-color:rgba(58,128,224,.28) !important;
}
html[data-theme="light"] .topbar .brand-words>b,
html[data-theme="light"] .topbar>nav>a,
html[data-theme="light"] .top-actions .icon-btn,
html[data-theme="light"] .top-actions .theme-toggle{
  color:#102047 !important;
}

/* ===== TOFY ADMIN ENTRY CARD V1 ===== */

.tofy-admin-entry-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(55,153,255,.55)!important;
    background:
      radial-gradient(circle at 85% 15%,rgba(73,51,255,.22),transparent 38%),
      linear-gradient(135deg,rgba(7,28,62,.96),rgba(10,15,40,.98))!important;
    box-shadow:
      inset 0 0 25px rgba(25,100,255,.08),
      0 10px 30px rgba(0,0,0,.18);
}

.tofy-admin-entry-card::before{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    top:-55px;
    right:-35px;
    border-radius:50%;
    background:rgba(39,126,255,.25);
    filter:blur(25px);
    pointer-events:none;
}

.tofy-admin-entry-card .tofy-admin-entry-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:14px;
    margin-bottom:8px;
    color:#fff;
    font-size:22px;
    background:linear-gradient(145deg,#167cff,#633cff);
    box-shadow:0 0 20px rgba(40,104,255,.35);
}

.tofy-admin-entry-card b{
    color:#fff!important;
}

.tofy-admin-entry-card small{
    color:#aebfe1!important;
}

.tofy-admin-entry-arrow{
    position:absolute;
    bottom:14px;
    left:15px;
    color:#51c8ff;
    font-size:18px;
    font-weight:900;
}

html[dir="ltr"] .tofy-admin-entry-arrow{
    left:auto;
    right:15px;
    transform:rotate(180deg);
}

/* ===== TOFY GOLD CENTER WALLET V1 ===== */

@media(max-width:900px){

.mobile-bottom-nav{
  overflow:visible!important;
}

.mobile-bottom-nav .tofy-gold-wallet{
  position:relative!important;
  overflow:visible!important;
  z-index:12!important;
}

.mobile-bottom-nav .tofy-gold-wallet > b{
  position:relative!important;
  margin-top:29px!important;
  color:#e6c66e!important;
  font-size:9px!important;
  font-weight:900!important;
  text-shadow:0 0 9px rgba(218,169,44,.22)!important;
}

/* raised center button */
.mobile-bottom-nav .tofy-gold-wallet-orb{
  position:absolute!important;
  left:50%!important;
  top:-27px!important;
  transform:translateX(-50%)!important;

  width:67px!important;
  height:67px!important;

  display:grid!important;
  place-items:center!important;

  border-radius:50%!important;

  background:
    radial-gradient(circle at 48% 40%,
      #171a22 0%,
      #090b10 50%,
      #020305 100%)!important;

  border:2px solid #d7a62d!important;

  box-shadow:
    0 0 0 4px rgba(5,7,14,.96),
    0 0 0 5px rgba(224,178,55,.42),
    0 0 17px rgba(255,196,50,.80),
    0 0 35px rgba(225,158,20,.42),
    0 11px 22px rgba(0,0,0,.72),
    inset 0 0 17px rgba(255,196,57,.10)!important;

  transition:
    transform .18s ease,
    filter .18s ease!important;
}

/* outer metallic ring */
.mobile-bottom-nav .tofy-gold-wallet-ring{
  position:absolute!important;
  inset:4px!important;
  border-radius:50%!important;

  border:2px solid transparent!important;

  background:
    linear-gradient(#090b10,#090b10) padding-box,
    linear-gradient(
      135deg,
      #fff0a0 0%,
      #b87508 20%,
      #ffe482 43%,
      #9b6100 68%,
      #f4cb54 100%
    ) border-box!important;

  box-shadow:
    inset 0 0 12px rgba(255,199,57,.15),
    0 0 8px rgba(255,185,35,.35)!important;

  pointer-events:none!important;
}

/* TP monogram */
.mobile-bottom-nav .tofy-gold-wallet-tp{
  position:relative!important;
  z-index:3!important;

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

  height:40px!important;
  min-width:45px!important;

  font-family:Georgia,"Times New Roman",serif!important;
  font-size:29px!important;
  line-height:1!important;
  font-weight:900!important;
  font-style:italic!important;
  letter-spacing:-8px!important;

  background:
    linear-gradient(
      180deg,
      #fff6b0 0%,
      #ffd65a 22%,
      #b97408 55%,
      #ffe682 78%,
      #9a5a00 100%
    )!important;

  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;

  filter:
    drop-shadow(0 1px 0 #fff0a0)
    drop-shadow(0 2px 1px #5c3400)
    drop-shadow(0 0 6px rgba(255,192,43,.65))!important;

  transform:translateX(-3px)!important;
}

.mobile-bottom-nav .tofy-gold-wallet-tp i{
  font:inherit!important;
  color:inherit!important;
  font-style:italic!important;
}

.mobile-bottom-nav .tofy-gold-wallet-tp i+ i{
  transform:translateY(5px)!important;
}

/* little gold spark */
.mobile-bottom-nav .tofy-gold-wallet-orb::after{
  content:"✦"!important;
  position:absolute!important;
  z-index:5!important;
  right:7px!important;
  top:4px!important;

  color:#fff2a0!important;
  font-size:10px!important;

  text-shadow:
    0 0 5px #fff,
    0 0 11px #ffc62e!important;
}

/* active wallet */
.mobile-bottom-nav .tofy-gold-wallet.on{
  background:transparent!important;
}

.mobile-bottom-nav .tofy-gold-wallet.on .tofy-gold-wallet-orb{
  box-shadow:
    0 0 0 4px rgba(5,7,14,.96),
    0 0 0 5px rgba(255,202,66,.60),
    0 0 22px rgba(255,202,50,.95),
    0 0 44px rgba(221,146,14,.55),
    0 11px 22px rgba(0,0,0,.72),
    inset 0 0 20px rgba(255,201,57,.14)!important;
}

/* press feedback — link/function remains wallet.php */
.mobile-bottom-nav .tofy-gold-wallet:active .tofy-gold-wallet-orb{
  transform:translateX(-50%) scale(.92)!important;
  filter:brightness(1.15)!important;
}

}

@media(max-width:390px){

.mobile-bottom-nav .tofy-gold-wallet-orb{
  width:62px!important;
  height:62px!important;
  top:-24px!important;
}

.mobile-bottom-nav .tofy-gold-wallet-tp{
  font-size:27px!important;
}

.mobile-bottom-nav .tofy-gold-wallet > b{
  margin-top:27px!important;
}

}