/* ==================================================
FILE : /assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w00-univ-wrapper-ctrl.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w00-univ-wrapper-ctrl.css">
PURPOSE : MOBILE MASTER WIDGET CONTROL PANEL (Variables, Core Container & RGB Utility)
VERSION: v1.0 - DATE CREATED : 2026-04-07 - Rebuild - New Typography Architecture
==================================================== */

:root {
  /* ==================================================
     📱 GLOBAL MOBILE ENGINE & CONSTRAINTS
     ================================================== */
  --mob-max-width: 95%; /* <-- Brat Tweak: Visual breathing room on mobile screens */

  /* TYPOGRAPHY ROUTING (From Memory Packet) */
  --mob-active-font: var(--jzn-active-font);
  --mob-heading-font: var(--jzn-active-heading-font);
  --mob-heading-color: var(--jzn-heading-color);
  --mob-heading-weight: var(--jzn-font-weight-heading);
  --mob-text-color: var(--jzn-text);
  --mob-text-weight: var(--jzn-font-weight-body);
  --mob-subtext-color: var(--jzn-subtext-color);
  --mob-subtext-weight: var(--jzn-font-weight-sub);
  --mob-accent-color: var(--jzn-hover);

  --mob-border-radius: 12px; /* <-- Brat Tweak: Rounded Corner Intensity */
  --mob-rgb-thickness: 2px;

  /* ==================================================
     📢 MOBILE W01: AD SPOT 1
     ================================================== */
  --mob-w01-margin-top: -15px; /* <-- Brat Tweak: 5px Hard Top Edge */
  --mob-w01-margin-bottom: 5px;
  --mob-w01-wrapper-pad: 15px;
  --mob-w01-rgb-speed: 12s;
  --mob-w01-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  /* ==================================================
     🛠️ MOBILE W02: TOOL TITLE / HOMEPAGE H1
     ================================================== */
  --mob-w02-margin-top: 5px;
  --mob-w02-margin-bottom: 5px;
  --mob-w02-wrapper-pad: 15px;
  --mob-w02-rgb-speed: 12s;
  --mob-w02-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  /* ==================================================
     ✅ MOBILE W03: TRUST POINTS GRID
     ================================================== */
  --mob-w03-margin-top: 5px;
  --mob-w03-margin-bottom: 5px;
  --mob-w03-wrapper-pad: 15px;
  --mob-w03-rgb-speed: 12s;
  --mob-w03-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  /* ==================================================
     🏗️ MOBILE W04: STAGING AREA & AD RAILS
     ================================================== */
  --mob-w04-margin-top: 5px;
  --mob-w04-margin-bottom: 5px;
  --mob-w04-wrapper-pad: 15px;
  --mob-w04-rgb-speed: 12s;
  --mob-w04-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  /* ==================================================
     🌐 MOBILE W05: ECOSYSTEM / SUGGESTION BAR
     ================================================== */
  --mob-w05-margin-top: 5px;
  --mob-w05-margin-bottom: 5px;
  --mob-w05-wrapper-pad: 15px;
  --mob-w05-rgb-speed: 12s;
  --mob-w05-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  /* ==================================================
     📢 MOBILE W06: AD SPOT 4
     ================================================== */
  --mob-w06-margin-top: 5px;
  --mob-w06-margin-bottom: 5px;
  --mob-w06-wrapper-pad: 15px;
  --mob-w06-rgb-speed: 12s;
  --mob-w06-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  /* ==================================================
     💬 MOBILE W07: SUPPORT BLOCKS
     ================================================== */
  --mob-w07-margin-top: 5px;
  --mob-w07-margin-bottom: 5px;
  --mob-w07-wrapper-pad: 15px;
  --mob-w07-rgb-speed: 12s;
  --mob-w07-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;

  /* ==================================================
     🏁 MOBILE W08: THE FOOTER
     ================================================== */
  --mob-w08-margin-top: 5px;
  --mob-w08-margin-bottom: 10px; /* <-- Brat Tweak: 10px Hard Bottom Edge */
  --mob-w08-wrapper-pad: 15px;
  --mob-w08-rgb-speed: 12s;
  --mob-w08-rgb-colors: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000;
} 


/* ==================================================
   SECTION 1: THE MASTER MOBILE CONTAINER CLASS
   ================================================== */
.jzn-mob-container {
  display: block !important;
  width: 100% !important;
  max-width: var(--mob-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  position: relative;

  border-radius: var(--mob-border-radius) !important; 
  overflow: hidden; 

  background: var(--jzn-container) !important;
  border: none !important;
  box-shadow: none !important;
  z-index: var(--z-content);
}

/* ==================================================
   SECTION 2: THE INSET RGB BORDER UTILITY
   ================================================== */
.jzn-mob-inset-rgb {
  position: relative;
  border-radius: var(--mob-border-radius) !important; 
  z-index: 1;
}

.jzn-mob-inset-rgb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit; 
  padding: var(--mob-rgb-thickness);

  background: linear-gradient(90deg, var(--active-mob-rgb-colors));
  background-size: 400% 400%;
  animation: jz-mob-rgbFlow var(--active-mob-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;
  pointer-events: none;
  transform: translateZ(0); 
}

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