/* ==================================================
FILE : /assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w05-jz-ecosystem-bar-hmpg.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w05-jz-ecosystem-bar-hmpg.css">
PURPOSE : DESKTOP WIDGET 05 - Ecosystem Bar (Alignment Lock, Studio Borders & Compression)
VERSION: v1.0 - DATE MODIFIED: 2026-04-05 - Studio Wiring & Symmetrical Compression
================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL VISUAL CONTROLS
   ================================================== */
.jz-dsktop-w05-wrapper {
  /* --- 📏 COMPRESSION & SIZING --- */
  --w05-bar-gap: 12px; /* <-- Brat Tweak: Space between the icon blocks (Compressed) */
  --w05-icon-box-size: 50px; /* <-- Brat Tweak: Height and width of the clickable icon box (Smaller & Compact) */
  --w05-icon-size: 1.5rem; /* <-- Brat Tweak: Size of the emojis/icons (Adjusted for smaller box) */
  --w05-box-pad-y: 15px; /* <-- Brat Tweak: Top/Bottom padding inside main RGB box */
  --w05-box-pad-x: 20px; /* <-- Brat Tweak: Left/Right padding inside main RGB box */

  /* --- 📏 EXACT TYPOGRAPHY SIZING --- */
  --w05-header-size: 0.8rem; /* <-- Brat Tweak: Locked header text size */
  --w05-tooltip-size: 0.75rem; /* <-- Brat Tweak: Locked tooltip text size */

  /* --- HOVER BLOB (TOOLTIP) --- */
  --w05-tooltip-bg: var(--jzn-container); /* <-- Brat Tweak: Background of the hover popup */
  --w05-tooltip-text: #00cc00; /* <-- Brat Tweak: Neon green text in the popup */
  --w05-tooltip-border: 1px solid #00cc00; /* <-- Brat Tweak: Thin neon border around the popup */

  /* --- ICON BOX COLORS & STUDIO BORDERS --- */
  --w05-item-bg: rgba(255, 255, 255, 0.03); /* <-- Brat Tweak: Idle background of icon slot */
  --w05-item-hover-bg: rgba(255, 255, 255, 0.08); /* <-- Brat Tweak: Hovered background of icon slot */
  
  --w05-item-border-width: 1.5px; /* <-- Brat Tweak: Granular control over border thickness */
  --w05-item-border-color: var(--jzn-container-border-c); /* <-- Wired to Studio Engine Border Color */
  --w05-item-border: var(--w05-item-border-width) solid var(--w05-item-border-color);
  
  --w05-item-hover-border: var(--w05-item-border-width) solid rgba(255, 255, 255, 0.35); /* <-- Brat Tweak: Brightens on hover */

  /* --- MAIN WRAPPER RGB --- */
  --w05-rgb-speed: 16s;
  --w05-rgb-border: 2px;
  --w05-rgb-colors:
    #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000; /* <-- Brat Tweak: Flattened */

  /* THE FIX: Forcing block display and 100% width prevents the Elementor "Pill" collapse */
  display: block !important;
  width: 100% !important;
  max-width: var(--jzn-max-width) !important;
  box-sizing: border-box !important;
  margin: var(--w05-margin-top, 25px) auto var(--w05-margin-bottom, 25px) auto !important;
  padding: var(--w05-wrapper-pad, 10px) !important;
}

/* ==================================================
   SECTION 1: THE INNER RGB BOX
   ================================================== */
.jz-w05-rgb-box {
  position: relative;
  background: transparent;
  border-radius: 12px !important; /* Locks standard box radius, prevents pill shape */

  /* THE FIX: Enforcing width and strict centering inside the RGB Box */
  width: 100% !important;
  box-sizing: border-box !important;
  padding: var(--w05-box-pad-y) var(--w05-box-pad-x) !important; /* <-- Wired to Compression Tweaks */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--w05-bar-gap) !important; /* <-- Wired to Gap Tweak */
}

.jz-w05-rgb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--w05-rgb-border);
  background: linear-gradient(90deg, var(--w05-rgb-colors));
  background-size: 400% 400%;
  animation: jz-w05-rgbFlow var(--w05-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: HEADER TEXT
   ================================================== */
.jz-w05-bar-header {
  width: 100% !important;
  text-align: center !important; /* Forcing text center */
  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--w05-header-size); /* <-- Locked to Brat Tweak */
  color: var(--jzn-heading-color); /* <-- Brat Tweak: Studio Heading Color */
  font-weight: var(--jzn-font-weight-heading); /* <-- Brat Tweak: Studio Heading Weight */
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.6;
}

