/* ==================================================
FILE : /assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w07-support.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w07-support.css">
PURPOSE : MOBILE WIDGET 07 - Support Blocks (50/50 Split Grid)
VERSION: v1.0 - DATE CREATED : 2026-04-07 - Rebuild - New Typography Architecture
==================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL VISUAL CONTROLS
   ================================================== */
.jz-mob-w07-layout-grid {
  /* --- INTERNAL 50/50 GRID WIRING --- */
  --mob-w07-col-gap: 10px; /* Space between the two glass boxes */
  --mob-w07-wrapper-pad: 8px 5px; /* Tight internal padding */
  --mob-w07-box-gap: 8px; /* Vertical gap between elements */

  /* --- BUTTON STYLING (Hover State Included) --- */
  --mob-w07-btn-border-idle: 1px solid rgba(255, 255, 255, 0.3);
  --mob-w07-btn-border-hover: 1px solid #ffffff;
  --mob-w07-btn-bg-hover: #0502ab; /* <-- Brat Tweak: Deep Blue Hover */
  --mob-w07-btn-text-color: var(--jzn-hover); /* Master accent color */

  /* --- MASTER CONTAINER RGB --- */
  --active-mob-rgb-speed: var(--mob-w07-rgb-speed, 16s);
  --active-mob-rgb-colors: var(--mob-w07-rgb-colors);
}

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

  width: 100% !important;
  max-width: var(--mob-max-width) !important;
  gap: var(--mob-w07-col-gap) !important;
  box-sizing: border-box !important;

  /* 🎯 DIRECT MASTER HOOK */
  margin-top: var(--mob-w07-margin-top, 5px) !important;
  margin-bottom: var(--mob-w07-margin-bottom, 5px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==================================================
   SECTION 2: THE INDIVIDUAL GLASS WRAPPERS
   ================================================== */
.jz-mob-w07-wrapper {
  flex: 1 !important; /* Exact 50/50 */
  display: block !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ==================================================
   SECTION 3: THE INNER RGB BOXES
   ================================================== */
.jz-mob-w07-rgb-box {
  width: 100%;
  height: 100%; 
  padding: var(--mob-w07-wrapper-pad) !important;
  box-sizing: border-box !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: var(--mob-w07-box-gap);
}

/* ==================================================
   SECTION 4: TYPOGRAPHY & ICONS
   ================================================== */
.jz-mob-w07-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin: 0;
}

.jz-mob-w07-title {
  font-family: var(--jzn-active-font);
  font-size: var(--jzn-size-sub) !important; 
  font-weight: var(--jzn-font-weight-heading);
  color: var(--mob-heading-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.jz-mob-w07-stars {
  font-size: 0.7rem;
  line-height: 1;
  margin: -4px 0 0 0; 
  letter-spacing: 2px;
}

.jz-mob-w07-subtext {
  font-family: var(--jzn-active-font);
  font-size: var(--jzn-size-micro) !important; /* Max compression */
  line-height: 1.3;
  color: var(--mob-subtext-color);
  opacity: 0.9;
  margin: 0;
  width: 95%;
}

/* ==================================================
   SECTION 5: BOTTOM-ALIGNED BUTTONS
   ================================================== */
.jz-mob-w07-btn {
  margin-top: auto !important; /* Anchor to bottom */
  font-family: var(--jzn-active-font);
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--mob-w07-btn-text-color);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 12px;
  border: var(--mob-w07-btn-border-idle);
  border-radius: 6px;
  background: transparent;
  transition: all 0.3s ease;
  display: inline-block;

  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* Mobile Hover/Tap/Focus states */
.jz-mob-w07-btn:hover,
.jz-mob-w07-btn:active,
.jz-mob-w07-btn:focus {
  background: var(--mob-w07-btn-bg-hover);
  color: #ffffff;
  border: var(--mob-w07-btn-border-hover);
  box-shadow: 0 0 10px rgba(5, 2, 171, 0.4);
  transform: translateY(-1px);
}