/* OttoCare MENU module — scoped to .oc-menu. Look moved from rewards_review_3.html (.side-menu / .menu-overlay). */
.oc-menu, .oc-menu * { box-sizing: border-box; }
.oc-menu { position: absolute; inset: 0; z-index: 4900; font-family: 'DM Sans', sans-serif; }
.oc-menu[hidden] { display: none; }
.oc-menu-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; }
.oc-menu.open .oc-menu-scrim { opacity: 1; }
.oc-menu-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  padding: 44px 0 16px;
  overflow-y: auto;
  scrollbar-width: none;
  background: #0f1014;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.oc-menu-panel::-webkit-scrollbar { display: none; }
.oc-menu.open .oc-menu-panel { transform: translateX(0); }
.oc-menu-title { padding: 0 22px 10px; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.oc-menu-label { padding: 2px 22px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #c9a84c; }
.oc-menu-divider { height: 1px; margin: 10px 22px; background: rgba(255, 255, 255, 0.08); }
.oc-menu-divider.bottom { margin-top: auto; }
.oc-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 22px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font: 500 14px 'DM Sans', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}
.oc-menu-item i { flex-shrink: 0; width: 20px; font-size: 16px; text-align: center; color: rgba(255, 255, 255, 0.5); transition: color 0.2s ease; }
.oc-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.oc-menu-item:hover i { color: rgba(255, 255, 255, 0.8); }
.oc-menu-item.logout { color: #d65367; }
.oc-menu-item.logout i { color: rgba(214, 83, 103, 0.95); }
/* pages not built yet */
.oc-menu-item.soon { color: rgba(255, 255, 255, 0.38); cursor: default; }
.oc-menu-item.soon:hover { background: transparent; }
.oc-menu-item.soon i, .oc-menu-item.soon:hover i { color: rgba(255, 255, 255, 0.25); }
.oc-menu-item.soon::after {
  content: 'Soon';
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 999px;
  color: rgba(201, 168, 76, 0.75);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}