/* ==================================================
   SECTION 3: THE CENTERED FLEX ROW
   ================================================== */
.jz-w05-item-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important; /* THE MAGIC FIX: Forces icons to exact middle */
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: var(--w05-bar-gap) !important;
  box-sizing: border-box !important;
}

/* ==================================================
   SECTION 4: INDIVIDUAL ICON BLOCKS
   ================================================== */
.jz-w05-item {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Locks the icons into a perfect square grid */
  width: var(--w05-icon-box-size) !important;
  height: var(--w05-icon-box-size) !important;
  flex: 0 0 var(--w05-icon-box-size) !important;

  background: var(--w05-item-bg);
  border: var(--w05-item-border) !important; /* <-- Built dynamically from width & Studio color tweaks */
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.jz-w05-icon {
  font-size: var(--w05-icon-size);
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==================================================
   SECTION 5: THE HOVER BLOB (TOOLTIP)
   ================================================== */
.jz-w05-tooltip {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  background: var(--w05-tooltip-bg);
  border: var(--w05-tooltip-border);
  color: var(--w05-tooltip-text);

  padding: 8px 16px;
  border-radius: 50px; /* Keep tooltip pill-shaped */
  font-family: var(--jzn-active-font); /* <-- Brat Tweak: Studio Font Engine */
  font-size: var(--w05-tooltip-size); /* <-- Locked to Brat Tweak */
  font-weight: var(--jzn-font-weight-body); /* <-- Studio Engine Weight */
  white-space: nowrap;
  letter-spacing: 1px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.jz-w05-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #00cc00 transparent transparent transparent;
}

/* ==================================================
   SECTION 6: HOVER ANIMATIONS
   ================================================== */
.jz-w05-item:hover {
  background: var(--w05-item-hover-bg);
  border: var(--w05-item-hover-border) !important; /* <-- Brightens on hover */
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.jz-w05-item:hover .jz-w05-icon {
  transform: scale(1.15);
}

.jz-w05-item:hover .jz-w05-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==================================================
   SECTION 7: THE GLOBAL OVERRIDE BRIDGE (ECOSYSTEM BAR)
   ================================================== */
/* 🌙 Default to Dark Mode */
body div.jz-dsktop-w05-wrapper.jzn-container {
  background: var(--jzn-container) !important; /* <-- Brat Tweak: Studio Background tint */
  border: var(--w05-glass-border-dark) !important; /* <-- Brat Tweak: Universal Control File */
}
body div.jz-dsktop-w05-wrapper.jzn-container::before {
  box-shadow: var(--w05-glow-dark) !important; /* <-- Brat Tweak: Universal Control File */
}

/* ☀️ Light Mode Overrides (Wired directly to the HTML tag) */
html[data-palette='13'] div.jz-dsktop-w05-wrapper.jzn-container,
html[data-palette='14'] div.jz-dsktop-w05-wrapper.jzn-container,
html[data-palette='15'] div.jz-dsktop-w05-wrapper.jzn-container,
html[data-palette='16'] div.jz-dsktop-w05-wrapper.jzn-container,
html[data-palette='17'] div.jz-dsktop-w05-wrapper.jzn-container,
html[data-palette='18'] div.jz-dsktop-w05-wrapper.jzn-container {
  background: var(--jzn-container) !important; /* <-- Brat Tweak: Studio Background tint */
  border: var(--w05-glass-border-light) !important; /* <-- Brat Tweak: Universal Control File */
}

html[data-palette='13'] div.jz-dsktop-w05-wrapper.jzn-container::before,
html[data-palette='14'] div.jz-dsktop-w05-wrapper.jzn-container::before,
html[data-palette='15'] div.jz-dsktop-w05-wrapper.jzn-container::before,
html[data-palette='16'] div.jz-dsktop-w05-wrapper.jzn-container::before,
html[data-palette='17'] div.jz-dsktop-w05-wrapper.jzn-container::before,
html[data-palette='18'] div.jz-dsktop-w05-wrapper.jzn-container::before {
  box-shadow: var(--w05-glow-light) !important; /* <-- Brat Tweak: Universal Control File */
}

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