/* search-slider.css or in your theme’s main CSS */

/* Container fills viewport, initially hidden off-screen or transparent */
#search-slider {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 9999;
  }
  
  /* When active, show backdrop & panel */
  #search-slider.active {
    pointer-events: auto;
    opacity: 1;
  }
  
  /* Backdrop dims rest */
  #search-slider .search-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
  }
  
  /* Panel: center or slide from top/side as desired */
  /* Example: center vertically/horizontally */
  #search-slider .search-panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    max-width: 90%;
    width: 400px;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    /* optionally: transition for slide-in */
  }
  
  /* Adjust styling inside as needed */
  #search-slider .search-input-wrapper {
    display: flex;
  }
  #search-slider input[type="search"] {
    flex: 1;
    padding: 8px;
    font-size: 1rem;
  }
  #search-slider .search-submit-slider {
    padding: 8px 12px;
    margin-left: 8px;
    cursor: pointer;
  }
  
  /* Close button */
  #search-slider .search-close {
    position: absolute;
    top: 12px; right: 12px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
  }
  
  /* Optionally hide scrollbar behind when open */
  body.search-slider-open {
    overflow: hidden;
  }