/* ===========================
   MODERN PREMIUM SEARCH
=========================== */

.search-wrapper {
  padding: 16px 12px 16px 12px;
}

.search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  background: #ffffff;
  border-radius: 28px;
  padding: 16px 20px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.search-bar:focus-within {
  box-shadow:
    0 10px 28px rgba(31, 168, 155, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.search-icon {
  font-size: 16px;
  color: #9aa4af;
  margin-right: 12px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;   /* was 15px */
  font-weight: 500;
  color: #111827;
}

.search-input::placeholder {
  color: #9aa4af;
  font-weight: 400;
}

.clear-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #eef2f7;
  font-size: 14px;
  color: #64748b;

  display: none;           /* hidden initially */
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center */

  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;              /* IMPORTANT */
}

.clear-btn:hover {
  background: #e2e8f0;
}