/*
 * Fbrkh Commerce Shell v1
 * Modern-only visual layer for store, library and checkout.
 * 2026-09-18
 */
:root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell{
  min-height:100svh;
  color:var(--next-text,#fffafd);
  background:
    radial-gradient(circle at 82% 4%,rgba(148,72,255,.18),transparent 28rem),
    radial-gradient(circle at 15% 42%,rgba(255,210,92,.055),transparent 24rem),
    linear-gradient(155deg,#120823,#080512 56%,#07040f)!important;
}
:root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell .topbar{
  width:min(1180px,calc(100% - 28px))!important;
  min-height:68px!important;
  margin:14px auto 0!important;
  padding:9px 13px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:22px!important;
  background:rgba(15,8,28,.88)!important;
  box-shadow:0 15px 48px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(20px)!important;
}
:root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell .topbar .brand img{
  width:clamp(132px,12vw,166px)!important;
  height:auto!important;
  max-height:52px!important;
  object-fit:contain!important;
}
:root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell .topbar nav{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}
:root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell .topbar nav>a,
:root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell .topbar nav>button{
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:8px 12px!important;
  border-radius:12px!important;
  color:#ded3e6!important;
  font-weight:850!important;
}
:root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell .topbar nav>a:hover{
  color:#fff!important;
  background:rgba(155,88,255,.11)!important;
}

:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-shell,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .games-library,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-shell{
  width:min(1180px,calc(100% - 28px))!important;
  margin-inline:auto!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-hero,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .games-library-head{
  margin-top:18px!important;
  padding:32px 30px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 82% 5%,rgba(155,88,255,.20),transparent 20rem),
    linear-gradient(145deg,rgba(34,17,58,.90),rgba(15,8,28,.88))!important;
  box-shadow:0 22px 65px rgba(0,0,0,.26)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-hero>span,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .games-library-head>span,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-heading span{
  color:#e3c8ff!important;
  font-weight:900!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-hero h1,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .games-library-head h2{
  margin:.3rem 0 .45rem!important;
  color:#fff!important;
  font-size:clamp(32px,4.3vw,56px)!important;
  line-height:1.08!important;
  letter-spacing:-1.4px!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-hero p,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .games-library-head p{
  max-width:700px!important;
  margin:0!important;
  color:#c9bdd3!important;
  line-height:1.8!important;
}

:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-featured-section,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-shell>section:not(.store-hero):not(.hidden),
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .account-value-center,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-toolbar,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-summary{
  margin-top:16px!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-heading{
  margin-bottom:11px!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-heading h2{
  margin:.18rem 0 0!important;
  color:#fff!important;
  font-size:clamp(22px,2.4vw,31px)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell :is(.store-card,.day-pass,.library-complete,.library-tickets,.game-credit,.library-item,.pending-purchase,.purchase-history-row,.store-promo-card,.support-card,.store-policy,.store-pass-comparison){
  border:1px solid rgba(255,255,255,.085)!important;
  background:
    linear-gradient(160deg,rgba(31,16,52,.90),rgba(16,9,29,.92))!important;
  color:#fff!important;
  box-shadow:0 15px 44px rgba(0,0,0,.21)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-card{
  border-radius:22px!important;
  transition:border-color .2s ease,box-shadow .2s ease!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-card:hover{
  transform:none!important;
  border-color:rgba(185,125,255,.32)!important;
  box-shadow:0 22px 52px rgba(0,0,0,.29)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-card.featured,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-complete,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-item-primary{
  border-color:rgba(255,213,104,.29)!important;
  background:
    radial-gradient(circle at 84% 4%,rgba(255,213,104,.10),transparent 12rem),
    linear-gradient(145deg,rgba(54,27,83,.98),rgba(22,11,39,.98))!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell :is(.store-card,.library-item,.game-credit) p,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell :is(.store-card,.library-item,.game-credit) small,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .ticket-never-expires,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-policy span{
  color:#beb2ca!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .price,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell [data-sar],
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-complete strong{
  color:#ffd568!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell :is(.store-card button,.support-submit,.store-promo-form button,.btn.primary){
  min-height:48px!important;
  border:0!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#9b58ff,#6e2ed5)!important;
  color:#fff!important;
  font-weight:900!important;
  box-shadow:0 10px 26px rgba(111,46,213,.24)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-gift-button,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .btn.ghost{
  border:1px solid rgba(255,255,255,.11)!important;
  background:rgba(255,255,255,.04)!important;
  color:#f4ebf8!important;
  box-shadow:none!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell :is(input,select){
  min-height:48px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.045)!important;
  color:#fff!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell :is(.store-auth-dialog,.support-dialog,.order-details-dialog){
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 82% 0,rgba(155,88,255,.17),transparent 18rem),
    linear-gradient(180deg,#211138,#0e081a)!important;
  color:#fff!important;
  box-shadow:0 30px 90px rgba(0,0,0,.55)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell :is(.store-auth-dialog,.support-dialog,.order-details-dialog)::backdrop{
  background:rgba(4,2,9,.72)!important;
  backdrop-filter:blur(10px)!important;
}

/* Library */
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .account-value-center{
  padding:20px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:25px!important;
  background:rgba(24,13,42,.75)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .account-value-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .account-value-grid,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-grid{
  gap:12px!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-toolbar{
  padding:14px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:20px!important;
  background:rgba(22,12,39,.74)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-tab{
  min-height:42px!important;
  border-radius:11px!important;
  color:#d8cede!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-tab.active{
  border-color:rgba(155,88,255,.30)!important;
  background:rgba(155,88,255,.14)!important;
  color:#fff!important;
}

/* Checkout */
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-shell{
  max-width:760px!important;
  padding-top:28px!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-card{
  padding:clamp(20px,4vw,34px)!important;
  border:1px solid rgba(255,255,255,.095)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 80% 0,rgba(155,88,255,.17),transparent 17rem),
    linear-gradient(180deg,rgba(31,16,52,.96),rgba(14,8,26,.97))!important;
  color:#fff!important;
  box-shadow:0 28px 85px rgba(0,0,0,.36)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-card h1{
  color:#fff!important;
  font-size:clamp(29px,4vw,42px)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-card #details,
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-security-note{
  color:#c7bbd1!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-payment-marks img{
  height:38px!important;
  padding:5px 8px!important;
  border-radius:10px!important;
  background:#fff!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-promo{
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.035)!important;
}
:root[data-ui-mode="modern"] .fbrkh-commerce-shell .back-link{
  color:#d7c9e2!important;
}

@media(max-width:760px){
  :root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  :root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell .topbar{
    width:calc(100% - 16px)!important;
    min-height:60px!important;
    margin-top:8px!important;
    border-radius:18px!important;
  }
  :root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell .topbar .brand img{width:126px!important}
  :root[data-ui-mode="modern"] body.fbrkh-next-shell.fbrkh-commerce-shell .topbar nav>a{padding:7px 9px!important;font-size:.8rem!important}
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-shell,
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .games-library,
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-shell{
    width:calc(100% - 16px)!important;
  }
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-hero,
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .games-library-head{
    margin-top:9px!important;
    padding:24px 18px!important;
    border-radius:23px!important;
  }
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-hero h1,
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .games-library-head h2{
    font-size:35px!important;
  }
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-grid,
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .ticket-grid{
    grid-template-columns:1fr!important;
  }
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .store-card{min-height:0!important}
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .account-value-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .account-value-grid{
    grid-template-columns:1fr!important;
  }
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .library-toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-shell{padding-top:14px!important}
  :root[data-ui-mode="modern"] .fbrkh-commerce-shell .checkout-card{border-radius:22px!important}
}