/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:8 Expected identifier but found whitespace
Line 18:10 Expected identifier but found "%"
Line 19:22 Expected identifier but found whitespace
Line 20:4 Unexpected "-"
Line 27:1 Expected identifier but found "%"
Line 29:0 Unexpected "{"
Line 29:1 Expected identifier but found "%"
Line 40:31 Unexpected "-->"
... and 139 more hidden warnings

**/
{% comment %}
  Futuristic Search Component Snippet for Shopify
  Usage: {% render 'futuristic-search' %}
  Optional parameters:
    - title: Custom title (default: "Search Products")
    - subtitle: Custom subtitle (default: "Find what you're looking for")
    - placeholder: Custom placeholder (default: "Search products...")
    - show_title: true/false (default: true)
    - show_subtitle: true/false (default: true)
    - custom_class: Additional CSS classes
    - search_type: 'product' or 'article' or 'page' or 'all' (default: 'all')
{% endcomment %}

{% liquid
  assign search_title = title | default: "Search Products"
  assign search_subtitle = subtitle | default: "Find what you are looking for"
  assign search_placeholder = placeholder | default: "Search products..."
  assign display_title = show_title | default: true
  assign display_subtitle = show_subtitle | default: true
  assign wrapper_class = custom_class | default: ""
  assign search_resource = search_type | default: "all"
  assign unique_id = "search-" | append: section.id | default: "search-snippet"
%}

<!-- Futuristic Search Snippet -->
<div class="futuristic-search-wrapper {{ wrapper_class }}" id="{{ unique_id }}">
  <div class="demo-container">
    {% if display_title %}
      <h1 class="demo-title">{{ search_title }}</h1>
    {% endif %}
    
    {% if display_subtitle %}
      <p class="demo-subtitle">{{ search_subtitle }}</p>
    {% endif %}
    
    <!-- Shopify Search Form -->
    <form action="{{ routes.search_url }}" method="get" role="search" class="search-container" data-search-form>
      {% comment %} Hidden input for search type {% endcomment %}
      {% unless search_resource == 'all' %}
        <input type="hidden" name="type" value="{{ search_resource }}">
      {% endunless %}
      
      <label for="search-input-{{ unique_id }}" class="sr-only">
        {{ 'general.search.search' | t }}
      </label>
      
      <input 
        type="search" 
        id="search-input-{{ unique_id }}"
        name="q"
        class="searchinput fieldinput" 
        placeholder="{{ search_placeholder }}"
        value="{{ search.terms | escape }}"
        autocomplete="off"
        spellcheck="false"
        aria-describedby="search-description-{{ unique_id }}"
        data-search-input
      >
      
      <div class="search-buttons-container">
        <!-- Reset Button -->
        <button 
          type="button" 
          class="resetbutton search-button-base"
          aria-label="        {{ 'general.search.clear' | t | default: "Clear search" }}"
          title="{{ 'general.search.clear' | t | default: 'Clear search' }}"
          data-search-reset
        >
          <svg class="icon icon-close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
        
        <!-- Search Button -->
        <button 
          type="submit" 
          class="searchbutton search-button-base"
          aria-label="{{ 'general.search.search' | t }}"
          title="{{ 'general.search.search' | t }}"
          data-search-submit
        >
          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </button>
      </div>
      
      <!-- Screen reader description -->
      <div id="search-description-{{ unique_id }}" class="sr-only">
        Use the search field to find content. Press Enter or click search to submit.
      </div>
      
      <!-- Predictive Search Results Container -->
      <div class="predictive-search-results" data-predictive-search aria-hidden="true">
        <div class="predictive-search-content">
          <!-- Results will be populated by JavaScript -->
        </div>
      </div>
    </form>
    
    <!-- Loading indicator -->
    <div class="search-loading" data-search-loading style="display: none;">
      <div class="loading-spinner"></div>
      <p>Searching...</p>
    </div>
  </div>
</div>

