/* ========================================================================
FILE : /assets/01-mstr-tmplet/02-jzn-topbar/css/jzn-search.css
PURPOSE : SEARCH BAR - THE "TRUE PILL" (Pseudo-Layered) [jzn]
VERSION: v1.0 - DATE CREATED: 2026-02-21 - New1 Build
VERSION: v2.0 - DATE MODIFIED: 2026-02-27 - Layering & Pointer Fix
========================================================================== */

:root {
  /* --- BRAT TWEAKS: Search UI --- */
  --jzn-search-h: 55px; /* <-- Brat Tweak: Total Pill Height */
  --jzn-pill-radius: 999px; /* Perfect Rounding */
  --jzn-border-thickness: 3px; /* <-- Brat Tweak: Glow Border Width */
  --jzn-input-bg: #0f172a; /* <-- Brat Tweak: Pill Color */
  --jzn-rgb-speed: 3s; /* <-- Brat Tweak: Animation Speed */
  --jzn-search-text: #ffffff; /* <-- Brat Tweak: Input Text Color */
  --jzn-search-placeholder: #64748b; /* <-- Brat Tweak: Placeholder Color */
}

/* ========================================================================
   SECTION 1: THE OVERLAY (Glass Layer)
   ======================================================================== */
.jzn-search-overlay {
  position: fixed;
  inset: 0 !important;
  background: rgba(
    15,
    23,
    42,
    0.7
  ) !important; /* <-- Lower the 0.9 to 0.7 to see more 'ghosting' */
  backdrop-filter: blur(
    30px
  ) !important; /* <-- Kick it up to 30px for a deeper frost */
  -webkit-backdrop-filter: blur(30px) !important;

  /* Force this to the absolute front of the stack */
  z-index: 1000000 !important;

  display: none !important; /* Toggled by JS .jzn-is-active */
  justify-content: center;
  align-items: flex-start;
  padding-top: 15vh;

  /* BRAT TWEAK: Prevents the overlay from eating clicks while hidden */
  pointer-events: none;
}

.jzn-search-overlay.jzn-is-active {
  display: flex !important;
  pointer-events: auto !important; /* Re-enable clicks when active */
}

/* ========================================================================
   SECTION 2: THE PILL CONTAINER (The Engine)
   ======================================================================== */
.jzn-search-pill-container {
  position: relative !important;
  width: 90% !important;
  max-width: 600px !important;
  height: var(--jzn-search-h) !important;
  margin: 0 auto !important;
  /* Ensure visibility of the RGB "bleed" */
  overflow: visible !important;
}

/* ========================================================================
   SECTION 3: THE RGB GLOW (Pseudo-Element)
   ======================================================================== */
.jzn-search-pill-container::before {
  content: '';
  position: absolute !important;
  /* The "Negative Inset" pushes the glow OUTWARDS based on thickness tweak */
  top: calc(var(--jzn-border-thickness) * -1);
  left: calc(var(--jzn-border-thickness) * -1);
  right: calc(var(--jzn-border-thickness) * -1);
  bottom: calc(var(--jzn-border-thickness) * -1);

  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #8f00ff,
    #ff0000
  );
  background-size: 400% 100%;
  animation: jznBorderFlow var(--jzn-rgb-speed) linear infinite;
  border-radius: var(--jzn-pill-radius);
  z-index: -1; /* Sits behind the input */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* Adds depth */
}

/* ========================================================================
   SECTION 4: THE INPUT FIELD
   ======================================================================== */
.jzn-search-input {
  width: 100% !important;
  height: 100% !important;
  background: var(--jzn-input-bg) !important;
  border: none !important;
  outline: none !important;
  border-radius: var(--jzn-pill-radius) !important;
  color: var(--jzn-search-text) !important;
  padding: 0 60px 0 25px !important;
  font-size: 1.1rem;
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important; /* Forces input above the glow */
}

.jzn-search-input::placeholder {
  color: var(--jzn-search-placeholder);
}

/* ========================================================================
   SECTION 5: THE ICON (Inside the Pill - Right Aligned Arrow)
   ======================================================================== */
.jzn-search-icon-inside {
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--jzn-search-placeholder);
  font-size: 1.2rem;
  z-index: 10 !important; /* Highest layer for visibility */
  pointer-events: none;
}

/* ========================================================================
   SECTION 6: BACKDROP (Close Area)
   ======================================================================== */
.jzn-search-overlay-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  cursor: pointer;
}

/* ========================================================================
   SECTION 7: ANIMATIONS
   ======================================================================== */
@keyframes jznBorderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}