/**
 * ============================================================================
 * SEARCH POPUP - MODAL SEARCH INTERFACE
 * ============================================================================
 * Full-screen modal with search functionality, category browsing, and results.
 * 
 * FEATURES:
 * - Live search with debouncing
 * - Category quick links
 * - Search results display
 * - Loading and error states
 * - RTL support
 * ============================================================================
 */

/* ========================================================================== */
/* MAIN POPUP CONTAINER */
/* ========================================================================== */
.search-popup {
  position: fixed; /* Fixed positioning */
  top: 0; /* Top of viewport */
  left: 0; /* Left of viewport */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  z-index: 9999; /* Above all content */
  display: none; /* Hidden by default */
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
  padding: 20px; /* Padding around modal */
}

/* ACTIVE STATE - POPUP VISIBLE */
.search-popup--active {
  display: flex; /* Show as flexbox */
}

/* OVERLAY - DARK BACKGROUND */
.search-popup__overlay {
  position: absolute; /* Absolute positioning */
  top: 0; /* Top of popup */
  left: 0; /* Left of popup */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent */
  z-index: 1; /* Behind modal content */
}

/* MODAL CONTAINER */
.search-popup__container {
  position: relative; /* Relative positioning */
  z-index: 2; /* Above overlay */
  width: 100%; /* Full width */
  max-width: 700px; /* Maximum width */
  background-color: #191919; /* Dark gray background */
  padding: 40px; /* Internal spacing */
}

/* ========================================================================== */
/* HEADER - TITLE AND CLOSE BUTTON */
/* ========================================================================== */
.search-popup__header {
  display: flex; /* Horizontal layout */
  align-items: center; /* Vertically center */
  justify-content: space-between; /* Space between title and close */
  margin-bottom: 30px; /* Space below */
}

/* POPUP TITLE */
.search-popup__title {
  color: #ffffff; /* White text */
  font-size: 24px; /* Large heading */
  font-weight: 900; /* Heavy weight */
  margin: 0; /* No margin */
}

/* CLOSE BUTTON */
.search-popup__close {
  background: none; /* No background */
  border: none; /* No border */
  color: #ffffff; /* White text */
  font-size: 40px; /* Large X */
  line-height: 1; /* Tight line height */
  cursor: pointer; /* Pointer cursor */
  padding: 0; /* No padding */
  width: 40px; /* Fixed width */
  height: 40px; /* Fixed height */
  display: flex; /* Flexbox */
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
}

/* ========================================================================== */
/* SEARCH BOX - INPUT AND BUTTON */
/* ========================================================================== */
.search-popup__search-box {
  display: flex; /* Horizontal layout */
  flex-direction: row; /* Row direction */
  gap: 12px; /* Space between input and button */
  margin-bottom: 40px; /* Space below */
}

/* SEARCH INPUT */
.search-popup__input {
  flex: 1; /* Grow to fill space */
  order: 1; /* First in order (RTL support) */
  background-color: #000000; /* Black background */
  color: #ffffff; /* White text */
  border: none; /* No border */
  padding-block: 18px; /* Vertical padding (logical property) */
  padding-inline: 24px; /* Horizontal padding (logical property) */
  font-size: 16px; /* Text size */
  font-weight: 400; /* Regular weight */
}

/* INPUT PLACEHOLDER */
.search-popup__input::placeholder {
  color: rgba(255, 255, 255, 0.4); /* Dimmed white */
}

/* INPUT FOCUS STATE */
.search-popup__input:focus {
  outline: none; /* Remove default outline */
}

/* SEARCH BUTTON */
.search-popup__search-btn {
  order: 2; /* Second in order (RTL support) */
  background-color: #211d25; /* Dark background */
  color: #ffffff; /* White text */
  border: none; /* No border */
  padding-block: 18px; /* Vertical padding (logical property) */
  padding-inline: 32px; /* Horizontal padding (logical property) */
  cursor: pointer; /* Pointer cursor */
  display: flex; /* Flexbox */
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
  min-width: 80px; /* Minimum width */
}

/* SEARCH ICON */
.search-popup__search-icon {
  inline-size: 20px; /* Width (logical property) */
  block-size: 20px; /* Height (logical property) */
  filter: brightness(0) invert(1); /* Convert to white */
}