<!-- Inline styles for the snippet -->
<style>
  /* Futuristic Search Snippet Styles */
  #{{ unique_id }} {
    --color-foreground: 255, 255, 255;
    --color-background: 0, 0, 0;
    --search-height: 5.6rem;
    --search-radius: 2.8rem;
    --button-size: 4rem;
    --button-radius: 2rem;
    --icon-size: 2rem;
    --glow-primary: rgba(99, 102, 241, 0.4);
    --glow-secondary: rgba(147, 51, 234, 0.3);
    --backdrop-blur: blur(20px);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
  }

  /* Dark theme adjustments */
  @media (prefers-color-scheme: dark) {
    #{{ unique_id }} {
      --glass-bg: rgba(255, 255, 255, 0.05);
      --glass-border: rgba(255, 255, 255, 0.08);
    }
  }

  #{{ unique_id }} .futuristic-search-wrapper {
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
  }

  #{{ unique_id }} .demo-container {
    text-align: center;
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
  }

  #{{ unique_id }} .demo-title {
    color: rgba(255, 255, 255, 0.95);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.3);
  }

  #{{ unique_id }} .demo-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 3rem;
    text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
  }

  /* Search Container */
  #{{ unique_id }} .search-container {
    position: relative;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
  }

  #{{ unique_id }} .searchinput.fieldinput {
    width: 100%;
    height: var(--search-height);
    padding: 0 9.6rem 0 2.4rem;
    border: 0.1rem solid var(--glass-border);
    border-radius: var(--search-radius);
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(var(--color-foreground), 0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
      0 0.4rem 1.6rem rgba(0, 0, 0, 0.08),
      0 0.1rem 0.4rem rgba(0, 0, 0, 0.04),
      inset 0 0.1rem 0 rgba(255, 255, 255, 0.1);
  }

  #{{ unique_id }} .searchinput.fieldinput::placeholder {
    color: rgba(var(--color-foreground), 0.5);
    transition: color 0.3s ease;
  }

  #{{ unique_id }} .searchinput.fieldinput:hover {
    border-color: rgba(var(--color-foreground), 0.2);
    box-shadow: 
      0 0.8rem 2.4rem rgba(0, 0, 0, 0.12),
      0 0.2rem 0.8rem rgba(0, 0, 0, 0.06),
      inset 0 0.1rem 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-0.1rem);
  }

  #{{ unique_id }} .searchinput.fieldinput:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 
      0 0 0 0.2rem var(--glow-primary),
      0 1.2rem 3.2rem rgba(0, 0, 0, 0.16),
      0 0.4rem 1.2rem rgba(0, 0, 0, 0.08),
      inset 0 0.1rem 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-0.2rem);
  }

  /* Button Container */
  #{{ unique_id }} .search-buttons-container {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    z-index: 2;
  }

  /* Base Button Styles */
  #{{ unique_id }} .search-button-base {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button-size);
    height: var(--button-size);
    border: none;
    border-radius: var(--button-radius);
    background: rgba(var(--color-foreground), 0.04);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(var(--color-foreground), 0.7);
    overflow: hidden;
  }

  /* Search Button */
  #{{ unique_id }} .searchbutton {
    background: linear-gradient(135deg, var(--glow-primary), var(--glow-secondary));
    color: white;
    box-shadow: 
      0 0.4rem 1.2rem rgba(99, 102, 241, 0.3),
      inset 0 0.1rem 0 rgba(255, 255, 255, 0.2);
  }

  #{{ unique_id }} .searchbutton:hover {
    transform: translateY(-0.2rem) scale(1.05);
    box-shadow: 
      0 0 2.4rem var(--glow-primary),
      0 0.8rem 2.4rem rgba(99, 102, 241, 0.4);
    filter: brightness(1.1);
  }

  /* Reset Button */
  #{{ unique_id }} .resetbutton::after {
    content: '';
    position: absolute;
    left: -0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.1rem;
    height: 2.4rem;
    background: linear-gradient(to bottom, 
      transparent 0%, 
      rgba(var(--color-foreground), 0.15) 20%, 
      rgba(var(--color-foreground), 0.15) 80%, 
      transparent 100%);
    border-radius: 0.05rem;
    transition: all 0.3s ease;
  }

  #{{ unique_id }} .resetbutton:hover {
    background: rgba(var(--color-foreground), 0.08);
    color: rgba(var(--color-foreground), 0.9);
    transform: translateY(-0.1rem) scale(1.03);
  }

  /* Icons */
  #{{ unique_id }} .search-button-base .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #{{ unique_id }} .resetbutton .icon.icon-close {
    width: 1.8rem;
    height: 1.8rem;
  }

  #{{ unique_id }} .search-button-base:hover .icon {
    transform: scale(1.1);
  }

  #{{ unique_id }} .resetbutton:hover .icon.icon-close {
    transform: scale(1.1) rotate(90deg);
  }

  /* Predictive Search */
  #{{ unique_id }} .predictive-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 0.1rem solid var(--glass-border);
    border-radius: 1.6rem;
    margin-top: 0.8rem;
    max-height: 40rem;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-1rem);
    transition: all 0.3s ease;
    pointer-events: none;
  }

  #{{ unique_id }} .predictive-search-results.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Loading indicator */
  #{{ unique_id }} .search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.8);
  }

  #{{ unique_id }} .loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid rgba(255, 255, 255, 0.3);
    border-top: 0.2rem solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Screen reader only */
  #{{ unique_id }} .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Responsive */
  @media (max-width: 768px) {
    #{{ unique_id }} {
      --search-height: 4.8rem;
      --button-size: 3.2rem;
      --icon-size: 1.6rem;
    }
    
    #{{ unique_id }} .demo-title {
      font-size: 2.4rem;
    }
    
    #{{ unique_id }} .demo-subtitle {
      font-size: 1.4rem;
      margin-bottom: 2rem;
    }
    
    #{{ unique_id }} .searchinput.fieldinput {
      padding: 0 7.6rem 0 1.8rem;
      font-size: 1.4rem;
    }
    
    #{{ unique_id }} .search-buttons-container {
      gap: 0.6rem;
      right: 0.6rem;
    }
  }

  @media (max-width: 480px) {
    #{{ unique_id }} {
      --search-height: 4.4rem;
      --button-size: 2.8rem;
      --icon-size: 1.4rem;
    }
    
    #{{ unique_id }} .futuristic-search-wrapper {
      padding: 2rem 1rem;
    }
    
    #{{ unique_id }} .searchinput.fieldinput {
      padding: 0 6.8rem 0 1.6rem;
      font-size: 1.3rem;
    }
  }






