/* ==================================================
FILE : /assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w07-jz-support.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/03-jz-desktop/css-v2/dsktop-w07-jz-support.css">
PURPOSE : DESKTOP WIDGET 07 - Support Blocks (Independent Wrappers)
VERSION: v1.0 - DATE MODIFIED: 2026-04-05 - Semantic Structure & Granular Size Locks
==================================================== */


/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL VISUAL CONTROLS
   ================================================== */
.jz-w07-layout-grid {
  /* --- SPACING & SIZING (Local Overrides) --- */
  --w07-inner-pad: 8px;
  --w07-box-gap: 10px;

  /* --- 📏 EXACT TYPOGRAPHY SIZING (GRANULAR CONTROL) --- */
  --w07-title-size: 0.85rem; /* <-- Brat Tweak: Locked size for H3 Titles */
  --w07-stars-size: 1.1rem; /* <-- Brat Tweak: Locked size for star emojis */
  --w07-rating-text-size: 0.8rem; /* <-- Brat Tweak: Locked size for rating numbers */
  --w07-icon-size: 1.8rem; /* <-- Brat Tweak: Locked size for the coffee cup */
  --w07-subtext-size: 0.75rem; /* <-- Brat Tweak: Locked size for the description paragraph */
  --w07-btn-text-size: 0.75rem; /* <-- Brat Tweak: Locked size for the button text */

  /* --- RGB BORDER CONTROLS --- */
  --w07-rgb-speed: 16s;
  --w07-rgb-border: 2px;
  --w07-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  /* --- BUTTON STYLING --- */
  --w07-btn-border-idle: 1px solid rgba(255, 255, 255, 0.5);
  --w07-btn-border-hover: 2px solid #ffffff;
  --w07-btn-bg-hover: #0502ab;
  --w07-btn-text-color: var(--jzn-hover);
}

/* ==================================================
   SECTION 1: THE INVISIBLE LAYOUT GRID
   ================================================== */
.jz-w07-layout-grid { 
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: stretch !important;

  width: 100% !important;
  max-width: var(--jzn-max-width) !important;
  margin: var(--w07-margin-top, 20px) auto var(--w07-margin-bottom, 20px) auto !important;
  gap: var(--w07-col-gap, 20px) !important;
  box-sizing: border-box !important;
}

/* ==================================================
   SECTION 2: THE INDIVIDUAL GLASS WRAPPERS
   ================================================== */
.jz-dsktop-w07-wrapper {
  flex: 1 !important; /* Makes both wrappers take up exactly 50% */
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important; /* Margin is 0 because the layout grid handles the outer spacing */
  padding: var(--w07-wrapper-pad, 10px) !important;
  box-sizing: border-box !important;
}

/* ==================================================
   SECTION 3: THE RGB BOXES
   ================================================== */
.jz-w07-rgb-box {
  flex: 1 !important; /* Forces the inner box to stretch and fill the glass wrapper */
  position: relative;
  background: transparent;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: var(--w07-inner-pad) 20px !important;
  gap: var(--w07-box-gap) !important;
  box-sizing: border-box !important;
}

.jz-w07-rgb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--w07-rgb-border);
  background: linear-gradient(90deg, var(--w07-rgb-colors));
  background-size: 400% 400%;
  animation: jz-w07-rgbFlow var(--w07-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 4: TYPOGRAPHY & ICONS
   ================================================== */
/* prettier-ignore */
.jz-w07-title {
  font-family: var(--jzn-active-heading-font); /* <-- Wired to Studio Heading Font Engine */
  font-size: var(--w07-title-size); /* <-- Locked to Brat Tweak */
  font-weight: var(--jzn-font-weight-heading); /* <-- Wired to Studio Heading Weight */
  color: var(--jzn-heading-color) !important; /* <-- STRICT LOCK: Studio Heading Color */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 !important;
}

/* prettier-ignore */
.jz-w07-stars {
  font-size: var(--w07-stars-size); /* <-- Locked to Brat Tweak */
  line-height: 1;
  margin: 0 !important;
}

/* prettier-ignore */
.jz-w07-rating-text {
  font-family: var(--jzn-active-font); /* <-- Wired to Studio Font Engine */
  font-size: var(--w07-rating-text-size); /* <-- Locked to Brat Tweak */
  font-weight: var(--jzn-font-weight-sub); /* <-- Wired to Studio Sub Weight */
  color: var(--jzn-subtext-color) !important; /* <-- STRICT LOCK: Studio Subtext Color */
  margin: 0 !important;
}

/* prettier-ignore */
.jz-w07-icon {
  font-size: var(--w07-icon-size); /* <-- Locked to Brat Tweak */
  line-height: 1;
  margin: 0 !important;
}

/* prettier-ignore */
.jz-w07-subtext {
  /* This acts as your "Description" text */
  font-family: var(--jzn-active-font); /* <-- Wired to Studio Font Engine */
  font-size: var(--w07-subtext-size); /* <-- Locked to Brat Tweak */
  line-height: 1.4;
  font-weight: var(--jzn-font-weight-body); /* <-- Wired to Studio Body Weight */
  color: var(--jzn-text) !important; /* <-- STRICT LOCK: Studio Body Text Color */
  opacity: 0.8;
  max-width: 90%;
  margin: 0 !important;
}

/* ==================================================
   SECTION 5: BUTTONS (Aligned Bottom)
   ================================================== */
.jz-w07-btn {
  margin-top: auto !important; /* Pushes button to the absolute bottom */
  font-family: var(--jzn-active-font); /* <-- Wired to Studio Font Engine */
  font-size: var(--w07-btn-text-size); /* <-- Locked to Brat Tweak */
  font-weight: 800;
  color: var(--w07-btn-text-color);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 16px;
  border: var(--w07-btn-border-idle);
  border-radius: 6px;
  background: transparent;
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
}

.jz-w07-btn:hover {
  background: var(--w07-btn-bg-hover);
  color: #ffffff;
  border: var(--w07-btn-border-hover);
  box-shadow: 0 0 15px rgba(5, 2, 171, 0.5);
  transform: translateY(-2px);
}

/* ==================================================
   SECTION 6: THE GLOBAL OVERRIDE BRIDGE (W07 - 2W2C)
   ================================================== */
/* 🌙 Default to Dark Mode */
body div.jz-dsktop-w07-wrapper.jzn-container {
  background: var(--jzn-container) !important; /* <-- Brat Tweak: Studio Background tint */
  border: var(--w07-glass-border-dark) !important;
}

body div.jz-dsktop-w07-wrapper.jzn-container::before {
  box-shadow: var(--w07-glow-dark) !important;
}

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

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

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