/* Shared light chrome for the coin page, the bank, the store, and banking. */
html:has(body.crypto-field),
html.theme-bank,
html.theme-register {
  background: #f3f6fb;
}

html:has(body.crypto-field)::before,
html.theme-bank::before,
html.theme-register::before,
html:has(body.crypto-field)::after,
html.theme-bank::after,
html.theme-register::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

html:has(body.crypto-field)::before,
html.theme-bank::before,
html.theme-register::before {
  background-image: url("/crypto-bg-gold.png");
  animation: crypto-fade-a 28s ease-in-out infinite, crypto-drift 46s ease-in-out infinite;
}

html:has(body.crypto-field)::after,
html.theme-bank::after,
html.theme-register::after {
  background-image: url("/crypto-bg-navy.png");
  animation: crypto-fade-b 28s ease-in-out infinite, crypto-drift-b 54s ease-in-out infinite;
}

body.crypto-field,
html.theme-bank body,
html.theme-register body {
  position: relative;
  z-index: 1;
  background: transparent !important;
  background-image: none !important;
}

@keyframes crypto-fade-a {
  0%, 14% { opacity: 0.16; }
  46%, 64% { opacity: 0.78; }
  90%, 100% { opacity: 0.16; }
}

@keyframes crypto-fade-b {
  0%, 14% { opacity: 0.78; }
  46%, 64% { opacity: 0.14; }
  90%, 100% { opacity: 0.78; }
}

@keyframes crypto-drift {
  0%, 100% { transform: scale(1.04); }
  50% { transform: scale(1.08) translate3d(-1.2%, -0.6%, 0); }
}