.search-modal.modal__content {
  margin-top: -120px !important; /* تْهبط العنصر كامل */
}

.search-modal.modal__content {
  background-color: #ffffff !important;
}

.modal-overlay {
  background-color: white !important;
  opacity: 1 !important;
}


@media screen and (max-width: 749px) {
  .search-modal.modal__content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;      /* العرض كامل */
    height: 100vh !important;     /* الارتفاع كامل */
    max-width: 100vw !important;
    max-height: 100vh !important;
    background-color: #fff !important;
    border-radius: 0 !important;  /* بلا زوايا مستديرة */
    padding: 1rem !important;
    overflow-y: auto !important;  /* تسمح بالتمرير داخل المحتوى */
    box-shadow: none !important;  /* نحيو الظل باش يكون واضح */
    z-index: 99999 !important;
    display: block !important;
    transform: none !important;    /* نحيو أي ترانسفورم */
    margin: 0 !important;          /* نحيو أي مارجين */
  }


  .modal-overlay {
  display: none !important;
}


  
}


@media screen and (max-width: 749px) {
  .search-modal.modal__content {
    margin-top: 60px !important; /* هبطها 50 بكسل لتحت */
    /* أو ممكن تستخدم transform بدل margin */
    /* transform: translateY(50px); */
  }
}


