/* multi-select-base.css: base layout for the health-issues multi-select.
   The live site uses react-multi-select-component, whose structural CSS is injected at runtime; this file
   recreates that structure, followed by the site's own global .rmsc overrides (ported as-is). */

/* ── Library structure ──────────────────────────────────────────────── */
.rmsc {
  --rmsc-main: #4285f4;
  --rmsc-hover: #f1f3f5;
  --rmsc-selected: #e2e6ea;
  --rmsc-border: #ccc;
  --rmsc-gray: #aaa;
  --rmsc-bg: #fff;
  --rmsc-p: 10px;
  --rmsc-radius: 4px;
  --rmsc-h: 38px;
}

.rmsc * {
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.rmsc .gray {
  color: var(--rmsc-gray);
}

.rmsc .dropdown-container {
  position: relative;
  outline: 0;
  background-color: var(--rmsc-bg);
  border: 1px solid var(--rmsc-border);
  border-radius: var(--rmsc-radius);
}

.rmsc .dropdown-container[aria-disabled="true"]:focus-within {
  box-shadow: none;
}

.rmsc .dropdown-container:focus-within {
  box-shadow: var(--rmsc-main) 0 0 0 1px;
  border-color: var(--rmsc-main);
}

.rmsc .dropdown-heading {
  position: relative;
  padding: 0 var(--rmsc-p);
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--rmsc-h);
  cursor: default;
  outline: 0;
}

.rmsc .dropdown-heading .dropdown-heading-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.rmsc .dropdown-content {
  position: absolute;
  z-index: 1;
  top: 100%;
  width: 100%;
  padding-top: 8px;
}

.rmsc .dropdown-content .panel-content {
  overflow: hidden;
  border-radius: var(--rmsc-radius);
  background: var(--rmsc-bg);
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1);
}

.rmsc .dropdown-content .search {
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--rmsc-border);
}

.rmsc .dropdown-content .search input {
  background: var(--rmsc-bg);
  height: var(--rmsc-h);
  padding: 0 var(--rmsc-p);
  width: 100%;
  outline: 0;
  border: 0;
  font-size: 1em;
}

.rmsc .dropdown-content .search input:focus {
  background: var(--rmsc-hover);
}

.rmsc .options {
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.rmsc .options li {
  list-style: none;
  margin: 0;
}

.rmsc .select-item {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  padding: var(--rmsc-p);
  outline-offset: -1px;
  outline-color: var(--rmsc-primary);
}

.rmsc .select-item:hover {
  background: var(--rmsc-hover);
}

.rmsc .select-item.selected {
  background: var(--rmsc-selected);
}

.rmsc .no-options {
  padding: var(--rmsc-p);
  text-align: center;
  color: var(--rmsc-gray);
}

.rmsc .item-renderer {
  display: flex;
  align-items: baseline;
}

.rmsc .item-renderer input {
  margin: 0 5px 0 0;
}

/* ── Food for Joe global overrides (from the site's stylesheet) ─────── */
div.rmsc {
  font-size: 16px;
  line-height: 1.15;
  --rmsc-main: #fff !important;
  --rmsc-hover: var(--color-white) !important;
  --rmsc-selected: var(--color-white) !important;
  --rmsc-border: transparent !important;
  --rmsc-gray: var(--color-green) !important;
  --rmsc-bg: #f1f0ed !important;
  --rmsc-p: 14px !important;
  --rmsc-radius: var(--border-radius-input);
  --rmsc-h: 45px !important;
}

div.rmsc span[class^=gray] {
  opacity: 0.5 !important;
}

div.rmsc li > * {
  display: flex;
  align-items: center;
  width: 100%;
}

div.rmsc input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  margin-right: 10px;
  padding: 0;
  display: inline-block;
  border-radius: 2px;
  border: 1px solid var(--color-green);
  overflow: hidden;
  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateY(2px);
}

div.rmsc input[type=checkbox]:checked {
  background-color: var(--color-yellow);
  background-image: url("../../../assets/icons/ui/straight-check-icon.svg");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: 50%;
  border: 2px solid var(--color-yellow);
}

div.rmsc .dropdown-heading {
  height: fit-content;
  min-height: var(--rmsc-h);
  cursor: pointer;
}

div.rmsc .dropdown-heading .dropdown-heading-value {
  overflow: hidden;
  flex-wrap: wrap;
  flex: 1 1;
  white-space: normal;
  line-height: 1.4;
  padding: 0.6em 0.1em 0.6em 0;
}