/* Favorites — star icon affordance inside the multi-select option rows
   plus the pinned-section header that appears at the top of the list when
   the user has favorites. Also hosts the sign-in-mode radio styling that
   lives inside the account-pill dropdown.
   See public/js/shared/multi-select.js for the rendering hook and
   public/js/shared/state.js for the storage layer. */

/* === Star button on each .ms-item row =========================== */

.ms-item {
  position: relative; /* anchors the absolute-positioned star */
}

.ms-fav-star {
  background: transparent;
  border: 0;
  padding: 2px 4px;
  margin-left: auto;          /* push to the right edge of the row */
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #cbd5e1;             /* idle star: same grey as the chevron family */
  opacity: 0;                 /* hidden until row hover (or active) */
  transition: opacity 0.12s, color 0.12s, transform 0.12s;
  flex-shrink: 0;
  font-family: inherit;
}
.ms-item:hover .ms-fav-star { opacity: 0.7; }
.ms-fav-star:hover {
  color: var(--ashley-orange);
  opacity: 1 !important;
  transform: scale(1.15);
}
.ms-fav-star.is-fav {
  color: var(--ashley-orange);
  opacity: 1;
}

/* === Pinned section header (★ Favorites) ======================== */

.ms-section-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6b7280;
  font-weight: 700;
  padding: 8px 4px 4px 4px;
}
.ms-section-header:first-child { padding-top: 4px; }

.ms-favs-divider {
  height: 1px;
  background: var(--table-border);
  margin: 4px 2px;
}

.ms-item.is-pinned .ms-item-lbl { color: var(--navy); }

/* === Sign-in mode radio group (inside account-pill dropdown) ==== */

.signin-mode {
  margin-top: 4px;
}
.signin-mode-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.45);
  font-weight: 700;
  margin-bottom: 6px;
}

.signin-mode-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  transition: background 0.12s, color 0.12s;
}
.signin-mode-option:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.signin-mode-option input[type="radio"] {
  accent-color: var(--ashley-orange);
  cursor: pointer;
  margin: 0;
}
.signin-mode-option .signin-mode-meta {
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  margin-left: 4px;
}
.signin-mode-option.is-active {
  background: rgba(246,140,44,0.14); /* orange-tinted active state */
  color: #fff;
}

.signin-reset {
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  text-align: left;
  padding: 4px 0;
  margin-top: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
}
.signin-reset:hover { color: rgba(255,255,255,0.85); }

/* === "Restored from your last session" hint ===================== */
/* Lives in the filter bar; subtle enough to be ignorable, present
   enough to explain why the filter isn't All Stores on first paint. */

.filter-restored-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--primary-blue);
  background: var(--icy-blue);
  border: 1px solid #b9d9e1;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: auto;
}
.filter-restored-hint.visible { opacity: 1; }
.filter-restored-hint .hint-x {
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.5;
  font-size: 12px;
  background: none; border: 0; padding: 0; color: inherit; font-family: inherit;
}
.filter-restored-hint .hint-x:hover { opacity: 1; }