.icon-close {
  transition: transform 0.4s ease; /* مدة وسلاسة الحركة */
  cursor: pointer; /* باش يبان كليكابل */
}

.icon-close:hover {
  transform: rotate(360deg); /* دوران كامل مرة وحدة */
}




.search-custom_close-button.modal_close-button.link.link--text.focus-inset {
  width: 40px;                /* حجم الدائرة */
  height: 40px;
  border-radius: 50%;         /* باش تولي دائرة */
  background-color: #cccac2;     /* لون الخلفية */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0;                 /* نحيد البادينغ باش يكون دائري مضبوط */
  border: none;               /* نحيد أي بوردر افتراضي */
  box-sizing: border-box;
}

.search-custom_close-button.modal_close-button.link.link--text.focus-inset:hover {
  background-color: #dfe6dd;     /* لون الخلفية عند الهوفير */
}

/* إذا عندك svg داخل الزر */
.search-custom_close-button.modal_close-button.link.link--text.focus-inset svg {
  width: 20px;
  height: 20px;
  fill: white;                /* لون الأيقونة */
}










.h2.center {
  text-align: center;        /* توسيط النص */
  color: #2c3e50;            /* لون الخط */
  background-color: #f0f0f0; /* لون خلفية خفيف */
  padding: 10px 20px;        /* مسافة داخلية */
  border-radius: 8px;        /* حواف مدورة */
  font-weight: bold;         /* سماكة الخط */
  font-size: 1.8rem;         /* حجم الخط */
}


form.search {
  display: none;
}













</style>

<!-- JavaScript for snippet functionality -->
<script>
(function() {
  'use strict';
  
  const searchWrapper = document.getElementById('{{ unique_id }}');
  if (!searchWrapper) return;
  
  const searchInput = searchWrapper.querySelector('[data-search-input]');
  const resetButton = searchWrapper.querySelector('[data-search-reset]');
  const searchForm = searchWrapper.querySelector('[data-search-form]');
  const loadingIndicator = searchWrapper.querySelector('[data-search-loading]');
  const predictiveResults = searchWrapper.querySelector('[data-predictive-search]');
  
  if (!searchInput || !resetButton) return;
  
  // Reset functionality
  resetButton.addEventListener('click', function() {
    searchInput.value = '';
    searchInput.focus();
    updateResetButton(false);
    hidePredictiveSearch();
  });
  
  // Input monitoring
  searchInput.addEventListener('input', function() {
    const hasValue = this.value.length > 0;
    updateResetButton(hasValue);
    
    if (hasValue && this.value.length > 1) {
      showPredictiveSearch(this.value);
    } else {
      hidePredictiveSearch();
    }
  });
  
  // Form submission
  if (searchForm) {
    searchForm.addEventListener('submit', function() {
      if (loadingIndicator) {
        loadingIndicator.style.display = 'flex';
      }
    });
  }
  
  // Close predictive search on outside click
  document.addEventListener('click', function(e) {
    if (!searchWrapper.contains(e.target)) {
      hidePredictiveSearch();
    }
  });
  
  // Update reset button visibility
  function updateResetButton(show) {
    if (show) {
      resetButton.style.opacity = '1';
      resetButton.style.pointerEvents = 'auto';
    } else {
      resetButton.style.opacity = '0.5';
      resetButton.style.pointerEvents = 'none';
    }
  }
  
  // Show predictive search
  function showPredictiveSearch(query) {
    if (!predictiveResults) return;
    
    // Simple predictive search - you can enhance this with AJAX calls
    predictiveResults.setAttribute('aria-hidden', 'false');
    predictiveResults.classList.add('active');
  }
  
  // Hide predictive search
  function hidePredictiveSearch() {
    if (!predictiveResults) return;
    
    predictiveResults.setAttribute('aria-hidden', 'true');
    predictiveResults.classList.remove('active');
  }
  
  // Initialize
  updateResetButton(searchInput.value.length > 0);
})();
</script>