/* ========================================================================== */
/* CATEGORIES SECTION - QUICK CATEGORY LINKS */
/* ========================================================================== */
.search-popup__categories {
  margin-top: 40px; /* Top spacing */
}

/* CATEGORIES TITLE */
.search-popup__categories-title {
  color: #ffffff; /* White text */
  font-size: 18px; /* Heading size */
  font-weight: 700; /* Bold */
  margin: 0 0 20px 0; /* Bottom spacing */
}

/* CATEGORIES GRID */
.search-popup__categories-list {
  display: grid; /* CSS Grid */
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 12px; /* Space between items */
}

/* CATEGORY ITEM */
.search-popup__category-item {
  display: flex; /* Horizontal layout */
  align-items: center; /* Vertically center */
  gap: 12px; /* Space between emoji and name */
  padding: 16px; /* Internal spacing */
  background-color: rgba(255, 255, 255, 0.05); /* Subtle background */
  text-decoration: none; /* Remove underline */
  cursor: pointer; /* Pointer cursor */
}

/* CATEGORY EMOJI */
.search-popup__category-emoji {
  font-size: 24px; /* Large emoji */
  line-height: 1; /* Tight line height */
}

/* CATEGORY NAME */
.search-popup__category-name {
  color: #ffffff; /* White text */
  font-size: 15px; /* Text size */
  font-weight: 500; /* Medium weight */
}

/* ========================================================================== */
/* SEARCH RESULTS SECTION */
/* ========================================================================== */
.search-popup__results {
  margin-top: 40px; /* Top spacing */
}

/* RESULTS TITLE */
.search-popup__results-title {
  color: #ffffff; /* White text */
  font-size: 18px; /* Heading size */
  font-weight: 700; /* Bold */
  margin: 0 0 20px 0; /* Bottom spacing */
}

/* RESULTS LIST */
.search-popup__results-list {
  display: flex; /* Flexbox */
  flex-direction: column; /* Stack vertically */
  gap: 16px; /* Space between results */
  max-height: 400px; /* Limit height */
  overflow-y: auto; /* Vertical scroll */
}

/* INDIVIDUAL RESULT ITEM */
.search-popup__result-item {
  display: block; /* Block-level */
  padding: 20px; /* Internal spacing */
  background-color: rgba(255, 255, 255, 0.05); /* Subtle background */
  text-decoration: none; /* Remove underline */
  cursor: pointer; /* Pointer cursor */
}

/* RESULT CATEGORY BADGE */
.search-popup__result-category {
  color: rgba(255, 255, 255, 0.6); /* Dimmed white */
  font-size: 12px; /* Small text */
  font-weight: 500; /* Medium weight */
  text-transform: uppercase; /* ALL CAPS */
  letter-spacing: 0.5px; /* Letter spacing */
  margin-bottom: 8px; /* Space below */
}

/* RESULT TITLE */
.search-popup__result-title {
  color: #ffffff; /* White text */
  font-size: 18px; /* Large heading */
  font-weight: 700; /* Bold */
  margin: 0 0 10px 0; /* Bottom spacing */
  line-height: 1.3; /* Tight line spacing */
}

/* RESULT EXCERPT */
.search-popup__result-excerpt {
  color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
  font-size: 14px; /* Text size */
  font-weight: 400; /* Regular weight */
  line-height: 1.5; /* Comfortable line spacing */
  margin: 0 0 10px 0; /* Bottom spacing */
}

/* RESULT DATE */
.search-popup__result-date {
  color: rgba(255, 255, 255, 0.5); /* Dimmed white */
  font-size: 13px; /* Small text */
  font-weight: 400; /* Regular weight */
}

/* ========================================================================== */
/* STATE MESSAGES - LOADING, ERROR, NO RESULTS */
/* ========================================================================== */
.search-popup__loading,
.search-popup__error,
.search-popup__no-results {
  color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
  font-size: 15px; /* Text size */
  text-align: center; /* Center text */
  padding: 40px 20px; /* Generous padding */
}

/* HIDDEN STATES */
.search-popup__results--hidden {
  display: none; /* Hide results */
}

.search-popup__categories--hidden {
  display: none; /* Hide categories */
}

/* ========================================================================== */
/* BODY NO-SCROLL - PREVENT BACKGROUND SCROLLING */
/* ========================================================================== */
body.no-scroll {
  overflow: hidden; /* Disable scrolling when popup is open */
}