@keyframes crypto-drift-b {
  0%, 100% { transform: scale(1.08) translate3d(0.8%, 0, 0); }
  50% { transform: scale(1.04) translate3d(-0.6%, 0.8%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.crypto-field)::before,
  html.theme-bank::before,
  html.theme-register::before,
  html:has(body.crypto-field)::after,
  html.theme-bank::after,
  html.theme-register::after {
    animation: none;
    opacity: 0.45;
  }
}

/* Tight bar */
body.crypto-field header,
html.theme-bank .bank-head {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  padding: 0.35rem 0.55rem 0.35rem 0.45rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(11, 61, 145, 0.16);
  border-bottom: 3px solid #e2b340;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(11, 61, 145, 0.06);
  backdrop-filter: blur(10px);
}

html.theme-bank .bank-head {
  border-radius: 0;
  margin: 0;
  padding: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

html.theme-bank .bank-head-row {
  width: min(1120px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 0.35rem 0;
  gap: 0.6rem;
}

body.crypto-field header h1,
html.theme-bank .bank-brand strong {
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

body.crypto-field header .brand,
html.theme-bank .bank-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

body.crypto-field header nav,
body.crypto-field header .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  justify-content: flex-end;
}

body.crypto-field header nav a,
body.crypto-field header .btn,
html.theme-bank .bank-head nav a {
  min-height: 32px;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}

/* Coin mark */
body.crypto-field .mark,
html.theme-bank .bank-mark {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #0b3d91 url("https://pccrypto.net/pccrypto/logo.png") center/cover no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #e2b340, 0 0 0 5px #0b3d91;
  color: transparent;
  font-size: 0;
  overflow: hidden;
}

body.crypto-field .mark span,
html.theme-bank .bank-mark span {
  display: none;
}

body.crypto-field .pc-spin-coin {
  width: 34px;
  height: 34px;
}

body.crypto-field .pc-spin-face {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #e2b340, 0 0 0 3.5px #0b3d91;
}

/* Colored edges on the objects */
body.crypto-field .panel,
body.crypto-field .card,
body.crypto-field .step,
body.crypto-field .ad,
body.crypto-field .stat,
body.crypto-field .hero,
body.crypto-field .tile,
body.crypto-field .sheet,
html.theme-bank article,
html.theme-bank aside.panel,
html.theme-bank main section.rounded-xl,
html.theme-bank main section.rounded-2xl {
  border: 1px solid #d5e3f6;
  border-top: 3px solid #e2b340;
  border-left: 4px solid #0b3d91;
  box-shadow: 0 10px 24px rgba(18, 32, 51, 0.05);
}

body.crypto-field .ad.open {
  border-style: dashed;
  border-top-style: solid;
  border-left-style: solid;
}

/* Customer shop, art, and help use the same light bank surfaces. The register stays dark. */
html.theme-bank #theme-backdrop { display: none !important; }

html.theme-bank .min-h-screen,
html.theme-bank .bg-slate-950 {
  background-color: transparent !important;
  background-image: none !important;
  color: #122033 !important;
}

html.theme-bank article {
  background-color: #ffffff !important;
  color: #122033;
}

html.theme-bank .bg-slate-800,
html.theme-bank .bg-slate-800\/40,
html.theme-bank .bg-slate-800\/50,
html.theme-bank .bg-slate-800\/60,
html.theme-bank .bg-slate-800\/70,
html.theme-bank .bg-slate-800\/80,
html.theme-bank .bg-slate-900,
html.theme-bank .bg-slate-900\/50,
html.theme-bank .bg-slate-900\/70,
html.theme-bank .bg-slate-900\/80,
html.theme-bank .bg-slate-900\/95,
html.theme-bank .bg-slate-700,
html.theme-bank .bg-slate-700\/30,
html.theme-bank .bg-slate-700\/50 {
  background-color: #ffffff !important;
  color: #122033 !important;
  border-color: #d5e3f6 !important;
}

html.theme-bank .text-slate-100,
html.theme-bank .text-slate-200,
html.theme-bank .text-slate-300,
html.theme-bank h1,
html.theme-bank h2,
html.theme-bank h3 {
  color: #122033 !important;
}

html.theme-bank .text-slate-400,
html.theme-bank .text-slate-500,
html.theme-bank .text-slate-600 {
  color: #5c6b80 !important;
}

html.theme-bank .text-stellar-300,
html.theme-bank .text-stellar-400,
html.theme-bank .text-stellar-800,
html.theme-bank .text-amber-300,
html.theme-bank .text-amber-400,
html.theme-bank .text-sky-300,
html.theme-bank .text-sky-400 {
  color: #0b3d91 !important;
}

html.theme-bank .bg-stellar-600,
html.theme-bank .bg-stellar-500,
html.theme-bank .bg-stellar-700,
html.theme-bank .hover\:bg-stellar-500:hover,
html.theme-bank .bg-amber-600 {
  background-color: #0b3d91 !important;
  color: #ffffff !important;
  border-color: #0b3d91 !important;
}

html.theme-bank input,
html.theme-bank select,
html.theme-bank textarea {
  background-color: #ffffff !important;
  color: #122033 !important;
  border-color: #d5e3f6 !important;
}

html.theme-bank nav[aria-label="Store navigation"] {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 3px solid #e2b340 !important;
  box-shadow: 0 -8px 22px rgba(11, 61, 145, 0.06) !important;
}

/* The whole POS uses the bank palette, including the register, stock, and checkout. */
html.theme-register {
  color-scheme: light !important;
  --skin-scheme: light !important;
  --skin-page: #f4f7fb !important;
  --skin-body: #122033 !important;
  --skin-surface: #ffffff !important;
  --skin-card: #ffffff !important;
  --skin-well: #e8f0ff !important;
  --skin-ink: #122033 !important;
  --skin-soft: #243447 !important;
  --skin-muted: #5c6b80 !important;
  --skin-dim: #6b7f94 !important;
  --skin-line: #d9e2ee !important;
  --skin-primary: #0b3d91 !important;
  --skin-accent: #b8860b !important;
  --skin-input-bg: #ffffff !important;
  --skin-input-ink: #122033 !important;
  --skin-nav: #ffffff !important;
  --skin-bg-image: none !important;
}

html.theme-register body {
  color: #122033 !important;
}

html.theme-register #theme-backdrop { display: none !important; }

html.theme-register body header.sticky,
html.theme-register body header.bank-head {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 3px solid #e2b340 !important;
  box-shadow: 0 8px 22px rgba(11, 61, 145, 0.06) !important;
  color: #122033 !important;
}

html.theme-register body article,
html.theme-register body main section,
html.theme-register body aside,
html.theme-register body .rounded-2xl {
  border: 1px solid #d5e3f6;
  border-top: 3px solid #e2b340;
  border-left: 4px solid #0b3d91;
  box-shadow: 0 10px 24px rgba(18, 32, 51, 0.05);
}

html.theme-register body .bg-slate-950\/40,
html.theme-register body .bg-slate-950\/50,
html.theme-register body .bg-slate-950\/60,
html.theme-register body .bg-slate-950\/70,
html.theme-register body .bg-stellar-950\/40,
html.theme-register body .bg-stellar-950\/50,
html.theme-register body .bg-amber-950\/20,
html.theme-register body .bg-amber-950\/30,
html.theme-register body .bg-amber-950\/40,
html.theme-register body .bg-amber-950\/50 {
  background-color: #f7f9fc !important;
  color: #122033 !important;
}

html.theme-register body .bg-red-600,
html.theme-register body .bg-red-500,
html.theme-register body .bg-emerald-600,
html.theme-register body .bg-sky-700,
html.theme-register body .bg-sky-600,
html.theme-register body .bg-amber-700,
html.theme-register body .bg-stellar-600,
html.theme-register body .bg-stellar-500,
html.theme-register body .bg-stellar-700,
html.theme-register body .hover\:bg-stellar-500:hover,
html.theme-register body .bg-amber-600,
html.theme-register body [class*="bg-[#1877f2]"],
html.theme-register body [class*="bg-[#166fe5]"],
html.theme-register body [class*="bg-[#635bff]"],
html.theme-register body [class*="bg-[#5851e8]"],
html.theme-register body [class*="bg-[#0052ff]"],
html.theme-register body [class*="bg-[#0041cc]"] {
  color: #ffffff !important;
}

html.theme-register body [class*="bg-[#07070c]"],
html.theme-register body [class*="bg-[#101622]"],
html.theme-register body [class*="bg-[#08121e]"],
html.theme-register body [class*="bg-[#12121f]"],
html.theme-register body [class*="bg-[#0a0a14]"] {
  background-color: #ffffff !important;
  color: #122033 !important;
  border-color: #d5e3f6 !important;
}

html.theme-register body [class*="text-[#e7eef8]"],
html.theme-register body [class*="text-[#f7f8fb]"],
html.theme-register body [class*="text-[#c9d3e0]"],
html.theme-register body [class*="text-[#d4e0f0]"],
html.theme-register body [class*="text-[#e8e8f0]"],
html.theme-register body [class*="text-[#e8ecff]"],
html.theme-register body [class*="text-[#c8c8d8]"],
html.theme-register body [class*="text-[#a8a8b8]"],
html.theme-register body [class*="text-[#8a8aa0]"] {
  color: #122033 !important;
}

html.theme-register body [class*="text-[#e8c57a]"],
html.theme-register body [class*="text-[#d4b483]"],
html.theme-register body [class*="text-[#ffe14d]"],
html.theme-register body [class*="text-[#7aa2ff]"],
html.theme-register body [class*="text-[#a8b4ff]"] {
  color: #0b3d91 !important;
}

html.theme-register body .bg-amber-950\/90,
html.theme-register body a[href="https://admin.pccrypto.net/pos-subscribe"] {
  display: none !important;
}

html.theme-register body nav[aria-label="Store navigation"] {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 3px solid #e2b340 !important;
  box-shadow: 0 -8px 22px rgba(11, 61, 145, 0.06) !important;
  color: #122033 !important;
}