/* ========================================================================
FILE : /assets/01-mstr-tmplet/02-jzn-topbar/css/jzn-bgstudio-modal.css
PURPOSE : GLASSMORPISM STUDIO MODAL - SURGICAL RGB BORDER & GLASS UI [jzn]
VERSION: v2.0 - DATE MODIFIED: 2026-03-14 - CENTRALIZED BRAT TWEAKS & MOBILE 85%
========================================================================== */

:root {
  /* ======================================================== */
  /* 🛠️ BRAT TWEAKS: MASTER UI CONTROL CENTER                 */
  /* ======================================================== */

  /* 1. Modal Sizing & Speed */
  --jzn-modal-width-desktop: 420px; /* <-- Brat Tweak: Desktop width */
  --jzn-modal-width-mobile: 85%; /* <-- Brat Tweak: Mobile/Tablet width */
  --jzn-studio-pulse-speed: 12s; /* <-- Brat Tweak: RGB Border Animation Speed */
  --jzn-studio-border-w: 2px; /* <-- Brat Tweak: RGB Border Thickness */

  /* 2. Glass Surface Aesthetics */
  --jzn-glass-bg: rgba(
    15,
    23,
    42,
    0.95
  ); /* <-- Brat Tweak: Main Glass Background Color */
  --jzn-glass-blur: 15px; /* <-- Brat Tweak: Glass Blur Intensity */

  /* 3. Slider & Spacing UI */
  --jzn-row-gap: 26px; /* <-- Brat Tweak: Space between rows */
  --jzn-track-height: 6px; /* <-- Brat Tweak: Slider Track Thickness */
  --jzn-thumb-size-desktop: 16px; /* <-- Brat Tweak: Slider Grabber Size (Desktop) */
  --jzn-thumb-size-mobile: 24px; /* <-- Brat Tweak: Slider Grabber Size (Mobile - Fat Finger) */
  --jzn-neon-glow: #00f5d4; /* <-- Brat Tweak: Primary Accent & Shadow Glow */
}

/* ======================================================== */
/* 1. THE GHOST OVERLAY (Master Visibility Toggle) */
/* ======================================================== */
.jzn-studio-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 1000000;

  /* --- MASTER HIDE --- */
  display: none;
  opacity: 0;
  visibility: hidden;

  /* Ghost Protocol: Site remains clickable under the Studio */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;

  /* Alignment Hub */
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-out; /* Smooth Fade-in */
}

/* TRIGGERED VIA JUXTASTUDIO.OPEN() */
.jzn-studio-overlay.active {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}

/* ======================================================== */
/* 2. THE RGB ENGINE (The Outer Frame) */
/* ======================================================== */
.jzn-studio-modal {
  pointer-events: auto;
  position: relative;
  width: var(--jzn-modal-width-desktop);
  padding: var(--jzn-studio-border-w);
  border-radius: 20px;
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #8b00ff,
    #ff0000
  );
  background-size: 400%;
  animation: jznStudioPulse var(--jzn-studio-pulse-speed) linear infinite;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

@keyframes jznStudioPulse {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

/* ======================================================== */
/* 3. THE INNER GLASS SURFACE */
/* ======================================================== */
.jzn-studio-inner {
  position: relative;
  width: 100%;
  background: var(--jzn-glass-bg);
  backdrop-filter: blur(var(--jzn-glass-blur));
  -webkit-backdrop-filter: blur(var(--jzn-glass-blur));
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 400px;
}

/* ======================================================== */
/* 4. PRISTINE GRID UI & SLIDERS */
/* ======================================================== */
.jzn-studio-body {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: var(--jzn-row-gap);
  flex-grow: 1;
}

.jzn-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

/* Label Alignment */
.jzn-slider-row span {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  color: var(--jzn-neon-glow);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  width: 85px;
  flex-shrink: 0;
}

/* Range Sliders */
.jzn-stage-slider {
  flex-grow: 1;
  height: var(--jzn-track-height);
  background: #1e293b;
  border-radius: 4px;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  margin: 6px 0;
}

.jzn-stage-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--jzn-thumb-size-desktop);
  height: var(--jzn-thumb-size-desktop);
  background: #1900ff;
  border: 2px solid var(--jzn-neon-glow);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--jzn-neon-glow);
  margin-top: calc(
    (var(--jzn-track-height) - var(--jzn-thumb-size-desktop)) / 2
  ); /* Auto-centers thumb */
}

/* Color Input Grid (Upgraded to 3-Column) */
.jzn-color-grid {
  display: grid;
  grid-template-columns: repeat(
    3,
    1fr
  ); /* <-- Brat Tweak: Forces 3 items per row */
  gap: 8px; /* <-- Brat Tweak: Space between the color boxes */
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 10px;
}

.jzn-color-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 8px; /* Tighter padding for the smaller fields */
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.jzn-color-input span {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  color: #fff;
  width: auto;
}

.jzn-menu-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 245, 212, 0.25),
    transparent
  );
  margin: 12px 0;
}

/* ======================================================== */
/* 5. HEADER & CONTROLS */
/* ======================================================== */
.jzn-studio-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.jzn-studio-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  color: #00ff00;
  letter-spacing: 2px;
}

.jzn-studio-close {
  cursor: pointer;
  color: #ff0000;
  font-weight: bold;
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.jzn-studio-close:hover {
  transform: scale(1.2);
}

/* ======================================================== */
/* 6. MOBILE RESPONSIVENESS (85% Width & Fat Finger Fix)    */
/* ======================================================== */
@media (max-width: 768px) {
  .jzn-studio-modal {
    width: var(--jzn-modal-width-mobile); /* Forces 85% width */
    max-width: 420px; /* Safety cap */
  }

  .jzn-slider-row {
    margin-bottom: 25px !important;
  }

  /* Fat Finger Thumb Injection */
  .jzn-stage-slider::-webkit-slider-thumb {
    width: var(--jzn-thumb-size-mobile) !important;
    height: var(--jzn-thumb-size-mobile) !important;
    margin-top: calc(
      (var(--jzn-track-height) - var(--jzn-thumb-size-mobile)) / 2
    ) !important;
  }
}

/* ======================================================== */
/* 7. DRAGGABLE, COLLAPSIBLE & DROPDOWN UI FIXES            */
/* ======================================================== */

/* Fix: Forces the OS Dropdown list to be dark */
.jzn-stage-select-font option {
  background-color: var(
    --jzn-glass-bg
  ); /* <-- Brat Tweak: Dropdown List Background */
  color: #00ff00; /* <-- Brat Tweak: Dropdown List Text */
  font-family: 'Orbitron', sans-serif;
}

/* Dragging States */
.jzn-studio-header:active {
  cursor: grabbing !important;
}

/* Base Modal Updates for Dragging */
.jzn-studio-modal {
  position: absolute !important; /* Required to let it float around the screen */
  transition:
    width 0.3s ease,
    min-height 0.3s ease; /* Smooth shrinking */
}

/* The Collapsed State (Triggered via JS) */
.jzn-studio-modal.jzn-collapsed {
  width: 280px !important; /* <-- Brat Tweak: How wide it is when minimized */
  min-height: auto !important;
}

.jzn-studio-modal.jzn-collapsed .jzn-studio-inner {
  min-height: auto !important;
}

/* Hide everything except the header when collapsed */
.jzn-studio-modal.jzn-collapsed .jzn-studio-body,
.jzn-studio-modal.jzn-collapsed #jznStudioModeToast {
  display: none !important;
}