/* Sentrix Desk — shared brand layer for program, checkout and order pages.
   Sentrix system: near-black base, Sentrix orange, Fraunces display, Geist UI, JetBrains Mono data. */
:root {
  --sx-bg: #0d0d0d;
  --sx-bg-2: #110c0a;
  --sx-panel: #141414;
  --sx-elev: #1a1a1a;
  --sx-line: #262626;
  --sx-line-2: #333;
  --sx-text: #f4f1ed;
  --sx-text-2: #b5aca2;
  --sx-text-3: #7d756d;
  --sx-brand: #ff4d00;
  --sx-brand-2: #ff6d2a;
  --sx-brand-3: #b33600;
  --sx-amber: #ffaa33;
  --sx-up: #22c55e;
  --sx-down: #ef4444;
  --sx-warn: #f5b301;
  --sx-display: "Fraunces", Georgia, serif;
  --sx-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sx-mono: "JetBrains Mono", ui-monospace, monospace;
  --sx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html { background: var(--sx-bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body.sx {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(900px 420px at 50% -180px, rgba(255, 77, 0, 0.14), transparent 70%), var(--sx-bg);
  color: var(--sx-text);
  font: 400 15px/1.55 var(--sx-sans);
  -webkit-font-smoothing: antialiased;
}
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx a { color: inherit; }
.sx ::selection { background: rgba(255, 77, 0, 0.35); }
.sx :focus-visible { outline: 2px solid var(--sx-brand); outline-offset: 3px; border-radius: 6px; }

/* Top bar */
.sx-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(13, 13, 13, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--sx-line);
}
.sx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sx-brand img { border-radius: 9px; box-shadow: 0 0 24px -6px rgba(255, 77, 0, 0.7); }
.sx-brand span { font: 600 15px/1 var(--sx-display); letter-spacing: 0.02em; }
.sx-brand b { color: var(--sx-text); }
.sx-top-r { display: flex; align-items: center; gap: 16px; }
.sx-top-link { font-size: 13px; color: var(--sx-text-2); text-decoration: none; }
.sx-top-link:hover { color: var(--sx-text); }
.sx-secure { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--sx-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-up); }

/* Buttons */
.sx-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--sx-brand); color: #0d0d0d; text-decoration: none;
  font: 700 13px/1 var(--sx-sans); letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 4px 0 var(--sx-brand-3), 0 18px 40px -16px rgba(255, 77, 0, 0.85);
  transform: translateY(-2px);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.sx-cta:hover { background: var(--sx-brand-2); }
.sx-cta:active { transform: translateY(2px); box-shadow: 0 0 0 var(--sx-brand-3); }
.sx-cta-sm { min-height: 42px; padding: 0 18px; font-size: 11.5px; }

/* Footer */
.sx-foot { max-width: 1120px; margin: 64px auto 0; padding: 28px clamp(16px, 4vw, 40px) 120px; border-top: 1px solid var(--sx-line); color: var(--sx-text-3); font-size: 12px; }
.sx-foot p { margin: 0 0 8px; max-width: 760px; }
.sx-foot-links a { color: var(--sx-text-2); }

/* Branded pages hide the admin bar; drop the space WordPress reserves for it. */
html:has(body.sx) { margin-top: 0 !important; }

.sx-notices { max-width: 1120px; margin: 16px auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.sx .woocommerce-error, .sx .woocommerce-message, .sx .woocommerce-info {
  list-style: none; margin: 0 0 12px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid rgba(255, 77, 0, 0.3); background: rgba(255, 77, 0, 0.08); color: var(--sx-text);
}
.sx .woocommerce-error { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08); }
/* WooCommerce block-style notice banners */
.sx .wc-block-components-notice-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 12px 16px !important; border-radius: 12px !important;
  border: 1px solid rgba(255, 77, 0, 0.3) !important; background: rgba(255, 77, 0, 0.08) !important; color: var(--sx-text) !important; font-size: 14px; }
.sx .wc-block-components-notice-banner.is-error { border-color: rgba(239, 68, 68, 0.35) !important; background: rgba(239, 68, 68, 0.08) !important; }
.sx .wc-block-components-notice-banner.is-success { border-color: rgba(34, 197, 94, 0.3) !important; background: rgba(34, 197, 94, 0.08) !important; }
.sx .wc-block-components-notice-banner > svg { flex: 0 0 auto; width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: var(--sx-brand) !important; fill: #0d0d0d !important; }
.sx .wc-block-components-notice-banner a { color: var(--sx-brand-2); }

.sx-live { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sx-brand); box-shadow: 0 0 10px var(--sx-brand); }
.sx-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sx-brand); animation: sx-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes sx-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sx *, .sx *::before, .sx *::after { animation: none !important; transition: none !important; }
}