@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*
 * TGP Buyer UI — design tokens & base components (v0.4)
 * ─────────────────────────────────────────────────────
 * This sheet powers the look of every redesigned WooCommerce page on
 * theghostproduction.com. The palette + primitives are tuned to match
 * a very specific class of premium SaaS dashboard:
 *
 *   Apexify  — dark, mostly black, a single purple "hero" card per row,
 *              huge tabular numerals.
 *   Nextmove / ZusGPT — extremely minimal sidebar, the active item lit
 *              up with a magenta-to-purple gradient halo (fading right).
 *   Sapphire UI — sidebar grouped under tiny uppercase section labels,
 *              gigantic display "Hi, [name]" heading.
 *
 * Class names are `.tgp-*` so we never collide with WooCommerce's
 * `.woocommerce-*` or Elementor's `.elementor-*`.
 */

/* ─── Tokens — Apple / Stripe / Linear palette ──────────────────────── */

:root {
  /* Surfaces — near-black zinc scale. No purple tint anywhere. */
  --tgp-bg:            #09090B;   /* zinc-950 */
  --tgp-surface:       #111113;
  --tgp-surface-high:  #18181B;   /* zinc-900 */
  --tgp-surface-hover: #27272A;   /* zinc-800 */
  --tgp-surface-deep:  #06060A;

  /* Borders — barely visible, Apple/Stripe subtle */
  --tgp-border:        rgba(255, 255, 255, 0.08);
  --tgp-border-strong: rgba(255, 255, 255, 0.14);

  /* Text — Apple dark-mode grays exactly */
  --tgp-text:          #F4F4F5;   /* zinc-100 */
  --tgp-text-dim:      #A1A1AA;   /* zinc-400 */
  --tgp-text-faint:    #71717A;   /* zinc-500 */

  /* Accent — brand violet/purple */
  --tgp-accent:        #9333EA;   /* purple-600 — brand */
  --tgp-accent-deep:   #7C3AED;   /* violet-600 */
  --tgp-accent-soft:   rgba(147, 51, 234, 0.10);
  --tgp-accent-glow:   rgba(147, 51, 234, 0.30);

  /* Brand gradient — used for primary buttons */
  --tgp-gradient: linear-gradient(135deg, #9333EA 0%, #6D28D9 100%);

  /* Status */
  --tgp-green:         #10B981;
  --tgp-green-soft:    rgba(16, 185, 129, 0.12);
  --tgp-amber:         #F59E0B;
  --tgp-amber-soft:    rgba(245, 158, 11, 0.12);
  --tgp-red:           #EF4444;
  --tgp-red-soft:      rgba(239, 68, 68, 0.12);

  /* Radii */
  --tgp-r-sm:   6px;
  --tgp-r-md:  10px;
  --tgp-r-lg:  14px;
  --tgp-r-xl:  20px;
  --tgp-r-full: 999px;

  /* Spacing */
  --tgp-s-1:  4px;  --tgp-s-2:  8px;  --tgp-s-3: 12px;
  --tgp-s-4: 16px;  --tgp-s-5: 20px;  --tgp-s-6: 24px;
  --tgp-s-8: 32px;  --tgp-s-10:40px;  --tgp-s-12:48px;

  /* Typography — Inter first so Google-loaded Inter is preferred */
  --tgp-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --tgp-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Motion */
  --tgp-ease:  cubic-bezier(0.25, 0, 0, 1);
  --tgp-dur-1: 120ms;
  --tgp-dur-2: 200ms;

  /* Elevation */
  --tgp-shadow-sm:   0 1px 2px rgba(0,0,0,0.50);
  --tgp-shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0,0,0,0.40);
  --tgp-shadow-pop:  0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 50px rgba(0,0,0,0.60);
  --tgp-shadow-glow: 0 0 0 3px rgba(99,102,241,0.22);
}

/* ─── Page chrome ───────────────────────────────────────────────────── */

body.woocommerce-account .tgp-shell,
body.woocommerce-cart    .tgp-shell,
body.woocommerce-checkout .tgp-shell,
body.woocommerce-order-received .tgp-shell {
  background: transparent;
  color: var(--tgp-text);
  font-family: var(--tgp-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  letter-spacing: -0.005em;
}

/*
 * Defensive overrides for when our shell ends up nested inside an
 * Elementor section/widget that would otherwise constrain us.
 */
.elementor-widget-shortcode  > .elementor-widget-container:has(.tgp-shell),
.elementor-widget-woocommerce-my-account .e-my-account-tab__content,
.elementor-element:has(> .elementor-widget-container > .tgp-shell) {
  max-width: none !important;
  width: 100% !important;
}
.elementor-element:has(.tgp-shell) > .elementor-element-populated,
.elementor-element:has(.tgp-shell) {
  --e-column-padding: 0;
}
.tgp-shell {
  width: 100%;
  max-width: 100%;
}

/* ─── Primitives ────────────────────────────────────────────────────── */

.tgp-card {
  position: relative;
  background: var(--tgp-surface);
  border: 1px solid var(--tgp-border);
  border-radius: var(--tgp-r-lg);
  box-shadow: var(--tgp-shadow-card);
}
.tgp-card--high { background: var(--tgp-surface-high); }

.tgp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tgp-s-4);
  padding: 18px 22px 14px;
}

