/* ==================================================
FILE : /assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w03-jz-trust-points.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w03-jz-trust-points.css">
PURPOSE : DESKTOP WIDGET 03 - Trust Points (Ultra-Compact & Individual RGB)
VERSION: v1.0 - DATE MODIFIED: 2026-04-05 - Studio Typography Wiring & Compression
==================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL VISUAL CONTROLS
   ================================================== */
.jz-dsktop-w03-trust-wrapper {
  /* --- 🌓 ISOLATED PRIVACY LINE CONTROLS --- */
  --w03-privacy-text-dark: #00cc00; /* <-- Brat Tweak: Neon Green for Dark Mode */
  --w03-privacy-text-light: #008800; /* <-- Brat Tweak: Deeper Green for Light Mode legibility */

  /* --- MAIN WRAPPER RGB --- */
  --w03-trust-rgb-speed: 16s; 
  --w03-trust-rgb-border: 3px; 
  --w03-trust-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000; 

  /* --- INDIVIDUAL TRUST POINTS RGB --- */
  --w03-item-rgb-speed: 10s; 
  --w03-item-rgb-border: 2px; 
  --w03-item-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000; 

  /* --- 📏 COMPRESSION & SIZING TWEAKS --- */
  --w03-box-pad-y: 12px; /* <-- Brat Tweak: Top/Bottom padding inside main RGB box (Compressed from 20px) */
  --w03-box-pad-x: 15px; /* <-- Brat Tweak: Left/Right padding inside main RGB box (Compressed from 20px) */
  
  --w03-item-pad-y: 6px; /* <-- Brat Tweak: Top/Bottom padding inside individual pills (Compressed from 12px) */
  --w03-item-pad-x: 10px; /* <-- Brat Tweak: Left/Right padding inside individual pills */
  
  --w03-grid-gap: 8px; /* <-- Brat Tweak: Gap between the items in the grid (Compressed from 12px) */
  --w03-item-radius: 6px; /* <-- Brat Tweak: How round the blocks are */
  
  /* Wired directly to Semantic Disconnect for that compact match with W02 */
  --w03-item-text-size: var(--jzn-size-micro); /* <-- Matches the W02 Trust Pills */
  --w03-privacy-text-size: var(--jzn-size-micro); /* <-- Matches the W02 Trust Pills */
  --w03-icon-size: 16px; /* <-- Brat Tweak: Size of the padlock */

  /* --- ITEM BACKGROUND --- */
  --w03-item-bg: rgba(255, 255, 255, 0.05); /* <-- Brat Tweak: Flattened subtle background inside the blocks */

  width: 100%;
  max-width: var(--jzn-max-width) !important;
  box-sizing: border-box !important;
  margin: var(--w03-margin-top, 15px) auto var(--w03-margin-bottom, 15px) auto !important; 
  padding: var(--w03-wrapper-pad, 10px); 
}

/* ==================================================
   SECTION 1: THE INNER RGB BOX
   ================================================== */
.jz-w03-trust-rgb-box {
  position: relative;
  background: transparent;
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box !important;
  padding: var(--w03-box-pad-y) var(--w03-box-pad-x); /* <-- Wired to Compression Tweaks */
  display: flex;
  align-items: center;
  justify-content: center;
}

.jz-w03-trust-rgb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--w03-trust-rgb-border);
  background: linear-gradient(90deg, var(--w03-trust-rgb-colors));
  background-size: 400% 400%;
  animation: jz-trust-rgbFlow var(--w03-trust-rgb-speed) linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

/* ==================================================
   SECTION 2: CONTENT & MASTER GRID (2x2x1)
   ================================================== */
.jz-w03-trust-content {
  width: 100%;
  z-index: 2;
}

.jz-w03-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* Forces exactly 2 equal columns */
  gap: var(--w03-grid-gap) !important; /* <-- Wired to Compression Tweaks */
  width: 100%;
  box-sizing: border-box !important;
}

/* ==================================================
   SECTION 3: THE TRUST ITEMS (Top Row)
   ================================================== */