.tgp-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tgp-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.tgp-card__action {
  font-size: 13px;
  color: var(--tgp-text-dim);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--tgp-dur-1) var(--tgp-ease),
              transform var(--tgp-dur-1) var(--tgp-ease);
}
.tgp-card__action:hover {
  color: var(--tgp-text);
  transform: translateX(2px);
}

/* ─── Buttons ───────────────────────────────────────────────────────── */

.tgp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tgp-s-2);
  height: 44px;
  padding: 0 22px;
  border-radius: var(--tgp-r-full);  /* pill shape */
  font-family: var(--tgp-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform   var(--tgp-dur-1) var(--tgp-ease),
    background  var(--tgp-dur-1) var(--tgp-ease),
    box-shadow  var(--tgp-dur-2) var(--tgp-ease),
    opacity     var(--tgp-dur-1) var(--tgp-ease);
  white-space: nowrap;
  -webkit-appearance: none;
}
.tgp-btn:active { transform: scale(0.975); opacity: 0.88; }
.tgp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.30);
}

/* Primary — brand violet gradient. Modern, rounded, on-brand. */
.tgp-btn--primary {
  background: linear-gradient(135deg, #9333EA 0%, #6D28D9 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 4px 12px rgba(109, 40, 217, 0.35);
}
.tgp-btn--primary:hover {
  background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 8px 20px rgba(109, 40, 217, 0.45);
}

.tgp-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tgp-text);
  border: 1px solid var(--tgp-border-strong);
}
.tgp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255,255,255,0.22);
}

.tgp-btn--soft {
  background: rgba(168, 85, 247, 0.12);
  color: #C084FC;
}
.tgp-btn--soft:hover {
  background: rgba(168, 85, 247, 0.20);
}

.tgp-btn--danger {
  background: var(--tgp-red-soft);
  color: var(--tgp-red);
}
.tgp-btn--danger:hover {
  background: rgba(239,68,68,0.20);
}

.tgp-btn--sm {
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
}

/* ─── Pills / badges ────────────────────────────────────────────────── */

.tgp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--tgp-r-full);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tgp-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.tgp-pill.is-success  { background: var(--tgp-green-soft); color: var(--tgp-green); }
.tgp-pill.is-progress { background: var(--tgp-accent-soft); color: var(--tgp-accent); }
.tgp-pill.is-pending  { background: var(--tgp-amber-soft); color: var(--tgp-amber); }
.tgp-pill.is-danger   { background: var(--tgp-red-soft);  color: var(--tgp-red); }
.tgp-pill.is-neutral  { background: rgba(255,255,255,0.06); color: var(--tgp-text-dim); }

/* ─── Form inputs ───────────────────────────────────────────────────── */

.tgp-field {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 var(--tgp-s-4);
  background: var(--tgp-surface);
  color: var(--tgp-text);
  border: 1px solid var(--tgp-border);
  border-radius: var(--tgp-r-md);
  font-family: var(--tgp-font);
  font-size: 14px;
  outline: none;
  transition: border-color var(--tgp-dur-1) var(--tgp-ease),
              background-color var(--tgp-dur-1) var(--tgp-ease),
              box-shadow var(--tgp-dur-1) var(--tgp-ease);
}
.tgp-field::placeholder { color: var(--tgp-text-faint); }
.tgp-field:focus {
  border-color: var(--tgp-accent);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.18);
}

.tgp-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--tgp-text-dim);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

/* ─── Table primitive ───────────────────────────────────────────────── */

.tgp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.tgp-table th,
.tgp-table td {
  padding: 14px 22px;
  text-align: left;
  font-size: 13.5px;
  border-bottom: 1px solid var(--tgp-border);
}
.tgp-table th {
  font-weight: 600;
  color: var(--tgp-text-dim);
  letter-spacing: 0.02em;
  font-size: 12px;
  background: transparent;
}
.tgp-table tr:last-child td { border-bottom: 0; }
.tgp-table tbody tr {
  transition: background var(--tgp-dur-1) var(--tgp-ease);
}
.tgp-table tbody tr:hover { background: rgba(255,255,255,0.02); }

/* ─── Empty state ───────────────────────────────────────────────────── */

.tgp-empty {
  text-align: center;
  padding: 56px 28px;
  color: var(--tgp-text-dim);
}
.tgp-empty__icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--tgp-accent-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--tgp-accent);
}
.tgp-empty__title {
  color: var(--tgp-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.tgp-empty__sub  { font-size: 13.5px; line-height: 1.55; max-width: 360px; margin: 0 auto; }

/* ─── Utilities ─────────────────────────────────────────────────────── */

.tgp-mono { font-family: var(--tgp-font-mono); }
.tgp-tnum { font-variant-numeric: tabular-nums; }
.tgp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}