.jz-w03-trust-item {
  position: relative;
  z-index: 1;

  background: var(--w03-item-bg);
  border-radius: var(--w03-item-radius);
  padding: var(--w03-item-pad-y) var(--w03-item-pad-x); /* <-- Wired to Compression Tweaks */

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--w03-item-text-size);
  font-weight: var(--jzn-font-weight-body); /* <-- Brat Tweak: Studio Body Weight */
  color: var(--jzn-text); /* <-- Brat Tweak: Studio Body Text Color */
  letter-spacing: 0.5px;
}

/* ==================================================
   SECTION 4: THE PRIVACY ITEM (Bottom Row, Full Span)
   ================================================== */
.jz-w03-privacy-item {
  grid-column: 1 / -1 !important;
  position: relative;
  z-index: 1;

  background: var(--w03-item-bg);
  border-radius: var(--w03-item-radius);
  padding: var(--w03-item-pad-y) var(--w03-item-pad-x); /* <-- Wired to Compression Tweaks */

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.jz-w03-privacy-text {
  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--w03-privacy-text-size);
  font-weight: var(--jzn-font-weight-heading); /* <-- Bumped to heading weight for emphasis */
  color: var(--w03-active-privacy-color) !important; /* <-- Routed from Override Bridge */
  text-transform: uppercase;
  letter-spacing: 1px;
}

.jz-w03-lock-icon {
  width: var(--w03-icon-size);
  height: var(--w03-icon-size);
  fill: var(--w03-active-privacy-color) !important; /* <-- Routed from Override Bridge */
  color: var(--w03-active-privacy-color) !important; /* Fallback for text-based icons */
  display: block;
}

/* ==================================================
   SECTION 5: INDIVIDUAL ITEM RGB BORDERS (The Points)
   ================================================== */
.jz-w03-trust-item::before,
.jz-w03-privacy-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--w03-item-rgb-border);
  background: linear-gradient(90deg, var(--w03-item-rgb-colors));
  background-size: 400% 400%;
  animation: jz-trust-rgbFlow var(--w03-item-rgb-speed) linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

/* ==================================================
   SECTION 6: THE GLOBAL OVERRIDE BRIDGE (TRUST POINTS)
   ================================================== */
/* 🌙 Default to Dark Mode */
body div.jz-dsktop-w03-trust-wrapper.jzn-container {
  background: var(--jzn-container) !important; 
  border: var(--w03-glass-border-dark) !important; 
  --w03-active-privacy-color: var(--w03-privacy-text-dark); 
}
body div.jz-dsktop-w03-trust-wrapper.jzn-container::before {
  box-shadow: var(--w03-glow-dark) !important; 
}

/* ☀️ Light Mode Overrides (Wired directly to the HTML tag) */
html[data-palette='13'] div.jz-dsktop-w03-trust-wrapper.jzn-container,
html[data-palette='14'] div.jz-dsktop-w03-trust-wrapper.jzn-container,
html[data-palette='15'] div.jz-dsktop-w03-trust-wrapper.jzn-container,
html[data-palette='16'] div.jz-dsktop-w03-trust-wrapper.jzn-container,
html[data-palette='17'] div.jz-dsktop-w03-trust-wrapper.jzn-container,
html[data-palette='18'] div.jz-dsktop-w03-trust-wrapper.jzn-container {
  background: var(--jzn-container) !important; 
  border: var(--w03-glass-border-light) !important; 
  --w03-active-privacy-color: var(--w03-privacy-text-light); 
}

html[data-palette='13'] div.jz-dsktop-w03-trust-wrapper.jzn-container::before,
html[data-palette='14'] div.jz-dsktop-w03-trust-wrapper.jzn-container::before,
html[data-palette='15'] div.jz-dsktop-w03-trust-wrapper.jzn-container::before,
html[data-palette='16'] div.jz-dsktop-w03-trust-wrapper.jzn-container::before,
html[data-palette='17'] div.jz-dsktop-w03-trust-wrapper.jzn-container::before,
html[data-palette='18'] div.jz-dsktop-w03-trust-wrapper.jzn-container::before {
  box-shadow: var(--w03-glow-light) !important; 
}

/* ==================================================
   SECTION 7: KEYFRAMES
   ================================================== */
@keyframes jz-trust-rgbFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}